diff --git a/src/components/Dialog.scss b/src/components/Dialog.scss index 3ca5d625..3586c1cd 100644 --- a/src/components/Dialog.scss +++ b/src/components/Dialog.scss @@ -7,6 +7,9 @@ margin-top: 0; grid-template-columns: 1fr calc(var(--space-factor) * 7); grid-gap: var(--metric); + padding: calc(var(--space-factor) * 2); + text-align: center; + font-variant: small-caps; } .Dialog__titleContent { @@ -18,6 +21,10 @@ margin: 0; } + .Dialog__content { + padding: 0 16px 16px; + } + @media #{$is-mobile-query} { .Dialog { --metric: calc(var(--space-factor) * 4); @@ -30,13 +37,8 @@ var(--space-factor) * 7 ); position: sticky; - top: calc(-1 * var(--metric)); - margin: calc(-1 * var(--inset-right)); - margin-top: calc(-1 * var(--metric)); - margin-bottom: var(--metric); + top: 0; padding: calc(var(--space-factor) * 2); - padding-left: var(--inset-left); - padding-right: var(--inset-right); background: var(--bg-color-island); font-size: 1.25em; diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 4efbadb8..aa2ef7c0 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -79,8 +79,8 @@ export const Dialog = (props: { maxWidth={props.small ? 550 : 800} onCloseRequest={props.onCloseRequest} > - -

+ +

{props.title} -

- {props.children} +

+
{props.children}
); diff --git a/src/components/Island.scss b/src/components/Island.scss index 713910ac..faac18d6 100644 --- a/src/components/Island.scss +++ b/src/components/Island.scss @@ -4,7 +4,7 @@ background-color: var(--bg-color-island); backdrop-filter: saturate(100%) blur(10px); box-shadow: var(--shadow-island); - border-radius: var(--border-radius-m); + border-radius: 4px; padding: calc(var(--padding) * var(--space-factor)); position: relative; transition: box-shadow 0.5s ease-in-out; diff --git a/src/components/Modal.scss b/src/components/Modal.scss index c009b4e4..2b34500d 100644 --- a/src/components/Modal.scss +++ b/src/components/Modal.scss @@ -30,18 +30,26 @@ z-index: 2; width: 100%; max-width: var(--max-width); + max-height: 100%; opacity: 0; transform: translateY(10px); animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards; position: relative; + overflow-y: auto; // for modals, reset blurry bg background: var(--bg-color-island); backdrop-filter: none; + border: 1px solid var(--dialog-border); + box-shadow: 0 2px 10px transparentize($oc-black, 0.75); + border-radius: 6px; + @media #{$is-mobile-query} { max-width: 100%; + border: 0; + border-radius: 0; } } @@ -68,12 +76,6 @@ } } - .Modal__close--floating { - position: absolute; - right: calc(var(--space-factor) * 5); - top: calc(var(--space-factor) * 5); - } - @media #{$is-mobile-query} { .Modal { padding: 0; diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 7fcfbf4d..01576082 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -36,11 +36,7 @@ export const Modal = (props: {
{props.children}
diff --git a/src/css/theme.scss b/src/css/theme.scss index b28fca63..4de90d83 100644 --- a/src/css/theme.scss +++ b/src/css/theme.scss @@ -3,7 +3,6 @@ :root { --bg-color-island: rgba(255, 255, 255, 0.9); --popup-background-color: #{$oc-white}; - --border-radius-m: 4px; --space-factor: 0.25rem; --button-gray-1: #{$oc-gray-2}; --button-gray-2: #{$oc-gray-4}; @@ -15,7 +14,6 @@ --icon-fill-color: #{$oc-black}; --icon-green-fill-color: #{$oc-green-9}; --keybinding-color: #{$oc-gray-5}; - --color-overlay-text-color: #ccc; --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); @@ -23,8 +21,6 @@ --text-color-primary: #{$oc-gray-8}; --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)}; --overlay-background-color: #{transparentize($oc-white, 0.12)}; - --border-radius-m: 4px; - --space-factor: 0.25rem; --dropdown-icon: url('data:image/svg+xml,'); --focus-highlight-color: #{$oc-blue-2}; --select-highlight-color: #{$oc-blue-5}; @@ -35,6 +31,7 @@ --popup-secondary-background-color: #{$oc-gray-1}; --popup-text-color: #{$oc-black}; --popup-text-inverted-color: #{$oc-white}; + --dialog-border: #{$oc-gray-6}; } .excalidraw { @@ -60,10 +57,8 @@ --icon-fill-color: #{$oc-gray-4}; --icon-green-fill-color: #{$oc-green-4}; --keybinding-color: #{$oc-gray-6}; - --color-overlay-text-color: #bbb; --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)}; --overlay-background-color: rgba(30, 30, 30, 0.88); - // #{$oc-gray-4}; inlined --dropdown-icon: url('data:image/svg+xml,'); --focus-highlight-color: #{$oc-blue-6}; --select-highlight-color: #{$oc-blue-4}; @@ -74,5 +69,6 @@ --popup-secondary-background-color: #222; --popup-text-color: #{$oc-gray-4}; --popup-text-inverted-color: #2c2c2c; + --dialog-border: #{$oc-gray-9}; } }