feat: improve modal form styling

Author: stampaaaron

apps/frontend/src/components/CarerSelect.tsx

@@ -3,8 +3,8 @@ import { EntitySelect, EntitySelectProps } from "./EntitySelect";
 
 type CarerSelectProps = EntitySelectProps;
 
-export function CarerSelect({ value, onChange }: CarerSelectProps) {
+export function CarerSelect({ value, onChange, ...rest }: CarerSelectProps) {
   const { data } = $api.useQuery("get", "/carers");
 
-  return <EntitySelect value={value} onChange={onChange} data={data} buildLabel={(carer) => carer.name} />;
+  return <EntitySelect value={value} onChange={onChange} {...rest} data={data} buildLabel={(carer) => carer.name} />;
 }

apps/frontend/src/components/LanguageSelect.tsx

@@ -3,8 +3,8 @@ import { EntitySelect, EntitySelectProps } from "./EntitySelect";
 
 type LanguageSelectProps = EntitySelectProps;
 
-export function LanguageSelect({ value, onChange }: LanguageSelectProps) {
+export function LanguageSelect({ value, onChange, ...rest }: LanguageSelectProps) {
   const { data } = $api.useQuery("get", "/languages");
 
-  return <EntitySelect value={value} onChange={onChange} data={data} buildLabel={(language) => language.name} searchable />;
+  return <EntitySelect value={value} onChange={onChange} searchable {...rest} data={data} buildLabel={(language) => language.name} />;
 }

apps/frontend/src/components/questionnaire/calendar/EntryForm.tsx

@@ -1,5 +1,5 @@
 import { isInRange, isNotEmpty, useForm } from "@mantine/form";
-import { Button, Group, Stack, TimeInput, NumberInput, ActionIcon, IconMinus } from "@quassel/ui";
+import { Button, Group, Stack, TimeInput, NumberInput, ActionIcon, IconMinus, Flex } from "@quassel/ui";
 import { i18n } from "../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
@@ -83,14 +83,14 @@ export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
 
   return (
     <form onSubmit={f.onSubmit(onSave)}>
-      <Stack align="flex-start">
+      <Stack>
         <CarerSelect {...f.getInputProps("carerId")} />
 
         {f.getValues().languageEntries.map((_, index) => (
           // TODO: make key either languageId or name of new language entry
-          <Group key={`entry-${index}`}>
-            <NumberInput {...f.getInputProps(`languageEntries.${index}.ratio`)} max={100} min={1} />
-            <LanguageSelect {...f.getInputProps(`languageEntries.${index}.languageId`)} />
+          <Group key={`entry-${index}`} justify="stretch">
+            <NumberInput {...f.getInputProps(`languageEntries.${index}.ratio`)} max={100} min={1} w={80} />
+            <LanguageSelect {...f.getInputProps(`languageEntries.${index}.languageId`)} flex={1} />
             {!!index && (
               <ActionIcon
                 variant="light"
@@ -105,6 +105,7 @@ export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
           </Group>
         ))}
         <Button
+          ml="auto"
           onClick={() => {
             const currentRatio = getTotalRatio();
 
@@ -119,9 +120,11 @@ export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
         >
           {t.addDialectAction}
         </Button>
-
-        <TimeInput {...f.getInputProps("startedAt")} />
-        <TimeInput {...f.getInputProps("endedAt")} />
+        <Group>
+          <TimeInput flex={1} {...f.getInputProps("startedAt")} />
+          -
+          <TimeInput flex={1} {...f.getInputProps("endedAt")} />
+        </Group>
 
         <Button type="submit">{actionLabel}</Button>
       </Stack>

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx

@@ -62,7 +62,7 @@ function QuestionnaireEntries() {
 
   return (
     <>
-      <Modal opened={opened} onClose={close} title="test" centered size="md">
+      <Modal opened={opened} onClose={close} size="md">
         <EntityForm
           onSave={console.log}
           entry={!!selectedStartTime && !!selectedEndTime ? { startedAt: selectedStartTime, endedAt: selectedEndTime } : undefined}

libs/ui/src/index.ts

@@ -10,6 +10,7 @@ import "@mantine/core/styles/Group.css";
 import "@mantine/core/styles/Loader.css";
 import "@mantine/core/styles/Overlay.css";
 import "@mantine/core/styles/ModalBase.css";
+import "@mantine/core/styles/Modal.css";
 import "@mantine/core/styles/Input.css";
 import "@mantine/core/styles/InlineInput.css";
 import "@mantine/core/styles/Flex.css";