Skip to content

Commit 20881db

Browse files
renanvalentinrenanvalentin
committed
[DDW-788] Chakra-ui
1 parent 1cb7177 commit 20881db

File tree

8 files changed

+1128
-291
lines changed

8 files changed

+1128
-291
lines changed

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
"@babel/preset-typescript": "^7.16.7",
8484
"@babel/register": "7.0.0",
8585
"@dump247/storybook-state": "1.6.1",
86+
"@emotion/babel-plugin": "11.7.2",
8687
"@storybook/addon-actions": "5.3.14",
8788
"@storybook/addon-knobs": "5.3.14",
8889
"@storybook/addon-links": "5.3.14",
@@ -187,6 +188,9 @@
187188
},
188189
"dependencies": {
189190
"@cardano-foundation/ledgerjs-hw-app-cardano": "4.0.0",
191+
"@chakra-ui/react": "1.7.4",
192+
"@emotion/react": "11.7.1",
193+
"@emotion/styled": "11.6.0",
190194
"@iohk-jormungandr/wallet-js": "0.5.0-pre7",
191195
"@ledgerhq/hw-transport-node-hid": "5.51.1",
192196
"aes-js": "3.1.2",
@@ -213,6 +217,7 @@
213217
"find-process": "1.4.7",
214218
"fireworks-js": "1.0.4",
215219
"form-data": "3.0.0",
220+
"framer-motion": "4.1.17",
216221
"fs-extra": "9.0.1",
217222
"fuse.js": "6.5.3",
218223
"glob": "7.1.6",

‎source/renderer/app/App.tsx‎

Lines changed: 65 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
66
import DevTools from 'mobx-react-devtools';
77
import { Router } from 'react-router-dom';
88
import { IntlProvider } from 'react-intl';
9+
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
910
import { Routes } from './Routes';
1011
import { daedalusTheme } from './themes/daedalus';
1112
import { themeOverrides } from './themes/overrides';
@@ -20,6 +21,29 @@ import type { StoresMap } from './stores/index';
2021
import type { ActionsMap } from './actions/index';
2122
import NewsFeedContainer from './containers/news/NewsFeedContainer';
2223

24+
const theme = extendTheme({
25+
fonts: {
26+
body: 'NotoSans-Regular, NotoSansCJKjp-Regular',
27+
heading: 'NotoSans-Regular, NotoSansCJKjp-Regular',
28+
mono: 'NotoSans-Regular, NotoSansCJKjp-Regular',
29+
},
30+
components: {
31+
Text: {
32+
baseStyle: {
33+
fontFamily: 'NotoSans-Regular, NotoSansCJKjp-Regular',
34+
},
35+
},
36+
},
37+
colors: {
38+
stakePoolSaturation: {
39+
green: '--theme-staking-stake-pool-saturation-green-color',
40+
orange: '--theme-staking-stake-pool-saturation-orange-color',
41+
red: '--theme-staking-stake-pool-saturation-red-color',
42+
yellow: '--theme-staking-stake-pool-saturation-yellow-color',
43+
},
44+
},
45+
});
46+
2347
@observer
2448
class App extends Component<{
2549
stores: StoresMap;
@@ -55,46 +79,48 @@ class App extends Component<{
5579
}
5680

5781
return (
58-
<Fragment>
59-
{/* @ts-ignore ts-migrate(2769) FIXME: No overload matches this call. */}
60-
<ThemeManager variables={themeVars} />
61-
<Provider stores={stores} actions={actions}>
62-
<ThemeProvider
63-
theme={daedalusTheme}
64-
skins={SimpleSkins}
65-
variables={SimpleDefaults}
66-
themeOverrides={themeOverrides}
67-
>
68-
<IntlProvider
69-
{...{
70-
locale,
71-
key: locale,
72-
messages: translations[locale],
73-
}}
82+
<ChakraProvider theme={theme}>
83+
<Fragment>
84+
{/* @ts-ignore ts-migrate(2769) FIXME: No overload matches this call. */}
85+
<ThemeManager variables={themeVars} />
86+
<Provider stores={stores} actions={actions}>
87+
<ThemeProvider
88+
theme={daedalusTheme}
89+
skins={SimpleSkins}
90+
variables={SimpleDefaults}
91+
themeOverrides={themeOverrides}
7492
>
75-
<Fragment>
76-
<Router history={history}>
77-
<Routes />
78-
</Router>
79-
{mobxDevTools}
80-
{[
81-
// @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
82-
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
83-
// @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
84-
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
85-
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
86-
),
87-
<NotificationsContainer key="notificationsContainer" />,
88-
]}
89-
{canShowNews && [
90-
<NewsFeedContainer key="newsFeedList" />,
91-
<NewsOverlayContainer key="newsFeedOverlay" />,
92-
]}
93-
</Fragment>
94-
</IntlProvider>
95-
</ThemeProvider>
96-
</Provider>
97-
</Fragment>
93+
<IntlProvider
94+
{...{
95+
locale,
96+
key: locale,
97+
messages: translations[locale],
98+
}}
99+
>
100+
<Fragment>
101+
<Router history={history}>
102+
<Routes />
103+
</Router>
104+
{mobxDevTools}
105+
{[
106+
// @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
107+
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
108+
// @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
109+
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
110+
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
111+
),
112+
<NotificationsContainer key="notificationsContainer" />,
113+
]}
114+
{canShowNews && [
115+
<NewsFeedContainer key="newsFeedList" />,
116+
<NewsOverlayContainer key="newsFeedOverlay" />,
117+
]}
118+
</Fragment>
119+
</IntlProvider>
120+
</ThemeProvider>
121+
</Provider>
122+
</Fragment>
123+
</ChakraProvider>
98124
);
99125
}
100126
}

‎source/renderer/app/components/staking/widgets/ThumbPool.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
background-color: var(--theme-staking-stake-pool-background-color);
2222
border: 1px solid var(--theme-staking-stake-pool-border-color);
2323
cursor: pointer;
24-
height: 71px;
25-
width: 80px;
24+
// height: 71px;
25+
// width: 80px;
2626
}
2727
}
2828
}

‎source/renderer/app/components/staking/widgets/ThumbPoolContent.scss‎

Lines changed: 0 additions & 167 deletions
This file was deleted.

‎source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// @flow
2+
import SVGInline from 'react-svg-inline';
3+
import styled from '@emotion/styled';
4+
5+
export const AdaIcon = styled(SVGInline)`
6+
svg {
7+
height: 11px;
8+
width: 10px;
9+
10+
& > g {
11+
& > g {
12+
stroke: var(--theme-staking-wallet-row-ticker-ada-icon-fill-color);
13+
}
14+
}
15+
}
16+
`;
17+
18+
export const ClockIcon = styled(SVGInline)`
19+
svg {
20+
height: 15px;
21+
width: 15px;
22+
}
23+
`;
24+
25+
export const NoDataDashIcon = styled(SVGInline)`
26+
svg {
27+
height: 3px;
28+
width: 12px;
29+
30+
path {
31+
fill: var(--theme-staking-stake-pool-grey-color) !important;
32+
opacity: 1 !important;
33+
}
34+
}
35+
`;

0 commit comments

Comments
 (0)