fix: styling

airgap-it · Sep 11, 2024 · eba94c1 · eba94c1
1 parent 04c191a
commit eba94c1
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 16 deletions.
diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
@@ -41,19 +41,15 @@ const Alert: React.FC<React.PropsWithChildren<AlertProps>> = (props) => {
             <CloseIcon />
           </Button>
         </Grid2>
-        <Grid2 container>
+        <Grid2 textAlign={'center'} container>
           {props.children}
-          {!isMobile && (
-            <Grid2 container>
-              {props.extraContent && <Grid2>---</Grid2>}
-              {props.showMore && props.extraContent}
-            </Grid2>
-          )}
+          {!isMobile && <Grid2 container>{props.showMore && props.extraContent}</Grid2>}
         </Grid2>
         {!isMobile && props.extraContent && (
           <Grid2
             style={{ cursor: 'pointer', justifyContent: 'center' }}
             onClick={() => props.onClickShowMore && props.onClickShowMore()}
+            marginTop={'15px'}
             container
           >
             {props.showMore ? 'Show less' : 'Show more'}

diff --git a/packages/beacon-ui/src/components/top-wallets/index.tsx b/packages/beacon-ui/src/components/top-wallets/index.tsx
@@ -37,7 +37,7 @@ const TopWallets: React.FC<TopWalletsProps> = (props: TopWalletsProps) => {
           </span>
         )}
       </div>
-      <Grid2 container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+      <Grid2 container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }} padding={'10px'}>
         {props.wallets.map((wallet) => (
           <Wallet
             key={wallet.id}

diff --git a/packages/beacon-ui/src/components/wallet/index.tsx b/packages/beacon-ui/src/components/wallet/index.tsx
@@ -14,13 +14,22 @@ interface WalletProps {
 
 const Wallet: React.FC<WalletProps> = (props: WalletProps) => {
   return (
-    <Grid2 size={6} alignSelf={'baseline'}>
-      <Button variant="outlined" onClick={props.onClick}>
-        <div style={{ padding: '10px' }}>
-          <h3 style={{ margin: 0 }}>{props.name}</h3>
-          {props.description && <p style={{ fontSize: '10px', margin: 0 }}>{props.description}</p>}
-        </div>
-        <img src={props.image} alt={`${props.name} logo`} width={50} height={50} />
+    <Grid2 size={props.small ? undefined : 6} alignSelf={'baseline'}>
+      <Button size={'small'} variant="outlined" onClick={props.onClick}>
+        {!props.small && (
+          <Grid2 container>
+            <h3 style={{ margin: 0 }}>{props.name}</h3>
+            {props.description && (
+              <p style={{ fontSize: '10px', margin: 0 }}>{props.description}</p>
+            )}
+          </Grid2>
+        )}
+        <img
+          src={props.image}
+          alt={`${props.name} logo`}
+          width={props.small ? 25 : 50}
+          height={props.small ? 25 : 50}
+        />
       </Button>
     </Grid2>
   )

diff --git a/packages/beacon-ui/src/components/wallets/index.tsx b/packages/beacon-ui/src/components/wallets/index.tsx
@@ -14,7 +14,13 @@ interface WalletProps {
 
 const Wallets: React.FC<WalletProps> = (props: WalletProps) => {
   return (
-    <Grid2 container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+    <Grid2
+      container
+      rowSpacing={1}
+      columnSpacing={{ xs: 1, sm: 2, md: 3 }}
+      justifyContent={'center'}
+      padding={'10px'}
+    >
       {props.wallets.map((wallet) => (
         <Wallet
           key={wallet.id}