fix backdrop appearances

src/components/sidebar/SidebarStack/styles.module.scss

@@ -1,12 +1,11 @@
 @import 'src/styles/variables';
 
 .stack {
-  @include blur;
-
   display: flex;
   flex-direction: row-reverse;
   width: auto;
   border-radius: $radius 0 0 $radius;
+  background: $content_bg_backdrop;
 
   @include sidebar_stack_limit {
     & > *:not(:last-child) {

src/components/sidebar/SidebarWrapper/styles.module.scss

@@ -1,12 +1,18 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 @keyframes appear {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes slideIn {
-  100% { transform: translate(0, 0); }
+  100% {
+    transform: translate(0, 0);
+  }
 }
 
 .wrapper {
@@ -17,7 +23,7 @@
   z-index: 26;
   justify-content: flex-end;
   overflow: hidden;
-  animation: appear 0.25s forwards;
+  // animation: appear 0.25s forwards;
 
   & > * {
     z-index: 4;

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -28,9 +28,7 @@ const SettingsSidebar: VFC<SettingsSidebarProps> = ({
   openSidebar,
 }) => {
   const { isUser } = useAuth();
-  const {
-    user: { cover },
-  } = useUser();
+  const cover = false;
 
   const tab = useMemo(
     () => (page ? Math.max(tabs.indexOf(page), 0) : undefined),

src/styles/_mixins.scss

@@ -112,8 +112,7 @@
   @supports ((bla-bla-bla: 4px)) {
     @content;
   }
-  // uncomment if you like blur performance again :-)
-  /*
+
   @supports (
     (-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))
   ) {
@@ -128,10 +127,9 @@
       }
     }
   }
-  */
 }
 
-@mixin blur($color: $content_bg_backdrop, $radius: 15px) {
+@mixin blur($color: $content_bg_backdrop, $radius: 10px) {
   background: $color;
 
   @include can_backdrop {

src/styles/themes/_default.scss

@@ -63,7 +63,7 @@ $_brown: #23201f;
     --content_bg_success: #{transparentize($_wisegreen, 0.7)};
     --content_bg_info: #{transparentize($_blue, 0.5)};
     --content_bg_danger: #{transparentize($_red, 0.5)};
-    --content_bg_backdrop: #{transparentize($_brown, 0.05)};
+    --content_bg_backdrop: #{transparentize($_brown, 0.3)};
 
     // white shades (move to --vars)
     --white: white;