diff --git a/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx b/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx index e31aebb..2f96a20 100644 --- a/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx +++ b/src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx @@ -30,8 +30,8 @@ const Description = (props: Props) => { justifyContent: 'center', position: 'absolute', - bgcolor: 'background.default', - opacity: 0.9, + backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)', + backdropFilter: 'blur(8px)', bottom: '0', borderTopStyle: 'solid', @@ -56,8 +56,9 @@ const Description = (props: Props) => { sx={theme => ({ display: 'flex', position: 'absolute', - bgcolor: 'background.default', - opacity: 0.9, + + backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)', + backdropFilter: 'blur(8px)', top: '0', ml: 'auto', borderBottomWidth: theme.spacing(0.5), @@ -85,8 +86,8 @@ const Description = (props: Props) => { height: '102%', width: '28em', position: 'absolute', - bgcolor: 'background.default', - opacity: 0.9, + backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)', + backdropFilter: 'blur(8px)', right: '0', borderLeftWidth: theme.spacing(0.5), // borderLeftWidth: '0.35em', @@ -107,8 +108,8 @@ const Description = (props: Props) => { height: '102%', width: '28em', position: 'absolute', - bgcolor: 'background.default', - opacity: 0.9, + backgroundColor: theme.palette.mode === 'dark' ? 'hsla(230, 18%, 13%, 0.85)' : 'hsla(0, 0%, 100%, 0.75)', + backdropFilter: 'blur(8px)', left: '0', borderRightWidth: theme.spacing(0.5), // borderLeftWidth: '0.35em',