Merge branch 'rest-framework'

frontend/src/App.vue

@@ -1,18 +1,16 @@
 <template>
-  <div>
-    <customer></customer>
-    <the-footer></the-footer>
-  </div>
+  <the-customers></the-customers>
+  <the-footer></the-footer>
 </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 {};
@@ -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>

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>

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>

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">