From fc701407187bb87ce982baeb701c3ac3ef1c54cf Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 3 Apr 2024 21:53:11 +0300
Subject: [PATCH] Add blur effects

---
 .../frontend/src/components/ui/Modal.tsx      |  3 ++-
 .../EditorTermGraph/GraphToolbar.tsx          |  2 +-
 rsconcept/frontend/src/styling/styles.css     | 19 ++++++++++++++-----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/rsconcept/frontend/src/components/ui/Modal.tsx b/rsconcept/frontend/src/components/ui/Modal.tsx
index 74c44252..a8b86137 100644
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@@ -57,7 +57,8 @@ function Modal({
 
   return (
     <>
-      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'clr-modal-backdrop')} />
+      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-blur')} />
+      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop')} />
       <motion.div
         ref={ref}
         className={clsx(
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
index be328e47..8610bcb5 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
@@ -53,7 +53,7 @@ function GraphToolbar({
   return (
     <Overlay
       position='top-0 pt-1 right-1/2 translate-x-1/2'
-      className='flex flex-col items-center bg-opacity-10 clr-app'
+      className='flex flex-col items-center rounded-b-2xl cc-blur'
     >
       <div className='cc-icons'>
         <MiniButton
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index e9426c6e..52e87717 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -25,10 +25,6 @@
 }
 
 @layer components {
-  .clr-modal-backdrop {
-    opacity: 0.75;
-  }
-
   :is(
       .clr-border,
       .border,
@@ -57,7 +53,7 @@
     }
   }
 
-  :is(.clr-app, .clr-footer, .clr-modal-backdrop, .clr-btn-nav, .clr-input:disabled) {
+  :is(.clr-app, .clr-footer, .cc-modal-backdrop, .clr-btn-nav, .clr-input:disabled) {
     background-color: var(--cl-bg-100);
     .dark & {
       background-color: var(--cd-bg-100);
@@ -199,6 +195,15 @@
     }
   }
 
+  .cc-modal-blur {
+    opacity: 0.3;
+    backdrop-filter: blur(2px);
+  }
+
+  .cc-modal-backdrop {
+    opacity: 0.5;
+  }
+
   .cc-label {
     @apply text-sm font-medium cursor-default select-text whitespace-nowrap;
   }
@@ -210,4 +215,8 @@
   .cc-icons {
     @apply flex gap-1;
   }
+
+  .cc-blur {
+    backdrop-filter: blur(3px);
+  }
 }