fix: styling

airgap-it · Sep 9, 2024 · c29a78f · c29a78f
1 parent 1ccc252
commit c29a78f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 75 deletions.
diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
@@ -3,10 +3,9 @@ import { Modal, Box, Grid2, Button } from '@mui/material'
 import { LeftIcon, LogoIcon, CloseIcon } from '../icons'
 // import Loader from '../loader'
 // import useIsMobile from 'src/ui/alert/hooks/useIsMobile'
-import './styles.css'
 
 const Alert: React.FC<AlertProps> = (props: AlertProps) => {
-  // const isMobile = useIsMobile()
+  // todo const isMobile = useIsMobile()
 
   return (
     <Modal open={true} onClose={props.onCloseClick}>
@@ -20,7 +19,7 @@ const Alert: React.FC<AlertProps> = (props: AlertProps) => {
           bgcolor: 'grey',
           border: '2px solid #000',
           boxShadow: 24,
-          borderRadius: '10px',
+          borderRadius: '30px',
           p: 4
         }}
       >

diff --git a/packages/beacon-ui/src/components/top-wallets/index.tsx b/packages/beacon-ui/src/components/top-wallets/index.tsx
@@ -3,7 +3,7 @@ import { MergedWallet } from '../../utils/wallets'
 import Wallet from '../wallet'
 
 import { StorageKey } from '@airgap/beacon-types'
-import { Button, Grid2 } from '@mui/material'
+import { Grid2 } from '@mui/material'
 
 interface TopWalletsProps {
   wallets: MergedWallet[]
@@ -39,18 +39,14 @@ const TopWallets: React.FC<TopWalletsProps> = (props: TopWalletsProps) => {
       </div>
       <Grid2 container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
         {props.wallets.map((wallet) => (
-          <Grid2 size={6}>
-            <Button variant="outlined">
-              <Wallet
-                key={wallet.id}
-                disabled={props.disabled}
-                name={wallet.name}
-                description={wallet.descriptions.join(' & ')}
-                image={wallet.image}
-                onClick={() => props.onClickWallet(wallet.id)}
-              />
-            </Button>
-          </Grid2>
+          <Wallet
+            key={wallet.id}
+            disabled={props.disabled}
+            name={wallet.name}
+            description={wallet.descriptions.join(' & ')}
+            image={wallet.image}
+            onClick={() => props.onClickWallet(wallet.id)}
+          />
         ))}
         {props.otherWallets && (
           <div className="top-wallets-other-wallets" onClick={props.otherWallets.onClick}>

diff --git a/packages/beacon-ui/src/components/wallet/index.tsx b/packages/beacon-ui/src/components/wallet/index.tsx
@@ -1,56 +1,30 @@
-import React from "react";
-
+import { Button, Grid2 } from '@mui/material'
+import React from 'react'
 
 interface WalletProps {
-  name: string;
-  image: string;
-  description?: string;
-  small?: boolean;
-  mobile?: boolean;
-  onClick: () => void;
-  tags?: string[];
-  disabled?: boolean;
+  name: string
+  image: string
+  description?: string
+  small?: boolean
+  mobile?: boolean
+  onClick: () => void
+  tags?: string[]
+  disabled?: boolean
 }
 
 const Wallet: React.FC<WalletProps> = (props: WalletProps) => {
+  console.log(props.name, props.tags)
   return (
-    <div className={props.disabled ? "wallet-disabled" : ""}>
-      {!props.small && (
-        <div
-          className={`wallet-main ${props.mobile ? "wallet-main-mobile" : ""}`}
-          onClick={props.onClick}
-        >
-          <div
-            className={`wallet-main-left ${
-              props.mobile ? "wallet-main-left-mobile" : ""
-            }`}
-          >
-            <h3>{props.name}</h3>
-            {props.description && <p>{props.description}</p>}
-            {props.tags && props.tags.length > 0 && (
-              <div className="wallet-main-tags">
-                {props.tags.map((tag, index) => (
-                  <span key={index} className="wallet-main-tag">
-                    {tag}
-                  </span>
-                ))}
-              </div>
-            )}
-          </div>
-          <div className="wallet-main-right">
-            <img src={props.image} alt={`${props.name} logo`} />
-          </div>
-        </div>
-      )}
-      {props.small && (
-        <div className="wallet-small" onClick={props.onClick}>
-          <img src={props.image} alt={`${props.name} logo`} />
-          <h3>{props.name}</h3>
+    <Grid2 size={6} alignSelf={'baseline'}>
+      <Button variant="outlined">
+        <div style={{ padding: '10px' }}>
+          <h3 style={{ margin: 0 }}>{props.name}</h3>
+          {props.description && <p style={{ fontSize: '10px', margin: 0 }}>{props.description}</p>}
         </div>
-      )}
-    </div>
-  );
-};
-
+        <img src={props.image} alt={`${props.name} logo`} width={50} height={50} />
+      </Button>
+    </Grid2>
+  )
+}
 
-export default Wallet;
+export default Wallet
diff --git a/packages/beacon-ui/src/components/wallets/index.tsx b/packages/beacon-ui/src/components/wallets/index.tsx
@@ -16,17 +16,15 @@ const Wallets: React.FC<WalletProps> = (props: WalletProps) => {
   return (
     <Grid2 container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
       {props.wallets.map((wallet) => (
-        <Grid2 size={6}>
-          <Wallet
-            key={wallet.id}
-            disabled={props.disabled}
-            name={wallet.name}
-            description={wallet.descriptions.join(' & ')}
-            image={wallet.image}
-            small={props.small}
-            onClick={() => props.onClickWallet(wallet.id)}
-          />
-        </Grid2>
+        <Wallet
+          key={wallet.id}
+          disabled={props.disabled}
+          name={wallet.name}
+          description={wallet.descriptions.join(' & ')}
+          image={wallet.image}
+          small={props.small}
+          onClick={() => props.onClickWallet(wallet.id)}
+        />
       ))}
       <button className="wallets-button" onClick={props.onClickOther}>
         {props.isMobile ? 'Pair wallet on another device' : 'Show QR code'}