From be4d776ab8749d15007da4d39552a1ce80495895 Mon Sep 17 00:00:00 2001
From: Renan Ferreira <renan.ferreira@iohk.io>
Date: Wed, 19 Jan 2022 16:28:44 -0300
Subject: [PATCH] [DDW-788] Restore develop

---
 source/renderer/app/App.js                    |  94 ++++------
 .../staking/widgets/ThumbPoolContent.js       | 156 +++++++---------
 .../staking/widgets/ThumbPoolContent.scss     | 167 ++++++++++++++++++
 3 files changed, 263 insertions(+), 154 deletions(-)
 create mode 100644 source/renderer/app/components/staking/widgets/ThumbPoolContent.scss

diff --git a/source/renderer/app/App.js b/source/renderer/app/App.js
index cf784e5f69..883feb68ba 100755
--- a/source/renderer/app/App.js
+++ b/source/renderer/app/App.js
@@ -7,7 +7,6 @@ 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';
@@ -22,29 +21,6 @@ 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
 export default class App extends Component<{
   stores: StoresMap,
@@ -72,46 +48,40 @@ export default class App extends Component<{
       !isNodeStopping && // Daedalus is not shutting down
       !isNodeStopped; // Daedalus is not shutting down
 
-    if (document.documentElement) {
-      document.documentElement.lang = locale;
-    }
-
     return (
-      <ChakraProvider theme={theme}>
-        <Fragment>
-          <ThemeManager variables={themeVars} />
-          <Provider stores={stores} actions={actions}>
-            <ThemeProvider
-              theme={daedalusTheme}
-              skins={SimpleSkins}
-              variables={SimpleDefaults}
-              themeOverrides={themeOverrides}
+      <Fragment>
+        <ThemeManager variables={themeVars} />
+        <Provider stores={stores} actions={actions}>
+          <ThemeProvider
+            theme={daedalusTheme}
+            skins={SimpleSkins}
+            variables={SimpleDefaults}
+            themeOverrides={themeOverrides}
+          >
+            <IntlProvider
+              {...{ locale, key: locale, messages: translations[locale] }}
             >
-              <IntlProvider
-                {...{ locale, key: locale, messages: translations[locale] }}
-              >
-                <Fragment>
-                  <Router history={history}>
-                    <Routes />
-                  </Router>
-                  {mobxDevTools}
-                  {[
-                    isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
-                    isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
-                      <DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
-                    ),
-                    <NotificationsContainer key="notificationsContainer" />,
-                  ]}
-                  {canShowNews && [
-                    <NewsFeedContainer key="newsFeedList" />,
-                    <NewsOverlayContainer key="newsFeedOverlay" />,
-                  ]}
-                </Fragment>
-              </IntlProvider>
-            </ThemeProvider>
-          </Provider>
-        </Fragment>
-      </ChakraProvider>
+              <Fragment>
+                <Router history={history}>
+                  <Routes />
+                </Router>
+                {mobxDevTools}
+                {[
+                  isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
+                  isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
+                    <DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
+                  ),
+                  <NotificationsContainer key="notificationsContainer" />,
+                ]}
+                {canShowNews && [
+                  <NewsFeedContainer key="newsFeedList" />,
+                  <NewsOverlayContainer key="newsFeedOverlay" />,
+                ]}
+              </Fragment>
+            </IntlProvider>
+          </ThemeProvider>
+        </Provider>
+      </Fragment>
     );
   }
 }
diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.js b/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
index aae113fea7..071de894cb 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
+++ b/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
@@ -2,7 +2,6 @@
 import BigNumber from 'bignumber.js';
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import { Box, Text, Center, Flex } from '@chakra-ui/react';
 import clockIcon from '../../../assets/images/clock-corner.inline.svg';
 import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';
 import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
@@ -13,7 +12,6 @@ import {
 } from '../../../config/stakingConfig';
 import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
 import { formattedWalletAmount } from '../../../utils/formatters';
-import { AdaIcon, ClockIcon, NoDataDashIcon } from './ThumbPoolContent.styles';
 
 type Props = {
   stakePool: StakePool,
@@ -54,100 +52,74 @@ export default class ThumbPoolContent extends Component<Props> {
     } = stakePool;
     const color = getColorFromRange(ranking, numberOfRankedStakePools);
 
+    const componentClassnames = classnames([
+      styles.component,
+      !IS_SATURATION_DATA_AVAILABLE ? styles.hideSaturation : null,
+    ]);
+
+    const saturationClassnames = classnames([
+      styles.saturationBar,
+      styles[getSaturationColor(saturation)],
+    ]);
+
     return (
-      <Flex
-        h="16"
-        w="20"
-        flexDirection="column"
-        pt={!IS_SATURATION_DATA_AVAILABLE ? '3' : '2'}
-        pos="relative"
-      >
-        <Box h="full">
-          <Center mb={!IS_SATURATION_DATA_AVAILABLE ? '1' : 'px'}>
-            <Text
-              fontWeight="semibold"
-              fontSize="sm"
-              sx={{ color: 'var(--theme-staking-stake-pool-ticker-color)' }}
-              lineHeight="none"
-            >
-              {ticker}
-            </Text>
-          </Center>
-          {isGridRewardsView &&
-            (IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
-              <Center py="0.5" pos="relative" flex="1 1 auto">
-                <Text fontSize="sm" fontWeight="semibold">
-                  {this.formattedRewards(potentialRewards)}
-                </Text>
-                <AdaIcon svg={adaIcon} />
-              </Center>
-            ) : (
-              <Center flex="1 1 auto">
-                <NoDataDashIcon svg={noDataDashBigImage} />
-              </Center>
-            ))}
-          {!isGridRewardsView &&
-            (IS_RANKING_DATA_AVAILABLE ? (
-              <Center flex="1" style={{ color }} mt="1">
-                <Text fontSize="xl" fontWeight="bold" lineHeight="none">
-                  {nonMyopicMemberRewards ? (
-                    ranking
-                  ) : (
-                    <>
-                      {numberOfRankedStakePools + 1}
-                      <Text display="inline-block">*</Text>
-                    </>
-                  )}
-                </Text>
-              </Center>
-            ) : (
-              <Center flex="1 1 auto">
-                <NoDataDashIcon svg={noDataDashBigImage} />
-              </Center>
-            ))}
-          {IS_SATURATION_DATA_AVAILABLE && (
-            <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: `${parseFloat(saturation).toFixed(2)}%`,
-                  }}
-                  bg={`stakePoolSaturation.${getSaturationColor(saturation)}`}
-                />
-              </Flex>
-            </Center>
-          )}
-        </Box>
-        <Box alignSelf="flex-end" w="full">
-          {IS_RANKING_DATA_AVAILABLE ? (
-            <>
-              {retiring && (
-                <Box pos="absolute" right="0" top="0">
-                  <ClockIcon svg={clockIcon} />
-                </Box>
+      <div className={componentClassnames}>
+        <div className={styles.ticker}>{ticker}</div>
+        {isGridRewardsView &&
+          (IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
+            <div className={styles.rewards}>
+              {this.formattedRewards(potentialRewards)}
+              <SVGInline svg={adaIcon} className={styles.adaIcon} />
+            </div>
+          ) : (
+            <div className={styles.noDataDash}>
+              <SVGInline svg={noDataDashBigImage} />
+            </div>
+          ))}
+        {!isGridRewardsView &&
+          (IS_RANKING_DATA_AVAILABLE ? (
+            <div className={styles.ranking} style={{ color }}>
+              {nonMyopicMemberRewards ? (
+                ranking
+              ) : (
+                <>
+                  {numberOfRankedStakePools + 1}
+                  <sup>*</sup>
+                </>
               )}
-              <Box h="1" w="full" sx={{ background: color }} flexShrink="0" />
-            </>
+            </div>
           ) : (
-            <Box
-              h="1"
-              w="full"
-              sx={{ background: 'var(--theme-staking-stake-pool-grey-color)' }}
-              flexShrink="0"
+            <div className={styles.noDataDash}>
+              <SVGInline svg={noDataDashBigImage} />
+            </div>
+          ))}
+        {IS_SATURATION_DATA_AVAILABLE && (
+          <div className={saturationClassnames}>
+            <span
+              style={{
+                width: `${parseFloat(saturation).toFixed(2)}%`,
+              }}
+            />
+          </div>
+        )}
+        {IS_RANKING_DATA_AVAILABLE ? (
+          <>
+            {retiring && (
+              <div className={styles.clock}>
+                <SVGInline svg={clockIcon} className={styles.clockIcon} />
+              </div>
+            )}
+            <div
+              className={styles.colorBand}
+              style={{
+                background: color,
+              }}
             />
-          )}
-        </Box>
-      </Flex>
+          </>
+        ) : (
+          <div className={styles.greyColorBand} />
+        )}
+      </div>
     );
   }
 }
diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
new file mode 100644
index 0000000000..49bef2aae1
--- /dev/null
+++ b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
@@ -0,0 +1,167 @@
+.component {
+  height: 69px;
+  padding: 9px 0 0;
+  position: relative;
+  width: 78px;
+
+  &.hideSaturation {
+    padding-top: 11px;
+
+    .ticker {
+      margin-bottom: 5px;
+    }
+  }
+
+  .ticker {
+    color: var(--theme-staking-stake-pool-ticker-color);
+    font-family: var(--font-semibold);
+    font-size: 14px;
+    letter-spacing: -0.5px;
+    line-height: 1;
+    margin: 0 0 1px;
+    text-align: center;
+  }
+
+  .ranking {
+    font-size: 20px;
+    font-weight: bold;
+    position: relative;
+    text-align: center;
+
+    sup {
+      font-family: Verdana;
+      font-size: 14px;
+      margin-left: -1px;
+      position: absolute;
+      top: -2px;
+    }
+  }
+
+  .rewards {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+    line-height: 1.57;
+    padding: 3px 0;
+    position: relative;
+    text-align: center;
+
+    .adaIcon {
+      svg {
+        height: 11px;
+        margin-left: 3px;
+        width: 10px;
+
+        & > g {
+          & > g {
+            stroke: var(--theme-staking-wallet-row-ticker-ada-icon-fill-color);
+          }
+        }
+      }
+    }
+  }
+
+  .noDataDash {
+    align-items: center;
+    display: flex;
+    height: 27px;
+    justify-content: center;
+
+    :global {
+      .SVGInline {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+
+        svg {
+          height: 3px;
+          width: 12px;
+
+          path {
+            fill: var(--theme-staking-stake-pool-grey-color) !important;
+            opacity: 1 !important;
+          }
+        }
+      }
+    }
+  }
+
+  .clock {
+    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;
+  }
+
+  .clockIcon {
+    display: block;
+    line-height: 0;
+    margin: 1px 0 0;
+    padding: 0;
+    text-align: center;
+
+    svg {
+      height: 15px;
+      width: 15px;
+    }
+  }
+
+  .colorBand {
+    border-radius: 0 0 4px 4px;
+    bottom: 0;
+    display: block;
+    height: 5px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  .greyColorBand {
+    background: var(--theme-staking-stake-pool-grey-color);
+    border-radius: 0 0 4px 4px;
+    bottom: 0;
+    display: block;
+    height: 5px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  .saturationBar {
+    background: var(--theme-staking-stake-pool-saturation-background-color);
+    border-radius: 2px;
+    height: 5px;
+    margin: 2px auto 0;
+    overflow: hidden;
+    position: relative;
+    width: 40px;
+
+    span {
+      border-radius: 2px;
+      bottom: 0;
+      height: inherit;
+      left: 0;
+      position: absolute;
+      top: 0;
+    }
+
+    &.green span {
+      background: var(--theme-staking-stake-pool-saturation-green-color);
+    }
+
+    &.orange span {
+      background: var(--theme-staking-stake-pool-saturation-orange-color);
+    }
+
+    &.red span {
+      background: var(--theme-staking-stake-pool-saturation-red-color);
+    }
+
+    &.yellow span {
+      background: var(--theme-staking-stake-pool-saturation-yellow-color);
+    }
+  }
+}