started on icons

webui/src/primitives/Elements.tsx

@@ -1,10 +1,10 @@
 import React, {CSSProperties, useMemo} from "react";
 import {ColorValue} from "../models/Colors";
-// @ts-ignore
-import kelvinToRgb from "kelvin-to-rgb";
+import {kelvinToRgbHex} from "../helpers/kelvin";
+import {Icon} from "@iconify/react";
 
 import "./Elements.sass";
-import {kelvinToColorValue, kelvinToRgbHex} from "../helpers/kelvin";
+import {LuciferIcon, toIconify} from "../models/Icons";
 
 function Element({children}: React.PropsWithChildren<{}>) {
   return (
@@ -13,35 +13,41 @@ function Element({children}: React.PropsWithChildren<{}>) {
 }
 
 interface ColorElementProps {
-  name: string
-  value: ColorValue | "hs-gradient" | "k-gradient"
+  caption: string
+  icon?: LuciferIcon
+  color?: ColorValue | "hs-gradient" | "k-gradient"
 }
 
-export function ColorElement({name, value}: ColorElementProps) {
+export function IconElement({caption, color, icon}: ColorElementProps) {
   const style: CSSProperties = useMemo(() => {
-    const s: CSSProperties = {};
+    const s: CSSProperties = {
+      backgroundClip: "text",
+      // @ts-ignore
+      textFillColor: "transparent",
+    };
 
-    if (value === "hs-gradient") {
-      s.backgroundImage = "linear-gradient(to bottom right, red, yellow, green, blue, violet)";
-    } else if (value === "k-gradient") {
-      s.backgroundImage = "linear-gradient(to bottom right, #ff9329, #ffd6aa, #fffaf4, #fff, #c9e2ff, #40a3ff)";
-    } else if (value.kelvin !== undefined && value.kelvin > 0) {
-      s.backgroundColor = kelvinToRgbHex(value.kelvin);
-    } else {
-      const hue = value.h || 0;
-      const sat = Math.floor((value.s || 0) * 100);
+    if (color !== undefined) {
+      if (color === "hs-gradient") {
+        s.backgroundImage = "linear-gradient(to bottom right, red, yellow, green, blue, violet)";
+      } else if (color === "k-gradient") {
+        s.backgroundImage = "linear-gradient(to bottom right, #ff9329, #ffd6aa, #fffaf4, #fff, #c9e2ff, #40a3ff)";
+      } else if (color.kelvin !== undefined && color.kelvin > 0) {
+        s.color = kelvinToRgbHex(color.kelvin);
+      } else {
+        const hue = color.h || 0;
+        const sat = Math.floor((color.s || 0) * 100);
 
-      s.backgroundColor = `hsl(${hue}, ${sat}%, 50%)`;
+        s.color = `hsl(${hue}, ${sat}%, 50%)`;
+      }
     }
+
     return s;
-  }, [value]);
+  }, [color]);
 
   return (
     <Element>
-      <div className="ColorElement-block"
-           style={style}
-      />
-      {name}
+      <Icon icon={toIconify(icon || LuciferIcon.Square)} className="ColorElement-block" style={style}/>
+      {caption}
     </Element>
   );
 }

webui/src/primitives/Layout.sass

@@ -3,6 +3,10 @@
 .Tabs-container
   background-color: $color-foreground-dark
 
+  &.Tabs-large
+    text-align: center
+    font-size: 175%
+
   .Tabs-element
     display: inline-block
     padding: 0.25em 0.7ch
@@ -14,4 +18,8 @@
 
   .Tabs-bold
     font-family: 'Bitstream Vera Serif', 'Lucida Fax', serif
-    font-weight: 600
+    font-weight: 600
+
+.Page
+  max-width: 800px
+  margin: 0.25em auto

webui/src/primitives/Layout.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from "react";
+import React, {PropsWithChildren, useCallback, useEffect} from "react";
 import "./Layout.sass";
 
 interface TabsProps {
@@ -6,9 +6,10 @@ interface TabsProps {
   index: number
   onChange: (newIndex: number) => void
   boldIndex?: number
+  large?: boolean
 }
 
-export function Tabs({tabNames, index, onChange, boldIndex}: TabsProps) {
+export function Tabs({tabNames, index, onChange, large, boldIndex}: TabsProps) {
   useEffect(() => {
     if (index < 0) {
       onChange(0);
@@ -32,14 +33,47 @@ export function Tabs({tabNames, index, onChange, boldIndex}: TabsProps) {
   }, [index, boldIndex])
 
   return (
-    <div className="Tabs-container">
-      {tabNames.map((name, i) => (
-        <div className={tabClass(i)}
-             onClick={() => onChange(i)}
-        >
-          {name}
-        </div>
-      ))}
+    <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>
     </div>
   );
 }
+
+interface PageProps {
+  title?: string
+}
+
+export function Page({title, children}: PropsWithChildren<PageProps>) {
+  useEffect(() => {
+    window.document.title = title ? `${title} - Lucifer` : "Lucifer";
+  }, []);
+
+  return (
+    <div className="Page">
+      {children}
+    </div>
+  );
+}
+
+interface DialogProps {
+  title: string
+  buttons?: {
+    text: string
+    onClick?: (() => void)
+  }[]
+  loading?: boolean
+}
+
+export function Dialog({}: PropsWithChildren<DialogProps>) {
+
+
+  return undefined;
+}