chore/ui: Add requested fixes

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/src/components/blocks/questions/admin-delete-form.tsx

@@ -39,15 +39,17 @@ export const AdminDeleteForm: FC<AdminDeleteFormProps> = ({ isOpen, setIsOpen, q
 
   return (
     <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
-      <AlertDialogContent>
+      <AlertDialogContent className='border-border'>
         <AlertDialogHeader>
-          <AlertDialogTitle className='flex'>
-            Are you sure you want to delete question:&nbsp;`<pre>{questionId}</pre>`?
+          <AlertDialogTitle className='text-primary flex'>
+            Are you sure you want to delete question:&nbsp;<pre>{questionId}</pre>?
           </AlertDialogTitle>
         </AlertDialogHeader>
         <AlertDialogDescription />
         <AlertDialogFooter className='flex w-full justify-between'>
-          <AlertDialogCancel disabled={isPending || isSuccess}>Cancel</AlertDialogCancel>
+          <AlertDialogCancel className='text-primary' disabled={isPending || isSuccess}>
+            Cancel
+          </AlertDialogCancel>
           <AlertDialogAction
             onClick={(event) => {
               event.preventDefault();

frontend/src/components/blocks/questions/admin-edit-form.tsx

@@ -117,7 +117,11 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({
   const difficultiesQuery = useQuery(getDifficultiesQueryConfig());
 
   const onSubmit = (formValues: z.infer<typeof formSchema>) => {
-    sendUpdate(formValues);
+    const parsed = formSchema.safeParse(formValues);
+
+    if (parsed.success) {
+      sendUpdate(parsed.data);
+    }
   };
 
   return (
@@ -200,6 +204,7 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({
                               }))}
                               chosenOptions={field.value}
                               setChosenOptions={(value: Array<string>) => {
+                                form.clearErrors('topics');
                                 form.setValue('topics', value);
                               }}
                             />
@@ -326,7 +331,7 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({
                   <Button
                     disabled={isPending || isSuccess}
                     onClick={() => {
-                      onSubmit(form.getValues());
+                      form.handleSubmit(onSubmit);
                     }}
                     size='sm'
                     className='flex gap-2'
@@ -335,7 +340,7 @@ export const AdminEditForm: FC<AdminEditFormProps> = ({
                       {isPending
                         ? 'Submitting'
                         : isSuccess
-                          ? 'Updated! Closing form'
+                          ? `${mode === 'create' ? 'Added' : 'Updated'}! Closing form...`
                           : 'Save Changes'}
                     </span>
                     {isPending && <Loader2 className='size-4 animate-spin' />}

frontend/src/components/ui/combobox.tsx

@@ -118,8 +118,9 @@ export const ComboboxExternal = React.forwardRef<
   const [isOpen, setIsOpen] = React.useState(false);
   const [inputVal, setInputVal] = React.useState('');
 
-  const onAddNewOption = () => {
-    const opt = inputVal.replace(/^[a-zA-Z]/, (c) => c.toUpperCase());
+  const onAddNewOption = (newOpt?: string) => {
+    const toAdd = newOpt ?? inputVal;
+    const opt = toAdd.replace(/^[a-zA-Z]/, (c) => c.toUpperCase());
 
     if (!chosenOptions.includes(opt)) {
       setChosenOptions([...chosenOptions, opt]);
@@ -149,17 +150,12 @@ export const ComboboxExternal = React.forwardRef<
             onValueChange={setInputVal}
             placeholder={`Search or add ${itemName}...`}
             className='h-9'
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                event.preventDefault();
-                onAddNewOption();
-              }
-            }}
           />
           <CommandList>
             <CommandEmpty
+              autoFocus
               className='hover:bg-secondary hover:text-secondary-foreground p-3 text-sm hover:cursor-pointer'
-              onClick={onAddNewOption}
+              onClick={() => onAddNewOption()}
             >
               Add {`"${inputVal}"`}
             </CommandEmpty>

frontend/src/components/ui/form.tsx

@@ -88,7 +88,7 @@ const FormLabel = React.forwardRef<
   return (
     <Label
       ref={ref}
-      className={cn(error && 'text-destructive', className)}
+      className={cn(error && 'text-destructive dark:text-red-700', className)}
       htmlFor={formItemId}
       {...props}
     />
@@ -146,7 +146,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn('text-[0.8rem] font-medium text-destructive', className)}
+      className={cn('text-[0.8rem] font-medium text-destructive dark:text-red-700', className)}
       {...props}
     >
       {body}