From 12e020c232c46cc5918fa8cfeacc098b88937ddb Mon Sep 17 00:00:00 2001
From: lainsce <paulogalardi@outlook.com>
Date: Thu, 1 Feb 2024 17:05:41 -0300
Subject: [PATCH] Improve the look of the Color Scheme selectors

---
 data/assets/by-apps.svg              |  2 +-
 data/assets/dark.svg                 |  2 +-
 data/assets/light.svg                |  2 +-
 data/style.css                       | 12 ++++++------
 fuses/appearance/AppearanceView.vala | 25 +++++++++++++++----------
 5 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/data/assets/by-apps.svg b/data/assets/by-apps.svg
index df0d43b..590286b 100644
--- a/data/assets/by-apps.svg
+++ b/data/assets/by-apps.svg
@@ -75,7 +75,7 @@
        id="rect1"
        x="-3.503876"
        y="-23.503876"
-       style="fill:url(#linearGradient15);stroke:#000000;stroke-width:0.992248;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.352611"
+       style="fill:url(#linearGradient15);"
        ry="11.906977" />
   </g>
 </svg>
diff --git a/data/assets/dark.svg b/data/assets/dark.svg
index 31c6945..5348125 100644
--- a/data/assets/dark.svg
+++ b/data/assets/dark.svg
@@ -47,7 +47,7 @@
        id="rect1"
        x="-3.503876"
        y="-23.503876"
-       style="fill:#2d2d2d;stroke:#000000;stroke-width:0.992248;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.352611;fill-opacity:1"
+       style="fill:#2d2d2d;fill-opacity:1"
        ry="11.906977" />
   </g>
 </svg>
diff --git a/data/assets/light.svg b/data/assets/light.svg
index 470cbb5..f7b7d08 100644
--- a/data/assets/light.svg
+++ b/data/assets/light.svg
@@ -47,7 +47,7 @@
        id="rect1"
        x="-3.503876"
        y="-23.503876"
-       style="fill:#fafafa;stroke:#000000;stroke-width:0.992248;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:0.352611;fill-opacity:1"
+       style="fill:#fafafa;fill-opacity:1"
        ry="11.906977" />
   </g>
 </svg>
diff --git a/data/style.css b/data/style.css
index dd2f7e5..2f167c5 100644
--- 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
index a9e188a..0eccda8 100644
--- 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);