Improve the look of the Color Scheme selectors

tau-OS · Feb 1, 2024 · 12e020c · 12e020c
1 parent db37667
commit 12e020c
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/data/assets/by-apps.svg b/data/assets/by-apps.svg
diff --git a/data/assets/dark.svg b/data/assets/dark.svg
diff --git a/data/assets/light.svg b/data/assets/light.svg
diff --git a/data/style.css b/data/style.css
@@ -224,7 +224,6 @@ spinbutton.flat {
 }
 
 .ensor-box > flowbox > flowboxchild {
-  border-radius: 999px;
   padding: 0;
 }
 
@@ -235,18 +234,19 @@ spinbutton.flat {
 .color-scheme-button {
   padding: 6px;
   background: none;
-}
-.color-scheme-button image {
   box-shadow: 0 0 0 1px alpha(@outline, 0.38);
-  border-radius: 8px;
+}
+.color-scheme-button .content-block-image {
+  margin: 0;
+  box-shadow: inset 0 0 0 1px alpha(@outline, 0.38);
 }
 .color-scheme-button label {
   font-weight: 500;
 }
-.color-scheme-button:hover image {
+.color-scheme-button:hover {
   box-shadow: 0 0 0 1px @outline;
 }
-.color-scheme-button:checked image {
+.color-scheme-button:checked {
   box-shadow: 0 0 0 3px @accent_color;
 }
 .color-scheme-button:checked label {

diff --git a/fuses/appearance/AppearanceView.vala b/fuses/appearance/AppearanceView.vala
@@ -145,11 +145,12 @@ public class AppearanceView : Gtk.Box {
         };
         prefer_sublabel.add_css_class ("cb-subtitle");
 
-        var prefer_default_image = new Gtk.Image.from_resource ("/com/fyralabs/Fusebox/Appearance/by-apps.svg") {
-            pixel_size = 80,
-            hexpand = true,
-            halign = Gtk.Align.START
+        var prefer_default_image = new He.ContentBlockImage ("resource:///com/fyralabs/Fusebox/Appearance/by-apps.svg") {
+            requested_width = 80,
+            requested_height = 80,
+            valign = Gtk.Align.START
         };
+        prefer_default_image.add_css_class ("large-radius");
 
         var prefer_default_card = new Gtk.Grid ();
         prefer_default_card.attach (prefer_default_image, 0, 0);
@@ -173,10 +174,12 @@ public class AppearanceView : Gtk.Box {
         prefer_default_radio.add_css_class ("color-scheme-button");
         prefer_default_radio.child = (prefer_default_grid);
 
-        var prefer_light_image = new Gtk.Image.from_resource ("/com/fyralabs/Fusebox/Appearance/light.svg") {
-            pixel_size = 80,
-            halign = Gtk.Align.START
+        var prefer_light_image = new He.ContentBlockImage ("resource:///com/fyralabs/Fusebox/Appearance/light.svg") {
+            requested_width = 80,
+            requested_height = 80,
+            valign = Gtk.Align.START
         };
+        prefer_light_image.add_css_class ("large-radius");
 
         var prefer_light_card = new Gtk.Grid ();
         prefer_light_card.attach (prefer_light_image, 0, 0);
@@ -201,10 +204,12 @@ public class AppearanceView : Gtk.Box {
         prefer_light_radio.add_css_class ("color-scheme-button");
         prefer_light_radio.child = (prefer_light_grid);
 
-        var dark_image = new Gtk.Image.from_resource ("/com/fyralabs/Fusebox/Appearance/dark.svg") {
-            pixel_size = 80,
-            halign = Gtk.Align.START
+        var dark_image = new He.ContentBlockImage ("resource:///com/fyralabs/Fusebox/Appearance/dark.svg") {
+            requested_width = 80,
+            requested_height = 80,
+            valign = Gtk.Align.START
         };
+        dark_image.add_css_class ("large-radius");
 
         var dark_card = new Gtk.Grid ();
         dark_card.attach (dark_image, 0, 0);