From 15fd9f4a6ecf947c7648c6b7865b97c40124fde1 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 14 Apr 2022 19:12:54 +0200
Subject: chore: add a MainNav component

---
 .../organisms/toolbar/main-nav.module.scss         | 88 ++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 src/components/organisms/toolbar/main-nav.module.scss

(limited to 'src/components/organisms/toolbar/main-nav.module.scss')

diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss
new file mode 100644
index 0000000..2aac85d
--- /dev/null
+++ b/src/components/organisms/toolbar/main-nav.module.scss
@@ -0,0 +1,88 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.modal {
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "md") {
+      padding: var(--spacing-2xs);
+      background: var(--color-bg-secondary);
+      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-dark);
+    }
+
+    @include mix.dimensions("sm", "md") {
+      border-left: fun.convert-px(4) solid;
+      border-right: fun.convert-px(4) solid;
+    }
+
+    @include mix.dimensions("md") {
+      top: unset;
+    }
+  }
+}
+
+.modal__list {
+  display: flex;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm", "md") {
+      flex-flow: column;
+    }
+  }
+}
+
+.checkbox {
+  &:checked {
+    ~ .label .icon {
+      background: transparent;
+      border: transparent;
+
+      &::before {
+        top: 0;
+        transform-origin: 50% 50%;
+        transform: rotate(-45deg);
+      }
+
+      &::after {
+        bottom: 0;
+        transform-origin: 50% 50%;
+        transform: rotate(45deg);
+      }
+    }
+  }
+
+  &:not(:checked) {
+    @include mix.media("screen") {
+      @include mix.dimensions("md") {
+        ~ .modal {
+          opacity: 1;
+          visibility: visible;
+          transform: none;
+        }
+      }
+    }
+  }
+}
+
+.item {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      .checkbox,
+      .label {
+        display: none;
+      }
+
+      .modal {
+        position: relative;
+      }
+    }
+  }
+}
-- 
cgit v1.2.3


From 894621cbf347485010de612b0f7fec74bdd26778 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 14 Apr 2022 22:30:45 +0200
Subject: chore: add a Toolbar component

---
 src/components/organisms/layout/footer.module.scss |   2 +
 .../organisms/toolbar/main-nav.module.scss         | 122 ++++++++++-----------
 .../organisms/toolbar/toolbar-items.module.scss    |   9 +-
 .../organisms/toolbar/toolbar.module.scss          |  80 ++++++++++++++
 .../organisms/toolbar/toolbar.stories.tsx          |  26 +++++
 src/components/organisms/toolbar/toolbar.test.tsx  |  16 +++
 src/components/organisms/toolbar/toolbar.tsx       |  51 +++++++++
 7 files changed, 243 insertions(+), 63 deletions(-)
 create mode 100644 src/components/organisms/toolbar/toolbar.module.scss
 create mode 100644 src/components/organisms/toolbar/toolbar.stories.tsx
 create mode 100644 src/components/organisms/toolbar/toolbar.test.tsx
 create mode 100644 src/components/organisms/toolbar/toolbar.tsx

(limited to 'src/components/organisms/toolbar/main-nav.module.scss')

diff --git a/src/components/organisms/layout/footer.module.scss b/src/components/organisms/layout/footer.module.scss
index a809d3c..c180e86 100644
--- a/src/components/organisms/layout/footer.module.scss
+++ b/src/components/organisms/layout/footer.module.scss
@@ -11,6 +11,8 @@
 
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
+      --toolbar-size: 0px;
+
       flex-flow: row wrap;
       font-size: var(--font-size-sm);
     }
diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss
index 2aac85d..76af935 100644
--- a/src/components/organisms/toolbar/main-nav.module.scss
+++ b/src/components/organisms/toolbar/main-nav.module.scss
@@ -1,87 +1,87 @@
 @use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/mixins" as mix;
 
-.modal {
+.item {
   @include mix.media("screen") {
-    @include mix.dimensions(null, "md") {
-      padding: var(--spacing-2xs);
-      background: var(--color-bg-secondary);
-      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-dark);
-    }
-
-    @include mix.dimensions("sm", "md") {
-      border-left: fun.convert-px(4) solid;
-      border-right: fun.convert-px(4) solid;
-    }
-
     @include mix.dimensions("md") {
-      top: unset;
-    }
-  }
-}
-
-.modal__list {
-  display: flex;
+      .checkbox,
+      .label {
+        display: none;
+      }
 
-  @include mix.media("screen") {
-    @include mix.dimensions("sm", "md") {
-      flex-flow: column;
+      .modal {
+        position: relative;
+      }
     }
   }
-}
 
-.checkbox {
-  &:checked {
-    ~ .label .icon {
-      background: transparent;
-      border: transparent;
+  .modal {
+    @include mix.media("screen") {
+      @include mix.dimensions(null, "md") {
+        padding: var(--spacing-2xs);
+        background: var(--color-bg-secondary);
+        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-dark);
+      }
 
-      &::before {
-        top: 0;
-        transform-origin: 50% 50%;
-        transform: rotate(-45deg);
+      @include mix.dimensions("sm", "md") {
+        border-left: fun.convert-px(4) solid;
+        border-right: fun.convert-px(4) solid;
       }
 
-      &::after {
-        bottom: 0;
-        transform-origin: 50% 50%;
-        transform: rotate(45deg);
+      @include mix.dimensions("md") {
+        top: unset;
       }
     }
   }
 
-  &:not(:checked) {
+  .modal__list {
+    display: flex;
+
     @include mix.media("screen") {
-      @include mix.dimensions("md") {
-        ~ .modal {
-          opacity: 1;
-          visibility: visible;
-          transform: none;
-        }
+      @include mix.dimensions("sm", "md") {
+        flex-flow: column;
       }
     }
   }
-}
 
-.item {
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      .checkbox,
-      .label {
-        display: none;
+  .checkbox {
+    &:checked {
+      ~ .label .icon {
+        background: transparent;
+        border: transparent;
+
+        &::before {
+          top: 0;
+          transform-origin: 50% 50%;
+          transform: rotate(-45deg);
+        }
+
+        &::after {
+          bottom: 0;
+          transform-origin: 50% 50%;
+          transform: rotate(45deg);
+        }
       }
+    }
 
-      .modal {
-        position: relative;
+    &:not(:checked) {
+      @include mix.media("screen") {
+        @include mix.dimensions("md") {
+          ~ .modal {
+            opacity: 1;
+            visibility: visible;
+            transform: none;
+          }
+        }
       }
     }
   }
diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
index 86ff48e..fd526d6 100644
--- a/src/components/organisms/toolbar/toolbar-items.module.scss
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -6,10 +6,15 @@
   --btn-size: #{fun.convert-px(65)};
 
   display: flex;
+  position: relative;
 
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
-      justify-content: center;
+      justify-content: flex-end;
+    }
+
+    @include mix.dimensions("md") {
+      justify-content: flex-end;
     }
   }
 }
@@ -83,7 +88,7 @@
         @include mix.dimensions("sm") {
           transform: perspective(#{fun.convert-px(400)})
             translate3d(0, 0, #{fun.convert-px(-400)});
-          transform-origin: 50% -50%;
+          transform-origin: 100% -50%;
         }
       }
     }
diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss
new file mode 100644
index 0000000..bb0a91f
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar.module.scss
@@ -0,0 +1,80 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+.wrapper {
+  --toolbar-size: #{fun.convert-px(75)};
+
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  height: var(--toolbar-size);
+  position: relative;
+  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-dark);
+
+  .modal {
+    &--search,
+    &--settings {
+      min-width: 30ch;
+    }
+  }
+
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs", "height") {
+      --toolbar-size: #{fun.convert-px(70)};
+    }
+
+    @include mix.dimensions(null, "sm") {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 5;
+
+      .modal {
+        top: unset;
+        bottom: calc(var(--toolbar-size) - #{fun.convert-px(4)});
+        max-height: calc(100vh - var(--toolbar-size));
+      }
+
+      .tooltip {
+        top: unset;
+        bottom: calc(100% + var(--spacing-xs));
+        transform-origin: bottom right;
+      }
+    }
+
+    @include mix.dimensions("sm", "md") {
+      .modal {
+        top: calc(var(--toolbar-size) + var(--spacing-2xs));
+        bottom: unset;
+      }
+    }
+
+    @include mix.dimensions("sm") {
+      justify-content: flex-end;
+      gap: var(--spacing-sm);
+
+      .tooltip {
+        transform-origin: top right;
+      }
+    }
+
+    @include mix.dimensions("md") {
+      .tooltip {
+        width: 120%;
+        right: -10%;
+      }
+    }
+  }
+}
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
new file mode 100644
index 0000000..75d70d8
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -0,0 +1,26 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import ToolbarComponent from './toolbar';
+
+export default {
+  title: 'Organisms/Toolbar',
+  component: ToolbarComponent,
+} as ComponentMeta<typeof ToolbarComponent>;
+
+const Template: ComponentStory<typeof ToolbarComponent> = (args) => (
+  <IntlProvider locale="en">
+    <ToolbarComponent {...args} />
+  </IntlProvider>
+);
+
+const nav = [
+  { id: 'home-link', href: '#', label: 'Home' },
+  { id: 'blog-link', href: '#', label: 'Blog' },
+  { id: 'cv-link', href: '#', label: 'CV' },
+  { id: 'contact-link', href: '#', label: 'Contact' },
+];
+
+export const Toolbar = Template.bind({});
+Toolbar.args = {
+  nav,
+};
diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx
new file mode 100644
index 0000000..4bfe8a8
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@test-utils';
+import Toolbar from './toolbar';
+
+const nav = [
+  { id: 'home-link', href: '/', label: 'Home' },
+  { id: 'blog-link', href: '/blog', label: 'Blog' },
+  { id: 'cv-link', href: '/cv', label: 'CV' },
+  { id: 'contact-link', href: '/contact', label: 'Contact' },
+];
+
+describe('Toolbar', () => {
+  it('renders a navigation menu', () => {
+    render(<Toolbar nav={nav} />);
+    expect(screen.getByRole('navigation')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
new file mode 100644
index 0000000..81e80cf
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -0,0 +1,51 @@
+import { useState, VFC } from 'react';
+import MainNav, { type MainNavProps } from '../toolbar/main-nav';
+import Search from '../toolbar/search';
+import Settings from '../toolbar/settings';
+import styles from './toolbar.module.scss';
+
+export type ToolbarProps = {
+  /**
+   * Set additional classnames to the toolbar wrapper.
+   */
+  className?: string;
+  /**
+   * The main nav items.
+   */
+  nav: MainNavProps['items'];
+};
+
+/**
+ * Toolbar component
+ *
+ * Render the website toolbar.
+ */
+const Toolbar: VFC<ToolbarProps> = ({ className = '', nav }) => {
+  const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
+  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
+  const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
+
+  return (
+    <div className={`${styles.wrapper} ${className}`}>
+      <MainNav
+        items={nav}
+        isActive={isNavOpened}
+        setIsActive={setIsNavOpened}
+        className={styles.modal}
+      />
+      <Search
+        isActive={isSearchOpened}
+        setIsActive={setIsSearchOpened}
+        className={`${styles.modal} ${styles['modal--search']}`}
+      />
+      <Settings
+        isActive={isSettingsOpened}
+        setIsActive={setIsSettingsOpened}
+        className={`${styles.modal} ${styles['modal--settings']}`}
+        tooltipClassName={styles.tooltip}
+      />
+    </div>
+  );
+};
+
+export default Toolbar;
-- 
cgit v1.2.3


From e1cc2de22fc703d94e1151beb9526d8cbe0e49c1 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 24 May 2022 16:05:03 +0200
Subject: chore(toolbar): change icons to close button when activated

---
 src/components/atoms/forms/label.stories.tsx       | 13 +++
 src/components/atoms/forms/label.tsx               |  4 +
 .../molecules/forms/flipping-label.module.scss     | 63 ++++++++++++++
 .../molecules/forms/flipping-label.stories.tsx     | 96 ++++++++++++++++++++++
 .../molecules/forms/flipping-label.test.tsx        | 14 ++++
 src/components/molecules/forms/flipping-label.tsx  | 40 +++++++++
 .../organisms/toolbar/main-nav.module.scss         |  8 ++
 src/components/organisms/toolbar/search.tsx        |  9 +-
 src/components/organisms/toolbar/settings.tsx      |  9 +-
 .../organisms/toolbar/toolbar-items.module.scss    | 18 ++--
 10 files changed, 254 insertions(+), 20 deletions(-)
 create mode 100644 src/components/molecules/forms/flipping-label.module.scss
 create mode 100644 src/components/molecules/forms/flipping-label.stories.tsx
 create mode 100644 src/components/molecules/forms/flipping-label.test.tsx
 create mode 100644 src/components/molecules/forms/flipping-label.tsx

(limited to 'src/components/organisms/toolbar/main-nav.module.scss')

diff --git a/src/components/atoms/forms/label.stories.tsx b/src/components/atoms/forms/label.stories.tsx
index 79f1a34..f66aa13 100644
--- a/src/components/atoms/forms/label.stories.tsx
+++ b/src/components/atoms/forms/label.stories.tsx
@@ -12,6 +12,19 @@ export default {
     size: 'small',
   },
   argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'Define an accessible name.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx
index ce4c70f..2ec614f 100644
--- a/src/components/atoms/forms/label.tsx
+++ b/src/components/atoms/forms/label.tsx
@@ -2,6 +2,10 @@ import { FC, ReactNode } from 'react';
 import styles from './label.module.scss';
 
 export type LabelProps = {
+  /**
+   * An accessible name for the label.
+   */
+  'aria-label'?: string;
   /**
    * The label body.
    */
diff --git a/src/components/molecules/forms/flipping-label.module.scss b/src/components/molecules/forms/flipping-label.module.scss
new file mode 100644
index 0000000..e650ebe
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label.module.scss
@@ -0,0 +1,63 @@
+@use "@styles/abstracts/functions" as fun;
+
+.label {
+  display: block;
+  width: var(--btn-size, #{fun.convert-px(60)});
+  height: var(--btn-size, #{fun.convert-px(60)});
+}
+
+.front,
+.back {
+  display: flex;
+  place-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  backface-visibility: hidden;
+  transition: all 0.6s ease-in 0s;
+}
+
+.front {
+  z-index: 20;
+}
+
+.back {
+  z-index: 10;
+}
+
+.wrapper {
+  --icon-size: 60%;
+
+  display: flex;
+  place-content: center;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition: all 0.5s ease-in-out 0s;
+  transform-style: preserve-3d;
+
+  &--active {
+    transform: rotateY(180deg);
+
+    .front {
+      transform: scale(0.2);
+    }
+
+    .back {
+      transform: scale(1) rotateY(180deg);
+    }
+  }
+
+  &--inactive {
+    .front {
+      transform: scale(1);
+    }
+
+    .back {
+      transform: scale(0.2) rotateY(180deg);
+    }
+  }
+}
diff --git a/src/components/molecules/forms/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label.stories.tsx
new file mode 100644
index 0000000..b8d17ec
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label.stories.tsx
@@ -0,0 +1,96 @@
+import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import FlippingLabel from './flipping-label';
+
+export default {
+  title: 'Organisms/Forms/FlippingLabel',
+  component: FlippingLabel,
+  argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the label.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    children: {
+      control: {
+        type: null,
+      },
+      description: 'An icon for the label front face.',
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the label.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    htmlFor: {
+      control: {
+        type: null,
+      },
+      description: 'Bind the label to a field by id.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    isActive: {
+      control: {
+        type: 'boolean',
+      },
+      description:
+        'Which side of the label should be displayed? True for the close icon.',
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof FlippingLabel>;
+
+const Template: ComponentStory<typeof FlippingLabel> = ({
+  isActive,
+  ...args
+}) => {
+  const [active, setActive] = useState<boolean>(isActive);
+
+  return (
+    <div onClick={() => setActive(!active)}>
+      <FlippingLabel isActive={active} {...args} />
+    </div>
+  );
+};
+
+export const Active = Template.bind({});
+Active.args = {
+  children: <MagnifyingGlass />,
+  isActive: true,
+};
+
+export const Inactive = Template.bind({});
+Inactive.args = {
+  children: <MagnifyingGlass />,
+  isActive: false,
+};
diff --git a/src/components/molecules/forms/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label.test.tsx
new file mode 100644
index 0000000..9a7aa22
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@test-utils';
+import FlippingLabel from './flipping-label';
+
+describe('FlippingLabel', () => {
+  it('renders a label', () => {
+    const ariaLabel = 'vero quo inventore';
+    render(
+      <FlippingLabel aria-label={ariaLabel} isActive={false}>
+        <>Test</>
+      </FlippingLabel>
+    );
+    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/molecules/forms/flipping-label.tsx b/src/components/molecules/forms/flipping-label.tsx
new file mode 100644
index 0000000..c874369
--- /dev/null
+++ b/src/components/molecules/forms/flipping-label.tsx
@@ -0,0 +1,40 @@
+import Label, { LabelProps } from '@components/atoms/forms/label';
+import Close from '@components/atoms/icons/close';
+import { FC } from 'react';
+import styles from './flipping-label.module.scss';
+
+export type FlippingLabelProps = Pick<
+  LabelProps,
+  'aria-label' | 'className' | 'htmlFor'
+> & {
+  /**
+   * The front icon.
+   */
+  children: JSX.Element;
+  /**
+   * Which side of the label should be displayed? True for the close icon.
+   */
+  isActive: boolean;
+};
+
+const FlippingLabel: FC<FlippingLabelProps> = ({
+  children,
+  className = '',
+  isActive,
+  ...props
+}) => {
+  const wrapperModifier = isActive ? 'wrapper--active' : 'wrapper--inactive';
+
+  return (
+    <Label className={`${styles.label} ${className}`} {...props}>
+      <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}>
+        <span className={styles.front}>{children}</span>
+        <span className={styles.back}>
+          <Close />
+        </span>
+      </span>
+    </Label>
+  );
+};
+
+export default FlippingLabel;
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 {
-- 
cgit v1.2.3