more styling

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)"}}}
+{"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)"}}}

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 );

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%;

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>

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%;

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>
+        <input type="email" v-model="email" class="input"><br>
-        <button @click="reset()">Reset</button>
+        <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';