From 3ceb2a6dbd9f24de4618d17f1d969b8e638febfb Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 25 Jan 2018 17:45:21 -0500
Subject: [PATCH] footer buttons

---
 src/app/vault/add.component.html     |  6 ++++-
 src/app/vault/ciphers.component.html |  2 +-
 src/app/vault/edit.component.html    |  3 ---
 src/locales/en/messages.json         | 12 +++++++++
 src/scss/styles.scss                 | 40 ++++++++++++++++++++++++++++
 5 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/src/app/vault/add.component.html b/src/app/vault/add.component.html
index a3f8807e..5c9a2e3a 100644
--- a/src/app/vault/add.component.html
+++ b/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>
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index adfa3a0c..b65fa96f 100644
--- a/src/app/vault/ciphers.component.html
+++ b/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>
diff --git a/src/app/vault/edit.component.html b/src/app/vault/edit.component.html
index 9644bf6e..4d0a59fe 100644
--- a/src/app/vault/edit.component.html
+++ b/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>
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index b4bc3a69..b5a1b6dc 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -244,5 +244,17 @@
   },
   "country": {
     "message": "Country"
+  },
+  "save": {
+    "message": "Save"
+  },
+  "cancel": {
+    "message": "Cancel"
+  },
+  "delete": {
+    "message": "Delete"
+  },
+  "favorite": {
+    "message": "Favorite"
   }
 }
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index be5ea029..d78c37eb 100644
--- a/src/scss/styles.scss
+++ b/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;
+            }
+        }
     }
 }