Automation dialog: add localization, fix CSS (#1227)

* Automation dialog: add localization, fix CSS

* Feedback

* Add bottom margin to dialog controls

* Remove margin for all

src/dialogs/more-info/controls/more-info-automation.js

@@ -1,40 +1,48 @@
-import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
 import '@polymer/paper-button/paper-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../components/ha-relative-time.js';
 
-class MoreInfoAutomation extends PolymerElement {
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
+
+class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
         paper-button {
           color: var(--primary-color);
           font-weight: 500;
-        top: 3px;
-        height: 37px;
+        }
+        .flex {
+          display: flex;
+          justify-content: space-between;
+        }
+        .actions {
+          margin: 36px 0 8px 0;
+          text-align: right;
         }
       </style>
 
-    <p>
-      Last triggered:
+      <div class="flex">
+        <div>
+          [[localize('ui.card.automation.last_triggered')]]:
+        </div>
         <ha-relative-time datetime="[[stateObj.attributes.last_triggered]]"></ha-relative-time>
-    </p>
+      </div>
 
-    <paper-button on-click="handleTriggerTapped">TRIGGER</paper-button>
+      <div class="actions">
+        <paper-button on-click="handleTriggerTapped">
+          [[localize('ui.card.automation.trigger')]]
+        </paper-button>
+      </div>
     `;
   }
 
   static get properties() {
     return {
-      hass: {
-        type: Object,
-      },
-
-      stateObj: {
-        type: Object,
-      },
+      hass: Object,
+      stateObj: Object
     };
   }
 

src/translations/en.json

@@ -322,6 +322,10 @@
         "arm_home": "Arm home",
         "arm_away": "Arm away"
       },
+      "automation": {
+        "last_triggered": "Last triggered",
+        "trigger": "Trigger"
+      },
       "camera": {
         "not_available": "Image not available"
       },