my-app/src/components/BookingModal.jsx

@@ -4,7 +4,7 @@ import { convertDateObjectToString, getTimeFromIndex } from '../helpers';
 import Dropdown from './Dropdown';
 import { useBookingContext } from '../context/BookingContext';
 import { useSettingsContext } from '../context/SettingsContext';
-import styles from './TimeCard.module.css';
+import styles from './BookingModal.module.css';
 
 export function BookingModal({ 
 	startTimeIndex, 

my-app/src/components/BookingModal.module.css

@@ -0,0 +1,175 @@
+/* TIME CARD */
+
+.startTime {
+    width: fit-content;
+    font-weight: 600;
+    font-size: 1.3rem;
+}
+
+.modalFooter {
+    height: fit-content;
+    width: 100%;
+    color: blue;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+
+/* MODAL */
+
+.cancelButton {
+    flex: 2;
+    background-color: white;
+    height: 4rem;
+    color: #374151;
+    font-weight: 600;
+    border: 2px solid #d1d5db;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.cancelButton:hover {
+    background-color: #f9fafb;
+    border-color: #9ca3af;
+    cursor: pointer;
+}
+
+.saveButton {
+    flex: 3;
+    background-color: #059669;
+    color: white;
+    height: 4rem;
+    font-weight: 600;
+    font-size: 1.1rem;
+    border: 2px solid #047857;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
+}
+
+.saveButton:hover {
+    background-color: #047857;
+    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
+    cursor: pointer;
+}
+
+.saveButton:active {
+    background-color: #065f46;
+    transform: translateY(1px);
+    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
+}
+
+.saveButton[data-focused],
+.cancelButton[data-focused]  {
+  outline: 2px solid #2563EB;
+  outline-offset: -1px;
+}
+
+.cancelButton:active {
+    background-color: #e5e7eb;
+    transform: translateY(1px);
+}
+
+.timeSpan {
+    font-size: 2rem;
+    margin: 0;
+}
+
+.sectionWithTitle {
+    padding-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    width: fit-content
+}
+
+.sectionWithTitle label {
+    font-size: 0.8rem;
+    color: #717171;
+}
+
+.sectionWithTitle p {
+    margin: 0;
+}
+
+.modalContainer {
+    background-color: white;
+    width: 85%;
+    max-width: 400px;
+}
+
+/* New time display styles */
+.timeDisplay {
+    margin: 1rem 0;
+    padding: 1rem;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+    min-width: 196px;
+    width: fit-content;
+}
+
+.timeRange {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.startTime, .endTime {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.startTime label, .endTime label {
+    font-size: 0.75rem;
+    color: #6c757d;
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.timeValue {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #212529;
+}
+
+.timeValue.placeholder {
+    color: #adb5bd;
+    font-style: italic;
+    font-size: 1rem;
+}
+
+.timeSeparator {
+    font-size: 1.5rem;
+    font-weight: 400;
+    color: #6c757d;
+    margin: 0 0.5rem;
+    padding-top: 1.3rem;
+}
+
+/* Disabled button styles */
+.disabledButton {
+    background-color: #f8f9fa !important;
+    color: #adb5bd !important;
+    border: 2px dashed #dee2e6 !important;
+    opacity: 0.6 !important;
+    box-shadow: none;
+}
+
+.disabledButton:hover {
+    background-color: #f8f9fa !important;
+    transform: none !important;
+    box-shadow: none;
+    cursor: default;
+}
+
+.disabledButton:active {
+    background-color: #f8f9fa !important;
+    transform: none !important;
+}
+

my-app/src/components/TimeCard.module.css

@@ -19,6 +19,11 @@
     background-color: #E5E5E5;
 }
 
+.container[data-focused] {
+  outline: 2px solid #2563EB;
+  outline-offset: -1px;
+}
+
 .container p {
     margin: 0;
 }
@@ -67,36 +72,49 @@
 
 .cancelButton {
     flex: 2;
-    background-color: #ECECEC;
+    background-color: white;
     height: 4rem;
-    color: #5c5454;
+    color: #374151;
     font-weight: 600;
-    border: 1px solid #D2D9E0;
+    border: 2px solid #d1d5db;
     border-radius: 0.5rem;
+    transition: all 0.2s ease;
 }
 
-.cancelButton:hover,
-.saveButton:hover {
-    cursor: pointer
+.cancelButton:hover {
+    background-color: #f9fafb;
+    border-color: #9ca3af;
+    cursor: pointer;
 }
 
 .saveButton {
     flex: 3;
-    background-color: #4C952D;
-    color: #f2faef;
+    background-color: #059669;
+    color: white;
     height: 4rem;
     font-weight: 600;
     font-size: 1.1rem;
-    border: 1px solid #3C7624;
+    border: 2px solid #047857;
     border-radius: 0.5rem;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
+}
+
+.saveButton:hover {
+    background-color: #047857;
+    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
+    cursor: pointer;
 }
 
 .saveButton:active {
-    background-color: #3C7624;
+    background-color: #065f46;
+    transform: translateY(1px);
+    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
 }
 
 .cancelButton:active {
-    background-color: #D2D9E0;
+    background-color: #e5e7eb;
+    transform: translateY(1px);
 }
 
 .timeSpan {
@@ -178,17 +196,20 @@
 
 /* Disabled button styles */
 .disabledButton {
-    background-color: #e9ecef !important;
-    color: #6c757d !important;
-    border-color: #dee2e6 !important;
+    background-color: #f8f9fa !important;
+    color: #adb5bd !important;
+    border: 2px dashed #dee2e6 !important;
     cursor: not-allowed !important;
+    opacity: 0.6 !important;
 }
 
 .disabledButton:hover {
-    background-color: #e9ecef !important;
+    background-color: #f8f9fa !important;
     cursor: not-allowed !important;
+    transform: none !important;
 }
 
 .disabledButton:active {
-    background-color: #e9ecef !important;
+    background-color: #f8f9fa !important;
+    transform: none !important;
 }