fix: fix light theme, separate components

ui/footer.slint

@@ -1,6 +1,6 @@
-import { IconButton } from "icon_button.slint";
+import { IconButton } from "./icon_button.slint";
-import { Theme } from "theme.slint";
+import { Theme } from "./theme.slint";
-import { GradientButton } from "button.slint";
+import { GradientButton } from "./gradient-button.slint";
 
 export component Footer inherits Rectangle {
     callback settings-clicked();

ui/gradient-button.slint

@@ -3,6 +3,7 @@ import { Theme } from "theme.slint";
 export component GradientButton inherits Rectangle {
     callback clicked <=> touch.clicked;
     in property <string> text;
+    in property <image> icon;
 
     background: Theme.gradient-main;
     border-radius: Theme.radius;

ui/gradient-icon.slint

@@ -0,0 +1,24 @@
+import { Theme } from "theme.slint";
+
+export component GradientIcon inherits Rectangle {
+    in property <image> icon;
+
+    background: Theme.gradient-main;
+    border-radius: Theme.radius;
+    drop-shadow-offset-x: Theme.shadow-primary-x;
+    drop-shadow-offset-y: Theme.shadow-primary-y;
+    drop-shadow-blur: Theme.shadow-primary-blur;
+    drop-shadow-color: touch.has-hover ? Theme.shadow-color : transparent;
+    horizontal-stretch: 0;
+
+    animate drop-shadow-color { duration: 300ms; }
+
+    touch := TouchArea { }
+
+    Image {
+        width: 24px;
+        height: 24px;
+        source: icon;
+        colorize: white;
+    }
+}

ui/header.slint

@@ -1,5 +1,6 @@
 import { BrowserConfig } from "./types.slint";
-import { Theme } from "theme.slint";
+import { Theme } from "./theme.slint";
+import { GradientIcon } from "./gradient-icon.slint";
 
 export component Header inherits Rectangle {
     in property <string> url;
@@ -13,16 +14,22 @@ export component Header inherits Rectangle {
         HorizontalLayout {
             spacing: Theme.spacing-md;
 
-            Rectangle {
+            // Rectangle {
+            //     width: 48px;
+            //     height: 48px;
+            //     border-radius: Theme.radius;
+            //     background: Theme.gradient-main;
+
+            //     Image {
+            //         source: @image-url("../icons/globe.svg");
+            //         colorize: white;
+            //     }
+            // }
+
+            GradientIcon {
                 width: 48px;
                 height: 48px;
-                border-radius: Theme.radius;
+                icon: @image-url("../icons/globe.svg");
-                background: Theme.gradient-main;
-
-                Image {
-                    source: @image-url("../icons/globe.svg");
-                    colorize: white;
-                }
             }
 
             VerticalLayout {

ui/icon_button.slint

@@ -1,8 +1,11 @@
+import { Theme } from "theme.slint";
 export component IconButton inherits Rectangle {
     callback clicked <=> touch.clicked;
 
     in property <image> icon;
-    property <color> icon_color:  touch.has-hover ? #ffffff : #94a3b8;
+    property <color> icon_color:  touch.has-hover ? Theme.text-main : Theme.text-muted;
+
+    animate icon_color { duration: 300ms; }
     height: 24px;
     width: 24px;
     background: transparent;

ui/theme.slint

@@ -4,23 +4,23 @@ export global Theme {
     out property <length> width: 448px;
 
     out property <brush> surface-main: is-dark ? #0f172a : #ffffff;
-    out property <brush> surface-control: is-dark ? #1e293b4d : #ffffff;
+    // out property <brush> surface-control: is-dark ? #1e293b4d : #ffffff;
-    out property <brush> surface-elevated: is-dark ? #1e293b80 : #ffffff;
+    out property <brush> surface-elevated: is-dark ? #1e293b80 : #f8fafc;
     out property <brush> surface-hover: is-dark ? #1e293b : #ffffff;
 
-    out property <brush> border-main: is-dark ? #334155 : #ffffff;
+    out property <brush> border-main: is-dark ? #334155 : #e2e8f0;
 
     out property <brush> gradient-main: @linear-gradient(135deg, rgb(59, 130, 246), rgb(6, 182, 212));
 
-    out property <brush> text-main: is-dark ? #ffffff : #000000;
+    out property <brush> text-main: is-dark ? #ffffff : #0f172a;
-    out property <brush> text-muted: is-dark ? #94a3b8 : #000000;
+    out property <brush> text-muted: is-dark ? #94a3b8 : #64748b;
 
-    out property <brush> text-control: is-dark ? #cbd5e1 : #000000;
+    out property <brush> text-control: is-dark ? #cbd5e1 : #475569;
-    out property <brush> text-control-muted: is-dark ? #64748b : #000000;
+    out property <brush> text-control-muted: is-dark ? #64748b : #94a3b8;
 
-    out property <brush> text-hint: is-dark ? #475569 : #000000;
+    out property <brush> text-hint: is-dark ? #475569 : #475569;
 
-    out property <brush> shadow-color: is-dark ? #3b82f640 : #000000;
+    out property <brush> shadow-color: is-dark ? #3b82f640 : #3b82f640;
 
     out property <length> shadow-primary-x: 0px;
     out property <length> shadow-primary-y: 10px;