Vue Lab - Fixed CSS.

Author: jsanzdev

4 - Frameworks/Ejercicios/VUE/vue-lab/todo-app/components/SearchBar.vue

@@ -1,12 +1,6 @@
 <template>
     <div class="search-container">
-        <input
-            type="text"
-            v-model="searchQuery"
-            placeholder="Search todos..."
-            class="search-input"
-            @input="search"
-        />
+        <input type="text" v-model="searchQuery" placeholder="Search todos..." class="search-input" @input="search" />
     </div>
 </template>
 
@@ -31,14 +25,5 @@ const search = () => {
     width: 100%;
     padding: 0.5rem;
     font-size: 1rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.search-input:focus {
-    outline: none;
-    border-color: #4CAF50;
-    box-shadow: 0 2px 4px rgba(76,175,80,0.2);
 }
 </style>

4 - Frameworks/Ejercicios/VUE/vue-lab/todo-app/components/TodoFilter.vue

@@ -1,54 +1,49 @@
 <template>
-    <div class="filter-container">
-      <button
-        v-for="option in filterOptions"
-        :key="option.value"
-        @click="store.setFilter(option.value)"
-        :class="{ active: store.filter === option.value }"
-        class="filter-button"
-      >
-        {{ option.label }}
-      </button>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { useTodoStore } from '~/stores/todo-store'
-  import type { FilterType } from '~/stores/todo-store'
-  
-  const store = useTodoStore()
-  
-  const filterOptions = [
-    { value: 'all' as FilterType, label: 'All' },
-    { value: 'active' as FilterType, label: 'Active' },
-    { value: 'completed' as FilterType, label: 'Completed' }
-  ]
-  </script>
-  
-  <style scoped>
-  .filter-container {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin: 1rem 0;
-  }
-  
-  .filter-button {
-    padding: 0.5rem 1rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: white;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-  
-  .filter-button:hover {
-    background: #f5f5f5;
-  }
-  
-  .filter-button.active {
-    background: #4CAF50;
-    color: white;
-    border-color: #4CAF50;
-  }
-  </style>
+  <div class="filter-container">
+    <button v-for="option in filterOptions" :key="option.value" @click="store.setFilter(option.value)"
+      :class="{ active: store.filter === option.value }" class="filter-button">
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTodoStore } from '~/stores/todo-store'
+import type { FilterType } from '~/types/index'
+
+const store = useTodoStore()
+
+const filterOptions = [
+  { value: 'all' as FilterType, label: 'All' },
+  { value: 'active' as FilterType, label: 'Active' },
+  { value: 'completed' as FilterType, label: 'Completed' }
+]
+</script>
+
+<style scoped>
+.filter-container {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+.filter-button {
+  padding: 0.5rem 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.filter-button:hover {
+  background: #f5f5f5;
+}
+
+.filter-button.active {
+  background: #4CAF50;
+  color: white;
+  border-color: #4CAF50;
+}
+</style>

4 - Frameworks/Ejercicios/VUE/vue-lab/todo-app/components/TodoInput.vue

@@ -32,9 +32,17 @@ const addTodo = () => {
 
 .add-button {
     padding: 0.5rem 1rem;
-    background-color: #4CAF50;
-    color: white;
+    border-radius: 4px;
     border: none;
     cursor: pointer;
+    font-weight: bold;
+    transition: all 0.2s;
+    background-color: #4CAF50;
+    color: white;
+    border-color: #4CAF50;
+}
+
+.add-button:hover {
+    background-color: #45a049;
 }
 </style>