Updated the settings dialog button styling.

lib/types/options.d.ts

@@ -1,3 +1,24 @@
+import { Opt } from "lib/option";
+
 export type Unit = "imperial" | "metric";
 export type PowerOptions = "sleep" | "reboot" | "logout" | "shutdown";
 export type NotificationAnchor = "top" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left";
+export type RowProps<T> = {
+    opt: Opt<T>
+    title: string
+    note?: string
+    type?:
+    | "number"
+    | "color"
+    | "float"
+    | "object"
+    | "string"
+    | "enum"
+    | "boolean"
+    | "img"
+    | "font"
+    enums?: string[]
+    max?: number
+    min?: number
+    subtitle?: string
+}

scss/style/settings/dialog.scss

@@ -25,24 +25,26 @@ window.settings-dialog {
 
     button.close {
       color: $bar-menus-iconbuttons-passive;
+
       image {
         font-size: 2em;
       }
 
       &:hover {
-        color: $bar-menus-iconbuttons-active;
+        color: $bar-menus-buttons-active;
       }
     }
 
     button.reset {
       color: $bar-menus-iconbuttons-passive;
       padding: $padding*.5;
+
       image {
         font-size: 1.25em;
       }
 
       &:hover {
-        color: $bar-menus-iconbuttons-active;
+        color: $bar-menus-buttons-active;
       }
     }
   }
@@ -159,52 +161,79 @@ window.settings-dialog {
   .reset {
     color: $bar-menus-iconbuttons-passive;
   }
+
   .options-label {
     color: $bar-menus-text;
   }
+
   .options-sublabel {
     font-size: 0.75em;
     margin-top: 0.2em;
     color: $bar-menus-dimtext;
   }
+
   .inputter-container {
     border-radius: $bar-menus-border-radius * 0.5;
+
     :first-child {
       border-radius: $bar-menus-border-radius * 0.5;
     }
+
     padding: 0.35em 0.35em;
     background: $surface1;
     margin-right: 1em;
   }
 }
+
 .options-header {
   margin: 1em 1em;
+
   .label-name {
     color: $bar-menus-label;
     font-size: 0.9em;
     margin-right: 0.5em;
   }
 }
+
 .pager-button {
   margin: 0.5em 0.75em;
 
-  &.category label{
+  &.category label {
     font-size: 1.4em;
   }
 
   &:hover {
     color: $bar-menus-iconbuttons-active;
   }
+
   &.active {
     color: $bar-menus-iconbuttons-active;
   }
 }
-.bar-theme-page { min-height: 40em;
+
+.bar-theme-page {
+  min-height: 40em;
 }
+
 .settings-menu-stack {
   background: $red;
 }
+
 .paged-container {
+  .reset-options {
+    color: $bar-menus-iconbuttons-passive;
+
+    image:disabled {
+      color: $bar-menus-buttons-disabled;
+    }
+
+    &:hover {
+      image {
+        color: $bar-menus-buttons-active;
+      }
+    }
+  }
+
   scrollbar {
     margin-right: 0.2em;
     min-width: 0.6em;
@@ -217,15 +246,18 @@ window.settings-dialog {
       background: $bar-menus-buttons-default;
     }
   }
+
   selection {
     background: $bar-menus-background;
   }
 
   switch {
     font-size: 10px;
+
     &:checked {
       background: $bar-menus-switch-enabled;
     }
+
     slider {
       background-color: $bar-menus-switch-puck;
     }
@@ -264,6 +296,7 @@ dialog {
 
   viewport {
     border-right: .25em solid $bar-menus-border-color;
+
     list {
       row {
         padding: 0em 1.5em;
@@ -272,6 +305,7 @@ dialog {
           background: $bar-menus-buttons-default;
           color: $bar-menus-buttons-text;
         }
+
         label {
           margin: 0.5em 0.5em;
           font-size: 0.85em;
@@ -280,6 +314,7 @@ dialog {
     }
 
   }
+
   stack {
     .horizontal .path-bar {
       button {
@@ -295,6 +330,7 @@ dialog {
         &:hover {
           background: transparentize($bar-menus-buttons-active, 0.5);
         }
+
         label {
           margin: 0em 0.25em;
           color: $bar-menus-buttons-text
@@ -304,12 +340,13 @@ dialog {
           margin: 0em 0.5em;
           color: $bar-menus-buttons-text
         }
+
         margin: 0.25em;
       }
     }
   }
 
-  treeview header button{
+  treeview header button {
     padding: 0.25em;
     border: .15em solid $bar-menus-border-color;
   }

widget/settings/shared/Inputter.ts

@@ -1,25 +1,7 @@
 import { Opt } from "lib/option"
 import Gdk from "gi://Gdk"
 import icons from "lib/icons"
-
-export type RowProps<T> = {
-    opt: Opt<T>
-    title: string
-    note?: string
-    type?:
-    | "number"
-    | "color"
-    | "float"
-    | "object"
-    | "string"
-    | "enum"
-    | "boolean"
-    | "img"
-    | "font"
-    enums?: string[]
-    max?: number
-    min?: number
-}
+import { RowProps } from "lib/types/options"
 
 const EnumSetter = (opt: Opt<string>, values: string[]) => {
     const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) })

widget/settings/shared/Label.ts

@@ -1,20 +1,20 @@
-export const Label = (name, sub = "") => {
-  return Widget.Box({
-    vertical: true,
-    hpack: "start",
-    children: [
-      Widget.Label({
+export const Label = (name: string, sub = "") => {
+    return Widget.Box({
+        vertical: true,
         hpack: "start",
-        vpack: "center",
-        class_name: "options-label",
-        label: name
-      }),
-      Widget.Label({
-        hpack: "start",
-        vpack: "center",
-        class_name: "options-sublabel",
-        label: sub
-      }),
-    ]
-  })
+        children: [
+            Widget.Label({
+                hpack: "start",
+                vpack: "center",
+                class_name: "options-label",
+                label: name
+            }),
+            Widget.Label({
+                hpack: "start",
+                vpack: "center",
+                class_name: "options-sublabel",
+                label: sub
+            }),
+        ]
+    })
 }

widget/settings/shared/Option.ts

@@ -1,8 +1,14 @@
 import { Label } from "./Label";
 import { Inputter } from "./Inputter";
 import icons from "lib/icons";
+import { RowProps } from "lib/types/options";
 
-export const Option = (props, className = '') => {
+type Option = {
+    title: string,
+    subtitle: string,
+
+}
+export const Option = <T>(props: RowProps<T>, className: string = '') => {
     return Widget.Box({
         class_name: "option-item",
         hexpand: true,
@@ -16,7 +22,7 @@ export const Option = (props, className = '') => {
             Inputter(props, className),
             Widget.Button({
                 vpack: "center",
-                class_name: "reset",
+                class_name: "reset-options",
                 child: Widget.Icon(icons.ui.refresh),
                 on_clicked: () => props.opt.reset(),
                 sensitive: props.opt.bind().as(v => v !== props.opt.initial),