[DDW-788][DEBT] - Research how to use JSCSS instead css files in Daedalus

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",

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 { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { Routes } from './Routes';
 import { daedalusTheme } from './themes/daedalus';
 import { themeOverrides } from './themes/overrides';
@@ -49,52 +50,45 @@ class App extends Component<{
       !isNodeStopping && // Daedalus is not shutting down
       !isNodeStopped;
 
-    // Daedalus is not shutting down
-    if (document.documentElement) {
-      document.documentElement.lang = locale;
-    }
-
     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],
-              }}
+      <EmotionThemeProvider theme={{}}>
+        <Fragment>
+          {/* @ts-ignore */}
+          <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 Argument of type 'string' is not assignable to parameter of type 'ApplicationDialog'.ts(2345)
+                    isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
+                    // @ts-ignore Argument of type 'string' is not assignable to parameter of type 'ApplicationDialog'.ts(2345)
+                    isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
+                      <DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
+                    ),
+                    <NotificationsContainer key="notificationsContainer" />,
+                  ]}
+                  {canShowNews && [
+                    <NewsFeedContainer key="newsFeedList" />,
+                    <NewsOverlayContainer key="newsFeedOverlay" />,
+                  ]}
+                </Fragment>
+              </IntlProvider>
+            </ThemeProvider>
+          </Provider>
+        </Fragment>
+      </EmotionThemeProvider>
     );
   }
 }

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;
     }
   }
 }