Merge pull request #63 from web3ui/fix-cryptocards-alignment

web3ui · Jan 19, 2022 · 5cbcdce · 5cbcdce
2 parents 630c77c + 6b949e6
commit 5cbcdce
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 45 deletions.
diff --git a/src/components/CryptoCards/CryptoCards.styles.tsx b/src/components/CryptoCards/CryptoCards.styles.tsx
@@ -5,8 +5,8 @@ import resetCSS from '../../styles/reset';
 import { getShade } from '../../styles/colors';
 
 const CryptoCardStyled = styled.div`
+    ${resetCSS};
     align-items: center;
-    background: ${(props) => props.color};
     border: 1px solid ${getShade('light', 10)};
     border-radius: 16px;
     box-sizing: border-box;
@@ -17,10 +17,10 @@ const CryptoCardStyled = styled.div`
     overflow: hidden;
     padding: 24px, 40px, 24px, 40px;
     position: absolute;
-    ${resetCSS}
     top: 20px;
     width: 100%;
     max-width: 256px;
+
     :after {
         content: '';
         display: block;
@@ -38,9 +38,11 @@ const CryptoCardStyled = styled.div`
             background: rgba(4, 24, 54, 0.2);
         }
     }
+
+    background: ${(props) => props.color};
 `;
 
-const DivImageStyled = styled.div`
+const DivStyledImage = styled.div`
     flex: none;
     flex-grow: 0;
     height: 160px;
@@ -51,12 +53,12 @@ const DivImageStyled = styled.div`
     width: 120px;
 `;
 
-const DivInfoStyled = styled.div`
+const DivStyledInfo = styled.div`
     align-items: center;
     display: flex;
-    flex: none;
     flex-direction: column;
     flex-grow: 0;
+    flex: none;
     height: 224px;
     left: 51.5px;
     margin: 16px 0px;
@@ -67,19 +69,19 @@ const DivInfoStyled = styled.div`
     width: 162px;
 `;
 
-const DivLogoStyled = styled.div`
+const DivStyledLogo = styled.div`
     border-radius: 0px;
     height: 136px;
     left: 19px;
     top: 12px;
     width: 82px;
 `;
 
-const DivNetworkInfoStyled = styled.div`
+const DivStyledNetworkInfo = styled.div`
     bottom: 0%;
     color: ${color.white};
-    flex: none;
     flex-grow: 0;
+    flex: none;
     height: 64px;
     left: calc(50% - 162px / 2);
     margin: 0px 0px;
@@ -91,34 +93,33 @@ const DivNetworkInfoStyled = styled.div`
     width: 100%;
 `;
 
-const DivButtonStyled = styled.div`
+const DivStyledButton = styled.div`
     align-items: center;
     display: flex;
-    flex: none;
     flex-direction: row;
     flex-grow: 0;
+    flex: none;
     height: 40px;
     justify-content: center;
     left: 39px;
     margin: 16px 0px;
     order: 1;
     position: static;
-    width: 187px;
     top: 268px;
+    width: 187px;
 `;
 
-const PChainNameStyled = styled.p`
-    font-size: 32px;
+const TextStyledChain = styled.p`
     ${fonts.montserrat};
     ${fonts.textBold500};
+    font-size: 32px;
     height: 55%;
     margin: 0;
     overflow: hidden;
     word-break: break-all;
 `;
 
-const PNetworkStyled = styled.p`
-    font-size: 20px;
+const TestStyledNetwork = styled.p`
     ${fonts.openSans};
     ${fonts.textBold700};
     height: 36px;
@@ -130,13 +131,13 @@ const PNetworkStyled = styled.p`
 
 const CryptoCardStyles = {
     CryptoCardStyled,
-    DivButtonStyled,
-    DivImageStyled,
-    DivInfoStyled,
-    DivLogoStyled,
-    DivNetworkInfoStyled,
-    PChainNameStyled,
-    PNetworkStyled,
+    DivStyledButton,
+    DivStyledImage,
+    DivStyledInfo,
+    DivStyledLogo,
+    DivStyledNetworkInfo,
+    TextStyledChain,
+    TestStyledNetwork,
 };
 
 export default CryptoCardStyles;
diff --git a/src/components/CryptoCards/CryptoCards.tsx b/src/components/CryptoCards/CryptoCards.tsx
@@ -7,46 +7,50 @@ import React from 'react';
 
 const {
     CryptoCardStyled,
-    DivButtonStyled,
-    DivImageStyled,
-    DivInfoStyled,
-    DivLogoStyled,
-    DivNetworkInfoStyled,
-    PChainNameStyled,
-    PNetworkStyled,
+    DivStyledButton,
+    DivStyledImage,
+    DivStyledInfo,
+    DivStyledLogo,
+    DivStyledNetworkInfo,
+    TextStyledChain,
+    TestStyledNetwork,
 } = CryptoCardStyles;
 
 const CryptoCards: React.FC<CryptoCardProps> = ({
-    onClick,
+    bgColor,
+    btnText,
     chain,
     chainType,
+    onClick,
     settingsIcon,
-    bgColor,
-    btnText,
 }: CryptoCardProps) => {
     return (
         <CryptoCardStyled color={bgColor} data-testid={'test-crypto-card'}>
-            <DivInfoStyled>
-                <DivImageStyled>
-                    <DivLogoStyled>
+            <DivStyledInfo>
+                <DivStyledImage>
+                    <DivStyledLogo>
                         {<Illustration logo={chain}></Illustration>}
-                    </DivLogoStyled>
-                </DivImageStyled>
-                <DivNetworkInfoStyled>
-                    <PChainNameStyled data-testid={'test-chain-name'}>
+                    </DivStyledLogo>
+                </DivStyledImage>
+
+                <DivStyledNetworkInfo>
+                    <TextStyledChain data-testid={'test-chain-name'}>
                         {`${chain.charAt(0).toUpperCase()}${chain.slice(1)}`}
-                    </PChainNameStyled>
-                    <PNetworkStyled>{chainType || 'Network'}</PNetworkStyled>
-                </DivNetworkInfoStyled>
-            </DivInfoStyled>
-            <DivButtonStyled>
+                    </TextStyledChain>
+                    <TestStyledNetwork>
+                        {chainType || 'Network'}
+                    </TestStyledNetwork>
+                </DivStyledNetworkInfo>
+            </DivStyledInfo>
+
+            <DivStyledButton>
                 <Button
                     onClick={onClick}
                     theme="translucent"
                     text={btnText}
                     icon={settingsIcon || iconTypes.cog}
                 />
-            </DivButtonStyled>
+            </DivStyledButton>
         </CryptoCardStyled>
     );
 };