[gnome-software: 7/13] gs-category-tile: Restyle to match new designs

[Philip Withnall <pwithnall src gnome org>]

commit c17d0e5157f3dc1d3865514d44cec884744a9ede
Author: Philip Withnall <pwithnall endlessos org>
Date:   Thu Jul 29 16:44:49 2021 +0100

    gs-category-tile: Restyle to match new designs
    
    Restyle `GsCategoryTile` to match the smaller category tiles in the new
    designs: https://gitlab.gnome.org/Teams/Design/software-mockups/-/blob/master/adaptive/sidebarless.png
    
    Signed-off-by: Philip Withnall <pwithnall endlessos org>

 data/assets/work-category-background.png | Bin 0 -> 608 bytes
 src/gnome-software.gresource.xml         |   1 +
 src/gs-category-tile.c                   |   2 +-
 src/gs-category-tile.ui                  |  12 ++++----
 src/gtk-style-hc.css                     |   3 ++
 src/gtk-style.css                        |  48 +++++++++++++++++++++++++++++--
 6 files changed, 56 insertions(+), 10 deletions(-)
---
diff --git a/data/assets/work-category-background.png b/data/assets/work-category-background.png
new file mode 100644
index 000000000..6528d2655
Binary files /dev/null and b/data/assets/work-category-background.png differ
diff --git a/src/gnome-software.gresource.xml b/src/gnome-software.gresource.xml
index 1eb5ee561..592ed6185 100644
--- a/src/gnome-software.gresource.xml
+++ b/src/gnome-software.gresource.xml
@@ -48,6 +48,7 @@
   <file preprocess="xml-stripblanks">org.freedesktop.PackageKit.xml</file>
   <file>gtk-style.css</file>
   <file>gtk-style-hc.css</file>
+  <file alias="work-category-background.png">../data/assets/work-category-background.png</file>
   <file preprocess="xml-stripblanks" 
alias="icons/scalable/apps/system-component-addon.svg">../data/icons/system-component-addon.svg</file>
   <file preprocess="xml-stripblanks" 
alias="icons/scalable/apps/system-component-application.svg">../data/icons/system-component-application.svg</file>
   <file preprocess="xml-stripblanks" 
alias="icons/scalable/apps/system-component-codecs.svg">../data/icons/system-component-codecs.svg</file>
diff --git a/src/gs-category-tile.c b/src/gs-category-tile.c
index 3d50026fa..4a21fcadc 100644
--- a/src/gs-category-tile.c
+++ b/src/gs-category-tile.c
@@ -97,7 +97,7 @@ gs_category_tile_refresh (GsCategoryTile *tile)
                             gs_category_get_name (tile->category));
        gtk_image_set_from_icon_name (GTK_IMAGE (tile->image),
                                      gs_category_get_icon_name (tile->category),
-                                     GTK_ICON_SIZE_MENU);
+                                     GTK_ICON_SIZE_DND);
 }
 
 /**
diff --git a/src/gs-category-tile.ui b/src/gs-category-tile.ui
index 117637d12..a2942474d 100644
--- a/src/gs-category-tile.ui
+++ b/src/gs-category-tile.ui
@@ -10,20 +10,18 @@
     </style>
     <child>
       <object class="GtkBox" id="box">
+        <property name="halign">center</property>
         <property name="visible">True</property>
         <property name="orientation">horizontal</property>
-        <property name="spacing">12</property>
-        <property name="margin_top">9</property>
-        <property name="margin_bottom">9</property>
-        <property name="margin_start">9</property>
-        <property name="margin_end">9</property>
+        <property name="spacing">8</property>
         <child>
           <object class="GtkImage" id="image">
             <property name="visible">True</property>
+            <!-- Placeholder; the actual icon is set in code -->
             <property name="icon_name">folder-music-symbolic</property>
-            <property name="icon_size">1</property>
+            <property name="icon_size">5</property><!-- GTK_ICON_SIZE_DND -->
             <style>
-              <class name="dim-label"/>
+              <class name="icon-dropshadow"/>
             </style>
           </object>
         </child>
diff --git a/src/gtk-style-hc.css b/src/gtk-style-hc.css
index 0b7a60044..a41262902 100644
--- a/src/gtk-style-hc.css
+++ b/src/gtk-style-hc.css
@@ -55,3 +55,6 @@ app-context-bar .context-tile {
 .context-tile-lozenge.details-rating-5 { background-color: #d1e4fb; color: @theme_fg_color }
 
 .community-built { color: @theme_fg_color }
+
+/* Styling for specific category buttons. */
+/* TODO Work out what to do here */
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 4d638103c..1183ee460 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -179,8 +179,52 @@ summary-tile {
 }
 
 .view.category-tile {
-    padding-top: 2px;
-    padding-bottom: 2px;
+       padding: 20px 40px;
+       border-radius: 8px;
+       font-size: larger;
+       font-weight: bold;
+       text-shadow: none;
+}
+
+/* Disable highlight on hover as it doesn’t make these icons look good */
+.view.category-tile:hover { -gtk-icon-effect: none }
+
+/* Styling for specific category buttons. */
+.category-tile.category-create {
+       border-color: #9072ce;
+       background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
+       color: #ffffff;
+}
+
+.category-tile.category-develop {
+       border-color: #353040;
+       background: #5e5c64;
+       color: #ffffff;
+}
+
+.category-tile.category-learn {
+       border-color: #26a269;
+       background: linear-gradient(180deg, #2ec27e 0%, #27a76c 100%);
+       color: #ffffff;
+}
+
+.category-tile.category-play {
+       border-color: #f1b28a;
+       background: linear-gradient(90deg, rgba(248,217,169,1) 0%, rgba(235,95,195,1) 50%, rgba(9,9,121,1) 
100%);
+       color: #393484;
+}
+
+.category-tile.category-socialize {
+       border-color: #db3371;
+       background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
+       color: #572f15;
+}
+
+.category-tile.category-work {
+       border-color: #efd185;
+       background: url("resource:///org/gnome/Software/work-category-background.png");
+       background-repeat: repeat;
+       color: #1c71d8;
 }
 
 .app-list {