Scrollbar styles (#2421)

# Summary Fixes #1145 **Confirmation Modal:** ![image](https://user-images.githubusercontent.com/622217/153942088-65984579-3dfb-4941-81ed-2bbd4b7c5947.png) **Select a token modal:** Before/After <img src="https://user-images.githubusercontent.com/622217/154315857-70536655-2718-4cee-a41b-201d7bd12549.png" width="50%"><img src="https://user-images.githubusercontent.com/622217/154315740-d58a968b-bbe4-4247-86fb-abc42a21bb99.png" width="50%"> **Styles on main scrollbar:** Before: ![image](https://user-images.githubusercontent.com/622217/153941620-e33c37ef-90d9-46db-bdff-e0009bf5c7b3.png) After: ![image](https://user-images.githubusercontent.com/622217/153941677-e8250d37-ac5b-4884-80ee-56546ef3c0a8.png) # To Test
gnosis · Feb 21, 2022 · 6dc3d57 · 6dc3d57
1 parent e4364cb
commit 6dc3d57
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 13 deletions.
diff --git a/src/custom/components/SearchModal/CommonBases/index.ts b/src/custom/components/SearchModal/CommonBases/index.ts
@@ -30,7 +30,7 @@ export const AutoColumn = styled(AutoColumnUni)`
 
 export const MobileWrapper = styled(AutoColumn)`
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    isplay: none;
+    /* isplay: none; */
   `};
 `
 
@@ -45,6 +45,21 @@ export const CommonBasesRow = styled(AutoRow)`
     overflow-x: scroll;
     padding: 0 100px 0 0;
     position: relative;
+    scrollbar-color: ${({ theme }) => theme.scrollbarThumb} ${({ theme }) => theme.scrollbarBg};
+    scroll-behavior: smooth;
+
+    &::-webkit-scrollbar {
+      height: 10px;
+      background: ${({ theme }) => theme.scrollbarBg};
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${({ theme }) => theme.scrollbarThumb};
+      border: 3px solid transparent;
+      border-radius: 10px;
+      background-clip: padding-box;
+    }
   `}
 `
 

diff --git a/src/custom/components/SearchModal/CurrencyList/CurrencyListMod.tsx b/src/custom/components/SearchModal/CurrencyList/CurrencyListMod.tsx
@@ -78,6 +78,24 @@ export const TokenListLogoWrapper = styled.img`
   height: 20px;
 `
 
+export const StyledScrollarea = styled.div`
+  div:first-of-type {
+    overflow-y: auto;
+    scrollbar-color: ${({ theme }) => `${theme.card.border} ${theme.card.background2}`};
+    scroll-behavior: smooth;
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      background: ${({ theme }) => `${theme.card.background2}`} !important;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: ${({ theme }) => `${theme.card.border}`} !important;
+      border: 3px solid transparent;
+      border-radius: 14px;
+      background-clip: padding-box;
+  }
+`
+
 function TokenTags({ currency }: { currency: Currency }) {
   if (!(currency instanceof WrappedTokenInfo)) {
     return <span />
@@ -299,16 +317,18 @@ export default function CurrencyList({
   }, [])
 
   return (
-    <FixedSizeList
-      height={height}
-      ref={fixedListRef as any}
-      width="100%"
-      itemData={itemData}
-      itemCount={itemData.length}
-      itemSize={56}
-      itemKey={itemKey}
-    >
-      {Row}
-    </FixedSizeList>
+    <StyledScrollarea>
+      <FixedSizeList
+        height={height}
+        ref={fixedListRef as any}
+        width="100%"
+        itemData={itemData}
+        itemCount={itemData.length}
+        itemSize={56}
+        itemKey={itemKey}
+      >
+        {Row}
+      </FixedSizeList>
+    </StyledScrollarea>
   )
 }
diff --git a/src/custom/components/SearchModal/ManageLists/ManageListsMod.tsx b/src/custom/components/SearchModal/ManageLists/ManageListsMod.tsx
@@ -247,8 +247,21 @@ ListRowProps & { listUrl: string }) {
 export const ListContainer = styled.div`
   padding: 1rem;
   height: 100%;
-  overflow: auto;
   padding-bottom: 80px;
+  overflow-y: auto;
+  scrollbar-color: ${({ theme }) => `${theme.card.border} ${theme.card.background2}`};
+  scroll-behavior: smooth;
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    background: ${({ theme }) => `${theme.card.background2}`} !important;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => `${theme.card.border}`} !important;
+    border: 3px solid transparent;
+    border-radius: 14px;
+    background-clip: padding-box;
+  }
 `
 
 export function ManageLists({

diff --git a/src/custom/components/TransactionConfirmationModal/TransactionConfirmationModalMod.tsx b/src/custom/components/TransactionConfirmationModal/TransactionConfirmationModalMod.tsx
@@ -47,6 +47,26 @@ const Wrapper = styled.div`
   display: flex; /* MOD */
   flex-flow: column nowrap; /* MOD */
   overflow-y: auto; /* MOD */
+  scrollbar-color: ${({ theme }) => `${theme.card.border} ${theme.card.background2}`};
+  scroll-behavior: smooth;
+
+  &::-webkit-scrollbar {
+    width: 14px;
+    background: ${({ theme }) => `${theme.card.background2}`};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => `${theme.card.border}`};
+    border: 3px solid transparent;
+    border-radius: 14px;
+    background-clip: padding-box;
+  }
+
+  &::-webkit-resizer,
+  &::-webkit-scrollbar-button,
+  &::-webkit-scrollbar-corner {
+    height: 6px;
+  }
 `
 const Section = styled(AutoColumn)<{ inline?: boolean }>`
   padding: ${({ inline }) => (inline ? '0' : '0')};

diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx
@@ -89,6 +89,8 @@ export function colors(darkMode: boolean): Colors {
     textLink: darkMode ? '#ffffff' : '#AE2C00',
     shimmer1: darkMode ? 'rgb(22 56 97 / 20%)' : 'rgb(175 203 218 / 20%)',
     shimmer2: darkMode ? 'rgb(22 56 97 / 50%)' : 'rgb(175 203 218 / 40%)',
+    scrollbarBg: darkMode ? '#01182a' : '#d5e8f0',
+    scrollbarThumb: darkMode ? '#152c3e' : '#adc2ce',
 
     // table styles
     tableHeadBG: darkMode ? '#021E34' : 'rgb(2 30 52 / 15%)',
@@ -115,6 +117,7 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
             : 'linear-gradient(180deg,rgba(164, 211, 227, 1) 5%, rgba(255, 255, 255, 1) 40%)'};
         background-attachment: fixed;
         backdrop-filter: blur(40px);
+        scrollbar-color: ${colorsTheme.scrollbarThumb} ${colorsTheme.scrollbarBg};
       `,
     },
     logo: {
@@ -335,6 +338,20 @@ export const UniThemedGlobalStyle = css`
         1,
         theme.bg1
       )} 100%)`};
+    scrollbar-color: ${({ theme }) => `${theme.card.border} ${theme.card.background2}`};
+    scroll-behavior: smooth;
+
+    &::-webkit-scrollbar {
+      width: 14px;
+      background: ${({ theme }) => `${theme.card.background2}`};
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${({ theme }) => `${theme.card.border}`};
+      border: 3px solid transparent;
+      border-radius: 14px;
+      background-clip: padding-box;
+    }
   }
 `
 

diff --git a/src/custom/theme/styled.d.ts b/src/custom/theme/styled.d.ts
@@ -22,6 +22,8 @@ export interface Colors extends ColorsUniswap {
   disabled: Color
   shimmer1: Color
   shimmer2: color
+  scrollbarBg: Color
+  scrollbarThumb: Color
   tableHeadBG: Color
   tableRowBG: Color
   info: Color