refactor(components): rewrite Modal component

* add an optional close button
* add an icon prop

7 files changed, 32 insertions, 15 deletions

diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index 7d772df..be9d489 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -1,6 +1,7 @@
-import { forwardRef, ForwardRefRenderFunction } from 'react';
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import { Heading, Modal, type ModalProps } from '../../atoms';
+import { Heading } from '../../atoms';
+import { Modal, type ModalProps } from '../../molecules';
 import { SearchForm, type SearchFormProps } from '../forms';
 import styles from './search-modal.module.scss';
 
diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss
index 47af656..68bce98 100644
--- a/src/components/organisms/modals/settings-modal.module.scss
+++ b/src/components/organisms/modals/settings-modal.module.scss
@@ -5,7 +5,7 @@
   width: 100%;
 
   @media screen and (max-height: #{var.get-breakpoint("2xs")}) and (max-width: #{var.get-breakpoint("sm")}) {
-    --first-col-width: #{fun.convert-px(160)};
+    --first-col-width: #{fun.convert-px(140)};
     --col-gap: var(--spacing-xl);
 
     display: grid;
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index 94d69e2..36c5977 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,6 +1,7 @@
 import { useCallback, type FC, type FormEvent } from 'react';
 import { useIntl } from 'react-intl';
-import { Heading, Icon, Modal, type ModalProps } from '../../atoms';
+import { Heading, Icon } from '../../atoms';
+import { Modal, type ModalProps } from '../../molecules';
 import { SettingsForm } from '../forms';
 import styles from './settings-modal.module.scss';
 
@@ -31,9 +32,9 @@ export const SettingsModal: FC<SettingsModalProps> = ({ className = '' }) => {
   return (
     <Modal
       className={`${styles.wrapper} ${className}`}
+      icon={<Icon className={styles.icon} shape="cog" />}
       heading={
         <Heading isFake level={3}>
-          <Icon className={styles.icon} shape="cog" />
           {title}
         </Heading>
       }
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);
       }
     }
   }