fix: mui shadows usage (#1614)

jumperexchange · Jan 9, 2025 · 21fdad2 · 21fdad2
1 parent 12a4fae
commit 21fdad2
Show file tree

Hide file tree

Showing 25 changed files with 142 additions and 148 deletions.
diff --git a/src/app/ui/bridge/BridgePage.style.ts b/src/app/ui/bridge/BridgePage.style.ts
@@ -1,7 +1,7 @@
 'use client';
 
-import type { BoxProps } from '@mui/system';
-import { Box, styled } from '@mui/system';
+import type { BoxProps } from '@mui/material';
+import { Box, styled } from '@mui/material';
 
 export const BridgePageContainer = styled(Box)<BoxProps>(({ theme }) => ({
   color: theme.palette.text.primary,
@@ -12,7 +12,7 @@ export const BridgePageContainer = styled(Box)<BoxProps>(({ theme }) => ({
   borderRadius: 32,
   backgroundColor: theme.palette.bgSecondary.main,
   transition: 'background-color 250ms',
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   display: 'flex',
   textDecoration: 'none',
   flexDirection: 'column',

diff --git a/src/components/Blog/BlogArticlesCollections/BlogArticlesCollections.style.ts b/src/components/Blog/BlogArticlesCollections/BlogArticlesCollections.style.ts
@@ -18,7 +18,7 @@ export const BlogArticlesCollectionsContainer = styled(Grid)(({ theme }) => ({
   marginBottom: theme.spacing(14.5),
   padding: theme.spacing(2),
   margin: theme.spacing(6, 2, 0),
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   ':last-of-type': {
     marginBottom: theme.spacing(6),
   },

diff --git a/src/components/Blog/BlogCarousel/BlogCarousel.style.ts b/src/components/Blog/BlogCarousel/BlogCarousel.style.ts
@@ -7,7 +7,7 @@ export const BlogCarouselContainer = styled(Box)(({ theme }) => ({
   borderRadius: '32px',
   padding: theme.spacing(2),
   margin: theme.spacing(6, 2, 0),
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     margin: theme.spacing(2, 8, 0),
     padding: theme.spacing(3),

diff --git a/src/components/Blog/FeaturedArticle/FeaturedArticle.style.ts b/src/components/Blog/FeaturedArticle/FeaturedArticle.style.ts
@@ -10,7 +10,7 @@ export const FeaturedArticleLink = styled(Link)<BoxProps>(({ theme }) => ({
   borderRadius: 32,
   backgroundColor: theme.palette.bgSecondary.main,
   transition: 'background-color 250ms',
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   display: 'grid',
   gridTemplateRows: '1fr',
   textDecoration: 'none',

diff --git a/src/components/FeatureCards/FeatureCard.style.tsx b/src/components/FeatureCards/FeatureCard.style.tsx
@@ -36,7 +36,7 @@ export const FCard = styled(MuiCard, {
     isDarkCard || theme.palette.mode === 'dark' ? '#20223D' : '#FFFFFF'
   } 506px 349px)`,
   backgroundSize: 'contain',
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   ':last-child': {
     marginBottom: 0,
   },

diff --git a/src/components/JoinDiscordBanner/JoinDiscordBanner.style.ts b/src/components/JoinDiscordBanner/JoinDiscordBanner.style.ts
@@ -15,7 +15,7 @@ export const DiscordBannerLink = styled(Link)<BoxProps>(({ theme }) => ({
   gap: theme.spacing(1.5),
   alignItems: 'center',
   backgroundColor: theme.palette.bgSecondary.main,
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   borderRadius: '32px',
   cursor: 'pointer',
   padding: theme.spacing(6),

diff --git a/src/components/Leaderboard/Leaderboard.style.ts b/src/components/Leaderboard/Leaderboard.style.ts
@@ -1,13 +1,13 @@
 import type { Breakpoint } from '@mui/material';
-import { alpha, Box, Divider, Stack, styled, Typography } from '@mui/material';
+import { alpha, Box, Divider, Stack, styled } from '@mui/material';
 
 export const LeaderboardContainer = styled(Box)(({ theme }) => ({
   color: theme.palette.text.primary,
   backgroundColor: theme.palette.bgSecondary.main,
   borderRadius: '32px',
   width: '100%',
   padding: theme.spacing(4, 2),
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     padding: theme.spacing(4),
   },
@@ -40,7 +40,7 @@ export const LeaderboardEntryStack = styled(Stack)(({ theme }) => ({
   padding: theme.spacing(0, 1),
   borderRadius: '24px',
   marginTop: theme.spacing(3),
-  boxShadow: theme.palette.shadowLight.main,
+  boxShadow: theme.shadows[2],
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     padding: theme.spacing(0, 3),
   },

diff --git a/src/components/Leaderboard/LeaderboardEntry.style.ts b/src/components/Leaderboard/LeaderboardEntry.style.ts
@@ -37,7 +37,7 @@ export const LeaderboardEntryWrapper = styled(Box, {
           ? theme.palette.white.main
           : theme.palette.bgTertiary.main,
       borderRadius: '24px',
-      boxShadow: theme.palette.shadowLight.main,
+      boxShadow: theme.shadows[2],
       marginTop: theme.spacing(3),
       padding: theme.spacing(2, 1),
       [theme.breakpoints.up('sm' as Breakpoint)]: {

diff --git a/src/components/MultisigConfirmationModal/MultisigConfirmationModal.style.ts b/src/components/MultisigConfirmationModal/MultisigConfirmationModal.style.ts
@@ -28,7 +28,7 @@ export const MultisigConfirmationModalContainer = styled(Box)(({ theme }) => ({
     theme.palette.mode === 'dark'
       ? theme.palette.surface2.main
       : theme.palette.surface1.main,
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
 }));
 
 export const MultisigConfirmationModalButton = styled(Button)(({ theme }) => ({

diff --git a/src/components/MultisigConnectedAlert/MultisigConnectedAlert.style.ts b/src/components/MultisigConnectedAlert/MultisigConnectedAlert.style.ts
@@ -26,7 +26,7 @@ export const MultisigConnectedAlertContainer = styled(Box)(({ theme }) => ({
     theme.palette.mode === 'dark'
       ? theme.palette.surface2.main
       : theme.palette.surface1.main,
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
 }));
 
 export const MultisigConnectedAlertButton = styled(Button)(({ theme }) => ({

diff --git a/src/components/ProfilePage/AddressBox/AddressBox.style.ts b/src/components/ProfilePage/AddressBox/AddressBox.style.ts
@@ -19,7 +19,7 @@ export const AddressBoxContainer = styled(Box, {
   paddingBottom: theme.spacing(1),
   width: '100%',
   minHeight: 200,
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
 
   ...(!imgUrl && {
     background: `linear-gradient(to bottom, ${theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.accent1Alt.main} 50%, ${theme.palette.mode === 'light' ? theme.palette.grey[100] : 'transparent'} 50%)`,

diff --git a/src/components/ProfilePage/AddressCard/AddressCard.style.ts b/src/components/ProfilePage/AddressCard/AddressCard.style.ts
@@ -27,7 +27,7 @@ export const AddressBoxContainer = styled(Box)(({ theme }) => ({
   overflow: 'hidden',
   position: 'relative',
   width: '100%',
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   minHeight: 256,
 
   [theme.breakpoints.up('lg')]: {

diff --git a/src/components/ProfilePage/Common/Pagination.style.ts b/src/components/ProfilePage/Common/Pagination.style.ts
@@ -45,7 +45,7 @@ export const PaginationButton = styled(Button, {
   padding: theme.spacing(1),
   borderRadius: '16px',
   ...(activePage && {
-    boxShadow: theme.palette.shadowLight.main,
+    boxShadow: theme.shadows[2],
     '&:hover': {
       backgroundColor: theme.palette.white.main,
     },

diff --git a/src/components/ProfilePage/LeaderboardCard/LeaderboardCard.style.ts b/src/components/ProfilePage/LeaderboardCard/LeaderboardCard.style.ts
@@ -15,7 +15,7 @@ export const CardContainer = styled(Box)(({ theme }) => ({
   borderRadius: '16px',
   width: '100%',
   padding: theme.spacing(2),
-  boxShadow: theme.palette.shadowLight.main,
+  boxShadow: theme.shadows[2],
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     padding: theme.spacing(3),
   },

diff --git a/src/components/ProfilePage/ProfilePage.style.ts b/src/components/ProfilePage/ProfilePage.style.ts
@@ -41,7 +41,7 @@ export const ProfileInfoBox = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.bgSecondary.main,
   borderRadius: '24px',
   flexDirection: 'column',
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   padding: theme.spacing(2),
 
   [theme.breakpoints.up('sm' as Breakpoint)]: {

diff --git a/src/components/ProfilePage/QuestCard/QuestCard.style.ts b/src/components/ProfilePage/QuestCard/QuestCard.style.ts
@@ -25,7 +25,7 @@ export const QuestCardMainBox = styled(Box)(({ theme }) => ({
   minWidth: 288,
   textAlign: 'center',
   transition: 'background-color 250ms',
-  boxShadow: theme.palette.shadowLight.main,
+  boxShadow: theme.shadows[2],
 }));
 
 export const QuestCardImage = styled(Image)(({ theme }) => ({

diff --git a/src/components/ProfilePage/QuestsCompletedCarousel/QuestsCompletedCarousel.style.ts b/src/components/ProfilePage/QuestsCompletedCarousel/QuestsCompletedCarousel.style.ts
@@ -8,7 +8,7 @@ export const CompletedQuestContainer = styled(Box)(({ theme }) => ({
       : alpha(theme.palette.white.main, 0.08),
   padding: theme.spacing(2),
   borderRadius: '32px',
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     margin: theme.spacing(8, 8, 0),
     padding: theme.spacing(6, 3),

diff --git a/src/components/ProfilePage/QuestsOverview/QuestsOverview.style.ts b/src/components/ProfilePage/QuestsOverview/QuestsOverview.style.ts
@@ -12,7 +12,7 @@ export const QuestsOverviewContainer = styled(Box)(({ theme }) => ({
   borderRadius: '32px',
   paddingY: theme.spacing(2),
   paddingX: theme.spacing(1),
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   marginTop: theme.spacing(4),
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     padding: theme.spacing(3),

diff --git a/src/components/ProfilePage/Rewards/RewardsCarousel.style.ts b/src/components/ProfilePage/Rewards/RewardsCarousel.style.ts
@@ -10,7 +10,7 @@ import {
 export const RewardsCarouselContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.bgSecondary.main,
   borderRadius: '24px',
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   display: 'flex',
   width: '100%',
   justifyContent: 'start',

diff --git a/...onents/Superfest/ActiveSuperfestMissionsCarousel/ActiveSuperfestMissionsCarousel.style.ts b/...onents/Superfest/ActiveSuperfestMissionsCarousel/ActiveSuperfestMissionsCarousel.style.ts
@@ -7,7 +7,7 @@ export const SuperfestCarouselContainer = styled(Box)(({ theme }) => ({
   borderRadius: '12px',
   width: '90%',
   padding: theme.spacing(2),
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     margin: theme.spacing(2, 4, 0),
     padding: theme.spacing(3),

diff --git a/src/components/Superfest/AvailableMissionsList/AvailableMissionsList.style.ts b/src/components/Superfest/AvailableMissionsList/AvailableMissionsList.style.ts
@@ -6,7 +6,7 @@ export const AvailableMissionsContainer = styled(Box)(({ theme }) => ({
   padding: theme.spacing(2),
   borderRadius: '12px',
   width: '90%',
-  boxShadow: theme.palette.shadow?.main,
+  boxShadow: theme.shadows[1],
   [theme.breakpoints.down('md' as Breakpoint)]: {
     marginTop: '64px',
   },

diff --git a/src/components/Superfest/NFTClaimingBox/NFTClaimingBox.style.ts b/src/components/Superfest/NFTClaimingBox/NFTClaimingBox.style.ts
@@ -7,7 +7,7 @@ export const NFTClaimingContainer = styled(Box)(({ theme }) => ({
   padding: theme.spacing(2),
   borderRadius: '12px',
   width: '90%',
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   [theme.breakpoints.down('md' as Breakpoint)]: {
     marginTop: '64px',
   },

diff --git a/src/components/WelcomeScreen/ToolModal/ToolModal.style.ts b/src/components/WelcomeScreen/ToolModal/ToolModal.style.ts
@@ -28,7 +28,7 @@ export const ModalContainer = styled(Box)<ModalContainerProps>(({ theme }) => ({
   margin: 'auto',
   paddingBottom: theme.spacing(3),
   borderRadius: '12px',
-  boxShadow: theme.palette.shadow.main,
+  boxShadow: theme.shadows[1],
   width: `calc( 100% - ${theme.spacing(3)})`,
   maxWidth: 640,
   maxHeight: '85%',

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -26,10 +26,6 @@ declare module '@mui/material/styles' {
     borderRadiusSecondary: number;
   }
 
-  interface Theme {
-    shape: Shape;
-  }
-
   interface ThemeOptions {
     shape?: Partial<Shape>;
   }
@@ -54,8 +50,6 @@ declare module '@mui/material/styles' {
       main: string;
       hover: string;
     };
-    shadow: Palette['primary'];
-    shadowLight: Palette['primary'];
     alphaDark100: Palette['primary'];
     alphaDark200: Palette['primary'];
     alphaDark300: Palette['primary'];
@@ -176,8 +170,6 @@ declare module '@mui/material/Button' {
     bgSecondary: true;
     bgTertiary: true;
     bgQuaternary: true;
-    shadow: true;
-    shadowLight: true;
     alphaDark100: true;
     alphaDark200: true;
     alphaDark300: true;
@@ -406,9 +398,6 @@ const themeCustomized = createTheme({
       light: '#000000',
       dark: '#000000',
     },
-    shadowLight: {
-      main: '0px 2px 8px 0px rgba(0, 0, 0, 0.04)',
-    },
     alphaDark100: {
       main: 'rgba(0, 0, 0, 0.04)',
     },
@@ -679,9 +668,6 @@ export const lightTheme = createTheme(
         hover: alpha('#653BA3', 0.12),
         main: alpha('#31007A', 0.08),
       },
-      shadow: {
-        main: '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08)',
-      },
       primary: {
         light: '#31007A',
         main: '#31007A',
@@ -748,6 +734,12 @@ export const lightTheme = createTheme(
         dark: '#7B61FF',
       },
     },
+    shadows: [
+      'none',
+      '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08)',
+      '0px 2px 8px 0px rgba(0, 0, 0, 0.04)',
+      ...themeBase.shadows.slice(3),
+    ],
   }),
 );
 
@@ -804,9 +796,6 @@ export const darkTheme = createTheme(
         hover: alpha('#653BA3', 0.56),
         main: alpha('#653BA3', 0.42),
       },
-      shadow: {
-        main: '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.16)',
-      },
       primary: {
         light: '#653BA3',
         main: '#653BA3',
@@ -873,5 +862,11 @@ export const darkTheme = createTheme(
         dark: '#B8ADFF',
       },
     },
+    shadows: [
+      'none',
+      '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.16)',
+      '0px 2px 8px 0px rgba(0, 0, 0, 0.04)',
+      ...themeBase.shadows.slice(3),
+    ],
   }),
 );