fix: splash screen (#307)

fix: splash screen fixes

apps/api/src/chapter/chapter.controller.ts

@@ -15,7 +15,7 @@ import {
   createChapterSchema,
   UpdateChapterBody,
   updateChapterSchema,
-  showChapterSchema
+  showChapterSchema,
 } from "./schemas/chapter.schema";
 
 import type { ShowChapterResponse } from "./schemas/chapter.schema";

apps/web/app/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}

apps/web/app/modules/Admin/AddCourse/AddCourse.tsx

@@ -1,12 +1,10 @@
-import { useNavigate } from "@remix-run/react";
 import { useCallback, useState } from "react";
 
 import { useUploadFile } from "~/api/mutations/admin/useUploadFile";
 import { useCategoriesSuspense } from "~/api/queries/useCategories";
 import SplashScreenImage from "~/assets/svgs/splash-screen-image.svg";
 import ImageUploadInput from "~/components/FileUploadInput/ImageUploadInput";
 import { Icon } from "~/components/Icon";
-import Editor from "~/components/RichText/Editor";
 import { Button } from "~/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
@@ -20,16 +18,20 @@ import {
 } from "~/components/ui/select";
 
 import { useAddCourseForm } from "./hooks/useAddCourseForm";
+import Breadcrumb from "./components/Breadcrumb";
 
 const AddCourse = () => {
-  const navigate = useNavigate();
   const { form, onSubmit } = useAddCourseForm();
   const { data: categories } = useCategoriesSuspense();
   const [isUploading, setIsUploading] = useState(false);
   const { mutateAsync: uploadFile } = useUploadFile();
   const { isValid: isFormValid } = form.formState;
   const watchedImageUrl = form.watch("imageUrl");
   const imageUrl = form.getValues("imageUrl");
+  const maxDescriptionFieldLength = 800;
+
+  const watchedDescriptionLength = form.watch("description").length;
+  const descriptionFieldCharactersLeft = maxDescriptionFieldLength - watchedDescriptionLength;
 
   const handleImageUpload = useCallback(
     async (file: File) => {
@@ -47,15 +49,12 @@ const AddCourse = () => {
   );
 
   return (
-    <div className="flex h-screen bg-white p-20">
+    <div className="flex h-screen bg-white px-20 py-8 overflow-auto">
       <div className="w-full flex items-center justify-center">
         <img src={SplashScreenImage} alt="splashScreenImage" className="rounded" />
       </div>
-      <div className="w-full max-w-[820px] flex flex-col gap-y-8 px-20">
-        <Button variant="outline" onClick={() => navigate("/admin/courses")} className="w-min">
-          <Icon name="ChevronLeft" className="w-3 h-3 mr-2" />
-          Back
-        </Button>
+      <div className="w-full max-w-[820px] flex flex-col gap-y-6 px-8">
+        <Breadcrumb />
         <hgroup className="flex flex-col gapy-y-1">
           <h1 className="h3 text-neutral-950">Create new course</h1>
           <p className="body-lg-md text-neutral-800">
@@ -71,11 +70,17 @@ const AddCourse = () => {
                 name="title"
                 render={({ field }) => (
                   <FormItem className="flex-1">
-                    <Label htmlFor="title">
+                    <Label htmlFor="title" className="body-base-md">
                       <span className="text-red-500">*</span> Course title
                     </Label>
                     <FormControl>
-                      <Input id="title" {...field} required />
+                      <Input
+                        id="title"
+                        {...field}
+                        required
+                        placeholder="Enter title..."
+                        className="placeholder:body-base"
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -92,7 +97,10 @@ const AddCourse = () => {
                     <FormControl>
                       <Select onValueChange={field.onChange} defaultValue={field.value}>
                         <FormControl>
-                          <SelectTrigger id="categoryId">
+                          <SelectTrigger
+                            id="categoryId"
+                            className="border border-neutral-300 focus:border-primary-800 focus:ring-primary-800 rounded-lg data-[placeholder]:body-base"
+                          >
                             <SelectValue placeholder="Select category" />
                           </SelectTrigger>
                         </FormControl>
@@ -119,17 +127,27 @@ const AddCourse = () => {
                     <span className="text-red-500">*</span> Description
                   </Label>
                   <FormControl>
-                    <Editor
+                    <textarea
                       id="description"
-                      content={field.value}
-                      className="h-32 w-full"
+                      maxLength={maxDescriptionFieldLength}
+                      placeholder="Provide description about the course..."
+                      className="h-32 px-2 py-1 text-left text-neutral-950 body-base placeholder:body-base  placeholder:text-neutral-600 border border-neutral-300 rounded-lg focus:border-blue-500 focus:border-2 focus:outline-none"
                       {...field}
+                      required
                     />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
+            {descriptionFieldCharactersLeft <= 0 ? (
+              <p className="text-red-500 text-sm">You have reached the character limit.</p>
+            ) : (
+              <p className="text-neutral-800 mt-1">
+                {descriptionFieldCharactersLeft} characters left
+              </p>
+            )}
+
             <FormField
               control={form.control}
               name="imageUrl"
@@ -162,12 +180,12 @@ const AddCourse = () => {
 
             <div className="pb-5">
               <div className="flex space-x-5 mt-5 mb-10">
-                <Button className="bg-white text-blue-500 border-2 rounded px-6 py-2">
+                <Button className="bg-white text-primary-800 border-2 rounded px-6 py-2">
                   Cancel
                 </Button>
                 <Button
                   type="submit"
-                  className="bg-blue-500 text-white rounded px-6 py-2"
+                  className="bg-primary-700 text-white rounded px-6 py-2"
                   disabled={!isFormValid || isUploading}
                 >
                   Proceed

apps/web/app/modules/Admin/AddCourse/components/Breadcrumb.tsx

@@ -0,0 +1,39 @@
+import { useNavigate } from "@remix-run/react";
+import { Icon } from "~/components/Icon";
+import {
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+import { Button } from "~/components/ui/button";
+
+const Breadcrumb = () => {
+  const navigate = useNavigate();
+
+  return (
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink className="text-primary-800 body-base-md cursor-pointer">
+          <Button
+            variant="outline"
+            onClick={() => navigate("/admin/courses")}
+            className="w-min mr-2"
+          >
+            <Icon name="ChevronLeft" className="w-3 h-3 mr-2" />
+            Back
+          </Button>
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <BreadcrumbLink className="text-neutral-850 body-base-md hover:text-neutral-850">
+          My courses
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem className="text-neutral-950 body-base-md">Create new</BreadcrumbItem>
+    </BreadcrumbList>
+  );
+};
+
+export default Breadcrumb;

apps/web/app/modules/Admin/AddCourse/validators/addCourseFormSchema.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 
 export const addCourseFormSchema = z.object({
   title: z.string().min(2, "Title must be at least 2 characters."),
-  description: z.string().min(2, "Description must be at least 2 characters."),
+  description: z.string().min(2, "Description must be at least 2 characters.").max(800),
   categoryId: z.string().min(1, "Category is required"),
   imageUrl: z.union([z.string().url("Invalid image URL"), z.string().length(0)]).optional(),
 });