From 28b3cc9af105bd4520017605f2e7b600c16e6c87 Mon Sep 17 00:00:00 2001
From: Sam Rizvi <srizvi@users.noreply.github.com>
Date: Fri, 3 Nov 2023 07:02:55 -0700
Subject: [PATCH] chore: improve validations for editing after publish

- updated validations for playbook and play creation
- improved form descriptions
- cleaned up styles for consistency on teacher flow again

Fixes #284
---
 .../[courseId]/chapters/[chapterId]/page.tsx  |  2 +-
 .../teacher/courses/[courseId]/page.tsx       |  4 +--
 .../learn/(dashboard)/teacher/create/page.tsx | 15 +++++++----
 apps/lms/app/config/navbar-routes.tsx         |  4 +--
 .../teacher/chapters/chapter-access-form.tsx  |  2 +-
 .../teacher/chapters/chapter-actions.tsx      |  6 ++---
 .../chapters/chapter-description-form.tsx     | 23 ++++++++++++----
 .../teacher/chapters/chapter-title-form.tsx   | 24 ++++++++++++++---
 .../teacher/chapters/chapter-video-form.tsx   |  2 +-
 .../app/ui/learn/teacher/courses/actions.tsx  |  4 +--
 .../learn/teacher/courses/attachment-form.tsx |  8 +++---
 .../learn/teacher/courses/category-form.tsx   | 16 +++++++-----
 .../learn/teacher/courses/chapters-form.tsx   | 23 +++++++++++-----
 .../teacher/courses/description-form.tsx      | 26 +++++++++++++------
 .../ui/learn/teacher/courses/image-form.tsx   |  4 +--
 .../ui/learn/teacher/courses/preview-form.tsx | 21 +++++++++------
 .../ui/learn/teacher/courses/price-form.tsx   | 15 +++++++----
 .../ui/learn/teacher/courses/title-form.tsx   | 19 ++++++++++----
 apps/lms/app/ui/session-info.tsx              |  4 +--
 apps/lms/app/ui/user-account-nav.tsx          |  2 +-
 packages/ui/components/mode-toggle.tsx        |  4 +--
 21 files changed, 153 insertions(+), 75 deletions(-)

diff --git a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/chapters/[chapterId]/page.tsx b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/chapters/[chapterId]/page.tsx
index 5893aad..70784f2 100644
--- a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/chapters/[chapterId]/page.tsx
+++ b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/chapters/[chapterId]/page.tsx
@@ -62,7 +62,7 @@ const ChapterIdPage = async ({
               href={`/learn/teacher/courses/${params.courseId}`}
               className="mb-6 flex items-center text-sm transition hover:opacity-75"
             >
-              <Icons.arrowLeft className="mr-2 h-4 w-4" />
+              <Icons.arrowLeft className="mr-2 h-4 w-4 text-brand" />
               Back to playbook setup
             </Link>
             <div className="flex w-full items-center justify-between">
diff --git a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/page.tsx b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/page.tsx
index d5d6687..6d7380f 100644
--- a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/page.tsx
+++ b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/courses/[courseId]/page.tsx
@@ -57,7 +57,7 @@ const CourseIdPage = async ({ params }: { params: { courseId: string } }) => {
     course.preview,
     course.description,
     course.imageUrl,
-    course.price,
+    course.price !== null && course.price !== undefined,
     course.categoryId,
     course.chapters.some((chapter) => chapter.isPublished),
   ];
@@ -77,7 +77,7 @@ const CourseIdPage = async ({ params }: { params: { courseId: string } }) => {
       <div className="p-6">
         <div className="flex items-center justify-between">
           <div className="flex flex-col gap-y-2">
-            <h1 className="font-display tracking-tight text-2xl">
+            <h1 className="font-display tracking-tight text-3xl">
               Playbook setup
             </h1>
             <span className="text-base text-muted-foreground">
diff --git a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/create/page.tsx b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/create/page.tsx
index 5b753a4..5d577f6 100644
--- a/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/create/page.tsx
+++ b/apps/lms/app/(dashboard)/(learn)/learn/(dashboard)/teacher/create/page.tsx
@@ -21,9 +21,14 @@ import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
 const formSchema = z.object({
-  title: z.string().min(1, {
-    message: 'Every playbook needs a title.',
-  }),
+  title: z
+    .string()
+    .min(40, {
+      message: 'Ouch! The playbook title must be at least 40 characters',
+    })
+    .max(65, {
+      message: 'OK but, the playbook title cannot exceed 65 characters.',
+    }),
 });
 
 const CreatePage = () => {
@@ -85,8 +90,8 @@ const CreatePage = () => {
                       {...field}
                     />
                   </FormControl>
-                  <FormDescription>
-                    Use sentence case for your title.
+                  <FormDescription className="text-muted-foreground/70">
+                    Use sentence case for your title between 45-65 characters.
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
diff --git a/apps/lms/app/config/navbar-routes.tsx b/apps/lms/app/config/navbar-routes.tsx
index b406929..52691c7 100644
--- a/apps/lms/app/config/navbar-routes.tsx
+++ b/apps/lms/app/config/navbar-routes.tsx
@@ -40,7 +40,7 @@ export const NavbarRoutes = ({ userId }) => {
           </Link>
         ) : null}
       </div>
-      <div className="flex gap-x-4 mr-6 items-center">
+      <div className="flex gap-x-3 mr-3 items-center">
         <ModeToggle />
         <Link
           href="https://discord.com/channels/1151749282806910976/1164902538731069542"
@@ -48,7 +48,7 @@ export const NavbarRoutes = ({ userId }) => {
           rel="noopener noreferrer"
           aria-label="Navigate to And Voila Discord in a new window."
         >
-          <Icons.discord className="text-brand h-9 w-9" />
+          <Icons.discord className="text-foreground/80 h-6 w-6" />
         </Link>
       </div>
     </>
diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-access-form.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-access-form.tsx
index 7c1d85d..7696ef1 100644
--- a/apps/lms/app/ui/learn/teacher/chapters/chapter-access-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/chapters/chapter-access-form.tsx
@@ -71,7 +71,7 @@ export const ChapterAccessForm = ({
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
         Access to the play
-        <Button onClick={toggleEdit} variant="ghost">
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-actions.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-actions.tsx
index 04cbd63..2965ac7 100644
--- a/apps/lms/app/ui/learn/teacher/chapters/chapter-actions.tsx
+++ b/apps/lms/app/ui/learn/teacher/chapters/chapter-actions.tsx
@@ -86,14 +86,14 @@ export const ChapterActions = ({
       <Button
         onClick={onClick}
         disabled={disabled || isLoading}
-        variant="outline"
+        variant="custom"
         size="sm"
       >
         {isPublished ? 'Unpublish' : 'Publish'}
       </Button>
       <ConfirmModal onConfirm={onDelete}>
-        <Button size="sm" disabled={isLoading}>
-          <TrashIcon className="h-4 w-4" />
+        <Button size="sm" disabled={isLoading} variant="destructive">
+          <TrashIcon className="h-4 w-4 bg-destructive text-white" />
         </Button>
       </ConfirmModal>
     </div>
diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-description-form.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-description-form.tsx
index ee45fc8..49437a8 100644
--- a/apps/lms/app/ui/learn/teacher/chapters/chapter-description-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/chapters/chapter-description-form.tsx
@@ -7,6 +7,7 @@ import { Button } from '@ui/components/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -29,7 +30,15 @@ interface ChapterDescriptionFormProps {
 }
 
 const formSchema = z.object({
-  description: z.string().min(1),
+  description: z.string().refine(
+    (value) => {
+      const wordCount = value.split(/\s+/).length;
+      return wordCount >= 150;
+    },
+    {
+      message: 'Description must be at least 150 words',
+    },
+  ),
 });
 
 export const ChapterDescriptionForm = ({
@@ -77,7 +86,7 @@ export const ChapterDescriptionForm = ({
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
         Describe the play
-        <Button onClick={toggleEdit} variant="ghost">
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -91,11 +100,11 @@ export const ChapterDescriptionForm = ({
       {!isEditing && (
         <div
           className={cn(
-            'mt-2 text-sm',
-            !initialData.description && 'italic text-slate-500',
+            'mt-2 text-base',
+            !initialData.description && 'italic text-destructive',
           )}
         >
-          {!initialData.description && 'No description'}
+          {!initialData.description && 'No description set'}
           {initialData.description && (
             <Preview value={initialData.description} />
           )}
@@ -115,6 +124,10 @@ export const ChapterDescriptionForm = ({
                   <FormControl>
                     <QuillEditor {...field} />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    The description should be at least 250 words. Make it
+                    awesome!
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-title-form.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-title-form.tsx
index 99d3995..20e1e42 100644
--- a/apps/lms/app/ui/learn/teacher/chapters/chapter-title-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/chapters/chapter-title-form.tsx
@@ -7,6 +7,7 @@ import { Button } from '@ui/components/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -28,7 +29,14 @@ interface ChapterTitleFormProps {
 }
 
 const formSchema = z.object({
-  title: z.string().min(1),
+  title: z
+    .string()
+    .min(40, {
+      message: "Yo! The play's title needs at least 40 characters.",
+    })
+    .max(65, {
+      message: 'Oops, keep your title under 65 characters please.',
+    }),
 });
 
 export const ChapterTitleForm = ({
@@ -74,8 +82,8 @@ export const ChapterTitleForm = ({
   return (
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Title of the play
-        <Button onClick={toggleEdit} variant="ghost">
+        Play title
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -86,7 +94,11 @@ export const ChapterTitleForm = ({
           )}
         </Button>
       </div>
-      {!isEditing && <p className="mt-2 text-sm">{initialData.title}</p>}
+      {!isEditing && (
+        <p className="mt-2 text-base text-muted-foreground">
+          {initialData.title}
+        </p>
+      )}
       {isEditing && (
         <Form {...form}>
           <form
@@ -105,6 +117,10 @@ export const ChapterTitleForm = ({
                       {...field}
                     />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    Use sentence case for the title of the play and keep it
+                    between 45-65 characters.
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
diff --git a/apps/lms/app/ui/learn/teacher/chapters/chapter-video-form.tsx b/apps/lms/app/ui/learn/teacher/chapters/chapter-video-form.tsx
index 351962b..3154809 100644
--- a/apps/lms/app/ui/learn/teacher/chapters/chapter-video-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/chapters/chapter-video-form.tsx
@@ -59,7 +59,7 @@ export const ChapterVideoForm = ({
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
         Video for the play
-        <Button onClick={toggleEdit} variant="ghost">
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing && <>Cancel</>}
           {!isEditing && !initialData.videoUrl && (
             <>
diff --git a/apps/lms/app/ui/learn/teacher/courses/actions.tsx b/apps/lms/app/ui/learn/teacher/courses/actions.tsx
index 27a156a..fd10c27 100644
--- a/apps/lms/app/ui/learn/teacher/courses/actions.tsx
+++ b/apps/lms/app/ui/learn/teacher/courses/actions.tsx
@@ -88,8 +88,8 @@ export const Actions = ({ disabled, courseId, isPublished }: ActionsProps) => {
         {isPublished ? 'Unpublish' : 'Publish'}
       </Button>
       <ConfirmModal onConfirm={onDelete}>
-        <Button size="sm" disabled={isLoading}>
-          <Icons.trash className="h-4 w-4" />
+        <Button variant="destructive" size="sm" disabled={isLoading}>
+          <Icons.trash className="h-4 w-4 text-white" />
         </Button>
       </ConfirmModal>
     </div>
diff --git a/apps/lms/app/ui/learn/teacher/courses/attachment-form.tsx b/apps/lms/app/ui/learn/teacher/courses/attachment-form.tsx
index 00f059c..cc018ae 100644
--- a/apps/lms/app/ui/learn/teacher/courses/attachment-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/courses/attachment-form.tsx
@@ -74,8 +74,8 @@ export const AttachmentForm = ({
   return (
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Course attachments
-        <Button onClick={toggleEdit} variant="ghost">
+        Playbook attachments
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing && <>Cancel</>}
           {!isEditing && (
             <>
@@ -88,8 +88,8 @@ export const AttachmentForm = ({
       {!isEditing && (
         <>
           {initialData.attachments.length === 0 && (
-            <p className="mt-2 text-sm italic text-muted-foreground">
-              No attachments yet
+            <p className="mt-2 text-base italic text-destructive">
+              No attachments set
             </p>
           )}
           {initialData.attachments.length > 0 && (
diff --git a/apps/lms/app/ui/learn/teacher/courses/category-form.tsx b/apps/lms/app/ui/learn/teacher/courses/category-form.tsx
index e4d77c0..17a87dd 100644
--- a/apps/lms/app/ui/learn/teacher/courses/category-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/courses/category-form.tsx
@@ -8,6 +8,7 @@ import { Combobox } from '@ui/components/ui/combobox';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -28,7 +29,7 @@ interface CategoryFormProps {
 }
 
 const formSchema = z.object({
-  categoryId: z.string().min(1),
+  categoryId: z.string().min(2),
 });
 
 export const CategoryForm = ({
@@ -77,8 +78,8 @@ export const CategoryForm = ({
   return (
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Course category
-        <Button onClick={toggleEdit} variant="ghost">
+        Playbook category
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -92,11 +93,11 @@ export const CategoryForm = ({
       {!isEditing && (
         <p
           className={cn(
-            'mt-2 text-base lg:text-lg text-muted-foreground',
-            !initialData.categoryId && 'italic text-muted-foreground',
+            'mt-2 text-base text-muted-foreground',
+            !initialData.categoryId && 'italic text-destructive',
           )}
         >
-          {selectedOption?.label || 'No category'}
+          {selectedOption?.label || 'No category set'}
         </p>
       )}
       {isEditing && (
@@ -117,6 +118,9 @@ export const CategoryForm = ({
                       onChange={(value) => field.onChange(value)}
                     />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    Each playbook must have a category, only one.
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
diff --git a/apps/lms/app/ui/learn/teacher/courses/chapters-form.tsx b/apps/lms/app/ui/learn/teacher/courses/chapters-form.tsx
index aae59d7..18bd484 100644
--- a/apps/lms/app/ui/learn/teacher/courses/chapters-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/courses/chapters-form.tsx
@@ -7,6 +7,7 @@ import { Button } from '@ui/components/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -28,7 +29,14 @@ interface ChaptersFormProps {
 }
 
 const formSchema = z.object({
-  title: z.string().min(1),
+  title: z
+    .string()
+    .min(40, {
+      message: "Ugh, the play's title must be at least 40 characters",
+    })
+    .max(65, {
+      message: "Oof, the play's title can't be more than 65 characters",
+    }),
 });
 
 export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
@@ -78,7 +86,7 @@ export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
         list: updateData,
       });
       toast({
-        title: "You're a Dragger and a Dropper!",
+        title: "You're a dragger and a dropper!",
         description: 'Your plays have been re-ordered in the playbook.',
       });
       router.refresh();
@@ -107,7 +115,7 @@ export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
       )}
       <div className="flex items-center justify-between font-semibold mb-4">
         List of plays
-        <Button onClick={toggleCreating} variant="ghost">
+        <Button onClick={toggleCreating} variant="ghost" size="sm">
           {isCreating ? (
             <>Cancel</>
           ) : (
@@ -136,6 +144,9 @@ export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
                       {...field}
                     />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    A playbook needs at least one play yo!
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
@@ -154,11 +165,11 @@ export const ChaptersForm = ({ initialData, courseId }: ChaptersFormProps) => {
       {!isCreating && (
         <div
           className={cn(
-            'mt-2 text-sm',
-            !initialData.chapters.length && 'italic text-muted-foreground',
+            'mt-2 text-base text-muted-foreground ',
+            !initialData.chapters.length && 'italic text-destructive',
           )}
         >
-          {!initialData.chapters.length && 'No chapters'}
+          {!initialData.chapters.length && 'No plays created'}
           <ChaptersList
             onEdit={onEdit}
             onReorder={onReorder}
diff --git a/apps/lms/app/ui/learn/teacher/courses/description-form.tsx b/apps/lms/app/ui/learn/teacher/courses/description-form.tsx
index d48298b..bdcca64 100644
--- a/apps/lms/app/ui/learn/teacher/courses/description-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/courses/description-form.tsx
@@ -7,6 +7,7 @@ import { Button } from '@ui/components/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -28,9 +29,15 @@ interface DescriptionFormProps {
 }
 
 const formSchema = z.object({
-  description: z.string().min(1, {
-    message: 'Description is required',
-  }),
+  description: z.string().refine(
+    (value) => {
+      const wordCount = value.split(/\s+/).length;
+      return wordCount >= 150;
+    },
+    {
+      message: 'Description must be at least 150 words',
+    },
+  ),
 });
 
 export const DescriptionForm = ({
@@ -74,8 +81,8 @@ export const DescriptionForm = ({
   return (
     <div className="mt-6 rounded-md border bg-white dark:bg-background px-4 py-6">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Course description
-        <Button onClick={toggleEdit} variant="ghost">
+        Playbook description
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -89,11 +96,11 @@ export const DescriptionForm = ({
       {!isEditing && (
         <div
           className={cn(
-            'mt-2 text-sm',
-            !initialData.description && 'italic text-muted-foreground',
+            'text-base text-muted-foreground mt-2',
+            !initialData.description && 'italic text-destructive',
           )}
         >
-          {!initialData.description && 'No description'}
+          {!initialData.description && 'No description set'}
           {initialData.description && (
             <Preview value={initialData.description} />
           )}
@@ -113,6 +120,9 @@ export const DescriptionForm = ({
                   <FormControl>
                     <QuillEditor {...field} />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    The playbook description should be at least 150 words.
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
diff --git a/apps/lms/app/ui/learn/teacher/courses/image-form.tsx b/apps/lms/app/ui/learn/teacher/courses/image-form.tsx
index e118c61..edc4905 100644
--- a/apps/lms/app/ui/learn/teacher/courses/image-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/courses/image-form.tsx
@@ -53,8 +53,8 @@ export const ImageForm = ({ initialData, courseId }: ImageFormProps) => {
   return (
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Course image
-        <Button onClick={toggleEdit} variant="ghost">
+        Playbook image
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing && <>Cancel</>}
           {!isEditing && !initialData.imageUrl && (
             <>
diff --git a/apps/lms/app/ui/learn/teacher/courses/preview-form.tsx b/apps/lms/app/ui/learn/teacher/courses/preview-form.tsx
index 9f835e5..5eeeda7 100644
--- a/apps/lms/app/ui/learn/teacher/courses/preview-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/courses/preview-form.tsx
@@ -8,6 +8,7 @@ import {
   cn,
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -30,11 +31,11 @@ interface PreviewFormProps {
 const formSchema = z.object({
   preview: z
     .string()
-    .min(1, {
-      message: 'Description is required',
+    .min(125, {
+      message: 'You need to provide a preview of at least 125 characters.',
     })
-    .max(200, {
-      message: 'Description cannot exceed 200 characters',
+    .max(165, {
+      message: 'Preview text cannot exceed 165 characters.',
     }),
 });
 
@@ -75,8 +76,8 @@ export const PreviewForm = ({ initialData, courseId }: PreviewFormProps) => {
   return (
     <div className="mt-6 rounded-md border bg-white dark:bg-background px-4 py-6">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Course preview text
-        <Button onClick={toggleEdit} variant="ghost">
+        Playbook preview text
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -90,8 +91,8 @@ export const PreviewForm = ({ initialData, courseId }: PreviewFormProps) => {
       {!isEditing && (
         <p
           className={cn(
-            'text-base lg:text-lg text-muted-foreground mt-2',
-            !initialData.preview && 'text-muted-foreground italic',
+            'text-base text-muted-foreground mt-2',
+            !initialData.preview && 'italic text-destructive',
           )}
         >
           {initialData.preview || 'No preview set'}
@@ -115,6 +116,10 @@ export const PreviewForm = ({ initialData, courseId }: PreviewFormProps) => {
                       {...field}
                     />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    Your preview text should be SEO optimized and between
+                    125-165 characters.
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
diff --git a/apps/lms/app/ui/learn/teacher/courses/price-form.tsx b/apps/lms/app/ui/learn/teacher/courses/price-form.tsx
index 9542312..078b91d 100644
--- a/apps/lms/app/ui/learn/teacher/courses/price-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/courses/price-form.tsx
@@ -71,8 +71,13 @@ export const PriceForm = ({ initialData, courseId }: PriceFormProps) => {
   return (
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
-        Course access
-        <Button onClick={toggleEdit} variant="ghost" aria-label="Edit access">
+        Playbook access
+        <Button
+          onClick={toggleEdit}
+          variant="ghost"
+          aria-label="Edit access"
+          size="sm"
+        >
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -84,7 +89,7 @@ export const PriceForm = ({ initialData, courseId }: PriceFormProps) => {
         </Button>
       </div>
       {!isEditing && (
-        <p className="mt-2 text-base lg:text-lg text-muted-foreground">
+        <p className="mt-2 text-base text-muted-foreground">
           {initialData.price === 0 ? 'Free' : 'Paid'}
         </p>
       )}
@@ -111,8 +116,8 @@ export const PriceForm = ({ initialData, courseId }: PriceFormProps) => {
                   <div className="space-y-1 leading-none">
                     <FormDescription id="switch-label" className="text-base">
                       {field.value
-                        ? 'The playbook is currently Free.'
-                        : 'The playbook is currently Paid.'}
+                        ? 'This is a free playbook.'
+                        : 'The is a paid playbook.'}
                     </FormDescription>
                   </div>
                 </FormItem>
diff --git a/apps/lms/app/ui/learn/teacher/courses/title-form.tsx b/apps/lms/app/ui/learn/teacher/courses/title-form.tsx
index 76bcfa4..a61c0cc 100644
--- a/apps/lms/app/ui/learn/teacher/courses/title-form.tsx
+++ b/apps/lms/app/ui/learn/teacher/courses/title-form.tsx
@@ -7,6 +7,7 @@ import { Button } from '@ui/components/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormMessage,
@@ -27,9 +28,14 @@ interface TitleFormProps {
 }
 
 const formSchema = z.object({
-  title: z.string().min(1, {
-    message: 'Title is required',
-  }),
+  title: z
+    .string()
+    .min(40, {
+      message: 'Yo! The playbook title needs at least 40 characters.',
+    })
+    .max(65, {
+      message: 'Hey verbosa, keep your title under 65 characters please.',
+    }),
 });
 
 export const TitleForm = ({ initialData, courseId }: TitleFormProps) => {
@@ -68,7 +74,7 @@ export const TitleForm = ({ initialData, courseId }: TitleFormProps) => {
     <div className="mt-6 rounded-md border bg-white px-4 py-6 dark:bg-background">
       <div className="flex items-center justify-between font-semibold mb-4">
         Playbook title
-        <Button onClick={toggleEdit} variant="ghost">
+        <Button onClick={toggleEdit} variant="ghost" size="sm">
           {isEditing ? (
             <>Cancel</>
           ) : (
@@ -80,7 +86,7 @@ export const TitleForm = ({ initialData, courseId }: TitleFormProps) => {
         </Button>
       </div>
       {!isEditing && (
-        <p className="mt-2 text-base lg:text-lg text-muted-foreground">
+        <p className="mt-2 text-base text-muted-foreground">
           {initialData.title}
         </p>
       )}
@@ -102,6 +108,9 @@ export const TitleForm = ({ initialData, courseId }: TitleFormProps) => {
                       {...field}
                     />
                   </FormControl>
+                  <FormDescription className="text-muted-foreground/70">
+                    Use sentence case for your title between 45-65 characters.
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
diff --git a/apps/lms/app/ui/session-info.tsx b/apps/lms/app/ui/session-info.tsx
index 8adccd3..91c589c 100644
--- a/apps/lms/app/ui/session-info.tsx
+++ b/apps/lms/app/ui/session-info.tsx
@@ -21,7 +21,7 @@ export const SessionInfo = () => {
 
   if (!session && process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production') {
     return (
-      <div className="absolute bottom-6 right-6 bg-destructive p-4 rounded-lg text-xs">
+      <div className="flex fixed bottom-6 right-6 bg-destructive p-4 rounded-lg text-xs">
         No session found...
       </div>
     );
@@ -30,7 +30,7 @@ export const SessionInfo = () => {
   return (
     <>
       {process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production' && (
-        <div className="text-xs bg-alternate/50 backdrop-blur-md absolute bottom-6 right-6 p-4 rounded-lg text-black">
+        <div className="text-xs bg-alternate/50 backdrop-blur-md flex flex-col fixed bottom-6 right-6 p-4 rounded-lg text-black">
           <p className="font-mono font-bold ">For testing purposes</p>
           <pre>User ID: {obfuscatedUserId}</pre>
         </div>
diff --git a/apps/lms/app/ui/user-account-nav.tsx b/apps/lms/app/ui/user-account-nav.tsx
index 0f97e7a..c1db29b 100644
--- a/apps/lms/app/ui/user-account-nav.tsx
+++ b/apps/lms/app/ui/user-account-nav.tsx
@@ -23,7 +23,7 @@ export function UserAccountNav({ user }: UserAccountNavProps) {
       <DropdownMenuTrigger>
         <UserAvatar
           user={{ name: user.name || null, image: user.image || null }}
-          className="h-8 w-8"
+          className="h-6 w-6"
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
diff --git a/packages/ui/components/mode-toggle.tsx b/packages/ui/components/mode-toggle.tsx
index 572af87..5a44276 100644
--- a/packages/ui/components/mode-toggle.tsx
+++ b/packages/ui/components/mode-toggle.tsx
@@ -19,8 +19,8 @@ export function ModeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <SunIcon className="h-[1.1rem] w-[1.1rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.1rem] w-[1.1rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>