fix: Improved card visibility on dark mode (#870)

Co-authored-by: Noam Gaash <[email protected]>

src/shared/Widget.tsx

@@ -1,9 +1,13 @@
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
+import cn from 'classnames'
+
+import { useTheme } from 'src/layout/ThemeContext'
 
 const Widget = (props: { children: React.ReactNode }) => {
+  const { isDarkTheme } = useTheme()
   return (
-    <Card>
+    <Card className={cn('card', { dark: isDarkTheme })}>
       <CardContent>{props.children} </CardContent>
     </Card>
   )

src/shared/shared.css

@@ -3,3 +3,8 @@
   padding: 20px;
   margin-bottom: 20px;
 }
+
+.card.dark {
+  background: linear-gradient(145deg, #252525, #141414);
+  border: 1px solid #fff;
+}