Merge branch 'master' of https://github.com/web3ui/web3uikit

web3ui · Jan 25, 2022 · 63505b2 · 63505b2
2 parents f3d5dc9 + 9cc0f57
commit 63505b2
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 64 deletions.
diff --git a/src/components/CryptoCards/CryptoCards.stories.tsx b/src/components/CryptoCards/CryptoCards.stories.tsx
@@ -6,6 +6,7 @@ import { iconTypes } from '../Icon/collection';
 export default {
     title: 'UI/Crypto Cards',
     component: CryptoCards,
+    argTypes: { onClick: { action: 'clicked' } },
 } as ComponentMeta<typeof CryptoCards>;
 
 const Template: ComponentStory<typeof CryptoCards> = (args) => (
@@ -14,7 +15,6 @@ const Template: ComponentStory<typeof CryptoCards> = (args) => (
 
 export const Ethereum = Template.bind({});
 Ethereum.args = {
-    onClick: () => alert('Clicked'),
     chain: 'ethereum',
     chainType: 'Network',
     settingsIcon: iconTypes.cog,
@@ -25,7 +25,6 @@ Ethereum.args = {
 
 export const Binance = Template.bind({});
 Binance.args = {
-    onClick: () => alert('Clicked'),
     chain: 'binance',
     chainType: 'Network',
     settingsIcon: iconTypes.cog,
@@ -36,7 +35,6 @@ Binance.args = {
 
 export const Polygon = Template.bind({});
 Polygon.args = {
-    onClick: () => alert('Clicked'),
     chain: 'polygon',
     chainType: 'Network',
     settingsIcon: iconTypes.cog,
@@ -47,7 +45,6 @@ Polygon.args = {
 
 export const Avalanche = Template.bind({});
 Avalanche.args = {
-    onClick: () => alert('Clicked'),
     chain: 'avalanche',
     chainType: 'Network',
     settingsIcon: iconTypes.cog,
@@ -58,7 +55,6 @@ Avalanche.args = {
 
 export const Fantom = Template.bind({});
 Fantom.args = {
-    onClick: () => alert('Clicked'),
     chain: 'fantom',
     chainType: 'Network',
     settingsIcon: iconTypes.cog,
@@ -69,7 +65,6 @@ Fantom.args = {
 
 export const Arbitrum = Template.bind({});
 Arbitrum.args = {
-    onClick: () => alert('Clicked'),
     chain: 'arbitrum',
     chainType: 'Network',
     settingsIcon: iconTypes.cog,

diff --git a/src/components/CryptoCards/CryptoCards.styles.tsx b/src/components/CryptoCards/CryptoCards.styles.tsx
@@ -4,28 +4,47 @@ import color from '../../styles/colors';
 import resetCSS from '../../styles/reset';
 import { getShade } from '../../styles/colors';
 
-const CryptoCardStyled = styled.div`
+export const DivStyledCryptoCard = styled.div`
     ${resetCSS};
-    border: 1px solid ${getShade('light', 10)};
+    align-items: center;
+    background: ${(props) => props.color};
     border-radius: 16px;
+    border: 1px solid ${getShade('light', 10)};
     box-sizing: border-box;
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
+    left: 20px;
+    max-width: 256px;
     overflow: hidden;
+    padding: 24px, 40px, 24px, 40px;
+    position: relative;
+    top: 20px;
     width: 100%;
-    max-width: 256px;
-    transition: all 0.3s ease;
+
+    :after {
+        content: '';
+        display: block;
+        height: 100%;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        transition: all 0.3s ease;
+        width: 100%;
+        z-index: 0;
+    }
+
     :hover {
         box-shadow: 0px 0px 400px 400px rgba(4, 24, 54, 0.2) inset;
     }
     background: ${(props) => props.color};
 `;
 
-const DivStyledImage = styled.div`
-    flex: none;
+export const DivStyledImage = styled.div`
     flex-grow: 0;
+    flex: none;
     height: 160px;
     left: 21px;
     order: 0;
@@ -34,7 +53,7 @@ const DivStyledImage = styled.div`
     width: 120px;
 `;
 
-const DivStyledInfo = styled.div`
+export const DivStyledInfo = styled.div`
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -50,15 +69,15 @@ const DivStyledInfo = styled.div`
     width: 162px;
 `;
 
-const DivStyledLogo = styled.div`
+export const DivStyledLogo = styled.div`
     border-radius: 0px;
     height: 136px;
     left: 19px;
     top: 12px;
     width: 82px;
 `;
 
-const DivStyledNetworkInfo = styled.div`
+export const DivStyledNetworkInfo = styled.div`
     bottom: 0%;
     color: ${color.white};
     flex-grow: 0;
@@ -74,7 +93,7 @@ const DivStyledNetworkInfo = styled.div`
     width: 100%;
 `;
 
-const DivStyledButton = styled.div`
+export const DivStyledButton = styled.div`
     align-items: center;
     display: flex;
     flex-direction: row;
@@ -90,7 +109,7 @@ const DivStyledButton = styled.div`
     width: 187px;
 `;
 
-const TextStyledChain = styled.p`
+export const PStyledChainName = styled.p`
     ${fonts.montserrat};
     ${fonts.textBold500};
     font-size: 32px;
@@ -100,25 +119,13 @@ const TextStyledChain = styled.p`
     word-break: break-all;
 `;
 
-const TestStyledNetwork = styled.p`
+export const PStyledNetwork = styled.p`
     ${fonts.openSans};
     ${fonts.textBold700};
+    font-size: 20px;
     height: 36px;
     line-height: 36px;
     margin: 0;
     overflow: hidden;
     word-break: break-all;
 `;
-
-const CryptoCardStyles = {
-    CryptoCardStyled,
-    DivStyledButton,
-    DivStyledImage,
-    DivStyledInfo,
-    DivStyledLogo,
-    DivStyledNetworkInfo,
-    TextStyledChain,
-    TestStyledNetwork,
-};
-
-export default CryptoCardStyles;
diff --git a/src/components/CryptoCards/CryptoCards.tsx b/src/components/CryptoCards/CryptoCards.tsx
@@ -1,20 +1,18 @@
+import React from 'react';
 import { Button } from '../Button';
-import { CryptoCardProps } from './types';
 import { iconTypes } from '../Icon/collection';
 import Illustration from '../Illustrations/Illustration';
-import CryptoCardStyles from './CryptoCards.styles';
-import React from 'react';
-
-const {
-    CryptoCardStyled,
+import { CryptoCardProps } from './types';
+import {
+    DivStyledCryptoCard,
     DivStyledButton,
     DivStyledImage,
     DivStyledInfo,
     DivStyledLogo,
     DivStyledNetworkInfo,
-    TextStyledChain,
-    TestStyledNetwork,
-} = CryptoCardStyles;
+    PStyledChainName,
+    PStyledNetwork,
+} from './CryptoCards.styles';
 
 const CryptoCards: React.FC<CryptoCardProps> = ({
     bgColor,
@@ -25,33 +23,29 @@ const CryptoCards: React.FC<CryptoCardProps> = ({
     settingsIcon,
 }: CryptoCardProps) => {
     return (
-        <CryptoCardStyled color={bgColor} data-testid={'test-crypto-card'}>
+        <DivStyledCryptoCard color={bgColor} data-testid={'test-crypto-card'}>
             <DivStyledInfo>
                 <DivStyledImage>
                     <DivStyledLogo>
                         {<Illustration logo={chain}></Illustration>}
                     </DivStyledLogo>
                 </DivStyledImage>
-
                 <DivStyledNetworkInfo>
-                    <TextStyledChain data-testid={'test-chain-name'}>
+                    <PStyledChainName data-testid={'test-chain-name'}>
                         {`${chain.charAt(0).toUpperCase()}${chain.slice(1)}`}
-                    </TextStyledChain>
-                    <TestStyledNetwork>
-                        {chainType || 'Network'}
-                    </TestStyledNetwork>
+                    </PStyledChainName>
+                    <PStyledNetwork>{chainType || 'Network'}</PStyledNetwork>
                 </DivStyledNetworkInfo>
             </DivStyledInfo>
-
             <DivStyledButton>
                 <Button
+                    icon={settingsIcon || iconTypes.cog}
                     onClick={onClick}
-                    theme="translucent"
                     text={btnText}
-                    icon={settingsIcon || iconTypes.cog}
+                    theme="translucent"
                 />
             </DivStyledButton>
-        </CryptoCardStyled>
+        </DivStyledCryptoCard>
     );
 };
 

diff --git a/src/components/Table/Table.styles.ts b/src/components/Table/Table.styles.ts
@@ -5,16 +5,8 @@ import fonts from '../../styles/fonts';
 import resetCSS from '../../styles/reset';
 
 export const TableParent = styled.div`
-    padding: 11px 22px;
-    border-radius: 10px;
-    border: 2px solid transparent;
-    border-radius: 20px;
-    overflow-x: auto;
-    overflow-y: auto;
-    box-shadow: 0 4px 10px rgba(48, 71, 105, 0.1);
     display: flex;
     flex-direction: column;
-    background-color: white;
 `;
 
 export const NoData = styled.div`
@@ -50,7 +42,8 @@ export const Pagination = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 11px 0px;
+    background-color: transparent;
+    padding: 12px 0px;
     > div {
         display: flex;
         flex-direction: row;
@@ -72,11 +65,30 @@ export const TableGrid = styled.div.attrs((props: any) => ({
 }))`
     ${resetCSS}
     ${fonts.text}
+    padding-bottom: 11px;
+    border-radius: 10px;
+    border: 2px solid transparent;
+    border-radius: 20px;
+    overflow-x: auto;
+    overflow-y: auto;
+    box-shadow: 0 4px 10px rgba(48, 71, 105, 0.1);
+    background-color: white;
     display: grid;
     grid-template-columns: ${(props) => props.columns};
-    row-gap: 11px;
+    row-gap: 22px;
     column-gap: 11px;
     overflow-x: auto;
+    & > .firstCol {
+        /* border: 2px dashed red; */
+        padding-left: 22px;
+    }
+    & > .lastCol {
+        /* border: 2px dashed red; */
+        padding-right: 22px;
+    }
+    & > div.table_header {
+        margin-bottom: -11px;
+    }
 `;
 
 interface PaginationTag {

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -71,7 +71,11 @@ const Table: React.FC<TableProps> = ({
         return (
             <>
                 {header.map((col, key) => (
-                    <div key={`header_${key}`} role="table-header">
+                    <div
+                        key={`header_${key}`}
+                        role="table-header"
+                        className="table_header"
+                    >
                         {col}
                     </div>
                 ))}
@@ -101,22 +105,31 @@ const Table: React.FC<TableProps> = ({
         return (
             <>
                 {computeCurrentData().map(
-                    (row: (string | React.ReactNode)[], rowKey) => (
+                    (row: (string | React.ReactNode)[], rowKey, arr) => (
                         <React.Fragment key={`fragment_${rowKey}`}>
                             {row.map(
                                 (
                                     item: string | React.ReactNode,
                                     colKey: number,
+                                    rowData,
                                 ) => (
                                     <div
                                         key={`tr_${rowKey}_${colKey}`}
                                         role="table-item"
+                                        className={`${
+                                            colKey == 0 && 'firstCol'
+                                        } ${
+                                            colKey == rowData.length - 1 &&
+                                            'lastCol'
+                                        }`}
                                     >
                                         {item}
                                     </div>
                                 ),
                             )}
-                            <Divider key={`divider_${rowKey}`} />
+                            {rowKey != arr.length - 1 && (
+                                <Divider key={`divider_${rowKey}`} />
+                            )}
                         </React.Fragment>
                     ),
                 )}