improvement: Make dialogs look more like dialogs (#2686)

Co-authored-by: Jed Fox <git@jedfox.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

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));
+      top: 0;
-      margin: calc(-1 * var(--inset-right));
-      margin-top: calc(-1 * var(--metric));
-      margin-bottom: var(--metric);
       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;
 

src/components/Dialog.tsx

@@ -79,8 +79,8 @@ export const Dialog = (props: {
       maxWidth={props.small ? 550 : 800}
       onCloseRequest={props.onCloseRequest}
     >
-      <Island padding={4} ref={setIslandNode}>
+      <Island ref={setIslandNode}>
-        <h2 id="dialog-title" className="Dialog__title">
+        <h3 id="dialog-title" className="Dialog__title">
           <span className="Dialog__titleContent">{props.title}</span>
           <button
             className="Modal__close"
@@ -89,8 +89,8 @@ export const Dialog = (props: {
           >
             {useIsMobile() ? back : close}
           </button>
-        </h2>
+        </h3>
-        {props.children}
+        <div className="Dialog__content">{props.children}</div>
       </Island>
     </Modal>
   );

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;

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;

src/components/Modal.tsx

@@ -36,11 +36,7 @@ export const Modal = (props: {
       <div className="Modal__background" onClick={props.onCloseRequest}></div>
       <div
         className="Modal__content"
-        style={{
+        style={{ "--max-width": `${props.maxWidth}px` }}
-          "--max-width": `${props.maxWidth}px`,
-          maxHeight: "100%",
-          overflowY: "scroll",
-        }}
       >
         {props.children}
       </div>

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,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
   --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,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
     --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};
   }
 }