From d2d13dc65ce7a6b65b204f7aa84f9b6bdbd3084a Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 15 Feb 2021 22:44:53 +0100
Subject: [PATCH 1/2] rename Customer to TheCustomers

---
 frontend/src/App.vue                                        | 6 +++---
 .../customers/{Customers.vue => TheCustomers.vue}           | 0
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename frontend/src/components/customers/{Customers.vue => TheCustomers.vue} (100%)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ee9960d..cf82ac2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,18 +1,18 @@
 <template>
   <div>
-    <customer></customer>
+    <the-customers></the-customers>
     <the-footer></the-footer>
   </div>
 </template>
 
 <script>
 import TheFooter from "./components/UI/TheFooter.vue";
-import Customer from "./components/customers/Customers.vue";
+import TheCustomers from "./components/customers/TheCustomers.vue";
 
 export default {
   components: {
     TheFooter,
-    Customer,
+    TheCustomers,
   },
   data() {
     return {};
diff --git a/frontend/src/components/customers/Customers.vue b/frontend/src/components/customers/TheCustomers.vue
similarity index 100%
rename from frontend/src/components/customers/Customers.vue
rename to frontend/src/components/customers/TheCustomers.vue

From 114c37866c247ca760f89c510c9a777e6eb3bd7f Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 15 Feb 2021 22:59:31 +0100
Subject: [PATCH 2/2] add some styling

---
 frontend/src/App.vue                          | 26 +++++++++++++++---
 .../src/components/customers/AddCustomer.vue  | 27 ++++++++++++++++++-
 .../components/customers/CustomerDetails.vue  | 13 ++++++++-
 .../src/components/customers/TheCustomers.vue |  2 +-
 4 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cf82ac2..88572aa 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,8 +1,6 @@
 <template>
-  <div>
-    <the-customers></the-customers>
-    <the-footer></the-footer>
-  </div>
+  <the-customers></the-customers>
+  <the-footer></the-footer>
 </template>
 
 <script>
@@ -21,6 +19,9 @@ export default {
 </script>
 
 <style>
+* {
+  box-sizing: border-box;
+}
 html {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -29,4 +30,21 @@ html {
   color: #2c3e50;
   margin-top: 60px;
 }
+.card {
+  margin: 2rem auto;
+  max-width: 40rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  padding: 2rem;
+  background-color: #ffffff;
+}
+button {
+  font: inherit;
+  border: 1px solid #0076bb;
+  background-color: #0076bb;
+  color: white;
+  cursor: pointer;
+  padding: 0.75rem 2rem;
+  border-radius: 30px;
+}
 </style>
diff --git a/frontend/src/components/customers/AddCustomer.vue b/frontend/src/components/customers/AddCustomer.vue
index ecfa59a..c4ee4e7 100644
--- a/frontend/src/components/customers/AddCustomer.vue
+++ b/frontend/src/components/customers/AddCustomer.vue
@@ -58,4 +58,29 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+dialog {
+  margin: 0;
+  position: fixed;
+  top: 20vh;
+  left: 30%;
+  width: 40%;
+  background-color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  padding: 1rem;
+}
+label {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+input,
+textarea {
+  display: block;
+  width: 100%;
+  font: inherit;
+  padding: 0.15rem;
+  border: 1px solid #ccc;
+}
+</style>
diff --git a/frontend/src/components/customers/CustomerDetails.vue b/frontend/src/components/customers/CustomerDetails.vue
index ce6e3b2..068ecd9 100644
--- a/frontend/src/components/customers/CustomerDetails.vue
+++ b/frontend/src/components/customers/CustomerDetails.vue
@@ -24,4 +24,15 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+dialog {
+  margin: 0;
+  position: fixed;
+  top: 20vh;
+  left: 30%;
+  width: 40%;
+  background-color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  padding: 1rem;
+}
+</style>
diff --git a/frontend/src/components/customers/TheCustomers.vue b/frontend/src/components/customers/TheCustomers.vue
index d7f782c..29b1aad 100644
--- a/frontend/src/components/customers/TheCustomers.vue
+++ b/frontend/src/components/customers/TheCustomers.vue
@@ -11,7 +11,7 @@
     @created-customer="closeDialog"
   ></add-customer>
 
-  <div v-if="!addCustomerDialogVisible && !showCustomerDetails">
+  <div v-if="!addCustomerDialogVisible && !showCustomerDetails" class="card">
     <header><h1>List of Customers</h1></header>
     <div>
       <form @submit.prevent="addCustomer">