chore: replace theme button with settings

I plan to add more user settings so theme options should be inside
settings.

2 files changed, 46 insertions, 14 deletions

diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
index 1814b99..45b24d8 100644
--- a/src/components/Toolbar/Toolbar.module.scss
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -15,6 +15,13 @@
   left: 0;
   z-index: 5;
   background: var(--color-bg);
+  border-top: fun.convert-px(4) solid;
+  border-image: radial-gradient(
+      ellipse at top,
+      var(--color-primary-lighter) 20%,
+      var(--color-primary) 100%
+    )
+    1;
   box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
     var(--color-shadow);
 
@@ -31,6 +38,7 @@
       gap: var(--spacing-sm);
       width: auto;
       background: inherit;
+      border: none;
       box-shadow: none;
       position: relative;
       left: unset;
@@ -40,13 +48,21 @@
   }
 }
 
-.search {
+.menu {
   padding: var(--spacing-md);
   position: absolute;
   bottom: 100%;
   left: 0;
   right: 0;
   background: var(--color-bg);
+  border-top: fun.convert-px(4) solid;
+  border-bottom: fun.convert-px(4) solid;
+  border-image: radial-gradient(
+      ellipse at top,
+      var(--color-primary-lighter) 20%,
+      var(--color-primary) 100%
+    )
+    1;
   box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3)
     fun.convert-px(-1) var(--color-shadow);
   transition: all 0.7s ease-in-out 0s;
@@ -68,7 +84,13 @@
       right: unset;
       top: 120%;
       bottom: unset;
-      background: var(--color-bg-opacity);
+      border: fun.convert-px(4) solid;
+      border-image: radial-gradient(
+          ellipse at top,
+          var(--color-primary-lighter) 20%,
+          var(--color-primary) 100%
+        )
+        1;
       box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(3)
         fun.convert-px(1) var(--color-shadow);
       transform-origin: 50% -200%;
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 615dfd5..771efa1 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -1,52 +1,62 @@
-import { ButtonSearch } from '@components/Buttons';
+import { ButtonToolbar } from '@components/Buttons';
 import MainNav from '@components/MainNav/MainNav';
 import SearchForm from '@components/SearchForm/SearchForm';
-import ThemeToggle from '@components/ThemeToggle/ThemeToggle';
+import Settings from '@components/Settings/Settings';
 import { useEffect, useState } from 'react';
 import styles from './Toolbar.module.scss';
 
 const Toolbar = () => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
-  const [isThemeOpened, setIsThemeOpened] = useState<boolean>(false);
+  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
 
   useEffect(() => {
     if (isNavOpened) {
       setIsSearchOpened(false);
-      setIsThemeOpened(false);
+      setIsSettingsOpened(false);
     }
   }, [isNavOpened]);
 
   useEffect(() => {
     if (isSearchOpened) {
       setIsNavOpened(false);
-      setIsThemeOpened(false);
+      setIsSettingsOpened(false);
     }
   }, [isSearchOpened]);
 
   useEffect(() => {
-    if (isThemeOpened) {
+    if (isSettingsOpened) {
       setIsNavOpened(false);
       setIsSearchOpened(false);
     }
-  }, [isThemeOpened]);
+  }, [isSettingsOpened]);
 
-  const searchClasses = `${styles.search} ${
-    isSearchOpened ? styles['search--opened'] : styles['search--closed']
+  const searchClasses = `${styles.menu} ${
+    isSearchOpened ? styles['menu--opened'] : styles['menu--closed']
+  }`;
+
+  const settingsClasses = `${styles.menu} ${
+    isSettingsOpened ? styles['menu--opened'] : styles['menu--closed']
   }`;
 
   return (
     <div className={styles.wrapper}>
       <MainNav isOpened={isNavOpened} setIsOpened={setIsNavOpened} />
-      <ButtonSearch
+      <ButtonToolbar
+        type="search"
         isActivated={isSearchOpened}
         setIsActivated={setIsSearchOpened}
       />
       <div className={searchClasses}>
         <SearchForm isOpened={isSearchOpened} />
       </div>
-      <div>
-        <ThemeToggle />
+      <ButtonToolbar
+        type="settings"
+        isActivated={isSettingsOpened}
+        setIsActivated={setIsSettingsOpened}
+      />
+      <div className={settingsClasses}>
+        <Settings />
       </div>
     </div>
   );