fix: update faded-bottom color with css variable (#139)

Replace hard-coded color with css variable in
faded-bottom utility class. Fix broken faded style
in setting content.

Closes #134

Author: satnaing

src/features/settings/components/content-section.tsx

@@ -1,4 +1,3 @@
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 
 interface ContentSectionProps {
@@ -19,9 +18,9 @@ export default function ContentSection({
         <p className='text-muted-foreground text-sm'>{desc}</p>
       </div>
       <Separator className='my-4 flex-none' />
-      <ScrollArea className='faded-bottom h-full w-full scroll-smooth pr-4 pb-28'>
+      <div className='faded-bottom h-full w-full overflow-y-auto scroll-smooth pr-4 pb-12'>
         <div className='-mx-1 px-1.5 lg:max-w-xl'>{children}</div>
-      </ScrollArea>
+      </div>
     </div>
   )
 }

src/index.css

@@ -150,7 +150,7 @@
 }
 
 @utility faded-bottom {
-  @apply after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:hidden after:h-32 after:w-full after:bg-[linear-gradient(180deg,_transparent_10%,_white_70%)] md:after:block dark:after:bg-[linear-gradient(180deg,_transparent_10%,_black_70%)];
+  @apply after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:hidden after:h-32 after:w-full after:bg-[linear-gradient(180deg,_transparent_10%,_var(--background)_70%)] md:after:block;
 }
 
 /* styles.css */