[gnome-software/wip/exalm/style-cleanups: 15/25] os-update-page: Clean up the section style

[Alexander Mikhaylenko <alexm src gnome org>]

commit 929a5bd19c89da4d8b6cf9840e2c99bb7b666ec1
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Nov 9 21:38:19 2021 +0500

    os-update-page: Clean up the section style

 src/gs-os-update-page.c | 17 +++++------------
 src/style-hc.css        |  9 ---------
 src/style.css           | 17 +----------------
 3 files changed, 6 insertions(+), 37 deletions(-)
---
diff --git a/src/gs-os-update-page.c b/src/gs-os-update-page.c
index 0856f27bc..5cbe0120a 100644
--- a/src/gs-os-update-page.c
+++ b/src/gs-os-update-page.c
@@ -261,7 +261,6 @@ os_updates_sort_func (GtkListBoxRow *a,
 static GtkWidget *
 get_section_header (GsOsUpdatePage *page, GsOsUpdatePageSection section)
 {
-       GtkStyleContext *context;
        GtkWidget *header;
        GtkWidget *label;
 
@@ -288,17 +287,14 @@ get_section_header (GsOsUpdatePage *page, GsOsUpdatePageSection section)
 
        /* create header */
        header = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 3);
-       context = gtk_widget_get_style_context (header);
-       gtk_style_context_add_class (context, "app-listbox-header");
+       gtk_widget_add_css_class (header, "app-listbox-header");
 
        /* put label into the header */
        gtk_widget_set_hexpand (label, TRUE);
        gtk_box_append (GTK_BOX (header), label);
-       gtk_widget_set_visible (label, TRUE);
-       gtk_widget_set_margin_start (label, 6);
+       gtk_widget_set_margin_start (label, 16);
        gtk_label_set_xalign (GTK_LABEL (label), 0.0);
-       context = gtk_widget_get_style_context (label);
-       gtk_style_context_add_class (context, "app-listbox-header-title");
+       gtk_widget_add_css_class (label, "heading");
 
        /* success */
        return header;
@@ -324,7 +320,6 @@ list_header_func (GtkListBoxRow *row,
 static void
 create_section (GsOsUpdatePage *page, GsOsUpdatePageSection section)
 {
-       GtkStyleContext *context;
        GtkWidget *previous = NULL;
 
        page->list_boxes[section] = gtk_list_box_new ();
@@ -338,8 +333,6 @@ create_section (GsOsUpdatePage *page, GsOsUpdatePageSection section)
                                      page, NULL);
        g_signal_connect (GTK_LIST_BOX (page->list_boxes[section]), "row-activated",
                          G_CALLBACK (row_activated_cb), page);
-       gtk_widget_set_visible (page->list_boxes[section], TRUE);
-       gtk_widget_set_vexpand (page->list_boxes[section], TRUE);
        gtk_box_append (GTK_BOX (page->box), page->list_boxes[section]);
        gtk_widget_set_margin_top (page->list_boxes[section], 24);
 
@@ -354,8 +347,8 @@ create_section (GsOsUpdatePage *page, GsOsUpdatePageSection section)
        }
 
        /* make rounded edges */
-       context = gtk_widget_get_style_context (page->list_boxes[section]);
-       gtk_style_context_add_class (context, "app-updates-section");
+       gtk_widget_set_overflow (page->list_boxes[section], GTK_OVERFLOW_HIDDEN);
+       gtk_widget_add_css_class (page->list_boxes[section], "card");
 }
 
 /**
diff --git a/src/style-hc.css b/src/style-hc.css
index cbc643291..73e440348 100644
--- a/src/style-hc.css
+++ b/src/style-hc.css
@@ -15,15 +15,6 @@
        color: @theme_fg_color;
 }
 
-.app-listbox-header {
-       background-color: #babdb6;
-       border-color: #000000;
-}
-
-.app-updates-section {
-       border-color: #000000;
-}
-
 review-bar,
 .review-histogram star-image {
        color: alpha(@theme_fg_color, .8);
diff --git a/src/style.css b/src/style.css
index 66a7fc619..9f47f7082 100644
--- a/src/style.css
+++ b/src/style.css
@@ -246,22 +246,7 @@ review-bar {
 
 .app-listbox-header {
        padding: 6px;
-       background-image: none;
-       border-bottom: 1px solid @theme_bg_color;
-}
-
-.app-listbox-header:dir(ltr) { padding-left: 10px; }
-
-.app-listbox-header:dir(rtl) { padding-right: 10px; }
-
-.app-updates-section {
-       border-radius: 4px;
-       border: 1px solid darker(@theme_bg_color);
-}
-
-.app-listbox-header-title {
-       font-size: 100%;
-       font-weight: bold;
+       border-bottom: 1px solid @borders;
 }
 
 .image-list {