From 3ff4c37a7a2c40340c17f9e6c1754444bce0f839 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 31 Oct 2023 16:00:45 +0100
Subject: refactor(components): rewrite Modal component

* add an optional close button
* add an icon prop
---
 src/components/organisms/toolbar/search.module.scss   |  8 ++++++++
 src/components/organisms/toolbar/settings.module.scss | 12 ++++++++----
 src/components/organisms/toolbar/settings.tsx         | 13 ++++++++-----
 src/components/organisms/toolbar/toolbar.module.scss  |  2 +-
 4 files changed, 25 insertions(+), 10 deletions(-)

(limited to 'src/components/organisms/toolbar')

diff --git a/src/components/organisms/toolbar/search.module.scss b/src/components/organisms/toolbar/search.module.scss
index c310594..0dc36de 100644
--- a/src/components/organisms/toolbar/search.module.scss
+++ b/src/components/organisms/toolbar/search.module.scss
@@ -1,3 +1,11 @@
+@use "../../../styles/abstracts/mixins" as mix;
+
 .modal {
   padding-bottom: var(--spacing-md);
+
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "sm") {
+      border-inline: 0;
+    }
+  }
 }
diff --git a/src/components/organisms/toolbar/settings.module.scss b/src/components/organisms/toolbar/settings.module.scss
index 59c44f8..2c473b7 100644
--- a/src/components/organisms/toolbar/settings.module.scss
+++ b/src/components/organisms/toolbar/settings.module.scss
@@ -1,5 +1,9 @@
-.item .tooltip {
-  top: unset;
-  bottom: calc(100% + var(--spacing-2xs));
-  transform-origin: bottom center;
+@use "../../../styles/abstracts/mixins" as mix;
+
+.modal {
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "sm") {
+      border-inline: 0;
+    }
+  }
 }
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 1b68db8..a0aad8c 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -3,7 +3,8 @@ import { useIntl } from 'react-intl';
 import { BooleanField, type BooleanFieldProps, Icon } from '../../atoms';
 import { FlippingLabel } from '../../molecules';
 import { SettingsModal, type SettingsModalProps } from '../modals';
-import styles from './toolbar-items.module.scss';
+import styles from './settings.module.scss';
+import sharedStyles from './toolbar-items.module.scss';
 
 export type SettingsProps = SettingsModalProps & {
   /**
@@ -34,9 +35,9 @@ const SettingsWithRef: ForwardRefRenderFunction<
       });
 
   return (
-    <div className={styles.item} ref={ref}>
+    <div className={sharedStyles.item} ref={ref}>
       <BooleanField
-        className={styles.checkbox}
+        className={sharedStyles.checkbox}
         id="settings-button"
         isChecked={isActive}
         name="settings-button"
@@ -45,13 +46,15 @@ const SettingsWithRef: ForwardRefRenderFunction<
         value="open"
       />
       <FlippingLabel
-        className={styles.label}
+        className={sharedStyles.label}
         htmlFor="settings-button"
         icon={<Icon aria-hidden={true} shape="cog" size="lg" />}
         isActive={isActive}
         label={label}
       />
-      <SettingsModal className={`${styles.modal} ${className}`} />
+      <SettingsModal
+        className={`${sharedStyles.modal} ${styles.modal} ${className}`}
+      />
     </div>
   );
 };
diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss
index ac7c892..6c138a3 100644
--- a/src/components/organisms/toolbar/toolbar.module.scss
+++ b/src/components/organisms/toolbar/toolbar.module.scss
@@ -56,7 +56,7 @@
     .modal {
       &--search,
       &--settings {
-        min-width: fun.convert-px(400);
+        min-width: fun.convert-px(420);
       }
     }
   }
-- 
cgit v1.2.3