feat: add text color to char sex column

Signed-off-by: Alexander Trost <galexrt@googlemail.com>

app/components/citizens/CitizensList.vue

@@ -10,6 +10,7 @@ import { useNotificatorStore } from '~/store/notificator';
 import { NotificationType } from '~~/gen/ts/resources/notifications/notifications';
 import type { User } from '~~/gen/ts/resources/users/users';
 import type { ListCitizensRequest, ListCitizensResponse } from '~~/gen/ts/services/citizenstore/citizenstore';
+import { sexToTextColor } from '../partials/citizens/helpers';
 
 const { t } = useI18n();
 
@@ -336,7 +337,9 @@ defineShortcuts({
         </template>
 
         <template #sex-data="{ row: citizen }">
-            {{ citizen.sex?.value.toUpperCase() ?? $t('common.na') }}
+            <span :class="sexToTextColor(citizen.sex?.value ?? '')">
+                {{ citizen.sex?.value.toUpperCase() ?? $t('common.na') }}
+            </span>
         </template>
 
         <template #phoneNumber-data="{ row: citizen }">

app/components/partials/citizens/CharSexBadge.vue

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
+import type { BadgeColor } from '#ui/types';
+import { sexToColor, sexToIcon } from './helpers';
+
 defineProps<{
     sex: string;
 }>();
 </script>
 
 <template>
-    <UBadge :color="sex === 'f' ? 'pink' : 'blue'" size="lg">
-        <UIcon :name="sex === 'f' ? 'i-mdi-gender-female' : 'i-mdi-gender-male'" />
+    <UBadge :color="sexToColor(sex) as BadgeColor" size="lg">
+        <UIcon :name="sexToIcon(sex)" />
     </UBadge>
 </template>

app/components/partials/citizens/helpers.ts

@@ -0,0 +1,33 @@
+export function sexToColor(sex: string): string {
+    if (sex === 'f') {
+        return 'pink';
+    } else if (sex === 'm') {
+        return 'blue';
+    } else if (sex === 'd') {
+        return 'gray';
+    }
+
+    return 'white';
+}
+
+export function sexToTextColor(sex: string): string {
+    if (sex === 'f') {
+        return 'text-pink-300';
+    } else if (sex === 'm') {
+        return 'text-blue-300';
+    } else if (sex === 'd') {
+        return 'text-gray-300';
+    }
+
+    return 'text-white-300';
+}
+
+export function sexToIcon(sex: string): string {
+    if (sex === 'f') {
+        return 'i-mdi-gender-female';
+    } else if (sex === 'm') {
+        return 'i-mdi-gender-male';
+    }
+
+    return 'i-mdi-gender-non-binary';
+}