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};
}
}