wip colors

webui/src/primitives/Elements.tsx

@@ -30,13 +30,19 @@ export function IconBlock({icon, color}: IconProps) {
         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;
+      } else if (color.h !== undefined) {
+        const hue = color.h;
         const sat = Math.floor((color.s || 0) * 100);
 
         s.color = `hsl(${hue}, ${sat}%, 50%)`;
+
+        if (color.kelvin) {
+          s.borderBottom = `1px solid ${kelvinToRgbHex(color.kelvin)}`;
+        }
+      } else if (color.kelvin !== undefined && color.kelvin > 0) {
+        s.color = kelvinToRgbHex(color.kelvin);
+      } else {
+        s.color = "white"
       }
     }
 
@@ -58,7 +64,7 @@ interface IconElementProps extends IconProps {
 export function IconElement({caption, color, icon}: IconElementProps) {
   return (
     <Element>
-      <IconBlock icon={icon} color={color}/>
+      <IconBlock icon={icon} color={color} />
       {caption}
     </Element>
   );

webui/src/primitives/Layout.sass

@@ -66,6 +66,7 @@
   text-align: center
   padding: 0.1em 0
   background-color: $color-background-elevated
+  border-bottom: solid 1px #000
 
 .Dialog-footer
   display: flex
@@ -80,11 +81,11 @@
     color: $color-foreground
     border: none
     cursor: pointer
+    border-bottom: solid 1px #000
 
     &:hover, &:active
       background-color: $color-background-elevated2
       color: $color-foreground-elevated
 
-
     &:not(:last-of-type)
       border-right: solid 1px #000