[DDW-788] Chakra-ui

input-output-hk · Feb 8, 2022 · 8da492f · 8da492f
1 parent 1cb7177
commit 8da492f
Show file tree

Hide file tree

Showing 8 changed files with 1,128 additions and 291 deletions.
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "@babel/preset-typescript": "^7.16.7",
     "@babel/register": "7.0.0",
     "@dump247/storybook-state": "1.6.1",
+    "@emotion/babel-plugin": "11.7.2",
     "@storybook/addon-actions": "5.3.14",
     "@storybook/addon-knobs": "5.3.14",
     "@storybook/addon-links": "5.3.14",
@@ -187,6 +188,9 @@
   },
   "dependencies": {
     "@cardano-foundation/ledgerjs-hw-app-cardano": "4.0.0",
+    "@chakra-ui/react": "1.7.4",
+    "@emotion/react": "11.7.1",
+    "@emotion/styled": "11.6.0",
     "@iohk-jormungandr/wallet-js": "0.5.0-pre7",
     "@ledgerhq/hw-transport-node-hid": "5.51.1",
     "aes-js": "3.1.2",
@@ -213,6 +217,7 @@
     "find-process": "1.4.7",
     "fireworks-js": "1.0.4",
     "form-data": "3.0.0",
+    "framer-motion": "4.1.17",
     "fs-extra": "9.0.1",
     "fuse.js": "6.5.3",
     "glob": "7.1.6",

diff --git a/source/renderer/app/App.tsx b/source/renderer/app/App.tsx
@@ -6,6 +6,7 @@ import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
 import DevTools from 'mobx-react-devtools';
 import { Router } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 import { Routes } from './Routes';
 import { daedalusTheme } from './themes/daedalus';
 import { themeOverrides } from './themes/overrides';
@@ -20,6 +21,29 @@ import type { StoresMap } from './stores/index';
 import type { ActionsMap } from './actions/index';
 import NewsFeedContainer from './containers/news/NewsFeedContainer';
 
+const theme = extendTheme({
+  fonts: {
+    body: 'NotoSans-Regular, NotoSansCJKjp-Regular',
+    heading: 'NotoSans-Regular, NotoSansCJKjp-Regular',
+    mono: 'NotoSans-Regular, NotoSansCJKjp-Regular',
+  },
+  components: {
+    Text: {
+      baseStyle: {
+        fontFamily: 'NotoSans-Regular, NotoSansCJKjp-Regular',
+      },
+    },
+  },
+  colors: {
+    stakePoolSaturation: {
+      green: '--theme-staking-stake-pool-saturation-green-color',
+      orange: '--theme-staking-stake-pool-saturation-orange-color',
+      red: '--theme-staking-stake-pool-saturation-red-color',
+      yellow: '--theme-staking-stake-pool-saturation-yellow-color',
+    },
+  },
+});
+
 @observer
 class App extends Component<{
   stores: StoresMap;
@@ -55,46 +79,48 @@ class App extends Component<{
     }
 
     return (
-      <Fragment>
-        {/* @ts-ignore ts-migrate(2769) FIXME: No overload matches this call. */}
-        <ThemeManager variables={themeVars} />
-        <Provider stores={stores} actions={actions}>
-          <ThemeProvider
-            theme={daedalusTheme}
-            skins={SimpleSkins}
-            variables={SimpleDefaults}
-            themeOverrides={themeOverrides}
-          >
-            <IntlProvider
-              {...{
-                locale,
-                key: locale,
-                messages: translations[locale],
-              }}
+      <ChakraProvider theme={theme}>
+        <Fragment>
+          {/* @ts-ignore ts-migrate(2769) FIXME: No overload matches this call. */}
+          <ThemeManager variables={themeVars} />
+          <Provider stores={stores} actions={actions}>
+            <ThemeProvider
+              theme={daedalusTheme}
+              skins={SimpleSkins}
+              variables={SimpleDefaults}
+              themeOverrides={themeOverrides}
             >
-              <Fragment>
-                <Router history={history}>
-                  <Routes />
-                </Router>
-                {mobxDevTools}
-                {[
-                  // @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
-                  isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
-                  // @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
-                  isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
-                    <DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
-                  ),
-                  <NotificationsContainer key="notificationsContainer" />,
-                ]}
-                {canShowNews && [
-                  <NewsFeedContainer key="newsFeedList" />,
-                  <NewsOverlayContainer key="newsFeedOverlay" />,
-                ]}
-              </Fragment>
-            </IntlProvider>
-          </ThemeProvider>
-        </Provider>
-      </Fragment>
+              <IntlProvider
+                {...{
+                  locale,
+                  key: locale,
+                  messages: translations[locale],
+                }}
+              >
+                <Fragment>
+                  <Router history={history}>
+                    <Routes />
+                  </Router>
+                  {mobxDevTools}
+                  {[
+                    // @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
+                    isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
+                    // @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
+                    isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
+                      <DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
+                    ),
+                    <NotificationsContainer key="notificationsContainer" />,
+                  ]}
+                  {canShowNews && [
+                    <NewsFeedContainer key="newsFeedList" />,
+                    <NewsOverlayContainer key="newsFeedOverlay" />,
+                  ]}
+                </Fragment>
+              </IntlProvider>
+            </ThemeProvider>
+          </Provider>
+        </Fragment>
+      </ChakraProvider>
     );
   }
 }

diff --git a/source/renderer/app/components/staking/widgets/ThumbPool.scss b/source/renderer/app/components/staking/widgets/ThumbPool.scss
@@ -21,8 +21,8 @@
       background-color: var(--theme-staking-stake-pool-background-color);
       border: 1px solid var(--theme-staking-stake-pool-border-color);
       cursor: pointer;
-      height: 71px;
-      width: 80px;
+      // height: 71px;
+      // width: 80px;
     }
   }
 }
diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.ts b/source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.ts
@@ -0,0 +1,35 @@
+// @flow
+import SVGInline from 'react-svg-inline';
+import styled from '@emotion/styled';
+
+export const AdaIcon = styled(SVGInline)`
+  svg {
+    height: 11px;
+    width: 10px;
+
+    & > g {
+      & > g {
+        stroke: var(--theme-staking-wallet-row-ticker-ada-icon-fill-color);
+      }
+    }
+  }
+`;
+
+export const ClockIcon = styled(SVGInline)`
+  svg {
+    height: 15px;
+    width: 15px;
+  }
+`;
+
+export const NoDataDashIcon = styled(SVGInline)`
+  svg {
+    height: 3px;
+    width: 12px;
+
+    path {
+      fill: var(--theme-staking-stake-pool-grey-color) !important;
+      opacity: 1 !important;
+    }
+  }
+`;