From 0c0464ea5a9c41ac793b895bea00a3d90081eb75 Mon Sep 17 00:00:00 2001
From: Owen Guillot <olivierguillot@Owens-MacBook-Pro.local>
Date: Tue, 21 Mar 2023 14:27:23 +0000
Subject: [PATCH] styled accounts page

---
 src/pages/AccountPage.vue | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index 6d6ec24..1eaa881 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -4,25 +4,25 @@
 <p v-if="this.user">Your Email: {{ this.user.email }}</p>
 <div>
     <h3>Send a password reset email</h3>
-    <input @click="resetPasswordEmail()" type="submit" name="" value="Send Password reset email">
+    <button @click="resetPasswordEmail()" type="submit" name="" value="Send Password reset email" class="button">Send Password Reset Email</button>
 
     <h3>Enter your current password to edit account settings</h3>
     <input v-if="showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password">
     <input v-else type="password" v-model="currentPassword" placeholder="Enter existing password">
-    <button @click="this.showCurrentPassword = !this.showCurrentPassword">Eye</button>
+    <button @click="this.showCurrentPassword = !this.showCurrentPassword" class="eye-button">Eye</button>
 
     <h3>Change email</h3>
     <input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
-    <input @click="updateUserEmail()" type="submit" name="" value="Update Email">
+    <button @click="updateUserEmail()" type="submit" name="" value="Update Email">Update email</button>
 
     <h3>Change password</h3>
     <input v-if="showNewPassword" type="text" v-model="newPassword" placeholder="Enter new password">
     <input v-else type="password" v-model="newPassword" placeholder="Enter new password">
-    <button @click="this.showNewPassword = !this.showNewPassword">Eye</button>
-    <input @click="updateUserPassword()" type="submit" name="" value="Update Password">
+    <button @click="this.showNewPassword = !this.showNewPassword" class="eye-button">Eye</button>
+    <button @click="updateUserPassword()" type="submit" name="" value="Update Password">Update Password</button>
 
     <h3>Delete account</h3>
-    <input @click="deleteUserAccount()" type="submit" name="" value="Delete Account">
+    <button @click="deleteUserAccount()" type="submit" name="" value="Delete Account">Delete Account</button>
 
     <h3>Delete map filter preferences data</h3>
     <button @click="deleteUserPreferences()">Delete preferences</button>
@@ -198,4 +198,27 @@ export default {
 </script>
 
 <style scoped>
+button {
+  background-color: blue;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  margin: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: darkblue;
+}
+
+button:focus {
+    outline: none;
+}
+
+.eye-button {
+  background-color: grey;
+}
+
 </style>
\ No newline at end of file