From 4a696eef0dc2704a52f11919a0bb93a083011b48 Mon Sep 17 00:00:00 2001
From: Evert Prants <evert@lunasqu.ee>
Date: Thu, 26 Jan 2023 20:30:17 +0200
Subject: [PATCH] tweaks

---
 src/components/form/base/Select.vue            | 2 +-
 src/components/form/fields/FormSelectField.vue | 3 +--
 src/components/item/StoredItemCard.vue         | 7 +++++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/form/base/Select.vue b/src/components/form/base/Select.vue
index b2a6cb3..23520a1 100644
--- a/src/components/form/base/Select.vue
+++ b/src/components/form/base/Select.vue
@@ -107,7 +107,7 @@ const inputClass = computed(() => {
       ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
       : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
     `block w-full rounded-md shadow-sm sm:text-sm transition-colors duration-200`,
-    'py-2 pl-3 pr-10 text-left cursor-default h-[38px] border-[1px]',
+    'py-2 pl-3 pr-10 text-left cursor-default h-[38px] border-[1px] focus:ring-1',
   ];
 });
 
diff --git a/src/components/form/fields/FormSelectField.vue b/src/components/form/fields/FormSelectField.vue
index 40fb5ee..6c42984 100644
--- a/src/components/form/fields/FormSelectField.vue
+++ b/src/components/form/fields/FormSelectField.vue
@@ -5,7 +5,7 @@
     :placeholder="placeholder"
     :disabled="disabled"
   >
-    <template #input="{ invalid, value, setValue }">
+    <template #input="{ invalid, forId, value, setValue }">
       <SelectVue
         :for-id="forId"
         :invalid="invalid"
@@ -26,7 +26,6 @@ import SelectVue, { SelectOption } from '../base/Select.vue';
 
 const props = withDefaults(
   defineProps<{
-    forId?: string;
     label: string;
     name: string;
     options: SelectOption[];
diff --git a/src/components/item/StoredItemCard.vue b/src/components/item/StoredItemCard.vue
index c13a02a..efd12fe 100644
--- a/src/components/item/StoredItemCard.vue
+++ b/src/components/item/StoredItemCard.vue
@@ -30,10 +30,12 @@
         </div>
         <div
           :class="`flex items-center space-x-1 ${fontSize} text-gray-500`"
-          title="Type"
+          :title="`${ItemTypeName[storedItem.item.type]} - ${
+            ItemTypeDescription[storedItem.item.type]
+          }`"
         >
           <InformationCircleIcon class="h-4 w-4" />
-          <span>{{ storedItem.item.type }}</span>
+          <span>{{ ItemTypeName[storedItem.item.type] }}</span>
           <span v-if="storedItem.item.consumable">· Consumable</span>
           <span v-if="storedItem.consumedAt"
             >· Consumed at {{ dateToLocaleString(storedItem.consumedAt) }}</span
@@ -79,6 +81,7 @@ import {
   QrCodeIcon,
 } from '@heroicons/vue/24/outline';
 import { computed } from 'vue';
+import { ItemTypeDescription, ItemTypeName } from '../../enums/item-type.enum';
 import { StoredItem } from '../../interfaces/storage.interfaces';
 
 const props = defineProps<{