redesign modal to fit in with new design language

.changeset/heavy-phones-occur.md

@@ -0,0 +1,5 @@
+---
+'@kurrent-ui/components': minor
+---
+
+c2-modal has been redesigned to fit with kurrent design language.

packages/components/src/components/modals/modal/demos/modal-demo.css

@@ -1,4 +1,5 @@
 :host {
+    display: block;
 }
 
 .token {

packages/components/src/components/modals/modal/demos/modal.demo.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component, Host, h } from '@stencil/core';
 import { ICON_NAMESPACE } from '../../../../icons/namespace';
 
 const token = 'abc-123-cde';
@@ -15,44 +15,49 @@ const token = 'abc-123-cde';
 export class Demo {
     render() {
         return (
-            <c2-modal role={'alert'}>
-                <h2 slot={'header'}>{'Successfully created a new'}</h2>
-                <h1 slot={'header'}>{'Refresh token'}</h1>
-                <f2-text-input
-                    readonly
-                    class={'token'}
-                    placeholder={'token'}
-                    name={'token'}
-                    value={token}
-                    inputProps={{
-                        onFocus(e: FocusEvent) {
-                            (e.target as HTMLInputElement).select();
-                        },
-                    }}
-                >
-                    <c2-thinking-button
-                        defaultIcon={[ICON_NAMESPACE, 'copy']}
-                        text={'Copy'}
-                        action={(e) => {
-                            e.preventDefault();
-                            return navigator.clipboard.writeText(token);
+            <Host>
+                <c2-backdrop showBackdrop />
+                <c2-modal role={'alert'}>
+                    <h2 slot={'header'}>{'Successfully created a new'}</h2>
+                    <h1 slot={'header'}>{'Refresh token'}</h1>
+                    <f2-text-input
+                        readonly
+                        class={'token'}
+                        placeholder={'token'}
+                        name={'token'}
+                        value={token}
+                        inputProps={{
+                            onFocus(e: FocusEvent) {
+                                (e.target as HTMLInputElement).select();
+                            },
                         }}
-                        variant={'outline'}
+                    >
+                        <c2-thinking-button
+                            defaultIcon={[ICON_NAMESPACE, 'copy']}
+                            text={'Copy'}
+                            action={(e) => {
+                                e.preventDefault();
+                                return navigator.clipboard.writeText(token);
+                            }}
+                            variant={'outline'}
+                            color={'secondary'}
+                        />
+                    </f2-text-input>
+                    <b class={'copy_warning'}>
+                        <c2-icon icon={[ICON_NAMESPACE, 'exclamation-mark']} />
+                        {
+                            "Be sure to copy your new token. It won't be shown again."
+                        }
+                    </b>
+                    <c2-button
+                        variant={'filled'}
                         color={'secondary'}
-                    />
-                </f2-text-input>
-                <b class={'copy_warning'}>
-                    <c2-icon icon={[ICON_NAMESPACE, 'critical']} />
-                    {"Be sure to copy your new token. It won't be shown again."}
-                </b>
-                <c2-button
-                    variant={'filled'}
-                    color={'secondary'}
-                    slot={'footer'}
-                >
-                    {'Done'}
-                </c2-button>
-            </c2-modal>
+                        slot={'footer'}
+                    >
+                        {'Done'}
+                    </c2-button>
+                </c2-modal>
+            </Host>
         );
     }
 }

packages/components/src/components/modals/modal/modal.css

@@ -17,7 +17,8 @@
     --zindex: calc(var(--zindex-base, 0) + var(--zindex-modal, 3100));
     z-index: var(--zindex);
     pointer-events: all;
-    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
+    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1))
+        drop-shadow(0px 25px 45px rgba(0, 0, 0, 0.3));
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -29,8 +30,10 @@
 
 .close {
     position: absolute;
-    top: var(--spacing-1, 8px);
-    right: var(--spacing-1, 8px);
+    top: 0;
+    bottom: calc(100% - 70px);
+    right: var(--spacing-2, 16px);
+    margin: auto;
     border: 0;
     width: 38px;
     height: 38px;
@@ -52,30 +55,32 @@
 }
 
 header {
-    border-bottom: 5px solid var(--color-shade-20);
-    padding: 32px 30px;
-    padding-bottom: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-0_5, 4px);
+    justify-content: center;
+    border-bottom: 2px solid var(--color-shade-20);
+    padding: var(--spacing-1_5, 12px) var(--spacing-2_5, 20px);
     margin: 0;
+    min-height: 70px;
 }
 
 ::slotted(h1[slot='header']) {
-    font-weight: 300;
-    font-size: 36px;
+    font-weight: 600;
+    font-size: 16px;
     color: var(--color-foreground);
     margin: 0;
-    margin-bottom: 23px;
 }
 
 ::slotted(h2[slot='header']) {
     font-weight: 400;
-    font-size: 16px;
+    font-size: 14px;
     color: var(--color-foreground);
     margin: 0;
-    margin-bottom: 17px;
 }
 
 .body {
-    padding: 15px 30px;
+    padding: var(--spacing-2_5, 12px);
     overflow: auto;
     overscroll-behavior: none;
 }
@@ -84,8 +89,8 @@ footer {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
-    padding: 32px 30px;
-    padding-top: 0;
+    padding: var(--spacing-1_5, 12px) var(--spacing-2_5, 20px);
+    border-top: 2px solid var(--color-shade-20);
     margin: 0;
 }