ui: Use GNOME 40 Empty View Styling

We can't use HdyStatusPage right now because it would break DnD, as
reported in https://gitlab.gnome.org/GNOME/gtk/-/issues/808

So, update the styling instead.

4 files changed, 22 insertions, 27 deletions

diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index ed70a5f63..68c3e424c 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -4,6 +4,10 @@
     background: @theme_base_color;
 }
 
+.nautilus-empty-state-icon {
+    opacity: 0.50;
+}
+
 .nautilus-canvas-item {
     border-radius: 5px;
 }
diff --git a/src/resources/ui/nautilus-folder-is-empty.ui b/src/resources/ui/nautilus-folder-is-empty.ui
index 22031ba9b..a06dc4e3b 100644
--- a/src/resources/ui/nautilus-folder-is-empty.ui
+++ b/src/resources/ui/nautilus-folder-is-empty.ui
@@ -8,15 +8,16 @@
     <property name="valign">center</property>
     <property name="hexpand">True</property>
     <property name="vexpand">True</property>
-    <property name="row_spacing">12</property>
+    <property name="row_spacing">36</property>
     <child>
       <object class="GtkImage">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="pixel_size">80</property>
+        <property name="pixel_size">128</property>
         <property name="icon_name">folder-symbolic</property>
         <style>
           <class name="dim-label"/>
+          <class name="nautilus-empty-state-icon"/>
         </style>
       </object>
       <packing>
@@ -29,18 +30,14 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="label" translatable="yes">Folder is Empty</property>
-        <attributes>
-          <attribute name="weight" value="bold"/>
-          <attribute name="scale" value="1.4399999999999999"/>
-        </attributes>
+        <style>
+          <class name="large-title"/>
+        </style>
       </object>
       <packing>
         <property name="left_attach">0</property>
         <property name="top_attach">1</property>
       </packing>
     </child>
-    <style>
-      <class name="dim-label"/>
-    </style>
   </object>
 </interface>
diff --git a/src/resources/ui/nautilus-starred-is-empty.ui b/src/resources/ui/nautilus-starred-is-empty.ui
index 04465cd44..85359322a 100644
--- a/src/resources/ui/nautilus-starred-is-empty.ui
+++ b/src/resources/ui/nautilus-starred-is-empty.ui
@@ -8,15 +8,16 @@
     <property name="valign">center</property>
     <property name="hexpand">True</property>
     <property name="vexpand">True</property>
-    <property name="row_spacing">12</property>
+    <property name="row_spacing">36</property>
     <child>
       <object class="GtkImage">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="pixel_size">80</property>
+        <property name="pixel_size">128</property>
         <property name="icon_name">starred-symbolic</property>
         <style>
           <class name="dim-label"/>
+          <class name="nautilus-empty-state-icon"/>
         </style>
       </object>
       <packing>
@@ -29,18 +30,14 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="label" translatable="yes">Starred files will appear here</property>
-        <attributes>
-          <attribute name="weight" value="bold"/>
-          <attribute name="scale" value="1.4399999999999999"/>
-        </attributes>
+        <style>
+          <class name="large-title"/>
+        </style>
       </object>
       <packing>
         <property name="left_attach">0</property>
         <property name="top_attach">1</property>
       </packing>
     </child>
-    <style>
-      <class name="dim-label"/>
-    </style>
   </object>
 </interface>
diff --git a/src/resources/ui/nautilus-trash-is-empty.ui b/src/resources/ui/nautilus-trash-is-empty.ui
index 528f21d58..fcc9e1390 100644
--- a/src/resources/ui/nautilus-trash-is-empty.ui
+++ b/src/resources/ui/nautilus-trash-is-empty.ui
@@ -8,15 +8,16 @@
     <property name="valign">center</property>
     <property name="hexpand">True</property>
     <property name="vexpand">True</property>
-    <property name="row_spacing">12</property>
+    <property name="row_spacing">36</property>
     <child>
       <object class="GtkImage">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="pixel_size">80</property>
+        <property name="pixel_size">128</property>
         <property name="icon_name">user-trash-symbolic</property>
         <style>
           <class name="dim-label"/>
+          <class name="nautilus-empty-state-icon"/>
         </style>
       </object>
       <packing>
@@ -29,18 +30,14 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="label" translatable="yes">Trash is Empty</property>
-        <attributes>
-          <attribute name="weight" value="bold"/>
-          <attribute name="scale" value="1.4399999999999999"/>
-        </attributes>
+        <style>
+          <class name="large-title"/>
+        </style>
       </object>
       <packing>
         <property name="left_attach">0</property>
         <property name="top_attach">1</property>
       </packing>
     </child>
-    <style>
-      <class name="dim-label"/>
-    </style>
   </object>
 </interface>