[gnome-weather] Set top and bottom margin of the hourly chart's entry to 18

[Michael Catanzaro <mcatanzaro src gnome org>]

commit 4dc56a1cf74a4666a5482e11edf254cba1503765
Author: Vitaly Dyachkov <obyknovenius me com>
Date:   Mon Aug 24 17:31:02 2020 +0200

    Set top and bottom margin of the hourly chart's entry to 18
    
    Wrap the hourly chart's entry with a Gtk.Alignment and set it's top and
    bottom margins to 18.

 data/hour-entry.ui        | 98 +++++++++++++++++++++++++----------------------
 src/app/hourlyForecast.js |  2 +-
 2 files changed, 53 insertions(+), 47 deletions(-)
---
diff --git a/data/hour-entry.ui b/data/hour-entry.ui
index 3e90181..a449bf3 100644
--- a/data/hour-entry.ui
+++ b/data/hour-entry.ui
@@ -2,59 +2,65 @@
 <!-- Generated with glade 3.22.0 -->
 <interface>
   <requires lib="gtk+" version="3.20"/>
-  <template class="Gjs_HourEntry" parent="GtkBox">
-    <property name="width_request">75</property>
-    <property name="height_request">200</property>
+  <template class="Gjs_HourEntry" parent="GtkAlignment">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
-    <property name="hexpand">True</property>
-    <property name="vexpand">True</property>
-    <property name="orientation">vertical</property>
-    <property name="spacing">8</property>
+    <property name="top_padding">18</property>
+    <property name="bottom_padding">18</property>
     <child>
-      <object class="GtkLabel" id="timeLabel">
+      <object class="GtkBox" id="box">
+        <property name="width_request">75</property>
+        <property name="height_request">200</property>
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="margin_top">8</property>
-        <property name="label">Now</property>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="position">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkImage" id="image">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="valign">start</property>
+        <property name="hexpand">True</property>
         <property name="vexpand">True</property>
-        <property name="pixel_size">32</property>
-        <property name="icon_name">weather-showers-symbolic</property>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="position">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="temperatureLabel">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="valign">end</property>
-        <property name="margin_bottom">16</property>
-        <property name="label">13°</property>
-        <style>
-          <class name="forecast-temperature-label"/>
-        </style>
+        <property name="orientation">vertical</property>
+        <property name="spacing">8</property>
+        <child>
+          <object class="GtkLabel" id="timeLabel">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="label">Now</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkImage" id="image">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="valign">start</property>
+            <property name="vexpand">True</property>
+            <property name="pixel_size">32</property>
+            <property name="icon_name">weather-showers-symbolic</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="temperatureLabel">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="valign">end</property>
+            <property name="label">13°</property>
+            <style>
+              <class name="forecast-temperature-label"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
+        </child>
       </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="position">2</property>
-      </packing>
     </child>
   </template>
 </interface>
diff --git a/src/app/hourlyForecast.js b/src/app/hourlyForecast.js
index 20aee18..eccc9d2 100644
--- a/src/app/hourlyForecast.js
+++ b/src/app/hourlyForecast.js
@@ -179,7 +179,7 @@ var HourlyForecastFrame = GObject.registerClass(class ForecastFrame extends Gtk.
 var HourEntry = GObject.registerClass({
     Template: 'resource:///org/gnome/Weather/hour-entry.ui',
     InternalChildren: ['timeLabel', 'image', 'temperatureLabel'],
-}, class HourEntry extends Gtk.Box {
+}, class HourEntry extends Gtk.Alignment {
 
     _init(params) {
         super._init(params);