style: 💄 UI improvement in Form submission page

font size, spacing
growupanand · Apr 7, 2024 · d3b0332 · d3b0332
1 parent ad3acec
commit d3b0332
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 27 deletions.
diff --git a/apps/web/src/components/formViewer/endScreen.tsx b/apps/web/src/components/formViewer/endScreen.tsx
@@ -11,14 +11,14 @@ export const EndScreen = (props: Props) => {
       : "Thank you for filling the form!";
   return (
     <div className="flex flex-col items-center justify-center">
-      <h1 className="text-center text-2xl font-bold">{message}</h1>
       <p className="text-muted-foreground text-center">
         You can now close this window.
       </p>
-      <div className="mt-10 flex items-center gap-3">
-        <p className="text-muted-foreground text-sm">
-          This form is created at -
-        </p>
+      <h1 className="whitespace-break-spaces break-words text-center text-2xl font-semibold lg:text-4xl">
+        {message}
+      </h1>
+      <div className="mt-10 flex items-center">
+        <p className="text-muted-foreground mr-2 text-sm">Form created using</p>
         <BrandName />
       </div>
     </div>

diff --git a/apps/web/src/components/formViewer/formFields.tsx b/apps/web/src/components/formViewer/formFields.tsx
@@ -59,21 +59,23 @@ export const FormFieldsViewer = ({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className={cn("py-3", showPrevQuestionButton && "hidden")}>
+        <div className={cn("mb-8", showPrevQuestionButton && "hidden")}>
           <Button
             type="button"
             variant="ghost"
-            className={cn("rounded-full", montserrat.className)}
-            size="sm"
+            className={cn(
+              "rounded-full ps-1 text-base font-semibold uppercase lg:text-xl",
+              montserrat.className,
+            )}
             onClick={goToPrevQuestion}
             disabled={isFormBusy}
           >
-            <ChevronLeft className="mr-2" size={20} />
-            <span>Back to Previous</span>
+            <ChevronLeft className="" size={20} />
+            <span>Previous</span>
           </Button>
         </div>
-        <div className="flex min-h-full w-full flex-col items-center justify-center px-3 ">
-          <h1 className="mb-10 w-full text-4xl font-medium ">
+        <div className="flex min-h-full w-full flex-col justify-center px-3 ">
+          <h1 className="mb-8 w-full whitespace-break-spaces text-justify text-xl lg:text-2xl">
             <span>
               {currentQuestion}
               {isFormBusy && <Tally1 className="ml-2 inline animate-ping" />}
@@ -90,7 +92,7 @@ export const FormFieldsViewer = ({
                     <FormControl>
                       <Textarea
                         autoFocus
-                        className="w-full rounded-none border-0 border-b	bg-transparent text-xl focus-visible:ring-0  focus-visible:ring-transparent focus-visible:ring-offset-0"
+                        className="w-full rounded-none border-0 border-b bg-transparent ps-0	text-xl font-medium focus-visible:ring-0 focus-visible:ring-transparent  focus-visible:ring-offset-0 lg:text-2xl"
                         placeholder="Type answer here..."
                         disabled={isFormBusy}
                         onKeyDown={(event) => {
@@ -106,22 +108,26 @@ export const FormFieldsViewer = ({
                   </FormItem>
                 )}
               />
-              <div className="text-muted-foreground flex items-center justify-end pt-1 text-sm font-light max-lg:hidden">
+              <div
+                className={cn(
+                  "text-muted-foreground flex items-center justify-end pt-1 text-sm font-light max-lg:hidden",
+                  montserrat.className,
+                )}
+              >
                 Press{" "}
                 <span className="mx-1 flex items-center font-bold">
                   Shift + Enter <CornerDownLeft className="h-3 w-3 " />
                 </span>{" "}
                 for new line
               </div>
-              <div className="py-3 ">
-                <div className="lg:hidden">
-                  <Button
-                    type="submit"
-                    className="w-full rounded-md px-6 py-3 font-medium "
-                  >
-                    Answer
-                  </Button>
-                </div>
+              <div className="mt-8 lg:hidden">
+                <Button
+                  type="submit"
+                  size="lg"
+                  className="w-full rounded-lg text-xl font-semibold uppercase"
+                >
+                  Answer
+                </Button>
               </div>
             </div>
           )}

diff --git a/apps/web/src/components/formViewer/welcomeScreen.tsx b/apps/web/src/components/formViewer/welcomeScreen.tsx
@@ -12,18 +12,23 @@ type Props = {
 
 export const WelcomeScreen = ({ form, onCTAClick: onClick }: Props) => {
   return (
-    <div className="flex flex-col items-center justify-center gap-2">
-      <h2 className={cn("text-center text-5xl font-bold", roboto.className)}>
+    <div className="flex flex-col items-center justify-center gap-1">
+      <h2
+        className={cn(
+          " whitespace-break-spaces break-all text-center text-2xl font-semibold lg:text-4xl",
+          roboto.className,
+        )}
+      >
         {form.welcomeScreenTitle}
       </h2>
-      <p className="mb-8 text-center text-2xl font-light">
+      <p className="mb-8 whitespace-break-spaces break-all text-justify text-xl lg:text-2xl">
         {form.welcomeScreenMessage}
       </p>
       <div>
         <Button
           size="lg"
           className={cn(
-            "rounded-full text-2xl font-semibold uppercase transition-all hover:scale-110 active:scale-100",
+            "whitespace-break-spaces rounded-lg text-xl font-semibold uppercase transition-all hover:scale-110 active:scale-100 lg:text-2xl",
             montserrat.className,
           )}
           onClick={onClick}