feat: top fade scroll on wallet desktop options (#195)

* feat: top fade scroll on wallet desktop options * fix: auto scrollbar
rainbow-me · Mar 25, 2022 · 0069f45 · 0069f45 · vercel · Mar 25, 2022
1 parent 3c89a79
commit 0069f45
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 62 deletions.
diff --git a/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.css.ts b/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.css.ts
@@ -1,7 +1,32 @@
 import { style } from '@vanilla-extract/css';
+import { sprinkles, themeVars } from '../../css/sprinkles.css';
 
 export const QRCodeBackgroundClassName = style([
   {
     background: 'white',
   },
 ]);
+
+export const FadeScrollClassName = style([
+  sprinkles({
+    paddingX: '18',
+  }),
+  {
+    maxHeight: 464,
+    overflowY: 'auto',
+    selectors: {
+      '&:before': {
+        background: `linear-gradient(to bottom, ${themeVars.colors.modalBackground} 60%, rgba(255, 255, 255, 0) 100%)`,
+        content: "''",
+        display: 'block',
+        height: '24px',
+        marginBottom: -14,
+        marginLeft: -6,
+        marginRight: -6,
+        position: 'sticky',
+        top: '0',
+        zIndex: 1,
+      },
+    },
+  },
+]);
diff --git a/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx b/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx
@@ -16,6 +16,7 @@ import {
   GetDetail,
   InstructionDetail,
 } from './ConnectDetails';
+import { FadeScrollClassName } from './DesktopOptions.css';
 import { groupBy } from './groupBy';
 
 export enum WalletStep {
@@ -122,83 +123,84 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
       <Box
         display="flex"
         flexDirection="column"
-        gap="6"
-        margin="18"
+        marginTop="18"
         style={{
-          minWidth: isMobile() ? 'full' : '251px',
+          minWidth: isMobile() ? 'full' : '287px',
         }}
       >
-        <Box marginBottom="16" marginLeft="6">
+        <Box marginLeft="6" paddingX="18">
           <Text as="h1" color="modalText" id={titleId} size="18" weight="heavy">
             Connect a Wallet
           </Text>
         </Box>
-        {Object.entries(groupedWallets).map(
-          ([groupName, wallets], index) =>
-            wallets.length > 0 && (
-              <Fragment key={index}>
-                {groupName ? (
-                  <Box marginLeft="6" marginY="4">
-                    <Text color="modalTextSecondary" size="14" weight="bold">
-                      {groupName}
-                    </Text>
-                  </Box>
-                ) : null}
-                <Box display="flex" flexDirection="column" gap="4">
-                  {wallets.map(wallet => {
-                    return (
-                      <ModalSelection
-                        currentlySelected={wallet.id === selectedOptionId}
-                        key={wallet.id}
-                        onClick={() => onSelectWallet(wallet)}
-                      >
-                        <Box
-                          color={
-                            wallet.id === selectedOptionId
-                              ? 'actionButtonText'
-                              : 'modalText'
-                          }
-                          disabled={!wallet.ready}
-                          fontFamily="body"
-                          fontSize="16"
-                          fontWeight="bold"
-                          transition="default"
+        <Box className={FadeScrollClassName} paddingBottom="18">
+          {Object.entries(groupedWallets).map(
+            ([groupName, wallets], index) =>
+              wallets.length > 0 && (
+                <Fragment key={index}>
+                  {groupName ? (
+                    <Box marginBottom="8" marginTop="16" marginX="6">
+                      <Text color="modalTextSecondary" size="14" weight="bold">
+                        {groupName}
+                      </Text>
+                    </Box>
+                  ) : null}
+                  <Box display="flex" flexDirection="column" gap="4">
+                    {wallets.map(wallet => {
+                      return (
+                        <ModalSelection
+                          currentlySelected={wallet.id === selectedOptionId}
+                          key={wallet.id}
+                          onClick={() => onSelectWallet(wallet)}
                         >
                           <Box
-                            alignItems="center"
-                            display="flex"
-                            flexDirection="row"
-                            gap="12"
+                            color={
+                              wallet.id === selectedOptionId
+                                ? 'actionButtonText'
+                                : 'modalText'
+                            }
+                            disabled={!wallet.ready}
+                            fontFamily="body"
+                            fontSize="16"
+                            fontWeight="bold"
+                            transition="default"
                           >
                             <Box
-                              borderRadius="6"
-                              height="28"
-                              style={{
-                                background: `url(${wallet.iconUrl})`,
-                                backgroundRepeat: 'no-repeat',
-                                backgroundSize: 'cover',
-                              }}
-                              width="28"
+                              alignItems="center"
+                              display="flex"
+                              flexDirection="row"
+                              gap="12"
                             >
                               <Box
-                                borderColor="actionButtonBorder"
                                 borderRadius="6"
-                                borderStyle="solid"
-                                borderWidth="1"
-                                height="full"
-                                width="full"
-                              />
+                                height="28"
+                                style={{
+                                  background: `url(${wallet.iconUrl})`,
+                                  backgroundRepeat: 'no-repeat',
+                                  backgroundSize: 'cover',
+                                }}
+                                width="28"
+                              >
+                                <Box
+                                  borderColor="actionButtonBorder"
+                                  borderRadius="6"
+                                  borderStyle="solid"
+                                  borderWidth="1"
+                                  height="full"
+                                  width="full"
+                                />
+                              </Box>
+                              <div>{wallet.name}</div>
                             </Box>
-                            <div>{wallet.name}</div>
                           </Box>
-                        </Box>
-                      </ModalSelection>
-                    );
-                  })}
-                </Box>
-              </Fragment>
-            )
-        )}
+                        </ModalSelection>
+                      );
+                    })}
+                  </Box>
+                </Fragment>
+              )
+          )}
+        </Box>
       </Box>
       {!isMobile() && (
         <>

diff --git a/packages/rainbowkit/src/components/ModalSelection/ModalSelection.css.ts b/packages/rainbowkit/src/components/ModalSelection/ModalSelection.css.ts
@@ -13,7 +13,6 @@ export const HoverClassName = style([
     paddingY: '5',
     transform: {
       active: 'shrink',
-      hover: 'grow',
     },
     transition: 'default',
   }),