Merge pull request #434 from Seluj78/344-settings-color-scheme

settings color theme update

Author: Seluj78

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-purple-300">
+  <div class="flex w-full mx-auto cursor-pointer md:hover:bg-purple-matcha-menu-hover">
     <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 mx-auto">{{text}}</h1>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex max-w-sm justify-between items-center w-full my-4">
-    <h1 class="text-3xl text-purple-400 capitalize">{{ name }}</h1>
+    <h1 class="text-3xl text-purple-matcha capitalize">{{ name }}</h1>
     <div class="md:hidden sort-button rounded-md text-lg w-12">
       <h1 class="noSelect">←</h1>
     </div>

frontend/src/views/app/Settings.vue

@@ -24,9 +24,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-purple-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-matcha-menu-current': 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-purple-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-matcha-menu-current': getShow === 'profile'}" v-bind:text="'Profile'"></MenuButton>
       </div>
     </section>
     <section v-if="getShow === 'account' && settingsFetched" class="flex flex-col items-center z-10 absolute bg-white-matcha px-8 md:pb-8 w-full top-0 left-0 h-full md:h-auto md:ml-4 md:relative md:shadow-md md:rounded-md">

frontend/tailwind.config.js

@@ -8,6 +8,8 @@ module.exports = {
     extend: {
       colors: {
         'purple-matcha' : '#6246EA',
+        'purple-matcha-menu-current': '#efedfd',
+        'purple-matcha-menu-hover': '#e0dafb',
         'white-matcha' : '#FFFFFE',
         'gray-matcha' : '#001858',
       },