my-app/src/components/booking/BookingModal.jsx

@@ -101,7 +101,6 @@ export function BookingModal({
 								<label>Starttid</label>
 								<div className={styles.startTimeValue}>{getTimeFromIndex(startTimeIndex)}</div>
 							</div>
-							<div className={styles.timeSeparator}>–</div>
 							<div className={styles.endTimeSection}>
 								<label>Sluttid</label>
 								<Dropdown

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

@@ -139,45 +139,37 @@
 /* New time display styles */
 .timeDisplay {
     margin: 1rem 0;
-    padding: 1rem;
-    background-color: var(--modal-display-bg);
-    border-radius: 8px;
-    border: 1px solid var(--modal-display-border);
     min-width: 196px;
     width: fit-content;
 }
 
 .timeRange {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: 1rem;
 }
 
 .startTimeSection {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    width: fit-content;
 }
 
 .endTimeSection {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    flex: 1;
+    width: fit-content;
 }
 
 .startTimeSection label, .endTimeSection label {
-    font-size: 0.75rem;
-    color: var(--text-secondary);
-    font-weight: 500;
-    margin-bottom: 0.5rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+    font-size: 0.8rem;
+    color: var(--text-tertiary);
 }
 
 .startTimeValue {
-    font-size: 2.5rem;
-    font-weight: 600;
+    margin: 0;
+    font-size: 1.8rem;
+    font-weight: 400;
     color: var(--text-primary);
 }
 
@@ -191,38 +183,14 @@
 
 .endTimeDropdown {
     max-width: none;
-    min-width: 140px;
-}
-
-.endTimeDropdown .dropdownWrapper {
-    background: var(--bg-primary);
-    border: 2px solid var(--border-light);
-    border-radius: 12px;
-    transition: all var(--transition-medium);
-}
-
-.endTimeDropdown .dropdownWrapper:hover {
-    border-color: var(--color-primary);
-    background: var(--bg-secondary);
-}
-
-.endTimeDropdown .dropdownWrapper:focus-within {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 2px var(--color-primary-light);
+    min-width: fit-content;
 }
 
 .endTimeDropdown .select {
-    background: transparent;
-    border: none;
-    border-radius: 12px;
-    padding: 0.75rem 2.5rem 0.75rem 1rem;
-    font-size: 2.5rem;
-    font-weight: 600;
-    text-align: center;
-    min-width: 140px;
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
+    font-size: 1rem;
+    font-weight: 400;
+    text-align: left;
+    padding: 0.5rem 2.5rem 0.5rem 1rem;
 }
 
 .endTimeDropdown .select:focus {