fix: styling

airgap-it · Jan 9, 2025 · b7b92fe · b7b92fe
1 parent adff46e
commit b7b92fe
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 35 deletions.
diff --git a/packages/beacon-ui/src/components/alert/index.tsx b/packages/beacon-ui/src/components/alert/index.tsx
@@ -40,7 +40,7 @@ const Alert: React.FC<React.PropsWithChildren<AlertProps>> = (props) => {
         >
           {backButton}
           <LogoIcon />
-          <Button variant="outlined" onClick={props.onCloseClick}>
+          <Button variant="text" onClick={props.onCloseClick}>
             <CloseIcon />
           </Button>
         </Grid2>

diff --git a/packages/beacon-ui/src/components/top-wallets/index.tsx b/packages/beacon-ui/src/components/top-wallets/index.tsx
@@ -45,19 +45,21 @@ const TopWallets: React.FC<TopWalletsProps> = (props: TopWalletsProps) => {
         columnSpacing={1}
       >
         {props.wallets.map((wallet) => (
-          <Wallet
-            key={wallet.id}
-            disabled={props.disabled}
-            name={wallet.name}
-            description={wallet.descriptions.join(' & ')}
-            image={wallet.image}
-            onClick={() => props.onClickWallet(wallet.id)}
-          />
+          <Grid2 size={6}>
+            <Wallet
+              key={wallet.id}
+              disabled={props.disabled}
+              name={wallet.name}
+              description={wallet.descriptions.join(' & ')}
+              image={wallet.image}
+              onClick={() => props.onClickWallet(wallet.id)}
+            />
+          </Grid2>
         ))}
         {props.otherWallets && (
           <Grid2 container onClick={props.otherWallets.onClick}>
             <Grid2 container>
-              <h3 style={{color: 'black'}}>Other Wallets</h3>
+              <h3 style={{ color: 'black' }}>Other Wallets</h3>
               <p>See other wallets you can use to connect</p>
             </Grid2>
             <Grid2 container>

diff --git a/packages/beacon-ui/src/components/wallet/index.tsx b/packages/beacon-ui/src/components/wallet/index.tsx
@@ -1,7 +1,7 @@
-import { Button, Grid2 } from '@mui/material'
 import React from 'react'
+import { Card, CardActionArea, CardContent, CardMedia, Typography, Box, Chip } from '@mui/material'
 
-interface WalletProps {
+export interface WalletProps {
   name: string
   image: string
   description?: string
@@ -12,30 +12,72 @@ interface WalletProps {
   disabled?: boolean
 }
 
-const Wallet: React.FC<WalletProps> = (props: WalletProps) => {
+const Wallet: React.FC<WalletProps> = (props) => {
+  const { name, image, description, small, mobile, onClick, tags, disabled } = props
+
+  // Common styling
+  const cardStyles = {
+    opacity: disabled ? 0.6 : 1,
+    pointerEvents: disabled ? 'none' : 'auto',
+    maxWidth: mobile ? 30 : 200,
+    margin: '0.5rem'
+  }
+
+  if (!small) {
+    // Main view
+    return (
+      <Card sx={{ ...cardStyles, maxHeight: mobile ? 30 : 88, minHeight: mobile ? 30 : 88 }}>
+        <CardActionArea onClick={onClick} disabled={disabled}>
+          <Box display="flex" flexDirection="row">
+            <CardContent sx={{ flex: '1 1 auto' }}>
+              <Typography sx={{ fontSize: '1.2rem', color: 'black' }}>{name}</Typography>
+              {description && (
+                <Typography sx={{ marginTop: 0.5, fontSize: '0.63rem' }}>{description}</Typography>
+              )}
+              {tags && tags.length > 0 && (
+                <Box display="flex" gap={1} flexWrap="wrap" marginTop={1}>
+                  {tags.map((tag) => (
+                    <Chip key={tag} label={tag} size="small" />
+                  ))}
+                </Box>
+              )}
+            </CardContent>
+            <CardMedia
+              component="img"
+              image={image}
+              alt={name}
+              sx={{
+                width: 60,
+                height: 60,
+                objectFit: 'contain',
+                alignSelf: 'center',
+                marginRight: 2,
+                overflow: 'auto'
+              }}
+            />
+          </Box>
+        </CardActionArea>
+      </Card>
+    )
+  }
+
+  // Small view
   return (
-    <Grid2 size={props.small ? undefined : 6} alignSelf={'baseline'} padding={'5px'}>
-      <Button
-        variant="outlined"
-        onClick={props.onClick}
-        style={props.small ? undefined : { minHeight: '80px', maxHeight: '80px' }}
-      >
-        {!props.small && (
-          <Grid2 container>
-            <h3 style={{ margin: 0, color: 'black' }}>{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>
+    <Box>
+      <Card sx={{ ...cardStyles, width: 62, height: 62, maxWidth: 62, maxHeight: 62 }}>
+        <CardActionArea onClick={onClick} disabled={disabled}>
+          <CardContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <CardMedia
+              component="img"
+              image={image}
+              alt={name}
+              sx={{ width: 30, height: 30, maxWidth: 30, maxHeight: 30, objectFit: 'contain' }}
+            />
+          </CardContent>
+        </CardActionArea>
+      </Card>
+      <Typography sx={{ marginTop: 1 }}>{name}</Typography>
+    </Box>
   )
 }