Make style buttons resizable

themeSwitcher.nim

@@ -14,15 +14,14 @@ const
   # GTK CSS for overriding the default icon size of buttons
   gtkCSS = """
 .style-button {
-  -gtk-icon-size: 5.5em;
-  padding: 0.1em 0.4em;
-  border-radius: 0.75em;
+  padding: 0.3em 0.3em;
+  border-radius: 14%;
 }
 
 .accent-button {
   -gtk-icon-size: 1.65em;
   padding: 0.4em;
-  border-radius: 1.5em;
+  border-radius: 50%;
 }
 
 #.accent-button.suggested-action {
@@ -36,7 +35,7 @@ const
   themeStyles = ["Default", "Nord", "Dracula", "Catppuccin", "Everforest", "Gruvbox"]
   accentColors = ["Blue", "Red", "Purple", "Pink", "Teal", "Green", "Yellow", "Orange", "Grey"]
 
-var iconsDirs = @[styleIconsDir]
+var iconsDirs: seq[string]
 
 for dir in walkDirs(accentIconsDir / "*"):
   iconsDirs.add(dir)
@@ -82,7 +81,7 @@ method view(app: AppState): Widget =
     Window:
       title = "TROMjaro Theme Switcher"
       # Shrink window to the smallest size
-      defaultSize = (0, 0)
+      defaultSize = (900, 700)
       iconName = appLogo
       # Vertical box
       Box(orient = OrientY, margin = 13, spacing = 10):
@@ -96,7 +95,7 @@ method view(app: AppState): Widget =
             Box(orient = OrientX, spacing = 5):
               for styleName in themeStyles:
                 insert(makeThemeButton(shadeName, styleName)) {.vAlign: AlignCenter, hAlign: AlignCenter.}
-        Separator(margin = Margin(top: 5))
+        Separator(margin = Margin(top: 5)) {.vAlign: AlignCenter.}
         Label:
           useMarkup=true
           text="<span size='large'>ACCENT COLOR</span>"
@@ -104,7 +103,7 @@ method view(app: AppState): Widget =
         Box(orient = OrientX, spacing = 3):
           for accentColor in accentColors:
             insert(makeAccentButton(accentColor)) {.vAlign: AlignCenter, hAlign: AlignCenter.}
-        Separator(margin = Margin(top: 12))
+        Separator(margin = Margin(top: 12)) {.vAlign: AlignCenter.}
         # Vertical box
         Box(orient = OrientY):
           Label:
@@ -181,7 +180,8 @@ proc makeThemeButton(shadeName: string, styleName: string): Widget =
 
   result = gui:
     Button:
-      icon = fmt"Colloid{shade}{style}"
+      Picture:
+        pixbuf = loadPixbuf(fmt"{styleIconsDir}/Colloid{shade}{style}.svg")
       tooltip = if shadeName == "": styleName else: fmt"{shadeName}-{styleName}"
       style = if (shadeName, styleName) == (currentTheme.shade, currentTheme.style):
         [StyleClass("style-button"), ButtonSuggested]