LinkSuggestionGrid: improve the UI a bit.

And while doing so, start using a GtkTemplate.

See [bug 696384](https://bugzilla.gnome.org/show_bug.cgi?id=696384).

3 files changed, 92 insertions, 1 deletions

diff --git a/data/contacts.gresource.xml b/data/contacts.gresource.xml
index 69cacc7..34c0230 100644
--- a/data/contacts.gresource.xml
+++ b/data/contacts.gresource.xml
@@ -9,6 +9,7 @@
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-contact-editor.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-contact-pane.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-in-app-notification.ui</file>
+    <file compressed="true" preprocess="xml-stripblanks">ui/contacts-link-suggestion-grid.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-list-pane.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-window.ui</file>
   </gresource>
diff --git a/data/ui/contacts-link-suggestion-grid.ui b/data/ui/contacts-link-suggestion-grid.ui
new file mode 100644
index 0000000..30511c7
--- /dev/null
+++ b/data/ui/contacts-link-suggestion-grid.ui
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.22 -->
+  <template class="ContactsLinkSuggestionGrid" parent="GtkGrid">
+    <property name="orientation">horizontal</property>
+    <property name="visible">True</property>
+    <property name="valign">end</property>
+    <property name="column_spacing">6</property>
+    <child>
+      <object class="GtkLabel" id="description_label">
+        <property name="visible">True</property>
+        <property name="valign">end</property>
+        <property name="halign">start</property>
+        <property name="hexpand">True</property>
+        <property name="margin_top">12</property>
+        <property name="wrap">True</property>
+        <property name="wrap_mode">word-char</property>
+      </object>
+      <packing>
+        <property name="left_attach">1</property>
+        <property name="top_attach">0</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="extra_info_label">
+        <property name="visible">False</property>
+        <property name="valign">start</property>
+        <property name="halign">start</property>
+        <property name="hexpand">True</property>
+        <property name="margin_bottom">12</property>
+        <style>
+          <class name="dim-label"/>
+        </style>
+      </object>
+      <packing>
+        <property name="left_attach">1</property>
+        <property name="top_attach">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="valign">center</property>
+        <property name="orientation">horizontal</property>
+        <property name="spacing">6</property>
+        <property name="margin_top">12</property>
+        <property name="margin_bottom">12</property>
+        <property name="margin_start">6</property>
+        <property name="margin_end">6</property>
+        <child>
+          <object class="GtkButton" id="accept_button">
+            <property name="visible">True</property>
+            <property name="valign">center</property>
+            <property name="label" translatable="yes">Link Contacts</property>
+            <property name="margin_end">6</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+            <property name="orientation">vertical</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="reject_button">
+            <property name="visible">True</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="flat"/>
+            </style>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon_name">window-close-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+      <packing>
+        <property name="left_attach">2</property>
+        <property name="top_attach">0</property>
+        <property name="height">2</property>
+      </packing>
+    </child>
+  </template>
+</interface>
diff --git a/data/ui/style.css b/data/ui/style.css
index d7a2a05..bdba0f9 100644
--- a/data/ui/style.css
+++ b/data/ui/style.css
@@ -32,7 +32,8 @@ row.contact-data-row {
 }
 
 .contacts-suggestion {
-  background-color: darker(@theme_bg_color);
+  border-top: 1px solid @borders;
+  background-color: shade(@theme_bg_color, 0.9);
 }
 
 /* Border on the right in the left menu toolbar */