refactor(components): rewrite Modal component

* add an optional close button
* add an icon prop

1 files changed, 0 insertions, 66 deletions

diff --git a/src/components/atoms/modal/modal.module.scss b/src/components/atoms/modal/modal.module.scss
deleted file mode 100644
index 6650235..0000000
--- a/src/components/atoms/modal/modal.module.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-.modal {
-  position: relative;
-  box-shadow:
-    fun.convert-px(0.2) fun.convert-px(0.2) fun.convert-px(0.3) 0
-      var(--color-shadow),
-    fun.convert-px(1.5) fun.convert-px(1.5) fun.convert-px(2.5)
-      fun.convert-px(-0.3) var(--color-shadow),
-    fun.convert-px(4.7) fun.convert-px(4.7) fun.convert-px(8) fun.convert-px(-1)
-      var(--color-shadow);
-
-  &--primary {
-    padding: clamp(var(--spacing-xs), 2.5vw, var(--spacing-md));
-    background: var(--color-bg-secondary);
-    border: fun.convert-px(3) solid;
-    border-image: radial-gradient(
-        ellipse at top,
-        var(--color-primary-lighter) 20%,
-        var(--color-primary) 100%
-      )
-      1;
-
-    .title {
-      margin-bottom: var(--spacing-2xs);
-    }
-
-    @include mix.media("screen") {
-      @include mix.dimensions(null, "sm") {
-        border-left: none;
-        border-right: none;
-      }
-    }
-  }
-
-  &--secondary {
-    padding: clamp(var(--spacing-xs), 2.2vw, var(--spacing-sm));
-    background: var(--color-bg);
-    border: fun.convert-px(2) solid var(--color-primary-dark);
-    border-radius: fun.convert-px(3);
-
-    .title {
-      padding-inline: var(--spacing-xs);
-      background: var(--color-bg);
-      border: fun.convert-px(1) solid var(--color-primary-dark);
-      box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-      color: var(--color-primary-darker);
-      font-variant: small-caps;
-
-      > * {
-        margin-block: 0;
-      }
-    }
-  }
-
-  &--secondary#{&}--has-title {
-    --title-height: #{fun.convert-px(40)};
-
-    .title {
-      width: fit-content;
-      height: var(--title-height);
-      margin: calc(var(--title-height) * -1) auto var(--spacing-xs);
-    }
-  }
-}