Merge pull request #687 from m-tartari/refactor/toolbar/bg-dark

♻️ refactor: add transparency to toolbar and project spotlight background

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',

src/components/molecules/Toolbar/index.tsx

@@ -109,8 +109,13 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ drawerWidth = 240, window
         elevation={theme.palette.mode === 'light' ? 1 : 0}
         {...props}
         sx={{
-          backgroundColor: trigger ? 'background.paper' : 'transparent',
+          backgroundColor: 'transparent',
           '@media print': { backgroundColor: 'background.default' },
+          ...(trigger && {
+            backgroundColor: 'hsla(230, 18%, 13%, 0.75)',
+            backdropFilter: 'blur(8px)',
+            boxShadow: theme.shadows[4],
+          }),
           ...(theme.palette.mode === 'light' && {
             backgroundColor: 'hsla(0, 0%, 100%, 0.75)',
             backdropFilter: 'blur(8px)',