Fixed a bug with dates and some style issues

components/global/AddCard.vue

@@ -6,7 +6,7 @@ const emit = defineEmits(["on-click"])
 
 <template>
   <UiCard
-    class="h-full md:w-fit transition-all bg-transparent dark:hover:bg-gray-950 dark:focus-within:outline-gray-900 hover:-translate-y-0"
+    class="h-full md:w-fit transition-all bg-transparent hover:text-slate-900 text-slate-500 dark:hover:text-slate-100 dark:text-slate-500 dark:focus-within:outline-gray-900 hover:-translate-y-0"
     has-click
     @on-click="emit('on-click')"
   >

components/global/input/Color.vue

@@ -2,12 +2,16 @@
 import { cn } from "@/lib/utils";
 import { type RPGColor, rpgColors } from "~/models/Color";
 
+defineProps<{
+  id: string
+}>();
+
 const model = defineModel<RPGColor>({ default: "white" });
 </script>
 
 <template>
   <UiSelect v-model="model">
-    <UiSelectTrigger>
+    <UiSelectTrigger :id>
       <UiSelectValue
         :placeholder="$t('ui.colors.selectOne')"
         class="input-color"

components/global/input/ContentState.vue

@@ -1,12 +1,16 @@
 <script lang="ts" setup>
 import { contentStates, type ContentState } from "~/models/Entity";
 
+defineProps<{
+  id: string
+}>();
+
 const model = defineModel<ContentState>({ default: "draft" });
 </script>
 
 <template>
   <UiSelect v-model="model">
-    <UiSelectTrigger>
+    <UiSelectTrigger :id>
       <UiSelectValue
         :placeholder="$t('ui.contentState.selectOne')"
       />