cancel change password button, menu button padding

Author: supalarry

frontend/src/components/app/settings/AccountInput.vue

@@ -5,9 +5,12 @@
       <form @submit.prevent="handleSubmit(onSubmit)" class="w-full">
         <div class="flex justify-between items-center w-full">
           <h1 class="text-md font-bold capitalize text-gray-matcha">{{ name }}</h1>
-          <input v-if="edit" type="submit" :disabled="invalid" value="Save"
-                 v-bind:class="{'text-sm': true,'text-purple-matcha': true, 'bg-transparent': true, 'focus:outline-none': true, 'active:outline-none': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
-          <h1 v-if="!edit" v-on:click="startEditing()" class="cursor-pointer text-sm text-purple-matcha">{{ buttonText }}</h1>
+          <div class="flex">
+            <h1 v-if="type === 'password' && edit" v-on:click="cancelEditing()" class="mr-4 text-sm text-purple-matcha cursor-pointer">Cancel</h1>
+            <input v-if="edit" type="submit" :disabled="invalid" value="Save"
+                   v-bind:class="{'text-sm': true,'text-purple-matcha': true, 'bg-transparent': true, 'focus:outline-none': true, 'active:outline-none': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
+            <h1 v-if="!edit" v-on:click="startEditing()" class="cursor-pointer text-sm text-purple-matcha">{{ buttonText }}</h1>
+          </div>
         </div>
         <div class="break-words" v-if="!edit && type !== 'password'"><h1 class="text-md opacity-50 md:max-w-sm">{{ currentValue }}</h1></div>
         <div v-if="edit">
@@ -57,6 +60,13 @@ export default {
     startEditing() {
       this.edit = true;
     },
+    cancelEditing() {
+      if (this.type === 'password') {
+        this.currentValue = '';
+        this.passwordRepeat = '';
+      }
+      this.edit = false;
+    },
     onSubmit() {
       if (this.type === 'password') {
         this.currentValue = '';

frontend/src/components/app/settings/MenuButton.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <div class="flex w-full mx-auto cursor-pointer md:hover:bg-gray-300">
-    <h1 class="text-gray-matcha py-4 md:py-2 text-xl md:text-base w-full md:w-auto text-center md:text-left">{{text}}</h1>
+    <h1 class="text-gray-matcha py-6 md:py-4 md:py-2 text-xl md:text-base w-full md:w-auto text-center md:text-left">{{text}}</h1>
   </div>
 </template>