fixes on dark mode input

Cadiducho · Oct 7, 2024 · 3f831bb · 3f831bb
1 parent 6c7e520
commit 3f831bb
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 31 deletions.
diff --git a/src/components/lib/forms/PInput.vue b/src/components/lib/forms/PInput.vue
@@ -1,30 +1,29 @@
 <template>
-    <div class="w-full mb-3">
-        <label v-if="label" class="block tracking-wide text-gray-700 dark:text-gray-300 font-bold mb-2" :for="name">
-            {{ label }}
-        </label>
-        <input
-            class="appearance-none block w-full text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-blue-600"
-            :maxlength="maxLenght" :id="name" :name="name"
-            :type="type" :placeholder="placeholder"
-            v-bind="$attrs"
-            v-model="model"
-        />
-    </div>
+  <fieldset class="w-full mb-3">
+    <label v-if="label" class="block tracking-wide text-gray-700 dark:text-gray-300 font-bold mb-2" :for="name">
+      {{ label }}
+    </label>
+    <input
+      class="appearance-none block w-full text-gray-700 dark:text-gray-200 border border-gray-200 rounded py-3 px-4 dark:bg-gray-700 dark:border-gray-600 leading-tight focus:ring-blue-500 focus:outline-none focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      :maxlength="maxLenght" :id="name" :name="name"
+      :type="type" :placeholder="placeholder"
+      v-bind="$attrs"
+      v-model="model"
+    />
+  </fieldset>
 </template>
 
-<script setup lang="ts">
-const model = defineModel();
+<script setup lang="ts" generic="T">
+const model = defineModel<T>();
 
-export interface Props {
-    label?: string;
-    name?: string;
-    maxLenght?: number;
-    type?: string;
-    placeholder?: string;
-    icon?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<{
+  label?: string;
+  name?: string;
+  maxLenght?: number;
+  type?: string;
+  placeholder?: string;
+  icon?: string;
+}>(), {
     label: '',
     name: '',
     maxLenght: 128,

diff --git a/src/components/lib/forms/PSelect.vue b/src/components/lib/forms/PSelect.vue
@@ -85,6 +85,6 @@ const selectClasses = computed(() => ({
 
 <style scoped lang="scss">
 .select {
-  @apply appearance-none cursor-pointer block w-full p-2 py-2 pl-3 pr-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-white focus:ring-blue-500 focus:outline-none focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-none
+  @apply appearance-none cursor-pointer block w-full p-2 py-2 pl-3 pr-10 text-gray-900 border border-gray-300 rounded-lg bg-white focus:ring-blue-500 focus:outline-none focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-none
 }
 </style>
diff --git a/src/pages/admin/seasons/SeasonsDashboard.vue b/src/pages/admin/seasons/SeasonsDashboard.vue
@@ -5,12 +5,25 @@
       name="Administración de temporadas"
     />
 
-    <p-button
-      class="mb-4"
-      label="Nueva temporada"
-      color="info"
-      to="/admin/seasons/create"
-    />
+    <nav class="flex mb-4">
+      <p-button
+        color="info"
+        icon="fa fa-chevron-left"
+        :to="{name: 'admin'}"
+        tag="router-link"
+        class="mr-2"
+      >
+        Volver a Administración
+      </p-button>
+      <p-button
+        color="primary"
+        icon="fa fa-plus"
+        :to="{name: 'adminSeasonCreate'}"
+        tag="router-link"
+      >
+        Nueva Temporada
+      </p-button>
+    </nav>
 
     <p-table
       :columns="columns"
@@ -70,7 +83,7 @@ const columns = ref([
   { label: 'ID', field: 'id' },
   { label: 'Nombre', field: 'name' },
   { label: 'Competición', field: 'competition.name' },
-  { label: 'Código', field: 'competition.code' },
+  { label: 'Eventos Totales', field: 'totalEvents' },
 ]);
 const seasons = ref(new Array<Season>())
 const showConfirmDeleteModal = ref(false);