[libhandy] demo: Adjust manual titles to match HdyStatusPage

[Alexander Mikhaylenko <alexm src gnome org>]

commit cd6a1b600b921d74cf04aca45fe1cf4b8ca0ac0c
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Thu Dec 3 12:32:38 2020 +0100

    demo: Adjust manual titles to match HdyStatusPage
    
    Use style classes rather than label attributes, make sure they wrap with
    word-char mode and are centered.
    
    Make the "Return to the preferences" buttons in preferences centered to
    avoid stretching them with larger titles.

 examples/hdy-demo-preferences-window.ui | 22 ++++++++++++----------
 examples/hdy-demo-window.ui             | 23 +++++++++++++----------
 2 files changed, 25 insertions(+), 20 deletions(-)
---
diff --git a/examples/hdy-demo-preferences-window.ui b/examples/hdy-demo-preferences-window.ui
index ea450e9e..d61bbc75 100644
--- a/examples/hdy-demo-preferences-window.ui
+++ b/examples/hdy-demo-preferences-window.ui
@@ -201,11 +201,11 @@
         <property name="label" translatable="yes">This is a subpage</property>
         <property name="justify">center</property>
         <property name="wrap">True</property>
-        <property name="opacity">0.5</property>
-        <attributes>
-          <attribute name="weight" value="bold"/>
-          <attribute name="scale" value="2"/>
-        </attributes>
+        <property name="wrap-mode">word-char</property>
+        <style>
+          <class name="title"/>
+          <class name="large-title"/>
+        </style>
       </object>
     </child>
     <child>
@@ -213,6 +213,7 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="label" translatable="yes">Return to the preferences</property>
+        <property name="halign">center</property>
         <signal name="clicked" handler="return_to_preferences_cb" swapped="yes"/>
         <style>
           <class name="suggested-action"/>
@@ -236,11 +237,11 @@
         <property name="label" translatable="yes">This is another subpage</property>
         <property name="justify">center</property>
         <property name="wrap">True</property>
-        <property name="opacity">0.5</property>
-        <attributes>
-          <attribute name="weight" value="bold"/>
-          <attribute name="scale" value="2"/>
-        </attributes>
+        <property name="wrap-mode">word-char</property>
+        <style>
+          <class name="title"/>
+          <class name="large-title"/>
+        </style>
       </object>
     </child>
     <child>
@@ -248,6 +249,7 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="label" translatable="yes">Return to the preferences</property>
+        <property name="halign">center</property>
         <signal name="clicked" handler="return_to_preferences_cb" swapped="yes"/>
         <style>
           <class name="suggested-action"/>
diff --git a/examples/hdy-demo-window.ui b/examples/hdy-demo-window.ui
index f968af40..b1e3bdb8 100644
--- a/examples/hdy-demo-window.ui
+++ b/examples/hdy-demo-window.ui
@@ -452,15 +452,15 @@
                               <object class="GtkLabel">
                                 <property name="visible">True</property>
                                 <property name="can_focus">False</property>
-                                <property name="opacity">0.5</property>
                                 <property name="halign">center</property>
                                 <property name="label" translatable="yes">Go back</property>
                                 <property name="justify">center</property>
                                 <property name="wrap">True</property>
-                                <attributes>
-                                  <attribute name="weight" value="bold"/>
-                                  <attribute name="scale" value="2"/>
-                                </attributes>
+                                <property name="wrap-mode">word-char</property>
+                                <style>
+                                  <class name="title"/>
+                                  <class name="large-title"/>
+                                </style>
                               </object>
                             </child>
                             <child>
@@ -1072,11 +1072,11 @@ Try using it with a horizontally expanded clamp to make your search entry adapti
                                 <property name="label" translatable="yes">Another page</property>
                                 <property name="justify">center</property>
                                 <property name="wrap">True</property>
-                                <property name="opacity">0.5</property>
-                                <attributes>
-                                  <attribute name="weight" value="bold"/>
-                                  <attribute name="scale" value="2"/>
-                                </attributes>
+                                <property name="wrap-mode">word-char</property>
+                                <style>
+                                  <class name="title"/>
+                                  <class name="large-title"/>
+                                </style>
                               </object>
                             </child>
                             <child>
@@ -1170,6 +1170,9 @@ Try using it with a horizontally expanded clamp to make your search entry adapti
                                 <property name="label" translatable="yes">Avatar</property>
                                 <property name="halign">center</property>
                                 <property name="xalign">0</property>
+                                <property name="wrap">True</property>
+                                <property name="wrap-mode">word-char</property>
+                                <property name="justify">center</property>
                                 <style>
                                   <class name="title"/>
                                   <class name="large-title"/>