From 3f119dcf7f33e4f7417c0659b514409afac7ec8c Mon Sep 17 00:00:00 2001
From: Giuseppe Chiruzzi <info@xfloor.it>
Date: Thu, 16 May 2024 21:26:40 +0200
Subject: [PATCH] fix: make notes red for teacher, extend TextareaEditable,
 remove placeholder and make text red on booking editable textarea

---
 packages/ui/src/AttendanceCard/UserAttendance.tsx     | 2 +-
 packages/ui/src/IntervalCard/NotesSection.tsx         | 6 +++---
 packages/ui/src/TextareaEditable/TextareaEditable.tsx | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/AttendanceCard/UserAttendance.tsx b/packages/ui/src/AttendanceCard/UserAttendance.tsx
index 83e939f7d..4b564d4fd 100644
--- a/packages/ui/src/AttendanceCard/UserAttendance.tsx
+++ b/packages/ui/src/AttendanceCard/UserAttendance.tsx
@@ -183,7 +183,7 @@ const UserAttendance: React.FC<Props> = ({
           <p className="w-fit text-gray-600 text-xs mt-2 ml-4 border-b-[1px] border-gray-400">
             {t(AttendanceAria.TrainerNotes)}
           </p>
-          <p className="text-gray-600 text-xs px-2 pt-1 pb-2">{bookingNotes}</p>
+          <p className="text-red-700 text-xs px-2 pt-1 pb-2">{bookingNotes}</p>
         </div>
       )}
     </div>
diff --git a/packages/ui/src/IntervalCard/NotesSection.tsx b/packages/ui/src/IntervalCard/NotesSection.tsx
index d7ed5517c..6c57afc66 100644
--- a/packages/ui/src/IntervalCard/NotesSection.tsx
+++ b/packages/ui/src/IntervalCard/NotesSection.tsx
@@ -55,10 +55,10 @@ const NotesSection: React.FC<NotesSectionProps> = ({
       <Form className={className}>
         <FastField
           name="bookingNotes"
-          className="w-full h-full min-h-[105px] border-t border-gray-300"
+          className="w-full h-full min-h-[105px] border-t border-gray-300 "
+          innerClassName="text-red-700"
           component={TextareaEditable}
           isEditing={isEditing}
-          placeholder={t(BookingNotesForm.Placeholder)}
           // Fast field runs some sort of memoization
           // by switching the key (when 'isEditing' is toggled)
           // we're ensuring the component gets rerendered (from 'p' to 'textarea' in this case)
@@ -73,7 +73,7 @@ const NotesSection: React.FC<NotesSectionProps> = ({
           </HoverText>
           <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
             <IconButton
-              className="text-red-500"
+              className="text-red-700"
               {...actionButtonProps}
               type="reset"
             >
diff --git a/packages/ui/src/TextareaEditable/TextareaEditable.tsx b/packages/ui/src/TextareaEditable/TextareaEditable.tsx
index 1d3c3d55c..b3e38db79 100644
--- a/packages/ui/src/TextareaEditable/TextareaEditable.tsx
+++ b/packages/ui/src/TextareaEditable/TextareaEditable.tsx
@@ -8,6 +8,7 @@ type TextareaEditableProps = React.HTMLAttributes<HTMLElement> &
      */
     isEditing?: boolean;
     value?: string;
+    innerClassName?: string;
   };
 
 /**
@@ -17,6 +18,7 @@ type TextareaEditableProps = React.HTMLAttributes<HTMLElement> &
 const TextareaEditable: React.FC<TextareaEditableProps> = ({
   isEditing,
   className: inputClasses = "",
+  innerClassName: inputInnerClasses = "",
   field = {},
   ...initialProps
 }) => {
@@ -42,6 +44,7 @@ const TextareaEditable: React.FC<TextareaEditableProps> = ({
     // If there's no value, we might show a placeholder (even outside edit mode)
     // so it should be colored as such
     value ? "text-gray-900" : "text-gray-400",
+    inputInnerClasses,
   ];
 
   return (