Initial modal styles

styles/src/component/input.ts

@@ -13,9 +13,6 @@ export const input = () => {
         selection: theme.players[0],
         text: text(theme.highest, "mono", "default"),
         border: border(theme.highest),
-        margin: {
-            right: 12,
-        },
         padding: {
             top: 3,
             bottom: 3,

styles/src/component/tab.ts

@@ -0,0 +1,73 @@
+import { Layer } from "../common"
+import { interactive, toggleable } from "../element"
+import { Border, text } from "../style_tree/components"
+
+type TabProps = {
+    layer: Layer
+}
+
+export const tab = ({ layer }: TabProps) => {
+    const active_color = text(layer, "sans", "base").color
+    const inactive_border: Border = {
+        color: '#FFFFFF00',
+        width: 1,
+        bottom: true,
+        left: false,
+        right: false,
+        top: false,
+    }
+    const active_border: Border = {
+        ...inactive_border,
+        color: active_color,
+    }
+
+    const base = {
+        ...text(layer, "sans", "variant"),
+        padding: {
+            top: 8,
+            left: 8,
+            right: 8,
+            bottom: 6
+        },
+        border: inactive_border,
+    }
+
+    const i = interactive({
+        state: {
+            default: {
+                ...base
+            },
+            hovered: {
+                ...base,
+                ...text(layer, "sans", "base", "hovered")
+            },
+            clicked: {
+                ...base,
+                ...text(layer, "sans", "base", "pressed")
+            },
+        }
+    })
+
+    return toggleable({
+        base: i,
+        state: {
+            active: {
+                default: {
+                    ...i,
+                    ...text(layer, "sans", "base"),
+                    border: active_border,
+                },
+                hovered: {
+                    ...i,
+                    ...text(layer, "sans", "base", "hovered"),
+                    border: active_border
+                },
+                clicked: {
+                    ...i,
+                    ...text(layer, "sans", "base", "pressed"),
+                    border: active_border
+                },
+            }
+        }
+    })
+}

styles/src/style_tree/collab_modals.ts

@@ -2,13 +2,16 @@ import { useTheme } from "../theme"
 import { background, border, foreground, text } from "./components"
 import picker from "./picker"
 import { input } from "../component/input"
-import { toggleable_text_button } from "../component/text_button"
 import contact_finder from "./contact_finder"
+import { tab } from "../component/tab"
 
 export default function channel_modal(): any {
     const theme = useTheme()
 
-    const side_margin = 6
+    const SPACING = 12 as const
+    const BUTTON_OFFSET = 6 as const
+    const ITEM_HEIGHT = 36 as const
+
     const contact_button = {
         background: background(theme.middle, "variant"),
         color: foreground(theme.middle, "variant"),
@@ -26,20 +29,16 @@ export default function channel_modal(): any {
     return {
         contact_finder: contact_finder(),
         tabbed_modal: {
-            tab_button: toggleable_text_button(theme, {
-                variant: "ghost",
-                layer: theme.middle,
-                active_color: "accent",
-                margin: {
-                    top: 8,
-                    bottom: 8,
-                    right: 4
-                }
-            }),
-            row_height: 28,
+            tab_button: tab({ layer: theme.middle }),
+            row_height: ITEM_HEIGHT,
             header: {
-                background: background(theme.middle, "accent"),
+                background: background(theme.lowest),
                 border: border(theme.middle, { "bottom": true, "top": false, left: false, right: false }),
+                padding: {
+                    top: SPACING,
+                    left: SPACING - BUTTON_OFFSET,
+                    right: SPACING - BUTTON_OFFSET,
+                },
                 corner_radii: {
                     top_right: 12,
                     top_left: 12,
@@ -47,6 +46,13 @@ export default function channel_modal(): any {
             },
             body: {
                 background: background(theme.middle),
+                padding: {
+                    top: SPACING - 4,
+                    left: SPACING,
+                    right: SPACING,
+                    bottom: SPACING,
+
+                },
                 corner_radii: {
                     bottom_right: 12,
                     bottom_left: 12,
@@ -69,14 +75,14 @@ export default function channel_modal(): any {
             title: {
                 ...text(theme.middle, "sans", "on", { size: "lg" }),
                 padding: {
-                    left: 6,
+                    left: BUTTON_OFFSET,
                 }
             },
             picker: {
                 empty_container: {},
                 item: {
                     ...picker_style.item,
-                    margin: { left: side_margin, right: side_margin },
+                    margin: { left: SPACING, right: SPACING },
                 },
                 no_matches: picker_style.no_matches,
                 input_editor: picker_input,