added shipping address functionality to /manage/clients page

3 files changed, 29 insertions, 0 deletions

diff --git a/src/components/editors/scss/colors.scss b/src/components/editors/scss/_colors.scss
index 4e5b1c2..994dcf7 100644
--- a/src/components/editors/scss/colors.scss
+++ b/src/components/editors/scss/_colors.scss
@@ -22,3 +22,5 @@ $fgColor: white;
 $fgColorAlt: black;
 
 $inputBackgroundColor: #00000000;
+
+$warningColor: #ed4683;
diff --git a/src/components/editors/scss/address-editor.scss b/src/components/editors/scss/address-editor.scss
index 49b0a0a..50db4a9 100644
--- a/src/components/editors/scss/address-editor.scss
+++ b/src/components/editors/scss/address-editor.scss
@@ -20,6 +20,8 @@
 
 .address-editor {
     min-height: 18rem;
+    position: relative;
+
     .heading {
       font-size: 1.1rem;
       color: $primaryAccentColor;
@@ -27,6 +29,20 @@
       align: center;
     }
 
+    .remove-button {
+        opacity: 0;
+        position: absolute;
+        font-size: 2rem;
+        top: 0.8rem;
+        right: 1rem;
+        color: $secondaryAccentColor;
+        transition: opacity 0.2s, color 0.3s;
+    }
+
+    .remove-button:hover {
+        color: $warningColor;
+    }
+
     .checkbox-label {
         border: none;
         max-width: none;
@@ -63,3 +79,7 @@
         }
     }
 }
+
+.address-editor:hover .remove-button {
+    opacity: 1;
+}
diff --git a/src/components/editors/scss/client-editor.scss b/src/components/editors/scss/client-editor.scss
index 52b7189..30919fd 100644
--- a/src/components/editors/scss/client-editor.scss
+++ b/src/components/editors/scss/client-editor.scss
@@ -25,4 +25,11 @@
       display: flex;
       justify-content: space-around;
     }
+
+    .buttons.wide {
+      width: 24.5rem;
+      input.wide-button {
+          width: 11rem;
+      }
+    }
 }