menu button hover colors

Author: supalarry

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

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div class="flex w-full mx-auto cursor-pointer md:hover:bg-gray-300">
+  <div class="flex w-full mx-auto cursor-pointer md:hover:bg-purple-300">
     <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>

frontend/src/views/app/Settings.vue

@@ -21,9 +21,9 @@
           </div>
         </div>
         <div class="px-8 py-2 md:py-4 md:px-0 w-full">
-          <MenuButton v-on:click.native="showSetting('account')" v-bind:class="{'md:px-8':true, 'md:bg-gray-200': getShow === 'account'}" v-bind:text="'Account'"></MenuButton>
+          <MenuButton v-on:click.native="showSetting('account')" v-bind:class="{'md:px-8':true, 'md:bg-purple-200': getShow === 'account'}" v-bind:text="'Account'"></MenuButton>
           <hr class="bg-gray-300 w-full md:hidden">
-          <MenuButton v-on:click.native="showSetting('profile')" v-bind:class="{'md:px-8':true, 'md:bg-gray-200': getShow === 'profile'}" v-bind:text="'Profile'"></MenuButton>
+          <MenuButton v-on:click.native="showSetting('profile')" v-bind:class="{'md:px-8':true, 'md:bg-purple-200': getShow === 'profile'}" v-bind:text="'Profile'"></MenuButton>
         </div>
       </section>
       <section v-if="getShow === 'account'" class="flex flex-col items-center z-10 absolute bg-white-matcha px-8 pb-4 w-full top-0 left-0 h-screen md:h-auto md:ml-4 md:relative md:shadow-md md:rounded-md">