[react] NetworkSelector component UI tweaks (#1653)

thirdweb-dev · Sep 25, 2023 · bd18e4f · bd18e4f
1 parent 1018eb5
commit bd18e4f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/.changeset/lovely-turkeys-work.md b/.changeset/lovely-turkeys-work.md
@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+NetworkSelector component UI tweaks
diff --git a/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx b/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx
@@ -25,7 +25,7 @@ import type { Chain } from "@thirdweb-dev/chains";
 import Fuse from "fuse.js";
 import { Button } from "../../components/buttons";
 import { useEffect } from "react";
-import { Container, noScrollBar } from "../../components/basic";
+import { Container, Line, noScrollBar } from "../../components/basic";
 import { Text } from "../../components/text";
 import { ModalTitle } from "../../components/modalElements";
 import { CustomThemeProvider } from "../../design-system/CustomThemeProvider";
@@ -260,24 +260,26 @@ export const NetworkSelector: React.FC<NetworkSelectorProps> = (props) => {
 
             {onCustomClick && (
               <>
-                <Spacer y="sm" />
-                <Button
-                  fullWidth
-                  variant="link"
-                  onClick={() => {
-                    onCustomClick();
-                    if (onClose) {
-                      onClose();
-                    }
-                  }}
-                  style={{
-                    display: "flex",
-                    fontSize: fontSize.sm,
-                    boxShadow: "none",
-                  }}
-                >
-                  Add Custom Network
-                </Button>
+                <Line />
+                <Container p="lg">
+                  <Button
+                    fullWidth
+                    variant="link"
+                    onClick={() => {
+                      onCustomClick();
+                      if (onClose) {
+                        onClose();
+                      }
+                    }}
+                    style={{
+                      display: "flex",
+                      fontSize: fontSize.sm,
+                      boxShadow: "none",
+                    }}
+                  >
+                    Add Custom Network
+                  </Button>
+                </Container>
               </>
             )}
           </Tabs.Root>
@@ -538,14 +540,14 @@ const SectionLabel = styled.p<{ theme?: Theme }>`
   font-size: ${fontSize.sm};
   color: ${(p) => p.theme.colors.secondaryText};
   margin: 0;
+  display: block;
+  padding: 0 ${spacing.xs};
 `;
 
 const ScrollContainer = styled.div<{ theme?: Theme }>`
   box-sizing: border-box;
   overflow: auto;
   padding-bottom: ${spacing.lg};
-  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
-  mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
   ${noScrollBar};
 `;