dialogs sorta work now

webui/src/primitives/Elements.tsx

@@ -12,13 +12,12 @@ function Element({children}: React.PropsWithChildren<{}>) {
   )
 }
 
-interface ColorElementProps {
-  caption: string
+interface IconProps {
   icon?: LuciferIcon
   color?: ColorValue | "hs-gradient" | "k-gradient"
 }
 
-export function IconElement({caption, color, icon}: ColorElementProps) {
+export function IconBlock({icon, color}: IconProps) {
   const style: CSSProperties = useMemo(() => {
     const s: CSSProperties = {
       backgroundClip: "text",
@@ -44,9 +43,22 @@ export function IconElement({caption, color, icon}: ColorElementProps) {
     return s;
   }, [color]);
 
+  return (
+    <Icon icon={toIconify(icon || LuciferIcon.Square)}
+          className="ColorElement-block"
+          style={style}
+    />
+  );
+}
+
+interface IconElementProps extends IconProps {
+  caption: string
+}
+
+export function IconElement({caption, color, icon}: IconElementProps) {
   return (
     <Element>
-      <Icon icon={toIconify(icon || LuciferIcon.Square)} className="ColorElement-block" style={style}/>
+      <IconBlock icon={icon} color={color}/>
       {caption}
     </Element>
   );

webui/src/primitives/Layout.sass

@@ -1,7 +1,7 @@
 @import "../res/colors"
 
 .Tabs-container
-  background-color: $color-foreground-dark
+  background-color: $color-background-elevated
 
   &.Tabs-large
     text-align: center
@@ -22,4 +22,69 @@
 
 .Page
   max-width: 800px
-  margin: 0.25em auto
+  margin: 0.25em auto
+
+
+.Dialog-overlay
+  background-color: rgba(0, 0, 0, 0.5)
+  position: fixed
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  overflow-y: scroll
+
+.Dialog-main
+  max-width: 640px
+  margin: 4em auto
+  // background-color: #202020
+  color: #ddd
+  outline: none
+  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.5)
+
+  .Card
+    margin: 0
+
+.Dialog-title
+  font-weight: 800
+  font-size: 200%
+  text-align: center
+  padding: 0.25em 0.5ch
+
+.Dialog-body
+  margin-bottom: 0
+
+.Dialog-footer
+  border-top: solid 1px #000
+
+.Dialog-container
+  background-color: $color-background
+
+.Dialog-header
+  font-size: 140%
+  font-weight: bold
+  text-align: center
+  padding: 0.1em 0
+  background-color: $color-background-elevated
+
+.Dialog-footer
+  display: flex
+  flex-direction: row
+
+  button
+    flex-grow: 4
+    text-align: center
+    font: inherit
+    padding: 0.5em 1.5ch
+    background-color: $color-background-elevated
+    color: $color-foreground
+    border: none
+    cursor: pointer
+
+    &:hover, &:active
+      background-color: $color-background-elevated2
+      color: $color-foreground-elevated
+
+
+    &:not(:last-of-type)
+      border-right: solid 1px #000

webui/src/primitives/Layout.tsx

@@ -1,5 +1,8 @@
 import React, {PropsWithChildren, useCallback, useEffect} from "react";
+import ReactModal from "react-modal";
 import "./Layout.sass";
+import {LuciferIcon} from "../models/Icons";
+import {IconBlock} from "./Elements";
 
 interface TabsProps {
   tabNames: string[]
@@ -36,11 +39,11 @@ export function Tabs({tabNames, index, onChange, large, boldIndex}: TabsProps) {
     <div className={`Tabs-container ${large ? "Tabs-large" : ""}`}>
       <div className="Tabs-inner">
         {tabNames.map((name, i) => (
-            <div className={tabClass(i)}
-                 onClick={() => onChange(i)}
-            >
-              {name}
-            </div>
+          <div className={tabClass(i)}
+               onClick={() => onChange(i)}
+          >
+            {name}
+          </div>
         ))}
       </div>
     </div>
@@ -54,7 +57,7 @@ interface PageProps {
 export function Page({title, children}: PropsWithChildren<PageProps>) {
   useEffect(() => {
     window.document.title = title ? `${title} - Lucifer` : "Lucifer";
-  }, []);
+  }, [title]);
 
   return (
     <div className="Page">
@@ -67,13 +70,35 @@ interface DialogProps {
   title: string
   buttons?: {
     text: string
+    icon: LuciferIcon
     onClick?: (() => void)
   }[]
   loading?: boolean
 }
 
-export function Dialog({}: PropsWithChildren<DialogProps>) {
+export function Dialog({title, buttons, children}: PropsWithChildren<DialogProps>) {
 
 
-  return undefined;
+  return (
+    <ReactModal isOpen={true}
+                className="Dialog-main"
+                overlayClassName="Dialog-overlay"
+    >
+      <div className="Dialog-container">
+        <div className="Dialog-header">
+          {title}
+        </div>
+        {children}
+        <div className="Dialog-footer">
+          {buttons?.map(b => (
+            <button key={b.text}>
+              <IconBlock icon={b.icon}/>
+              {" "}
+              {b.text}
+            </button>
+          ))}
+        </div>
+      </div>
+    </ReactModal>
+  );
 }