From a943cf8f96a7603edc1baddc1359bec3b90d9cbf Mon Sep 17 00:00:00 2001
From: viveksantayana <me@viveksantayana.co.uk>
Date: Thu, 1 Sep 2022 16:55:12 +0100
Subject: [PATCH] Edited colour scheme

---
 client/src/components/Header.vue              |  2 +-
 client/src/components/navbar/Index.vue        |  8 +++---
 client/src/components/navbar/Navlink.vue      |  4 +--
 client/src/components/sidebar/Index.vue       |  2 +-
 client/src/components/sidebar/Navlink.vue     |  2 +-
 client/src/views/Home.vue                     |  2 +-
 client/src/views/quiz/Question.vue            | 14 +++++------
 client/src/views/quiz/Quiz.vue                |  2 +-
 client/src/views/results/Results.vue          |  2 +-
 .../compare-answers/CompareQuestion.vue       | 10 ++++----
 .../compare-answers/CompareQuestions.vue      |  2 +-
 client/tailwind.config.cjs                    | 25 ++++++++++++++++++-
 12 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
index 9352aeb..d675aa4 100644
--- a/client/src/components/Header.vue
+++ b/client/src/components/Header.vue
@@ -4,7 +4,7 @@
     }
 </script>
 <template>
-        <h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-lime-600 mb-6 uncial-antiqua">
+        <h1 class="text-4xl text-center pb-1 border-b-2 border-solid border-olive-600 mb-6 uncial-antiqua">
             <slot></slot>
         </h1>
 </template>
diff --git a/client/src/components/navbar/Index.vue b/client/src/components/navbar/Index.vue
index da1d7a6..17a9c16 100644
--- a/client/src/components/navbar/Index.vue
+++ b/client/src/components/navbar/Index.vue
@@ -28,7 +28,7 @@
 
 </script>
 <template>
-    <nav class="fixed bg-lime-900 text-white drop-shadow-xl w-full z-50">
+    <nav class="fixed bg-olive-900 text-white drop-shadow-xl w-full z-50">
         <div class="flex relative px-2 max-w-5xl mx-auto items-center justify-between">
             <!-- Logo -->
                 <router-link class-active="" class="transition-all ease-in-out duration-500 hover:text-orange-300 active:text-orange-500 inline-flex justify-center items-center" to="/">
@@ -41,14 +41,14 @@
             </div>
             <Menu v-slot="{ open }" as="div" class="relative inline-block text-left md:hidden">
             <div>
-            <MenuButton class="inline-flex justify-center w-full rounded-md drop-shadow-sm px-4 py-2 bg-lime-800 text-white hover:bg-lime-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
+            <MenuButton class="inline-flex justify-center w-full rounded-md drop-shadow-sm px-4 py-2 bg-olive-800 text-white hover:bg-olive-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500">
                 <span class="scale-150">
                     <mdiMenu/>
                 </span>
             </MenuButton>
             </div>
             <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
-            <MenuItems class="origin-top-right absolute right-0 mt-2 p-1 space-y-2 w-56 rounded-md drop-shadow-lg bg-lime-700 ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <MenuItems class="origin-top-right absolute right-0 mt-2 p-1 space-y-2 w-56 rounded-md drop-shadow-lg bg-olive-700 ring-1 ring-black ring-opacity-5 focus:outline-none">
                 <div class="py-1">
                 <MenuItem v-slot="{ active }" v-for="route in $router.options.routes.filter( value => value.meta.indexBase >= 0 )" :key="route.path" >
                     <a :href="route.path" target="_blank" rel="noopener noreferrer" :class="[active ? 'text-orange-300' : 'text-white', 'flex px-4 py-2  active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500']" v-if="route.path.startsWith('http')">
@@ -59,7 +59,7 @@
                             <span>{{ route.meta.title }}</span>
                         </div>
                     </a>
-                    <router-link :to="route.path" :class="[active ? 'text-white bg-lime-600' : 'text-white', 'flex px-4 py-2  active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500', this.$route.fullPath == route.path ? 'bg-orange-500 text-white hover:bg-orange-600 hover:text-white' : '']" v-else>
+                    <router-link :to="route.path" :class="[active ? 'text-white bg-olive-600' : 'text-white', 'flex px-4 py-2  active:text-orange-500 rounded-lg h-fit align-middle transition-all ease-in-out duration-500', this.$route.fullPath == route.path ? 'bg-orange-500 text-white hover:bg-orange-600 hover:text-white' : '']" v-else>
                         <div class="inline-flex px-3 py-1 space-x-1">
                             <span class="scale-75">
                                 <svg-icon type="mdi" :path="route.meta.svgPath"></svg-icon>
diff --git a/client/src/components/navbar/Navlink.vue b/client/src/components/navbar/Navlink.vue
index d4a7391..c7dcb53 100644
--- a/client/src/components/navbar/Navlink.vue
+++ b/client/src/components/navbar/Navlink.vue
@@ -46,8 +46,8 @@ export default {
     }
     .navlink {
         @apply hover:text-orange-300;
-        @apply hover:bg-lime-700;
-        @apply bg-lime-800;
+        @apply hover:bg-olive-700;
+        @apply bg-olive-800;
         @apply active:text-orange-500;
         @apply rounded-lg;
         @apply h-fit;
diff --git a/client/src/components/sidebar/Index.vue b/client/src/components/sidebar/Index.vue
index 288c6a4..52e3472 100644
--- a/client/src/components/sidebar/Index.vue
+++ b/client/src/components/sidebar/Index.vue
@@ -14,7 +14,7 @@
 </script>
 <template>
     <div class="flex flex-col bg-lime-50 px-3 py-5 rounded-xl">
-        <h1 class="text-xl my-2 border-b-2 border-lime-600 border-solid text-center uncial-antiqua md:text-left">
+        <h1 class="text-xl my-2 border-b-2 border-olive-600 border-solid text-center uncial-antiqua md:text-left">
             <slot name="header"></slot>
         </h1>
         <div class="flex flex-col text-md">
diff --git a/client/src/components/sidebar/Navlink.vue b/client/src/components/sidebar/Navlink.vue
index 7cb61de..d6f1ba0 100644
--- a/client/src/components/sidebar/Navlink.vue
+++ b/client/src/components/sidebar/Navlink.vue
@@ -33,7 +33,7 @@ export default {
     .navlink.active-link, .navlink.exact-active-link {
         @apply border-l-2;
         @apply border-solid;
-        @apply border-lime-600;
+        @apply border-olive-600;
         @apply drop-shadow-md;
     }
     .navlink {
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 0e699bb..cbdc000 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -52,7 +52,7 @@
                 </p>
                 <div class="w-fit mx-auto">
                     <router-link active-class="active-link" class="navlink" to="/quiz">
-                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600">
+                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
                             <span class="scale-75">
                                 <AccountQuestion/>
                             </span>
diff --git a/client/src/views/quiz/Question.vue b/client/src/views/quiz/Question.vue
index 732be38..fb085f9 100644
--- a/client/src/views/quiz/Question.vue
+++ b/client/src/views/quiz/Question.vue
@@ -110,28 +110,28 @@
                 </div>
                 <div class="w-full flex mx-auto items-center justify-between max-w-sm">
                     <router-link :to="`/quiz/question/${this.id-1}`" v-if="this.id > 0">
-                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Back">
+                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Back">
                             <span class="scale-100">
                                 <ArrowLeftBold/>
                             </span>
                             <span class="uncial-antiqua">Back</span>
                         </div>
                     </router-link>
-                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
+                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
                         <span class="scale-100">
                             <ArrowLeftBold/>
                         </span>
                         <span class="uncial-antiqua">Back</span>
                     </div>
                     <router-link :to="`/quiz/question/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1 && this.answersStore.isAnswered(this.id)">
-                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Next">
+                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Next">
                             <span class="uncial-antiqua">Next</span>
                             <span class="scale-100">
                                 <ArrowRightBold/>
                             </span>
                         </div>
                     </router-link>
-                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
+                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
                         <span class="uncial-antiqua">Next</span>
                         <span class="scale-100">
                             <ArrowRightBold/>
@@ -146,7 +146,7 @@
                     >
                     <div v-show="this.id == this.questionStore.questions.length -1 && this.answersStore.isAnswered(this.id)" class="mx-auto my-8 w-fit transition-all">
                         <button @click="this.submitAnswers()">
-                            <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600">
+                            <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
                                 <span class="scale-75">
                                     <FleurDeLis/>
                                 </span>
@@ -178,7 +178,7 @@
     }
 
     :checked + label>div {
-        @apply border-lime-600;
+        @apply border-olive-600;
         @apply border-solid;
         @apply border-l-2;
         @apply text-orange-600;
@@ -191,7 +191,7 @@
     }
     :checked:disabled + label>div {
         @apply border-2;
-        @apply border-lime-600;
+        @apply border-olive-600;
         @apply border-solid;
     }
 </style>
\ No newline at end of file
diff --git a/client/src/views/quiz/Quiz.vue b/client/src/views/quiz/Quiz.vue
index 039c0dc..eb4eea3 100644
--- a/client/src/views/quiz/Quiz.vue
+++ b/client/src/views/quiz/Quiz.vue
@@ -43,7 +43,7 @@
                 </p>
                 <div class="w-fit mx-auto" key="welcome-5">
                     <router-link active-class="active-link" class="navlink" to="/quiz/question/0">
-                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600">
+                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
                             <span class="scale-75">
                                 <RoadVariant/>
                             </span>
diff --git a/client/src/views/results/Results.vue b/client/src/views/results/Results.vue
index 631946c..16ba4df 100644
--- a/client/src/views/results/Results.vue
+++ b/client/src/views/results/Results.vue
@@ -46,7 +46,7 @@
         </Header>
         <Content>
             <article class="prose">
-                <section v-for="playbook, index in this.resultsStore.results.playbooks" :key="Object.keys(playbook)[0]" :class="index < this.resultsStore.results.playbooks.length - 1 ? `border-solid border-b-2 border-lime-600 border-opacity-25` : ``">
+                <section v-for="playbook, index in this.resultsStore.results.playbooks" :key="Object.keys(playbook)[0]" :class="index < this.resultsStore.results.playbooks.length - 1 ? `border-solid border-b-2 border-olive-600 border-opacity-25` : ``">
                     <h2 class="flex justify-between">
                         <span class="uncial-antiqua align-bottom">
                             <span class="text-xl">The</span> <span class="text-3xl capitalize">{{ Object.keys(playbook)[0] }}</span>
diff --git a/client/src/views/results/compare-answers/CompareQuestion.vue b/client/src/views/results/compare-answers/CompareQuestion.vue
index 8a615d4..7b12c3f 100644
--- a/client/src/views/results/compare-answers/CompareQuestion.vue
+++ b/client/src/views/results/compare-answers/CompareQuestion.vue
@@ -80,28 +80,28 @@
                 </div>
                 <div class="w-full flex mx-auto items-center justify-between max-w-sm">
                     <router-link :to="`/results/answers/${this.id-1}`" v-if="this.id > 0">
-                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Back">
+                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Back">
                             <span class="scale-100">
                                 <ArrowLeftBold/>
                             </span>
                             <span class="uncial-antiqua">Back</span>
                         </div>
                     </router-link>
-                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
+                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
                         <span class="scale-100">
                             <ArrowLeftBold/>
                         </span>
                         <span class="uncial-antiqua">Back</span>
                     </div>
                     <router-link :to="`/results/answers/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1">
-                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-lime-600" title="Next">
+                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Next">
                             <span class="uncial-antiqua">Next</span>
                             <span class="scale-100">
                                 <ArrowRightBold/>
                             </span>
                         </div>
                     </router-link>
-                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-lime-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
+                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
                         <span class="uncial-antiqua">Next</span>
                         <span class="scale-100">
                             <ArrowRightBold/>
@@ -117,7 +117,7 @@
 </template>
 <style scoped>
     .option-selected {
-        @apply border-lime-600;
+        @apply border-olive-600;
         @apply border-solid;
         @apply border-l-2;
         @apply text-orange-600;
diff --git a/client/src/views/results/compare-answers/CompareQuestions.vue b/client/src/views/results/compare-answers/CompareQuestions.vue
index dca93fc..3f16881 100644
--- a/client/src/views/results/compare-answers/CompareQuestions.vue
+++ b/client/src/views/results/compare-answers/CompareQuestions.vue
@@ -40,7 +40,7 @@
                 </p>
                 <div class="w-fit mx-auto">
                     <router-link active-class="active-link" class="navlink" to="/results/answers/0">
-                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-lime-800 text-white transition-all duration-300 ease-in-out hover:bg-lime-600">
+                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
                             <span class="scale-75">
                                 <FeatureSearch/>
                             </span>
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
index 3fd8ac3..e317551 100644
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -1,3 +1,5 @@
+const { white } = require('tailwindcss/colors');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -11,7 +13,28 @@ module.exports = {
       lg: '976px',
       xl: '1440px'
     },
-    extend: {},
+    extend: {
+      colors: {
+        olive: {
+          50: '#d6ffb7',
+          100: '#b0c087',
+          200: '#9eb26c',
+          600: '#8ca054',
+          700: '#5d6b38',
+          800: '#4f5d2f',
+          900: '#2e361b',
+          1000: '#171b0e'
+        },
+        darkorange: {
+          300: '#e3924f',
+          500: '#d99830',
+          600: '#dda448',
+          700: '#ff9c33',
+          800: '#cc6900',
+          900: '#a35400'
+        },
+      }
+    },
   },
   plugins: [
     require('@tailwindcss/typography'),