From b5c88e628475c6ab5d6f145de00b7aa7fec39844 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Sat, 30 Sep 2023 09:55:36 +0200
Subject: [PATCH] more styling

---
 src/server/data/booked.json                    |  2 +-
 .../main/src/components/sideCartView.vue       | 18 +++++++++++++++++-
 .../main/src/views/purchasing/CartView.vue     | 18 +++++++++++++++++-
 .../views/purchasing/PaymentSuccessView.vue    |  2 +-
 src/webapp/main/src/views/user/LoginView.vue   | 12 ++++++++++--
 .../main/src/views/user/PasswordResetView.vue  | 14 ++++++++++++--
 6 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/src/server/data/booked.json b/src/server/data/booked.json
index 96f20c3..cb89c29 100644
--- a/src/server/data/booked.json
+++ b/src/server/data/booked.json
@@ -1 +1 @@
-{"test4":{"secAr4s7":{"id":"secAr4s7","component":1,"ticketOption":"1","eventID":"test4","category":"1","name":"Row 5, Seat 8"},"secAr6s14":{"id":"secAr6s14","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 7, Seat 15"},"secAr6s10":{"id":"secAr6s10","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 7, Seat 11"}},"test3":{"ticket1_1":{"id":"ticket1_1","component":1,"ticketOption":"1","eventID":"test3","count":1,"category":"1","name":"Category 1 (Child)"}}}
\ No newline at end of file
+{"test4":{"secAr4s7":{"id":"secAr4s7","component":1,"ticketOption":"1","eventID":"test4","category":"1","name":"Row 5, Seat 8"},"secAr6s14":{"id":"secAr6s14","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 7, Seat 15"},"secAr6s10":{"id":"secAr6s10","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 7, Seat 11"},"comp1secAr5s11":{"id":"comp1secAr5s11","component":1,"ticketOption":"2","eventID":"test4","category":"1","name":"Row 6, Seat 12"}},"test3":{"ticket1_1":{"id":"ticket1_1","component":1,"ticketOption":"1","eventID":"test3","count":1,"category":"1","name":"Category 1 (Child)"}}}
\ No newline at end of file
diff --git a/src/webapp/main/src/components/sideCartView.vue b/src/webapp/main/src/components/sideCartView.vue
index 4a3300f..8931177 100644
--- a/src/webapp/main/src/components/sideCartView.vue
+++ b/src/webapp/main/src/components/sideCartView.vue
@@ -36,7 +36,7 @@
                         </td>
                     </tr>
                 </table>
-                <router-link to="/cart">To Cart</router-link>
+                <router-link to="/cart" id="toCartButton">To Cart</router-link>
             </div>
         </div>
         <div v-else>
@@ -93,6 +93,22 @@ export default {
 </script>
 
 <style scoped>
+    #toCartButton {
+        text-decoration: none;
+        padding: 5%;
+        width: fit-content;
+        background-color: var( --accent-color );
+        color: var( --secondary-color );
+        transition: all 1s;
+        border-radius: 50px;
+        margin-top: 2%;
+    }
+
+    #toCartButton:hover {
+        background-color: var( --accent-background-hover );
+        border-radius: 10px;
+    }
+
     #sideCartView {
         background-color: var( --accent-background );
         color: var( --secondary-color );
diff --git a/src/webapp/main/src/views/purchasing/CartView.vue b/src/webapp/main/src/views/purchasing/CartView.vue
index 36d81ff..89bffa1 100644
--- a/src/webapp/main/src/views/purchasing/CartView.vue
+++ b/src/webapp/main/src/views/purchasing/CartView.vue
@@ -27,7 +27,7 @@
             </div>
             <div class="tool-wrapper">
                 <h4>Total: {{ backend.currency }} {{ backend.total }}</h4>
-                <router-link to="/purchase">Purchase now</router-link>
+                <router-link to="/purchase" id="toCartButton">Purchase now</router-link>
             </div>
         </div>
         <div v-else>
@@ -41,6 +41,22 @@
 </template>
 
 <style scoped>
+    #toCartButton {
+        text-decoration: none;
+        padding: 2%;
+        width: fit-content;
+        background-color: var( --accent-color );
+        color: var( --secondary-color );
+        transition: all 1s;
+        border-radius: 50px;
+        margin-top: 2%;
+    }
+
+    #toCartButton:hover {
+        background-color: var( --accent-background-hover );
+        border-radius: 10px;
+    }
+
     .cart {
         text-align: justify;
         width: 100%;
diff --git a/src/webapp/main/src/views/purchasing/PaymentSuccessView.vue b/src/webapp/main/src/views/purchasing/PaymentSuccessView.vue
index 2e46a98..4d6bddf 100644
--- a/src/webapp/main/src/views/purchasing/PaymentSuccessView.vue
+++ b/src/webapp/main/src/views/purchasing/PaymentSuccessView.vue
@@ -13,7 +13,7 @@
             <h1 style="font-size: 250%;">Thank you for your purchase!</h1>
             <p>The system is currently processing your order and you will be able to download your tickets within a moment's notice.</p>
             <p>You will receive an email with your tickets within the next few minutes</p>
-            <a href="/tickets/tickets.pdf" class="submit" style="display: none;" id="manual-download">Download manually</a>
+            <a href="/tickets/tickets.pdf" class="submit" style="display: none; text-decoration: none;" id="manual-download" target="_blank">Download manually</a>
             <button onclick="if ( confirm( 'Do you really want to leave this page? You will not be able to download the tickets directly and instead you will have to download them from the email.' ) ) {
                 location.href = '/' }" class="submit">Back to the home page</button>
         </div>
diff --git a/src/webapp/main/src/views/user/LoginView.vue b/src/webapp/main/src/views/user/LoginView.vue
index 8a627dc..2c4d97f 100644
--- a/src/webapp/main/src/views/user/LoginView.vue
+++ b/src/webapp/main/src/views/user/LoginView.vue
@@ -13,9 +13,9 @@
             <h1>Log in</h1>
             <form>
                 <label for="mail">Email</label><br>
-                <input type="email" v-model="formData[ 'mail' ]" name="mail" id="mail" required><br><br>
+                <input type="email" v-model="formData[ 'mail' ]" name="mail" id="mail" required class="input"><br><br>
                 <label for="password">Password</label><br>
-                <input type="password" v-model="formData[ 'password' ]" name="password" id="password" required>
+                <input type="password" v-model="formData[ 'password' ]" name="password" id="password" required class="input">
             </form>
             <button @click="login();" class="button">Log in</button>
             <router-link to="/signup" class="button">Sign up instead</router-link>
@@ -112,6 +112,14 @@
         border-radius: 50px;
     }
 
+    .input {
+        width: 100%;
+        padding: 10px;
+        border-radius: 500px;
+        border: solid 1px black;
+        margin-top: 1%;
+    }
+
     .button {
         padding: 5px 10px;
         margin-top: 2%;
diff --git a/src/webapp/main/src/views/user/PasswordResetView.vue b/src/webapp/main/src/views/user/PasswordResetView.vue
index 73c4f6e..f1f71a4 100644
--- a/src/webapp/main/src/views/user/PasswordResetView.vue
+++ b/src/webapp/main/src/views/user/PasswordResetView.vue
@@ -11,12 +11,22 @@
     <div>
         <h1>Password Reset</h1>
         <p>Please enter the email address connected to your account to begin the password reset process.</p>
-        <input type="email" v-model="email"><br>
-        <button @click="reset()">Reset</button>
+        <input type="email" v-model="email" class="input"><br>
+        <button @click="reset()" class="button">Reset</button>
         <notifications ref="notification" location="topright" size="bigger"></notifications>
     </div>
 </template>
 
+<style scoped>
+    .input {
+        width: 50%;
+        padding: 10px;
+        border-radius: 500px;
+        border: solid 1px black;
+        margin-top: 1%;
+    }
+</style>
+
 <script>
     import notifications from '@/components/notifications/notifications.vue';