styling buttons

src/app/vault/add.component.html

@@ -163,8 +163,12 @@
     </div>
 </div>
 <div class="footer">
-    <button (click)="save()" class="primary"><i class="fa fa-save fa-lg"></i> {{'save' | i18n}}</button>
+    <button (click)="save()" class="primary" title="{{'save' | i18n}}">
-    <button (click)="cancel()">{{'cancel' | i18n}}</button>
+        <i class="fa fa-save fa-lg"></i> {{'save' | i18n}}
+    </button>
+    <button (click)="cancel()" title="{{'cancel' | i18n}}">
+        {{'cancel' | i18n}}
+    </button>
     <button (click)="delete()" class="danger right" title="{{'delete' | i18n}}">
         <i class="fa fa-trash-o fa-lg"></i>
     </button>

src/app/vault/ciphers.component.html

@@ -28,5 +28,7 @@
     </div>
 </div>
 <div class="footer">
-    <button (click)="addCipher()" class="block primary"><i class="fa fa-plus fa-lg"></i></button>
+    <button (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">
+        <i class="fa fa-plus fa-lg"></i>
+    </button>
 </div>

src/app/vault/view.component.html

@@ -216,5 +216,5 @@
     </div>
 </div>
 <div class="footer">
-    <button (click)="edit()">{{'editItem' | i18n}}</button>
+    <button (click)="edit()" title="{{'editItem' | i18n}}">{{'edit' | i18n}}</button>
 </div>

src/locales/en/messages.json

@@ -256,5 +256,8 @@
   },
   "favorite": {
     "message": "Favorite"
+  },
+  "edit": {
+    "message": "Edit"
   }
 }

src/scss/styles.scss

@@ -307,10 +307,15 @@ a {
             border-radius: $border-radius;
             padding: 7px 15px;
             border: 1px solid $button-border-color;
-            margin-right: 15px;
+            margin-right: 10px;
             font-size: $font-size-base;
             color: $button-color;
 
+            &:hover {
+                cursor: pointer;
+                background-color: darken($button-backgound-color, 1.5%);
+            }
+
             &.primary {
                 color: $button-color-primary;
             }