From bfe2b172098981e5d80492c99ef1458f8f479379 Mon Sep 17 00:00:00 2001
From: Renan Ferreira <renan.ferreira@iohk.io>
Date: Wed, 19 Jan 2022 16:26:23 -0300
Subject: [PATCH] [DDW-788] Emotion.js

---
 source/renderer/app/App.tsx                   |  73 ++++---
 .../widgets/ThumbPoolContent.styles.tsx       | 204 +++++++++---------
 .../staking/widgets/ThumbPoolContent.tsx      | 117 +++++-----
 3 files changed, 211 insertions(+), 183 deletions(-)

diff --git a/source/renderer/app/App.tsx b/source/renderer/app/App.tsx
index bbbdec040f..33c3c6048f 100755
--- 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 { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { Routes } from './Routes';
 import { daedalusTheme } from './themes/daedalus';
 import { themeOverrides } from './themes/overrides';
@@ -50,42 +51,44 @@ class App extends Component<{
       !isNodeStopped;
 
     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 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>
+              <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>
     );
   }
 }
diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.tsx b/source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.tsx
index e0deaaaa88..07cd9afe38 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.tsx
+++ b/source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.tsx
@@ -1,62 +1,52 @@
-import React from 'react';
 import SVGInline from 'react-svg-inline';
-import { Box, Text, Center, Flex } from '@chakra-ui/react';
 import styled from '@emotion/styled';
-import clockIcon from '../../../assets/images/clock-corner.inline.svg';
-import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
-import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';
-
-export const Container = ({ children, isSaturationDataAvailable }) => (
-  <Flex
-    h="16"
-    w="20"
-    flexDirection="column"
-    pt={!isSaturationDataAvailable ? '3' : '2'}
-    pos="relative"
-  >
-    {children}
-  </Flex>
-);
-
-export const Ticker = ({ children, isSaturationDataAvailable }) => (
-  <Center mb={!isSaturationDataAvailable ? '1' : 'px'}>
-    <Text
-      fontWeight="semibold"
-      fontSize="sm"
-      sx={{ color: 'var(--theme-staking-stake-pool-ticker-color)' }}
-      lineHeight="none"
-    >
-      {children}
-    </Text>
-  </Center>
-);
-
-export const Rewards = ({ children }) => (
-  <Center py="0.5" pos="relative" flex="1 1 auto">
-    <Text fontSize="sm" fontWeight="semibold">
-      {children}
-    </Text>
-    <AdaIcon svg={adaIcon} />
-  </Center>
-);
-
-export const NoDataDash = () => (
-  <Center flex="1 1 auto">
-    <NoDataDashIcon svg={noDataDashBigImage} />
-  </Center>
-);
-
-export const Ranking = ({ children, color }) => (
-  <Center flex="1" style={{ color }} mt="1">
-    <Text fontSize="xl" fontWeight="bold" lineHeight="none">
-      {children}
-    </Text>
-  </Center>
-);
-
-export const RankingStar = ({ children }) => (
-  <Text display="inline-block">{children}</Text>
-);
+
+export const Container = styled.div`
+  height: 69px;
+  position: relative;
+  width: 78px;
+
+  padding-top: ${({ isSaturationDataAvailable }) =>
+    isSaturationDataAvailable ? '9px' : '11px'};
+`;
+
+export const Ticker = styled.div`
+  color: var(--theme-staking-stake-pool-ticker-color);
+  font-family: var(--font-semibold);
+  font-size: 14px;
+  letter-spacing: -0.5px;
+  line-height: 1;
+  text-align: center;
+  margin-bottom: ${({ isSaturationDataAvailable }) =>
+    isSaturationDataAvailable ? '1px' : '5px'};
+`;
+
+export const Ranking = styled.div`
+  font-family: var(--font-bold);
+  font-size: 20px;
+  font-weight: bold;
+  position: relative;
+  text-align: center;
+`;
+
+export const RankingStar = styled.sub`
+  font-family: Verdana;
+  font-size: 14px;
+  margin-left: -1px;
+  position: absolute;
+  top: -2px;
+`;
+
+export const Rewards = styled.div`
+  font-family: var(--font-regular);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.57;
+  padding: 3px 0;
+  position: relative;
+  text-align: center;
+`;
 
 export const AdaIcon = styled(SVGInline)`
   svg {
@@ -72,6 +62,13 @@ export const AdaIcon = styled(SVGInline)`
   }
 `;
 
+export const NoDataDash = styled.div`
+  align-items: center;
+  display: flex;
+  height: 27px;
+  justify-content: center;
+`;
+
 export const NoDataDashIcon = styled(SVGInline)`
   svg {
     height: 3px;
@@ -84,11 +81,15 @@ export const NoDataDashIcon = styled(SVGInline)`
   }
 `;
 
-export const Clock = ({ children }) => (
-  <Box pos="absolute" right="0" top="0">
-    {children}
-  </Box>
-);
+export const Clock = styled.div`
+  background: var(--theme-staking-stake-pool-retirement-background-color);
+  border-radius: 0 2px 0 4px;
+  height: 18px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 18px;
+`;
 
 export const ClockIcon = styled(SVGInline)`
   svg {
@@ -97,38 +98,47 @@ export const ClockIcon = styled(SVGInline)`
   }
 `;
 
-export const ColorBand = ({ color }) => (
-  <Box h="1" w="full" sx={{ background: color }} flexShrink="0" />
-);
-
-export const GreyColorBand = () => (
-  <Box
-    h="1"
-    w="full"
-    sx={{ background: 'var(--theme-staking-stake-pool-grey-color)' }}
-    flexShrink="0"
-  />
-);
-
-export const SaturationBar = ({ width, color }) => (
-  <Center my="1">
-    <Flex
-      h="1"
-      w="10"
-      sx={{
-        background:
-          'var(--theme-staking-stake-pool-saturation-background-color)',
-      }}
-      borderRadius="sm"
-    >
-      <Box
-        as="span"
-        h="1"
-        sx={{
-          width: `${width}%`,
-        }}
-        bg={`stakePoolSaturation.${color}`}
-      />
-    </Flex>
-  </Center>
-);
+export const ColorBand = styled.div`
+  bottom: 0;
+  display: block;
+  height: 5px;
+  left: 0;
+  position: absolute;
+  width: 100%;
+`;
+
+export const GreyColorBand = styled.div`
+  bottom: 0;
+  display: block;
+  height: 5px;
+  left: 0;
+  position: absolute;
+  width: 100%;
+`;
+
+const colors = {
+  green: 'var(--theme-staking-stake-pool-saturation-green-color)',
+  orange: 'var(--theme-staking-stake-pool-saturation-orange-color)',
+  red: 'var(--theme-staking-stake-pool-saturation-red-color)',
+  yellow: 'var(--theme-staking-stake-pool-saturation-yellow-color)',
+};
+
+export const SaturationBar = styled.div`
+  bottom: 0;
+  display: block;
+  height: 5px;
+  left: 0;
+  position: absolute;
+  width: 100%;
+
+  span {
+    border-radius: 2px;
+    bottom: 0;
+    height: inherit;
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+
+  background: ${({ color }) => colors[color]};
+`;
diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.tsx b/source/renderer/app/components/staking/widgets/ThumbPoolContent.tsx
index 080f7e924d..610774cc1b 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPoolContent.tsx
+++ b/source/renderer/app/components/staking/widgets/ThumbPoolContent.tsx
@@ -17,16 +17,17 @@ import { formattedWalletAmount } from '../../../utils/formatters';
 import {
   Container,
   Ticker,
+  Ranking,
+  RankingStar,
   Rewards,
+  AdaIcon,
   NoDataDash,
-  ClockIcon,
   NoDataDashIcon,
-  Ranking,
-  RankingStar,
-  SaturationBar,
   Clock,
-  GreyColorBand,
+  ClockIcon,
   ColorBand,
+  GreyColorBand,
+  SaturationBar,
 } from './ThumbPoolContent.styles';
 
 type Props = {
@@ -72,56 +73,70 @@ class ThumbPoolContent extends Component<Props> {
     } = stakePool;
     const color = getColorFromRange(ranking, numberOfRankedStakePools);
 
+    const saturationClassnames = classnames([
+      styles.saturationBar,
+      styles[getSaturationColor(saturation)],
+    ]);
+
     return (
       <Container isSaturationDataAvailable={IS_SATURATION_DATA_AVAILABLE}>
-        <Box h="full">
-          <Ticker isSaturationDataAvailable={IS_SATURATION_DATA_AVAILABLE}>
-            {ticker}
-          </Ticker>
-          {isGridRewardsView &&
-            (IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
-              <Rewards>{this.formattedRewards(potentialRewards)}</Rewards>
-            ) : (
-              <NoDataDash />
-            ))}
-          {!isGridRewardsView &&
-            (IS_RANKING_DATA_AVAILABLE ? (
-              <Ranking color={color}>
-                {nonMyopicMemberRewards ? (
-                  ranking
-                ) : (
-                  <>
-                    {numberOfRankedStakePools + 1}
-                    <RankingStar>*</RankingStar>
-                  </>
-                )}
-              </Ranking>
-            ) : (
-              <Center flex="1 1 auto">
-                <NoDataDashIcon svg={noDataDashBigImage} />
-              </Center>
-            ))}
-          {IS_SATURATION_DATA_AVAILABLE && (
-            <SaturationBar
-              width={parseFloat(saturation).toFixed(2)}
-              color={color}
-            />
-          )}
-        </Box>
-        <Box alignSelf="flex-end" w="full">
-          {IS_RANKING_DATA_AVAILABLE ? (
-            <>
-              {retiring && (
-                <Clock>
-                  <ClockIcon svg={clockIcon} />
-                </Clock>
+        <Ticker isSaturationDataAvailable={IS_SATURATION_DATA_AVAILABLE}>
+          {ticker}
+        </Ticker>
+        {isGridRewardsView &&
+          (IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
+            <Rewards>
+              {this.formattedRewards(potentialRewards)}
+              <AdaIcon svg={adaIcon} />
+            </Rewards>
+          ) : (
+            <div className={styles.noDataDash}>
+              <SVGInline svg={noDataDashBigImage} />
+            </div>
+          ))}
+        {!isGridRewardsView &&
+          (IS_RANKING_DATA_AVAILABLE ? (
+            <Ranking style={{ color }}>
+              {nonMyopicMemberRewards ? (
+                ranking
+              ) : (
+                <>
+                  {numberOfRankedStakePools + 1}
+                  <RankingStar>*</RankingStar>
+                </>
               )}
-              <ColorBand color={color} />
-            </>
+            </Ranking>
           ) : (
-            <GreyColorBand />
-          )}
-        </Box>
+            <NoDataDash>
+              <NoDataDashIcon svg={noDataDashBigImage} />
+            </NoDataDash>
+          ))}
+        {IS_SATURATION_DATA_AVAILABLE && (
+          <SaturationBar>
+            <span
+              style={{
+                // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
+                width: `${parseFloat(saturation).toFixed(2)}%`,
+              }}
+            />
+          </SaturationBar>
+        )}
+        {IS_RANKING_DATA_AVAILABLE ? (
+          <>
+            {retiring && (
+              <Clock>
+                <ClockIcon svg={clockIcon} />
+              </Clock>
+            )}
+            <ColorBand
+              style={{
+                background: color,
+              }}
+            />
+          </>
+        ) : (
+          <GreyColorBand />
+        )}
       </Container>
     );
   }