fix: dark mode issues

frontend/src/components/Controls/Autocomplete.vue

@@ -28,9 +28,7 @@
 			</template>
 			<template #body="{ isOpen }">
 				<div v-show="isOpen">
-					<div
+					<div class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2">
-						class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
-					>
 						<div class="relative px-1.5 pt-0.5">
 							<ComboboxInput
 								ref="search"
@@ -49,7 +47,7 @@
 								class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
 								@click="selectedValue = null"
 							>
-								<X class="h-4 w-4 stroke-1.5" />
+								<X class="h-4 w-4 stroke-1.5 text-ink-gray-7" />
 							</button>
 						</div>
 						<ComboboxOptions
@@ -89,7 +87,7 @@
 											name="item-label"
 											v-bind="{ active, selected, option }"
 										>
-											<div class="flex flex-col space-y-1">
+											<div class="flex flex-col space-y-1 text-ink-gray-8">
 												<div>
 													{{ option.label }}
 												</div>

frontend/src/components/Controls/MultiSelect.vue

@@ -4,7 +4,7 @@
 			{{ label }}
 			<span class="text-ink-red-3" v-if="required">*</span>
 		</label>
-		<div class="grid grid-cols-3 gap-1">
+		<div class="grid grid-cols-3 gap-2">
 			<Button
 				ref="emails"
 				v-for="value in values"
@@ -12,7 +12,7 @@
 				:label="value"
 				theme="gray"
 				variant="subtle"
-				class="rounded-md"
+				class="rounded-md word-break-all"
 				@keydown.delete.capture.stop="removeLastValue"
 			>
 				<template #suffix>
@@ -42,7 +42,7 @@
 						<template #body="{ isOpen }">
 							<div v-show="isOpen">
 								<div
-									class="mt-1 rounded-lg bg-surface-white py-1 text-base shadow-2xl"
+									class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
 								>
 									<ComboboxOptions
 										class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
@@ -61,7 +61,7 @@
 												]"
 											>
 												<div class="flex flex-col gap-1 p-1">
-													<div class="text-base font-medium">
+													<div class="text-base font-medium text-ink-gray-8">
 														{{ option.description }}
 													</div>
 													<div class="text-sm text-ink-gray-5">

frontend/src/pages/BatchForm.vue

@@ -10,11 +10,11 @@
 		</header>
 		<div class="w-3/4 mx-auto py-5">
 			<div class="">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Details') }}
 				</div>
 				<div class="space-y-10 mb-4">
-					<div class="grid grid-cols-2 gap-10">
+					<div class="space-y-4">
 						<FormControl
 							v-model="batch.title"
 							:label="__('Title')"
@@ -107,7 +107,7 @@
 			</div>
 
 			<div class="my-10">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Date and Time') }}
 				</div>
 				<div class="grid grid-cols-3 gap-10">
@@ -157,7 +157,7 @@
 			</div>
 
 			<div class="mb-10">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Settings') }}
 				</div>
 				<div class="grid grid-cols-3 gap-10">
@@ -210,7 +210,7 @@
 			</div>
 
 			<div class="">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Payment') }}
 				</div>
 				<FormControl
@@ -234,7 +234,7 @@
 			</div>
 
 			<div class="my-10">
-				<div class="text-lg font-semibold mb-4">
+				<div class="text-lg text-ink-gray-9 font-semibold mb-4">
 					{{ __('Description') }}
 				</div>
 				<FormControl

frontend/src/pages/ProgramForm.vue

@@ -13,7 +13,7 @@
 		<!-- Courses -->
 		<div>
 			<div class="flex items-center justify-between mb-2">
-				<div class="text-lg font-semibold">
+				<div class="text-lg text-ink-gray-9 font-semibold">
 					{{ __('Program Courses') }}
 				</div>
 				<Button
@@ -75,7 +75,7 @@
 		<!-- Members -->
 		<div>
 			<div class="flex items-center justify-between mb-2">
-				<div class="text-lg font-semibold">
+				<div class="text-lg text-ink-gray-9 font-semibold">
 					{{ __('Program Members') }}
 				</div>
 				<Button

frontend/src/pages/QuizForm.vue

@@ -38,7 +38,7 @@
 	<div class="w-3/4 mx-auto py-5">
 		<!-- Details -->
 		<div class="mb-8">
-			<div class="font-semibold mb-4">
+			<div class="font-semibold text-ink-gray-9 mb-4">
 				{{ __('Details') }}
 			</div>
 			<FormControl
@@ -75,7 +75,7 @@
 
 				<!-- Settings -->
 				<div class="mb-8">
-					<div class="font-semibold mb-4">
+					<div class="font-semibold text-ink-gray-9 mb-4">
 						{{ __('Settings') }}
 					</div>
 					<div class="grid grid-cols-3 gap-5 my-4">
@@ -93,7 +93,7 @@
 				</div>
 
 				<div class="mb-8">
-					<div class="font-semibold mb-4">
+					<div class="font-semibold text-ink-gray-9 mb-4">
 						{{ __('Shuffle Settings') }}
 					</div>
 					<div class="grid grid-cols-3">
@@ -113,7 +113,7 @@
 				<!-- Questions -->
 				<div>
 					<div class="flex items-center justify-between mb-4">
-						<div class="font-semibold">
+						<div class="font-semibold text-ink-gray-9">
 							{{ __('Questions') }}
 						</div>
 						<Button v-if="!readOnlyMode" @click="openQuestionModal()">
@@ -445,11 +445,7 @@ const breadcrumbs = computed(() => {
 			},
 		},
 	]
-	/* if (quizDetails.data) {
+
-		crumbs.push({
-			label: quiz.title,
-		})
-	} */
 	crumbs.push({
 		label: props.quizID == 'new' ? __('New Quiz') : quizDetails.data?.title,
 		route: { name: 'QuizForm', params: { quizID: props.quizID } },