chore(toolbar): change icons to close button when activated

4 files changed, 24 insertions, 20 deletions

diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss
index 76af935..24abc43 100644
--- a/src/components/organisms/toolbar/main-nav.module.scss
+++ b/src/components/organisms/toolbar/main-nav.module.scss
@@ -86,3 +86,11 @@
     }
   }
 }
+
+.label {
+  display: flex;
+  place-content: center;
+  place-items: center;
+  width: var(--btn-size, #{fun.convert-px(60)});
+  height: var(--btn-size, #{fun.convert-px(60)});
+}
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 5695348..dc71c49 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,6 +1,6 @@
 import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
-import Label from '@components/atoms/forms/label';
 import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
+import FlippingLabel from '@components/molecules/forms/flipping-label';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import SearchModal, { type SearchModalProps } from '../modals/search-modal';
@@ -52,13 +52,14 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         setValue={setIsActive}
         className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`}
       />
-      <Label
+      <FlippingLabel
+        className={sharedStyles.label}
         htmlFor="search-button"
         aria-label={label}
-        className={`${sharedStyles.label} ${searchStyles.label}`}
+        isActive={isActive}
       >
         <MagnifyingGlass />
-      </Label>
+      </FlippingLabel>
       <SearchModal
         searchPage={searchPage}
         className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index f558eb7..ceb6db4 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,6 +1,6 @@
 import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
-import Label from '@components/atoms/forms/label';
 import Cog from '@components/atoms/icons/cog';
+import FlippingLabel from '@components/molecules/forms/flipping-label';
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import SettingsModal, {
@@ -53,13 +53,14 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
         setValue={setIsActive}
         className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`}
       />
-      <Label
+      <FlippingLabel
+        className={sharedStyles.label}
         htmlFor="settings-button"
         aria-label={label}
-        className={`${sharedStyles.label} ${settingsStyles.label}`}
+        isActive={isActive}
       >
         <Cog />
-      </Label>
+      </FlippingLabel>
       <SettingsModal
         ackeeStorageKey={ackeeStorageKey}
         className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`}
diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
index 20abe01..86b4924 100644
--- a/src/components/organisms/toolbar/toolbar-items.module.scss
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -38,20 +38,14 @@
   --draw-border-color1: var(--color-primary-light);
   --draw-border-color2: var(--color-primary-lighter);
 
-  display: flex;
-  place-content: center;
-  place-items: center;
-  width: var(--btn-size);
-  height: var(--btn-size);
-  padding: var(--spacing-2xs);
-
-  &:hover,
-  &:focus {
-    @extend %draw-borders;
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      border-radius: fun.convert-px(5);
+    }
   }
 
-  &:focus {
-    color: var(--color-primary-light);
+  &:hover {
+    @extend %draw-borders;
   }
 
   &:active {