fix: scrollable

Author: LuizAsFight

packages/app-portal/src/systems/Core/components/Layout.tsx

@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet';
 import { META_DESC, META_OGIMG } from '~/constants';
 import { OverlayDialog } from '~/systems/Overlay';
 
-import { coreStyles } from '../styles';
+import { scrollableTwClasses } from '../styles';
 
 import { Box, Flex, cx } from '@fuels/ui';
 import { tv } from 'tailwind-variants';
@@ -57,9 +57,7 @@ export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
         <Header />
         <OverlayDialog />
         <Box className={classes.scrollView()}>
-          <Box>{children}</Box>
-          {/* TODO: add scrollable content class */}
-          {/* <Box className={coreStyles.scrollableContent()}>{children}</Box> */}
+          <Box className={classes.scrollViewContent()}>{children}</Box>
         </Box>
       </Flex>
     </>
@@ -71,13 +69,8 @@ Layout.Content = Content;
 const styles = tv({
   slots: {
     root: 'w-screen h-screen overflow-hidden absolute',
-    // TODO: add scrollable in scrollView
-    scrollView: 'flex-1',
+    scrollView: ['flex-1', scrollableTwClasses.scrollableClasses],
+    scrollViewContent: scrollableTwClasses.scrollableContentClasses,
     content: 'p-4 pt-16 max-w-[955px] mx-auto',
-
-    // scrollView: cssObj({
-    //   flex: 1,
-    //   ...coreStyles.scrollable(),
-    // }),
   },
 });

packages/app-portal/src/systems/Core/styles/core.ts

@@ -1,39 +1,7 @@
-import { cssObj } from '@fuel-ui/css';
+import './scrollbar.css';
 
-export const SCROLL_WIDTH = '14px';
-
-export const scrollableContent = cssObj({
-  width: `calc(100vw - ${SCROLL_WIDTH})`,
-  maxWidth: `calc(100vw - ${SCROLL_WIDTH})`,
-  paddingLeft: SCROLL_WIDTH,
-  boxSizing: 'border-box',
-});
-
-export const scrollable = (regularColor = '$gray8', hoverColor = '$gray10') =>
-  cssObj({
-    overflowY: 'overlay',
-    scrollBehavior: 'smooth',
-
-    '&::-webkit-scrollbar': {
-      width: SCROLL_WIDTH,
-      backgroundColor: 'transparent',
-    },
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: 'transparent',
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: regularColor,
-      opacity: 0.5,
-      border: '4px solid transparent',
-      borderRadius: '12px',
-      backgroundClip: 'content-box',
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: hoverColor,
-    },
-  });
-
-export const coreStyles = {
-  scrollableContent,
-  scrollable,
+export const scrollableTwClasses = {
+  scrollableContentClasses:
+    'w-[calc(100vw_-_10px)] max-w-[calc(100vw_-_10px)] pl-[10px] box-border',
+  scrollableClasses: 'overflow-y-scroll scroll-smooth custom-scrollbar',
 };

packages/app-portal/src/systems/Core/styles/scrollbar.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  .custom-scrollbar {
+    &::-webkit-scrollbar {
+      @apply w-[10px] bg-transparent;
+    }
+    &::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      @apply bg-gray-8 opacity-50 border-4 border-transparent rounded-[12px] bg-clip-content;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      @apply bg-gray-10;
+    }
+  }
+}