feature/IO-1113-Online-Dark-Mode - Initial Commit

client/src/components/job-at-change/schedule-event.component.jsx

@@ -36,6 +36,7 @@ import ScheduleEventNote from "./schedule-event.note.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
+
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) => dispatch(setModalContext({ context: context, modal: "schedule" })),
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
@@ -64,7 +65,6 @@ export function ScheduleEventComponent({
   const notification = useNotification();
   const [form] = Form.useForm();
   const [popOverVisible, setPopOverVisible] = useState(false);
-
   const [getJobDetails] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
     variables: { id: event.job?.id },
     onCompleted: (data) => {
@@ -83,7 +83,6 @@ export function ScheduleEventComponent({
         });
       }
     },
-
     fetchPolicy: "network-only"
   });
 
@@ -115,7 +114,6 @@ export function ScheduleEventComponent({
           });
         }}
       />
-
       <Button onClick={() => handleCancel({ id: event.id })} disabled={event.arrived}>
         {t("appointments.actions.unblock")}
       </Button>
@@ -133,7 +131,6 @@ export function ScheduleEventComponent({
         }
       }
     });
-
     if (!res.errors) {
       notification["success"]({
         message: t("jobs.successes.converted")
@@ -180,7 +177,6 @@ export function ScheduleEventComponent({
         <Form.Item name={["scheduled_delivery"]} label={t("jobs.fields.scheduled_delivery")}>
           <FormDateTimePickerComponent disabled={event.ro_number} />
         </Form.Item>
-
         <Space wrap>
           <Button type="primary" onClick={() => form.submit()}>
             {t("general.actions.save")}
@@ -210,7 +206,6 @@ export function ScheduleEventComponent({
           <ScheduleEventColor event={event} />
         </Space>
       )}
-
       {event.job ? (
         <div>
           <DataLabel label={t("jobs.fields.ro_number")}>{(event.job && event.job.ro_number) || ""}</DataLabel>
@@ -371,7 +366,6 @@ export function ScheduleEventComponent({
             </Button>
           </Popover>
         )}
-
         {event.isintake ? (
           <Button
             disabled={event.arrived}
@@ -428,27 +422,30 @@ export function ScheduleEventComponent({
     </div>
   );
 
+  // Adjust event color for dark mode if needed
+  const getEventBackground = () => {
+    const baseColor = event.color && event.color.hex ? event.color.hex : event.color || "var(--event-bg-fallback)";
+    // Optionally adjust color for dark mode (e.g., lighten if too dark)
+    return baseColor;
+  };
+
   const RegularEvent = event.isintake ? (
     <Space
       wrap
       size="small"
       style={{
-        backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
+        backgroundColor: getEventBackground()
       }}
     >
       {event.note && <AlertFilled className="production-alert" />}
       <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
-
       <OwnerNameDisplay ownerObject={event.job} />
-
       {`${(event.job && event.job.v_model_yr) || ""} ${
         (event.job && event.job.v_make_desc) || ""
       } ${(event.job && event.job.v_model_desc) || ""}`}
-
       {`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
         (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
       })`}
-
       {event.job && event.job.alt_transport && <div style={{ margin: ".1rem" }}>{event.job.alt_transport}</div>}
       {event?.job?.comment && `C: ${event.job.comment}`}
     </Space>
@@ -457,7 +454,7 @@ export function ScheduleEventComponent({
       style={{
         height: "100%",
         width: "100%",
-        backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
+        backgroundColor: getEventBackground()
       }}
     >
       <strong>{`${event.title || ""}`}</strong>
@@ -473,8 +470,7 @@ export function ScheduleEventComponent({
       style={{
         height: "100%",
         width: "100%",
-
-        backgroundColor: event.color && event.color.hex ? event.color.hex : event.color
+        backgroundColor: getEventBackground()
       }}
     >
       {RegularEvent}