[polari] roomStack: Use Adw.StatusPage for placeholder

[Marge Bot <marge-bot src gnome org>]

commit a336a3b064c3e0b4453c95886d79d98b307f7985
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Mar 18 19:14:10 2022 +0100

    roomStack: Use Adw.StatusPage for placeholder
    
    libadwaita provides a standard widget for status pages and placeholders.
    Use it for less code and more consistency :-)
    
    Part-of: <https://gitlab.gnome.org/GNOME/polari/-/merge_requests/250>

 data/resources/style.css | 12 ------------
 src/roomStack.js         | 40 +++++++---------------------------------
 2 files changed, 7 insertions(+), 45 deletions(-)
---
diff --git a/data/resources/style.css b/data/resources/style.css
index b22eb58a..f414dbd2 100644
--- a/data/resources/style.css
+++ b/data/resources/style.css
@@ -143,18 +143,6 @@ treeview.polari-server-room-list {
     padding: 0px 4px;
 }
 
-.polari-background {
-    opacity: 0.5;
-}
-
-.polari-background-title {
-    font-size: 250%;
-}
-
-.polari-background-description {
-    font-size: larger;
-}
-
 .polari-setup-page {
     padding: 48px 156px;
 }
diff --git a/src/roomStack.js b/src/roomStack.js
index a2109527..667d9d13 100644
--- a/src/roomStack.js
+++ b/src/roomStack.js
@@ -1,3 +1,4 @@
+import Adw from 'gi://Adw';
 import Gio from 'gi://Gio';
 import GLib from 'gi://GLib';
 import GObject from 'gi://GObject';
@@ -217,43 +218,16 @@ class ChatPlaceholder extends Gtk.Overlay {
     constructor(sizeGroup) {
         super();
 
-        let image = new Gtk.Image({
+        const statusPage = new Adw.StatusPage({
             icon_name: 'org.gnome.Polari-symbolic',
-            pixel_size: 96, halign: Gtk.Align.END,
-            margin_end: 14,
-        });
-
-        let title = new Gtk.Label({
-            use_markup: true,
-            halign: Gtk.Align.START,
-            margin_start: 14,
-        });
-        title.label = `<span letter_spacing="4500">${_('Polari')}<${'/'}span>`;
-        title.add_css_class('polari-background-title');
-
-        let description = new Gtk.Label({
-            label: _('Join a room using the + button.'),
-            halign: Gtk.Align.CENTER, wrap: true,
-            margin_top: 24, use_markup: true,
+            title: _('Polari'),
+            description: _('Join a room using the + button.'),
+            vexpand: true,
         });
-        description.add_css_class('polari-background-description');
+        this.set_child(statusPage);
 
-        let inputPlaceholder = new Gtk.Box({ valign: Gtk.Align.END });
+        const inputPlaceholder = new Gtk.Box({ valign: Gtk.Align.END });
         sizeGroup.add_widget(inputPlaceholder);
-
-        let grid = new Gtk.Grid({
-            column_homogeneous: true,
-            can_focus: false,
-            column_spacing: 18,
-            hexpand: true,
-            vexpand: true,
-            valign: Gtk.Align.CENTER,
-        });
-        grid.add_css_class('polari-background');
-        grid.attach(image, 0, 0, 1, 1);
-        grid.attach(title, 1, 0, 1, 1);
-        grid.attach(description, 0, 1, 2, 1);
-        this.set_child(grid);
         this.add_overlay(inputPlaceholder);
     }
 });