reworked color theme for the project

src/components/ExerciseList.vue

@@ -1,9 +1,9 @@
 <template>
-    <input class="search " type="text" v-model="input" placeholder="Search..." />
+    <input class="search text-white font-bold py-2 px-2 rounded mt-5" type="text" v-model="input" placeholder="Search..." />
     <div class="flex">
     <div class="exerciseList">
       <ul class="exerciseItem" v-for="exercise in filterExercises()" :key="exercise.name">
-        <button @click="exerciseClick(exercise)" class="btn bg-secondary-button hover:bg-accent text-text font-bold py-2 px-4" >{{ exercise.name }}</button>
+        <button @click="exerciseClick(exercise)" class="btn bg-secondary-button hover:bg-accent text-white font-bold py-2 px-2 rounded" >{{ exercise.name }}</button>
       </ul>
     </div>
     <div v-for="selectedExercise in selectedExercises" :key="selectedExercise" class="show">

src/components/NavigationModel.vue

@@ -25,7 +25,7 @@
     width: 100%;
     height: 4rem;
     justify-content: start;
-    background: rgb(91, 154, 102);
+    background: #0a0e06;
 }
 .navbar-nav{
     display: flex;
@@ -36,15 +36,13 @@
 .nav-item{
     margin-left: 1rem;
     margin-right: 1rem;
-    color: white;
+    color: #e7f1df;
     text-decoration: none;
 }
 
 .nav-item:hover{
-    color: rgb(91, 154, 102);
+    // color: rgb(91, 154, 102);
-    background: #4510b7;
+    color: #699f65
-    border-radius: 0.5rem;
-    transition: 0.5s;
 }
 
 .logo{

src/views/muscles/Back.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="text-3xl font-bold underline text-blue-500">
+    <div class="text-white">
       <h1>Back</h1>
       <ExerciseList muscle="Back"/>
     </div>

src/views/muscles/Biceps.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="biceps">
+    <div class="biceps text-text">
       <h1>Biceps</h1>
       <ExerciseList muscle="Biceps"/>
     </div>

src/views/muscles/Chest.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="text-white">
     <div class="w-1/2">
       <h1>Chest</h1>
        <ExerciseList muscle="Chest"/>

src/views/muscles/Legs.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="legs">
+    <div class="legs text-white">
       <h1>Legs</h1>
       <ExerciseList muscle="Legs"/>
     </div>

src/views/muscles/Shoulder.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="shoulder">
+    <div class="shoulder text-white">
       <h1>Shoulder</h1>
       <ExerciseList muscle="Shoulder"/>
     </div>

src/views/muscles/Triceps.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="triceps">
+    <div class="triceps text-white ">
       <h1>Triceps</h1>
       <ExerciseList muscle="Triceps"/>
     </div>

src/views/weight/WeightsInput.vue

@@ -1,10 +1,9 @@
 <template>
-  //TODO make view resposive on button click add
     <div class="w-2/3 mx-auto">
-      <div class="warmup-sets mt-12 w-2/3">
+      <div class="warmup-sets mt-2">
         <label>Warm-Up Sets</label>
         <button @click="warmUpAddSet()" 
-                class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-5">
+                class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5">
                 Add
         </button>
         <div>
@@ -13,7 +12,8 @@
           <div class="ml-3">
             <input 
             v-model="weightInput.warmUpSetsWeight[warmUpSetCount]" 
-            type="number" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" 
+            type="number" 
+            class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " 
             placeholder="Weight (kg)"
             onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
           </div>
@@ -22,7 +22,7 @@
             <input 
             v-model="weightInput.warmUpReps[warmUpSetCount]" 
             type="number" 
-            class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" 
+            class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " 
             placeholder="Reps"
             onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
           </div>
@@ -32,7 +32,7 @@
       <div class="working-set mt-5">
         <label>Working Sets</label>
         <button @click="workingAddSet()" 
-        class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-7">
+        class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7">
         Add
       </button>
         
@@ -43,7 +43,7 @@
             <input
             v-model="weightInput.workingSetsWeight[workingSetCount]" 
             type="number" 
-            class="mt-1 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" 
+            class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " 
             placeholder="Weight (Kg)"
             onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
           </div>
@@ -51,7 +51,7 @@
           <div class="ml-3">
             <input v-model="weightInput.workingReps[workingSetCount]" 
             type="number" 
-            class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" 
+            class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " 
             placeholder="Reps"
             onkeypress='return event.charCode >= 48 && event.charCode <= 57'> <!-- https://stackoverflow.com/questions/66172698/textbox-which-accepts-only-numbers-in-vue-js -->
           </div>
@@ -63,7 +63,7 @@
 </template>
 
 <script setup>
-import { useWeightInputStore } from '@/stores/storeWeight';
+import { useWeightInputStore } from '@/stores/storeInput';
 
 const selectedExercise = defineProps({
   selectedExercise: String

tailwind.config.js

@@ -8,10 +8,12 @@ export default {
     extend: {
       colors: {
         'primary-button':'#5b9a66',
-        'secondary-button':'#0d1406',
+        // 'secondary-button':'#0d1406',
-        'background':'#000000',
+        'secondary-button':'#699f65',
-        'text': '#daeafb',
+        'background':'#131d0c',
-        'accent': '#b574f1',
+        'text': '#e7f1df',
+        'accent': '#361f47',
+        'accent2': '#63992e',
       }
     },
   },