Update colors

client/src/components/Footer.vue

@@ -10,7 +10,7 @@ log.debug('Footer created');
     class="
         px-8
         py-4
-        bg-gray-100
+        bg-gray-200
         border-t border-gray-500
       ">
     @2022 VBV

client/src/views/CircleView.vue

@@ -81,7 +81,7 @@ onMounted(async () => {
             </div>
           </div>
 
-          <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
+          <div class="flex-auto bg-gray-200 px-4 py-8 lg:px-24">
             <div
               v-for="learningSequence in circleStore.circle?.learningSequences || []"
               :key="learningSequence.translation_key"

client/src/views/CockpitView.vue

@@ -9,7 +9,7 @@ const userStore = useUserStore();
 </script>
 
 <template>
-  <main class="px-8 py-8 lg:px-12 lg:py-12 bg-gray-100">
+  <main class="px-8 py-8 lg:px-12 lg:py-12 bg-gray-200">
     <h1>Willkommen, {{userStore.first_name}}</h1>
 
     <h2 class="mt-12">Deine Kurse</h2>

client/src/views/LearningPathView.vue

@@ -26,7 +26,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="bg-gray-100" v-if="learningPathStore.learningPath">
+  <div class="bg-gray-200" v-if="learningPathStore.learningPath">
 
     <div class="learningpath flex flex-col">
       <div class="flex flex-col h-max">

client/src/views/StyelGuideView.vue

@@ -272,11 +272,11 @@ function colorBgClass(color: string, value: number) {
         <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
                     leave-to-class="opacity-0">
           <ListboxOptions
-            class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 py-1 text-base ring-1 ring-gray-900 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+            class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
             <ListboxOption as="template" v-for="person in state.dropdownValues" :key="person.id" :value="person"
                            v-slot="{ active, selected }">
               <li
-                :class="[active ? 'text-white bg-blue-900' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                :class="[active ? 'text-white bg-blue-900' : 'text-black', 'cursor-default select-none relative py-2 pl-3 pr-9']">
               <span :class="[state.dropdownSelected ? 'font-semibold' : 'font-normal', 'block truncate']">
                 {{ person.name }}
               </span>

client/tailwind.config.js

@@ -21,8 +21,9 @@ module.exports = {
       transparent: 'transparent',
       current: 'currentColor',
       'white': '#ffffff',
+      'black': '#000000',
       'blue': {
-        700: '#1A5197',
+        700: '#2957A6',
         900: '#00224D',
       },
       'sky': {
@@ -31,21 +32,21 @@ module.exports = {
       },
       'orange': {
         500: '#FE955A',
-        600: '#F37F3E',
+        600: '#E68B4E',
       },
       'green': {
-        500: '#3EDF9C',
-        600: '#17D29A',
+        500: '#54CE8B',
+        600: '#5BB782',
       },
       'red': {
-        500: '#DE3618',
+        500: '#EF7D68',
       },
       'gray': {
-        100: '#EDF2F6',
+        200: '#EDF2F6',
         300: '#E0E5EC',
         500: '#B1C1CA',
         700: '#6F787E',
-        900: '#0A0A0A',
+        900: '#585F63',
       },
     }
   },

client/tailwind.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 html {
-  @apply text-gray-900
+  @apply text-black
 }
 
 svg {
@@ -59,7 +59,7 @@ svg {
   .btn-secondary {
     @apply font-bold py-2 px-4 align-middle inline-block
     bg-white text-blue-900 border-2 border-blue-900
-    hover:bg-gray-100
+    hover:bg-gray-200
     disabled:opacity-50 disabled:cursor-not-allowed
   }