feat: remove `backdrop-filter` to improve perf (#3506)

* feat: remove `backdrop-filter` to improve perf

* remove `backdrop-filter` from Modal

src/components/Island.scss

@@ -2,7 +2,6 @@
   .Island {
     --padding: 0;
     background-color: var(--island-bg-color);
-    backdrop-filter: saturate(100%) blur(10px);
     box-shadow: var(--shadow-island);
     border-radius: 4px;
     padding: calc(var(--padding) * var(--space-factor));

src/components/Modal.scss

@@ -26,8 +26,7 @@
     right: 0;
     bottom: 0;
     z-index: 1;
-    background-color: transparentize($oc-black, 0.7);
+    background-color: transparentize($oc-black, 0.3);
-    backdrop-filter: blur(2px);
   }
 
   .Modal__content {
@@ -45,7 +44,6 @@
 
     // for modals, reset blurry bg
     background: var(--island-bg-color);
-    backdrop-filter: none;
 
     border: 1px solid var(--dialog-border-color);
     box-shadow: 0 2px 10px transparentize($oc-black, 0.75);

src/css/theme.scss

@@ -18,7 +18,7 @@
   --input-border-color: #{$oc-gray-3};
   --input-hover-bg-color: #{$oc-gray-1};
   --input-label-color: #{$oc-gray-7};
-  --island-bg-color: rgba(255, 255, 255, 0.9);
+  --island-bg-color: rgba(255, 255, 255, 0.96);
   --keybinding-color: #{$oc-gray-5};
   --link-color: #{$oc-blue-7};
   --overlay-bg-color: #{transparentize($oc-white, 0.12)};
@@ -60,7 +60,7 @@
     --input-border-color: #2e2e2e;
     --input-hover-bg-color: #181818;
     --input-label-color: #{$oc-gray-2};
-    --island-bg-color: #1e1e1e;
+    --island-bg-color: rgba(30, 30, 30, 0.98);
     --keybinding-color: #{$oc-gray-6};
     --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
     --popup-bg-color: #2c2c2c;