fix: Don't cut off network chip New tag (#186)

* fix: Don't cut off network chip New tag * Add comment * Revert shuffle changes * chore: Bump version to v1.0.9
safe-global · May 2, 2023 · 8d1f24a · 8d1f24a
1 parent 3dff995
commit 8d1f24a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "safe-homepage",
   "homepage": "https://github.com/safe-global/safe-homepage",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "scripts": {
     "build": "next build && next export",
     "lint": "tsc && next lint",

diff --git a/src/components/Wallet/NetworkChip/index.tsx b/src/components/Wallet/NetworkChip/index.tsx
@@ -14,7 +14,7 @@ export type NetworkChipProps = {
 const NetworkChip = ({ name, icon, textColor, backgroundColor, isNew }: NetworkChipProps) => (
   <Box className={css.wrapper} sx={{ backgroundColor }}>
     <div className={css.icon}>
-      <img {...icon} />
+      <img {...icon} width={40} height={40} />
     </div>
     <Typography className={css.name} variant="body1" color={textColor}>
       {name}

diff --git a/src/components/Wallet/NetworkChip/styles.module.css b/src/components/Wallet/NetworkChip/styles.module.css
@@ -11,8 +11,6 @@
 .icon img {
   display: flex;
   align-items: center;
-  height: 40px;
-  width: 40px;
 }
 
 .name {

diff --git a/src/components/common/Networks/index.tsx b/src/components/common/Networks/index.tsx
@@ -1,6 +1,6 @@
 import type { NetworkChipProps } from '@/components/Wallet/NetworkChip'
 import NetworkChip from '@/components/Wallet/NetworkChip'
-import { Box, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
 import clsx from 'clsx'
 import css from './styles.module.css'
 import layoutCss from '@/components/common/styles.module.css'
@@ -26,15 +26,7 @@ type NetworksProps = {
   chainsData: ChainProps[]
 }
 
-const NetworksRow = ({
-  showNew,
-  networksRow,
-  chainsData,
-}: {
-  showNew?: boolean
-  networksRow: NetworkChipProps[]
-  chainsData: ChainProps[]
-}) => {
+const NetworksRow = ({ networksRow, chainsData }: { networksRow: NetworkChipProps[]; chainsData: ChainProps[] }) => {
   return (
     <>
       {networksRow.map(({ name, icon, textColor, backgroundColor, isNew }, i) => {
@@ -43,7 +35,7 @@ const NetworksRow = ({
           textColor: chainData?.textColor || textColor || defaultThemeColors.textColor,
           backgroundColor: chainData?.backgroundColor || backgroundColor || defaultThemeColors.backgroundColor,
         }
-        return <NetworkChip key={`${name}_${i}`} icon={icon} name={name} isNew={isNew && showNew} {...chainColors} />
+        return <NetworkChip key={`${name}_${i}`} icon={icon} name={name} isNew={isNew} {...chainColors} />
       })}
     </>
   )
@@ -60,12 +52,18 @@ const Networks = ({ title, text, networks }: NetworksProps) => {
       </Typography>
       <div className={css.networksWrapper}>
         <div className={css.gradientBase} />
-        {[0, 1].map((index) => (
-          <Box key={index} display="flex" gap="8px" className={index === 0 ? css.slider : css.sliderReverse}>
-            <NetworksRow networksRow={networks} chainsData={chainsData} showNew={index === 1} />
-            <NetworksRow networksRow={shuffledNetworks} chainsData={chainsData} showNew={index === 1} />
-          </Box>
-        ))}
+        <div className={css.animation}>
+          <div className={css.slider}>
+            <NetworksRow networksRow={networks} chainsData={chainsData} />
+            <NetworksRow networksRow={networks} chainsData={chainsData} />
+          </div>
+        </div>
+        <div className={clsx(css.animation, css.animationReverse)}>
+          <div className={css.slider}>
+            <NetworksRow networksRow={shuffledNetworks} chainsData={chainsData} />
+            <NetworksRow networksRow={shuffledNetworks} chainsData={chainsData} />
+          </div>
+        </div>
         <div className={clsx(css.gradientBase, css.gradientFlipped)} />
       </div>
       <Typography className={css.secondaryText} variant="body1">

diff --git a/src/components/common/Networks/styles.module.css b/src/components/common/Networks/styles.module.css
@@ -4,9 +4,7 @@
   flex-direction: column;
   gap: 16px;
   overflow: hidden;
-
-  --topRowWidth: 1483px;
-  --bottomRowWidth: 1448px;
+  padding: 8px 0;
 }
 
 .gradientBase {
@@ -32,30 +30,36 @@
   color: var(--mui-palette-primary-light);
 }
 
-.slider {
-  animation: slide 59s linear infinite;
+.animation {
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  display: flex;
+  width: max-content;
+  min-width: 200%;
+  animation-duration: 100s;
+  animation-delay: 0s;
+  animation-play-state: running;
+  animation-name: slide;
+  gap: 8px;
 }
 
-.sliderReverse {
-  transform: translateX(calc(var(--bottomRowWidth) * -1));
-  animation: slide-reverse 60s linear infinite;
+.animationReverse {
+  animation-direction: reverse;
 }
 
-@keyframes slide {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(calc(var(--topRowWidth) * -1));
-  }
+.slider {
+  display: flex;
+  gap: 8px;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  font-size: 0;
 }
 
-@keyframes slide-reverse {
-  from {
-    transform: translateX(calc(var(--bottomRowWidth) * -1));
-  }
+@keyframes slide {
   to {
-    transform: translateX(0);
+    transform: translate(-50%)
   }
 }