footer buttons

src/app/vault/add.component.html

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

src/app/vault/ciphers.component.html

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

src/app/vault/edit.component.html

@@ -24,9 +24,6 @@
                     </div>
                 </div>
             </div>
-            <div class="box-footer">
-                Some footer information for edit.
-            </div>
         </div>
     </div>
 </div>

src/locales/en/messages.json

@@ -244,5 +244,17 @@
   },
   "country": {
     "message": "Country"
+  },
+  "save": {
+    "message": "Save"
+  },
+  "cancel": {
+    "message": "Cancel"
+  },
+  "delete": {
+    "message": "Delete"
+  },
+  "favorite": {
+    "message": "Favorite"
   }
 }

src/scss/styles.scss

@@ -33,6 +33,12 @@ $box-background-color: $background-color;
 $box-background-hover-color: $background-color-alt;
 $box-border-color: $border-color;
 
+$button-border-color: darken($border-color-dark, 12%);
+$button-backgound-color: white;
+$button-color: lighten($text-color, 40%);
+$button-color-primary: darken($brand-primary, 8%);
+$button-color-danger: darken($brand-danger, 10%);
+
 * {
     box-sizing: border-box;
 }
@@ -292,6 +298,40 @@ a {
         background-color: $background-color-alt;
         flex: 0 0 auto;
         border-top: 1px solid $border-color-dark;
+        display: flex;
+        align-items: center;
+        padding: 0 15px;
+
+        button {
+            background-color: $button-backgound-color;
+            border-radius: $border-radius;
+            padding: 7px 15px;
+            border: 1px solid $button-border-color;
+            margin-right: 15px;
+            font-size: $font-size-base;
+            color: $button-color;
+
+            &.primary {
+                color: $button-color-primary;
+            }
+
+            &.danger {
+                color: $button-color-danger;
+            }
+
+            &.block {
+                display: block;
+                width: 100%;
+            }
+
+            &.right {
+                margin-left: auto;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
     }
 }