From ba3efb90e53fb5dba1b9c4f5f819327be84120d1 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sat, 31 Jul 2021 03:00:29 +0200
Subject: Small UI improvements.

---
 client/src/views/Checkout.vue | 2 +-
 client/src/views/Login.vue    | 6 ++++--
 client/src/views/Product.vue  | 9 ++++++---
 client/src/views/Register.vue | 8 ++++----
 4 files changed, 15 insertions(+), 10 deletions(-)

(limited to 'client/src/views')

diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue
index 7004b1f..fc2581c 100644
--- a/client/src/views/Checkout.vue
+++ b/client/src/views/Checkout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-5">
+  <div class="mt-5 mb-1 mx-3">
     <div class="row d-flex justify-content-center">
       <div class="col-md-6 card">
         <ul class="list-group list-group-flush">
diff --git a/client/src/views/Login.vue b/client/src/views/Login.vue
index f0a1759..51b0b80 100644
--- a/client/src/views/Login.vue
+++ b/client/src/views/Login.vue
@@ -2,7 +2,8 @@
   <div class="mt-5">
     <div class="row d-flex justify-content-center">
       <div class="col-md-7">
-        <div class="card px-5 py-4">
+        <div class="card px-5 py-4 mb-3">
+          <form>
 
           <div class="text-center mb-4">
             <h4>Login</h4>
@@ -25,9 +26,10 @@
           </div>
 
           <div class="forms-inputs mb-4">
-            <button @click.stop.prevent="login" class="btn btn-dark w-100">Login</button>
+            <input type="submit" value="Submit" class="btn btn-dark w-100" @click.stop.prevent="login">
           </div>
 
+          </form>
         </div>
       </div>
     </div>
diff --git a/client/src/views/Product.vue b/client/src/views/Product.vue
index 142fb42..96b3103 100644
--- a/client/src/views/Product.vue
+++ b/client/src/views/Product.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="mt-5 d-flex justify-content-center">
-    <div class="card col-md-8">
+    <div class="card col-md-8 mb-3">
       <div class="row g-0">
 
+        <div class="card-header d-flex align-items-baseline">
+          <div class="btn btn-outline-secondary btn-sm ms-auto" @click="back">Go back</div>
+        </div>
+
         <div class="col-md-6">
           <img :src="curProductImg" class="img-fluid rounded-start">
         </div>
@@ -16,8 +20,7 @@
           </div>
           <div class="card-footer d-flex align-items-baseline">
             <div class="btn btn-dark" @click="buy">Add to cart</div>
-            <div class="btn btn-secondary ms-3" v-show="curProductQuantity" @click="remove">Remove from cart</div>
-            <div class="btn btn-outline-secondary btn-sm ms-auto" @click="back">Go back</div>
+            <div class="btn btn-secondary btn-sm ms-md-2 ms-1" v-show="curProductQuantity" @click="remove">Remove from cart</div>
           </div>
         </div>
 
diff --git a/client/src/views/Register.vue b/client/src/views/Register.vue
index 238b5df..7159f75 100644
--- a/client/src/views/Register.vue
+++ b/client/src/views/Register.vue
@@ -2,8 +2,8 @@
   <div class="mt-5">
     <div class="row d-flex justify-content-center">
       <div class="col-md-7">
-        <div class="card px-5 py-4">
-          <div class="form-data">
+        <div class="card px-5 py-4 mb-3">
+          <form>
 
             <div class="text-center mb-4">
               <h4>Register</h4>
@@ -50,10 +50,10 @@
             </div>
 
             <div class="mb-3">
-              <button @click.stop.prevent="submit" class="btn btn-dark w-100">Register</button>
+              <input type="submit" value="Submit" class="btn btn-dark w-100" @click.stop.prevent="submit">
             </div>
 
-          </div>
+          </form>
         </div>
       </div>
     </div>
-- 
cgit v1.2.3