diff --git a/frontend/src/components/common/form/ControlledDatePicker.tsx b/frontend/src/components/common/form/ControlledDateTimePicker.tsx similarity index 87% rename from frontend/src/components/common/form/ControlledDatePicker.tsx rename to frontend/src/components/common/form/ControlledDateTimePicker.tsx index 3bd1480d9..4b805d429 100644 --- a/frontend/src/components/common/form/ControlledDatePicker.tsx +++ b/frontend/src/components/common/form/ControlledDateTimePicker.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from "react"; import React from "react"; import { Controller } from "react-hook-form"; -import DatePicker from "./DatePicker"; +import DateTimePicker from "./DateTimePicker"; type ControlledDatePickerProps = { name?: string; @@ -11,7 +11,7 @@ type ControlledDatePickerProps = { additionalRules?: Record; }; -const ControlledDatePicker = ({ +const ControlledDateTimePicker = ({ name: fieldName, isDisabled, isRequired, @@ -21,7 +21,7 @@ const ControlledDatePicker = ({ ( - { @@ -45,4 +45,4 @@ const ControlledDatePicker = ({ ); }; -export default ControlledDatePicker; +export default ControlledDateTimePicker; diff --git a/frontend/src/components/common/form/DatePicker.tsx b/frontend/src/components/common/form/DatePicker.tsx index 99648f92a..8f57d2e24 100644 --- a/frontend/src/components/common/form/DatePicker.tsx +++ b/frontend/src/components/common/form/DatePicker.tsx @@ -69,7 +69,7 @@ const getDatePickerStyles = ( cursor: "pointer", "aria-label": "This is a date input, activate to open date picker", textAlign: "left", - value: value ? format(value, "yyyy-MM-dd") : "Please choose a date", + value: value ? format(value, "yyyy-MM-dd") : "Choose a date", color: value ? "grey.300" : "placeholder.300", transition: "color 0s", }, diff --git a/frontend/src/components/common/form/TimePicker.tsx b/frontend/src/components/common/form/TimePicker.tsx index a475dc1b1..a4920ebe5 100644 --- a/frontend/src/components/common/form/TimePicker.tsx +++ b/frontend/src/components/common/form/TimePicker.tsx @@ -34,6 +34,9 @@ const chakraStyles = ( outline: "none", }, border: "none", + _disabled: { + opacity: 1, + }, }), valueContainer: (provided) => ({ ...provided, diff --git a/frontend/src/components/teacher/session-creation/steps/AddInformation.tsx b/frontend/src/components/teacher/session-creation/steps/AddInformation.tsx index 233109b6d..7b999efc8 100644 --- a/frontend/src/components/teacher/session-creation/steps/AddInformation.tsx +++ b/frontend/src/components/teacher/session-creation/steps/AddInformation.tsx @@ -75,7 +75,7 @@ const AddInformation = ({ > - Start date + Start Date - End date + End Date { diff --git a/frontend/src/components/teacher/student-management/classroom-summary/AddOrEditClassroomModal.tsx b/frontend/src/components/teacher/student-management/classroom-summary/AddOrEditClassroomModal.tsx index 47ae12286..5cf89e724 100644 --- a/frontend/src/components/teacher/student-management/classroom-summary/AddOrEditClassroomModal.tsx +++ b/frontend/src/components/teacher/student-management/classroom-summary/AddOrEditClassroomModal.tsx @@ -26,7 +26,7 @@ import { FormValidationError, getQueryName, } from "../../../../utils/GeneralUtils"; -import ControlledDatePicker from "../../../common/form/ControlledDatePicker"; +import ControlledDateTimePicker from "../../../common/form/ControlledDateTimePicker"; import ControlledSelect from "../../../common/form/ControlledSelect"; import InlineFormError from "../../../common/form/InlineFormError"; import Modal from "../../../common/modal/Modal"; @@ -107,12 +107,12 @@ const AddOrEditClassroomModal = ({ submitButtonText="Save" variant="large" > - + Class Name Start Date -