Merge pull request #2 from dmccartney/daniel-resp-style

feat: style tweaks for smaller viewports
dmccartney · May 7, 2023 · 8384bbf · 8384bbf
2 parents 8189d28 + 439ccde
commit 8384bbf
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 99 deletions.
diff --git a/web/src/components/ConnectedWalletButton.js b/web/src/components/ConnectedWalletButton.js
@@ -1,13 +1,10 @@
 import { useAccount, useConnect, useDisconnect, useEnsName } from "wagmi";
 import { useState } from "react";
 import {
-  Avatar,
-  Box,
   Button,
   Card,
   CardContent,
   CardHeader,
-  Chip,
   Modal,
   Stack,
   Typography,
@@ -36,24 +33,19 @@ export default function ConnectedWalletButton({
         <Button size={"small"} onClick={() => disconnect()}>
           Disconnect
         </Button>
-        <WalletAvatar walletAddress={address} size={48} />
-        <Stack direction="column" spacing={0.5}>
+        <WalletAvatar walletAddress={address} size={36} />
+        <Stack direction="column" spacing={0.25}>
           <Typography variant="body2">
             {ensName ?? shortenAddress(address)}
           </Typography>
-          <Box>
-            <Chip
-              size="small"
-              avatar={
-                connector?.id === "safe" ? (
-                  <Avatar>
-                    <SafeIcon />
-                  </Avatar>
-                ) : null
-              }
-              label={connector?.name}
-            />
-          </Box>
+          <Stack direction="row" alignItems="center">
+            {connector?.id === "safe" ? (
+              <SafeIcon color="text.secondary" sx={{ width: 16, height: 16 }} />
+            ) : null}
+            <Typography color="text.secondary" variant="caption">
+              {connector?.name}
+            </Typography>
+          </Stack>
         </Stack>
       </Stack>
     );
@@ -77,7 +69,7 @@ export default function ConnectedWalletButton({
         }}
         onClose={() => setShowingOptions(false)}
       >
-        <Card sx={{ width: 300 }}>
+        <Card sx={{ width: "95%", maxWidth: 500 }}>
           <CardHeader title={"Connect Wallet"} />
           <CardContent>
             <Stack direction="column" spacing={2}>

diff --git a/web/src/components/Layout.js b/web/src/components/Layout.js
@@ -69,7 +69,7 @@ export default function Layout({ breadcrumbs = [], children }) {
       }}
     >
       <AppBar component="nav" color="primary">
-        <Toolbar sx={{ pr: 0 }}>
+        <Toolbar>
           <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
             <Stack direction="row" alignItems="center" spacing={1}>
               <span>Rocket Sweep</span>

diff --git a/web/src/components/SafeSweepCard.js b/web/src/components/SafeSweepCard.js
@@ -142,8 +142,13 @@ function BatchCard({ batch, upNext, readOnly }) {
     });
   };
   return (
-    <Badge badgeContent={batch.length} color="primary" max={999}>
-      <Card variant="outlined">
+    <Badge
+      sx={{ width: "100%" }}
+      badgeContent={batch.length}
+      color="primary"
+      max={999}
+    >
+      <Card sx={{ width: "100%" }} variant="outlined">
         <CardContent>
           <Typography variant={"h5"}>
             {total.eq(0)
@@ -160,7 +165,7 @@ function BatchCard({ batch, upNext, readOnly }) {
           </Typography>
           <Alert sx={{ mt: 2, mb: 2 }} severity={efficiencySeverity}>
             <AlertTitle>{efficiencyPer.toFixed(2)}% Efficiency</AlertTitle>
-            {efficiencySeverity === "success"
+            {!upNext || efficiencySeverity === "success"
               ? ""
               : "Consider waiting for lower gas prices or a larger balance."}
           </Alert>
@@ -306,7 +311,7 @@ function SafeAlert({ sx, label, safeAddress }) {
         </>
       }
     >
-      Safe Configured: {label} address
+      Safe Configured: {label}
     </Alert>
   );
 }
@@ -355,7 +360,7 @@ function SweepCardContent({ sx, nodeAddress }) {
   return (
     <CardContent sx={sx}>
       {!hasSafeWithdrawalAddress && !hasSafeNodeAddress && (
-        <Alert sx={{ mb: 3, maxWidth: 450 }} severity="warning">
+        <Alert sx={{ mb: 2, maxWidth: 450 }} severity="warning">
           Executing a batch sweep requires the node or its withdrawal address to
           be a{" "}
           <Link href="https://safe.global/" target="_blank">
@@ -365,59 +370,54 @@ function SweepCardContent({ sx, nodeAddress }) {
       )}
       {hasSafeNodeAddress && (
         <SafeAlert
-          sx={{ mb: 3, maxWidth: 450 }}
+          sx={{ mb: 2, maxWidth: 450 }}
           label="Node"
           safeAddress={nodeAddress}
         />
       )}
       {hasSafeWithdrawalAddress && (
         <SafeAlert
-          sx={{ mb: 3, maxWidth: 450 }}
+          sx={{ mb: 2, maxWidth: 450 }}
           label="Withdrawal"
           safeAddress={withdrawalAddress}
         />
       )}
-      <Grid container spacing={2} sx={{ mb: 2 }}>
-        {unupgradedMps.length > 0 && (
-          <>
-            <Grid item xs={1} />
-            <Grid item xs={8}>
-              <Alert
-                severity={"info"}
-                action={
-                  canProposeBatches && (
-                    <Button
-                      size={"small"}
-                      variant={"contained"}
-                      color={"info"}
-                      onClick={() => upgradeAll(unupgradedMps)}
-                    >
-                      Upgrade
-                    </Button>
-                  )
-                }
+      {unupgradedMps.length > 0 && (
+        <Alert
+          sx={{ mb: 2, maxWidth: 450 }}
+          severity={"info"}
+          action={
+            canProposeBatches && (
+              <Button
+                size={"small"}
+                variant={"contained"}
+                color={"info"}
+                onClick={() => upgradeAll(unupgradedMps)}
               >
-                <AlertTitle>
-                  <Chip size="small" label={unupgradedMps.length} /> minipools
-                  need upgrade
-                </AlertTitle>
-                You cannot distribute minipools that have not been upgraded.
-              </Alert>
-            </Grid>
-            <Grid item xs={3} />
-          </>
-        )}
-        <Grid item xs={6}>
+                Upgrade
+              </Button>
+            )
+          }
+        >
+          <AlertTitle>
+            <Chip size="small" label={unupgradedMps.length} /> minipools need
+            upgrade
+          </AlertTitle>
+          You cannot distribute minipools that have not been upgraded.
+        </Alert>
+      )}
+      <Grid container columnSpacing={4} rowSpacing={2} sx={{ mb: 2 }}>
+        <Grid item xs={12} sm={6}>
           <ConfigurationCard
-            sx={{ mt: 3, pr: 6 }}
+            sx={{ pr: 2, pt: 4 }}
             batchSize={batchSize}
             ethThreshold={ethThreshold}
             onBatchSize={setBatchSize}
             onEthThreshold={setEthThreshold}
             minipoolCount={minipools.length}
           />
         </Grid>
-        <Grid item xs={4}>
+        <Grid item xs={12} sm={6} sx={{ pr: 0.5 }}>
           <Tooltip
             title={`The next batch to distribute based on your configured Threshold and Batch Size.`}
             sx={{ cursor: "help" }}
@@ -465,7 +465,6 @@ function SweepCardContent({ sx, nodeAddress }) {
               <Alert severity="info">No minipools found.</Alert>
             ))}
         </Grid>
-        <Grid item xs={2} />
       </Grid>
       {moreBatches.length > 0 && isShowingMore && (
         <>
@@ -478,7 +477,7 @@ function SweepCardContent({ sx, nodeAddress }) {
           </Typography>
           <Grid container spacing={2}>
             {moreBatches.map((batch, i) => (
-              <Grid key={`batch-${i}`} item xs={4}>
+              <Grid key={`batch-${i}`} item xs={12} sm={4} sx={{ pr: 0.5 }}>
                 <BatchCard
                   batch={batch}
                   upNext={false}

diff --git a/web/src/pages/HomePage.js b/web/src/pages/HomePage.js
@@ -50,22 +50,18 @@ function SearchInput({ sx, input, onChange }) {
   );
 }
 
-function WithdrawalableNodes({ address }) {
+function WithdrawalableNodes({ sx, address }) {
   let nodeAddresses = useWithdrawableNodeAddresses(address);
   return (
-    <Grid
-      sx={{ maxWidth: 800, mt: 1 }}
-      container
-      alignSelf="center"
-      justifyContent="center"
-      spacing={3}
-    >
+    <Stack sx={sx} direction="column" alignItems="center" spacing={1}>
       {nodeAddresses.map((nodeAddress) => (
-        <Grid key={"summary-card"} item xs={6}>
-          <MinipoolRewardsSummaryCard nodeAddress={nodeAddress} asLink />
-        </Grid>
+        <MinipoolRewardsSummaryCard
+          sx={{ width: "100%" }}
+          nodeAddress={nodeAddress}
+          asLink
+        />
       ))}
-    </Grid>
+    </Stack>
   );
 }
 
@@ -77,32 +73,54 @@ export default function HomePage() {
     <Layout>
       <Stack sx={{ mt: 2 }} alignItems="center" direction="column">
         {!isConnected && (
-          <Card sx={{ minWidth: 400, maxWidth: 800, mt: 1, mb: 2 }}>
-            <CardContent>
-              <Typography gutterBottom>
-                Connect wallet to view your nodes
-              </Typography>
-              <ConnectedWalletButton fullWidth />
-            </CardContent>
-          </Card>
+          <Grid container alignItems="center" justifyContent="center">
+            <Grid item xs={12} sm={4} align>
+              <Card sx={{ minWidth: 400, maxWidth: 800, mt: 1, mb: 2 }}>
+                <CardContent>
+                  <Typography gutterBottom>
+                    Connect wallet to view your nodes
+                  </Typography>
+                  <ConnectedWalletButton fullWidth />
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
         )}
-        <Card sx={{ minWidth: 400, maxWidth: 800 }}>
-          <CardContent>
-            <Typography gutterBottom>
-              {isConnected
-                ? "Find nodes by address"
-                : "Or find nodes by address"}
-            </Typography>
-            <SearchInput
-              sx={{ width: "100%" }}
-              input={input}
-              onChange={setInput}
-            />
-          </CardContent>
-        </Card>
+        <Grid container alignItems="center" justifyContent="center">
+          <Grid item xs={12} sm={4} align>
+            <Card sx={{ minWidth: 400, maxWidth: 800 }}>
+              <CardContent>
+                <Typography gutterBottom>
+                  {isConnected
+                    ? "Find nodes by address"
+                    : "Or find nodes by address"}
+                </Typography>
+                <SearchInput
+                  sx={{ width: "100%" }}
+                  input={input}
+                  onChange={setInput}
+                />
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
       </Stack>
-      {input && isAddress && <WithdrawalableNodes address={input} />}
-      {!input && isConnected && <WithdrawalableNodes address={address} />}
+      <Grid container alignItems="center" justifyContent="center">
+        <Grid item xs={12} sm={4} sx={{ mt: 3 }}>
+          {input && isAddress && (
+            <WithdrawalableNodes
+              sx={{ minWidth: 400, maxWidth: 800 }}
+              address={input}
+            />
+          )}
+          {!input && isConnected && (
+            <WithdrawalableNodes
+              sx={{ minWidth: 400, maxWidth: 800 }}
+              address={address}
+            />
+          )}
+        </Grid>
+      </Grid>
     </Layout>
   );
 }
diff --git a/web/src/pages/NodePage.js b/web/src/pages/NodePage.js
@@ -29,10 +29,10 @@ export default function NodePage() {
         <CircularProgress />
       ) : (
         <Grid container spacing={3}>
-          <Grid key={"summary-card"} item xs={4}>
+          <Grid key={"summary-card"} item xs={12} lg={4}>
             <MinipoolRewardsSummaryCard nodeAddress={nodeAddress} />
           </Grid>
-          <Grid key={"sweep-table-cards"} item xs={8}>
+          <Grid key={"sweep-table-cards"} item xs={12} lg={8}>
             <SafeSweepCard sx={{ mb: 2 }} nodeAddress={nodeAddress} />
             <MinipoolRewardsTable nodeAddress={nodeAddress} />
           </Grid>