chore: improve search box and add button interactions on hover/focus

2 files changed, 51 insertions, 6 deletions

diff --git a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
index a2e493a..4725cad 100644
--- a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
+++ b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
@@ -1,8 +1,19 @@
+import { ReactNode } from 'react';
 import styles from '../Buttons.module.scss';
 
-const ButtonSubmit: React.FunctionComponent = ({ children }) => {
+type Modifier = 'search' | 'submit';
+
+const ButtonSubmit = ({
+  children,
+  modifier = 'submit',
+}: {
+  children: ReactNode;
+  modifier?: Modifier;
+}) => {
+  const withModifier = modifier === 'search' ? styles.search : styles.primary;
+
   return (
-    <button type="submit" className={`${styles.btn} ${styles.primary}`}>
+    <button type="submit" className={`${styles.btn} ${withModifier}`}>
       {children}
     </button>
   );
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index ea85c9b..2973b1f 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -1,4 +1,5 @@
 @use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
 
 .btn {
   display: block;
@@ -176,8 +177,7 @@
   }
 }
 
-.toolbar,
-.theme {
+.toolbar {
   display: block;
   width: var(--btn-size);
   height: var(--btn-size);
@@ -185,6 +185,16 @@
   background: none;
   border: none;
   font-size: var(--font-size-md);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      &:hover,
+      &:focus {
+        transform: rotate(360deg);
+        transition: all 0.8s ease-in-out 0s;
+      }
+    }
+  }
 }
 
 .icon {
@@ -220,8 +230,7 @@
   z-index: 10;
 }
 
-.toolbar--activated,
-.theme--opened {
+.toolbar--activated {
   .icon {
     transform: rotateY(180deg);
   }
@@ -234,3 +243,28 @@
     transform: scale(1) rotateY(180deg);
   }
 }
+
+.search {
+  background: transparent;
+  margin-left: calc(var(--btn-size) * -1);
+  z-index: 5;
+  transition: all 0.3s ease-in-out 0s;
+
+  svg {
+    transform: scale(0.85);
+    transition: all 0.3s ease-in-out 0s;
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      transform: scale(0.85) rotate(20deg) translateY(3px);
+    }
+  }
+
+  &:active {
+    svg {
+      transform: scale(0.7);
+    }
+  }
+}