Merge pull request #245 from AdrielIg/bugfix/fix-scroll-shadows

fix shadow on light theme
ferminrp · Apr 25, 2024 · f0c3135 · f0c3135
2 parents 9402721 + 0078e61
commit f0c3135
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/components/Sections/Defi/SelectCoinDialog.tsx b/src/components/Sections/Defi/SelectCoinDialog.tsx
@@ -2,6 +2,7 @@ import React, { type Dispatch, type SetStateAction } from 'react';
 import { Dialog, DialogContent } from '../../SimularInvestment/ui/dialog';
 
 import ChartLineUp from '../../../assets/ChartLineUp';
+import { cn } from '../../../lib/utils';
 import type { BestCoin } from '../../../model/business';
 import { formatPercentage } from '../../../utils/formats';
 import { MAPPING_RETURNS } from '../../../utils/returnsMapping';
@@ -47,14 +48,18 @@ const ContentDialog = ({
   options: BestCoin[];
   onClick: (x: BestCoin) => void;
 }) => {
+  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
   return (
     <div>
       <h4 className='py-3 text-2xl text-gray-800 dark:text-gray-300'>
         Elegí tu moneda
       </h4>
       <ul
         style={{ scrollbarWidth: 'none' }}
-        className='pocketShadow h-[440px] overflow-y-scroll pb-4'
+        className={cn(' h-[440px] overflow-y-scroll pb-4', {
+          pocketShadowDark: isDarkMode,
+          pocketShadowLight: !isDarkMode,
+        })}
       >
         {options
           .sort((a, b) => b.apy - a.apy)

diff --git a/src/components/SimularInvestment/globals.css b/src/components/SimularInvestment/globals.css
@@ -78,7 +78,7 @@ input[type='number'] {
   -moz-appearance: textfield;
   appearance: textfield;
 }
-.pocketShadow {
+.pocketShadowDark {
   background:
     linear-gradient(rgba(17, 24, 39, 1) 1%, rgba(255, 255, 255, 0)),
     linear-gradient(rgba(255, 255, 255, 0), rgba(17, 24, 39, 1) 99%) 0 100%,
@@ -101,3 +101,27 @@ input[type='number'] {
     100% 10px;
   background-attachment: local, local, scroll, scroll;
 }
+
+.pocketShadowLight {
+  background:
+    linear-gradient(rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1)),
+    linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 99%) 0 100%,
+    radial-gradient(
+      farthest-side at 50% 0,
+      rgba(99, 102, 241, 1),
+      rgba(99, 102, 241, 0)
+    ),
+    radial-gradient(
+        farthest-side at 50% 100%,
+        rgba(99, 102, 241, 1),
+        rgba(99, 102, 241, 0)
+      )
+      0 100%;
+  background-repeat: no-repeat;
+  background-size:
+    100% 40px,
+    100% 40px,
+    100% 10px,
+    100% 10px;
+  background-attachment: local, local, scroll, scroll;
+}