-
-
-
+
Delete
@@ -592,13 +722,13 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
{selectedEvents.length === 1 && (
-
+
Edit
)}
-
+
Delete
@@ -614,13 +744,10 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
@@ -639,12 +766,32 @@ export function CreateStage({ profile, initialSlots, nextStage }: CreateStagePro
- {edited && You have unsaved changes!}
+ {edited && curCreatedTimes.length === 0 && (
+ setShowConfirmModal(true)}>
+ Submit
+
+ )}
-
- Continue
-
+ {edited || curCreatedTimes.length > 0 ? (
+
+
+ Continue
+
+ }
+ >
+ You have unsaved changes!
+
+
+ ) : (
+
+ Continue
+
+ )}
+ {showConfirmModal && slotConfirmModal}
);
}
diff --git a/csm_web/frontend/src/components/enrollment_automation/coordinator/EditStage.tsx b/csm_web/frontend/src/components/enrollment_automation/coordinator/EditStage.tsx
index 4c019604..f8af7196 100644
--- a/csm_web/frontend/src/components/enrollment_automation/coordinator/EditStage.tsx
+++ b/csm_web/frontend/src/components/enrollment_automation/coordinator/EditStage.tsx
@@ -498,7 +498,7 @@ export const EditStage = ({
handleSearchChange(e.target.value)} />
- setDistModalOpen(true)}>
+ setDistModalOpen(true)}>
View Distribution
@@ -546,7 +546,7 @@ export const EditStage = ({
- prevStage()}>
+ prevStage()}>
Back
@@ -568,10 +568,10 @@ export const EditStage = ({
)}
- saveAssignment()}>
+ saveAssignment()}>
Save
- setCreateConfirmModalOpen(true)}>
+ setCreateConfirmModalOpen(true)}>
Create
@@ -766,7 +766,7 @@ const EditTableRow = ({
{editingTimes ? (
- setShowAddMentorsModal(true)}>
+ setShowAddMentorsModal(true)}>
Add Mentors
@@ -456,12 +487,12 @@ function MentorList({
{mentorList.every(mentor => !hasPreferences(mentor)) && (
-
+
Back
)}
{removedMentorList.length > 0 && (
-
+
Update
)}
@@ -469,16 +500,17 @@ function MentorList({
{formStatusIcon}
{formIsOpen ? (
-
+
Close Form
) : (
-
+ setShowConfirmModal(true)}>
Open Form
)}
+ {showConfirmModal && confirmOpenFormModal}
);
}
diff --git a/csm_web/frontend/src/css/base/form.scss b/csm_web/frontend/src/css/base/form.scss
index 6df2bd23..9bb70ac2 100644
--- a/csm_web/frontend/src/css/base/form.scss
+++ b/csm_web/frontend/src/css/base/form.scss
@@ -44,6 +44,15 @@
padding: 6px 8px;
}
+// light version
+.light {
+ &.form-input,
+ &.form-date,
+ &.form-select {
+ background-color: white;
+ }
+}
+
/// Select element
.form-select {
diff --git a/csm_web/frontend/src/css/enrollment_matcher.scss b/csm_web/frontend/src/css/enrollment_matcher.scss
index cc13e336..af65624c 100644
--- a/csm_web/frontend/src/css/enrollment_matcher.scss
+++ b/csm_web/frontend/src/css/enrollment_matcher.scss
@@ -142,6 +142,7 @@
.matcher-sidebar-left-bottom {
display: flex;
flex-direction: column;
+ gap: 3px;
align-items: center;
padding: 15px;
}
@@ -178,12 +179,6 @@
font-size: 0.9rem;
}
-.matcher-input {
- width: 40px;
- margin-left: 5px;
- outline: none;
-}
-
/* Modal */
.matcher-calendar-modal {
@@ -205,76 +200,46 @@
font-weight: bold;
}
-/* Table */
-
-.matcher-table-sort-group {
- display: flex;
- flex-direction: row;
- gap: 3px;
- cursor: pointer;
- user-select: none;
-}
-
-.matcher-table-sort-icon {
- width: 1em;
- margin-top: 2px;
+.matcher-confirm-modal-header {
+ text-align: center;
}
-/* Buttons */
-
-.matcher-submit-btn {
- padding: 8px 15px !important;
- color: white;
- user-select: none;
- background-color: $csm-green;
- border: none;
- border-radius: 10px;
+.matcher-confirm-modal-list {
+ column-count: 2;
}
-.matcher-submit-btn:hover {
- background-color: $csm-green-darkened;
+.matcher-confirm-modal-empty-list-text {
+ margin-left: 1em;
}
-.matcher-submit-btn:disabled {
- cursor: not-allowed;
- background-color: $csm-neutral;
+.matcher-confirm-modal-list-item {
+ margin-right: 16px;
+ margin-bottom: 5px;
+ list-style-position: outside;
}
-.matcher-secondary-btn {
- padding: 8px 15px !important;
- color: white;
- user-select: none;
- background-color: $csm-neutral;
- border: none;
- border-radius: 10px;
-}
+.matcher-confirm-modal-buttons {
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ justify-content: center;
-.matcher-secondary-btn:hover {
- background-color: $csm-neutral-darkened;
+ margin-top: 16px;
}
-.matcher-secondary-btn:disabled {
- cursor: not-allowed;
- background-color: $csm-neutral;
-}
+/* Table */
-.matcher-danger-btn {
- padding: 8px 15px !important;
- color: white;
+.matcher-table-sort-group {
+ display: flex;
+ flex-direction: row;
+ gap: 3px;
+ cursor: pointer;
user-select: none;
- background-color: $csm-danger;
- border: none;
- border-radius: 10px;
}
-.matcher-danger-btn:hover {
- background-color: $csm-danger-darkened;
-}
-
-.matcher-toggle-btn {
- font-size: 0.9rem;
- text-align: center;
- cursor: pointer;
+.matcher-table-sort-icon {
+ width: 1em;
+ margin-top: 2px;
}
/* Mentor Preferences */
@@ -360,6 +325,10 @@
}
.matcher-created-time {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
padding: 5px 0;
}
@@ -371,6 +340,11 @@
margin-right: 5px;
}
+.matcher-created-time-day-input {
+ width: fit-content;
+ padding-right: 25px;
+}
+
.matcher-sidebar-header {
padding-bottom: 15px;
font-weight: bold;
@@ -387,17 +361,6 @@
color: $csm-danger-darkened;
}
-.matcher-select-day-input {
- height: 1.5rem;
- outline: none;
-}
-
-.matcher-select-time-input {
- margin-right: 5px;
- margin-left: 5px;
- outline: none;
-}
-
.matcher-tiling-subheader {
/* font-style: italic; */
font-weight: 600;
@@ -420,15 +383,26 @@
padding: 5px 0;
}
+.matcher-tiling-range-input-container {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+ margin-top: 4px;
+}
+
+.matcher-tiling-length-input-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-top: 4px;
+}
+
.matcher-tiling-length-input {
width: 75px;
margin-right: 5px;
}
-.matcher-tiling-toggle {
- margin-bottom: 3px;
-}
-
.matcher-tooltip-container {
position: relative;
}
@@ -640,6 +614,14 @@
font-weight: normal;
}
+.matcher-pref-input-label {
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ align-items: center;
+ margin-top: 8px;
+}
+
/* ConfigureStage.tsx */
.matcher-mentor-min-max {
@@ -674,7 +656,6 @@
.matcher-configure-input {
width: 80%;
- font-family: inherit;
}
.matcher-configure-sidebar-buttons {
@@ -823,18 +804,13 @@
}
.matcher-assignment-section-times-input {
- width: 100%;
- height: 1.5rem;
- font-family: inherit;
- font-size: 0.95rem;
- background-color: transparent;
- border: 2px solid $csm-neutral;
- border-radius: 3px;
- outline: none;
+ width: initial;
+ max-width: initial;
}
.matcher-assignment-section-times-input:focus {
border-color: #888;
+ outline-color: #888;
}
.matcher-assignment-section-times-option {
@@ -860,11 +836,7 @@
.matcher-assignment-section-capacity-input,
.matcher-assignment-section-description-input {
- width: calc(100% - 10px);
- font-family: inherit;
- font-size: 0.95rem;
- border: 2px solid $csm-neutral;
- border-radius: 3px;
+ width: calc(100% - 20px);
}
.matcher-assignment-section-capacity-input:focus,