[gnome-software: 1/2] ui: Add borders and padding to installed and search lists

[Phaedrus Leeds <mwleeds src gnome org>]

commit ff4898128f361e0d3348c7d698a522c351ae30a7
Author: Philip Withnall <pwithnall endlessos org>
Date:   Sun Nov 22 19:21:19 2020 +0000

    ui: Add borders and padding to installed and search lists
    
    This makes them look more like the mockups:
     * https://gitlab.gnome.org/Teams/Design/software-mockups/-/blob/master/installed-view.png
     * https://gitlab.gnome.org/Teams/Design/software-mockups/-/blob/master/search-results.png
    
    Signed-off-by: Philip Withnall <pwithnall endlessos org>
    
    Fixes: #914

 src/gs-installed-page.ui | 4 ++++
 src/gs-search-page.ui    | 4 ++++
 src/gtk-style.css        | 5 +++++
 3 files changed, 13 insertions(+)
---
diff --git a/src/gs-installed-page.ui b/src/gs-installed-page.ui
index ec265e0b9..5aea69857 100644
--- a/src/gs-installed-page.ui
+++ b/src/gs-installed-page.ui
@@ -40,11 +40,15 @@
                   <object class="GsFixedSizeBin" id="gs_fixed_bin">
                     <property name="visible">True</property>
                     <property name="preferred-width">860</property>
+                    <property name="border-width">24</property>
                     <child>
                       <object class="GtkListBox" id="list_box_install">
                         <property name="visible">True</property>
                         <property name="can_focus">True</property>
                         <property name="selection_mode">none</property>
+                        <style>
+                          <class name="full-page-app-list"/>
+                        </style>
                       </object>
                     </child>
                   </object>
diff --git a/src/gs-search-page.ui b/src/gs-search-page.ui
index b15003077..988162abe 100644
--- a/src/gs-search-page.ui
+++ b/src/gs-search-page.ui
@@ -80,11 +80,15 @@
                 <property name="visible">True</property>
                 <property name="preferred-width">860</property>
                 <property name="valign">start</property>
+                <property name="border-width">24</property>
                 <child>
                   <object class="GtkListBox" id="list_box_search">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="selection_mode">none</property>
+                    <style>
+                      <class name="full-page-app-list"/>
+                    </style>
                   </object>
                 </child>
               </object>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 57144217d..b6ce03d73 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -369,6 +369,11 @@
        font-weight: bold;
 }
 
+.full-page-app-list {
+       border-radius: 4px;
+       border: 1px solid darker(@theme_bg_color);
+}
+
 .image-list {
        background-color: transparent;
 }