Merge branch 'release/summer-2024' into fix/fix-duplicate-booking-dur…

…ation-display # Conflicts: # frontend/src/components/RoomCard/RoomCard.tsx
Vincit · Jul 24, 2024 · baf12c7 · baf12c7
2 parents f123635 + 19c1330
commit baf12c7
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 48 deletions.
diff --git a/frontend/src/components/RoomCard/RoomCard.tsx b/frontend/src/components/RoomCard/RoomCard.tsx
@@ -245,45 +245,59 @@ class RoomCardCapacityBox extends React.Component<{
     }
 }
 
+const BusyRoomStatusContent = styled('div')(({ theme }) => ({
+    alignSelf: 'stretch',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    gap: 5,
+    display: 'inline-flex'
+}));
+
+const BusyRoomStatusIcon = styled('div')(({ theme }) => ({
+    textAlign: 'center',
+    color: '#E83520',
+    fontSize: 16,
+    fontFamily: 'Material Icons',
+    fontWeight: '400',
+    wordWrap: 'break-word'
+}));
+
+type BusyRoomStatusTextContentProps = {
+    props?: {
+        flex?: string;
+        width?: number;
+        fontSize?: number;
+        fontWeight?: string | number;
+    };
+};
+const BusyRoomStatusTextContent = styled('div')<BusyRoomStatusTextContentProps>(
+    ({ theme, props }) => ({
+        color: '#1D1D1D',
+        fontSize: 12,
+        fontFamily: 'Studio Feixen Sans',
+        fontWeight: '4',
+        textTransform: 'uppercase',
+        wordWrap: 'break-word',
+        ...props
+    })
+);
 export const BusyRoomCardReservationStatusIndicator = (props: {
     room: Room;
 }) => {
     return (
-        <div
-            style={{
-                alignSelf: 'stretch',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                gap: 5,
-                display: 'inline-flex'
-            }}
-        >
-            <div
-                style={{
-                    textAlign: 'center',
-                    color: '#E83520',
-                    fontSize: 16,
-                    fontFamily: 'Material Icons',
-                    fontWeight: '400',
-                    wordWrap: 'break-word'
-                }}
-            >
+        <BusyRoomStatusContent>
+            <BusyRoomStatusIcon>
                 <DoNotDisturb />
-            </div>
-            <div
-                style={{
+            </BusyRoomStatusIcon>
+            <BusyRoomStatusTextContent
+                props={{
                     flex: '1 1 0',
-                    color: '#1D1D1D',
-                    fontSize: 12,
-                    fontFamily: 'Studio Feixen Sans',
-                    fontWeight: '4',
-                    textTransform: 'uppercase',
-                    wordWrap: 'break-word'
+                    fontSize: 12
                 }}
             >
                 Occupied for {roomFreeIn(props.room)} minutes
-            </div>
-        </div>
+            </BusyRoomStatusTextContent>
+        </BusyRoomStatusContent>
     );
 };
 
@@ -351,28 +365,18 @@ const ReservationStatusText = (props: {
                 <>
                     <BusyRoomCardReservationStatusIndicator room={props.room} />
 
-                    <div
-                        style={{
-                            alignSelf: 'stretch',
-                            justifyContent: 'space-between',
-                            alignItems: 'flex-start',
-                            display: 'inline-flex'
-                        }}
-                    >
-                        <div
-                            style={{
+                    <BusyRoomStatusTextContent>
+                        <BusyRoomStatusTextContent
+                            props={{
                                 width: 283,
-                                color: '#1D1D1D',
                                 fontSize: 16,
-                                fontFamily: 'Studio Feixen Sans',
-                                fontWeight: '2',
-                                wordWrap: 'break-word'
+                                fontWeight: '2'
                             }}
                         >
                             Next available slot:{' '}
                             {getNextCalendarEventTimeString(props.room)}
-                        </div>
-                    </div>
+                        </BusyRoomStatusTextContent>
+                    </BusyRoomStatusTextContent>
                 </>
             ) : (
                 <>

diff --git a/frontend/src/components/util/TimeLeft.tsx b/frontend/src/components/util/TimeLeft.tsx
@@ -86,7 +86,11 @@ const TimeLeft = (props: TimeLeftProps) => {
 
     return (
         <Box>
-            <TimeLeftTypography variant={'h3'} data-testid="TimeLeftTest">
+            <TimeLeftTypography
+                variant={'h3'}
+                data-testid="TimeLeftTest"
+                aria-label={'Time left text'}
+            >
                 {timeLeftText} {getTimeLeft(endTime)}
             </TimeLeftTypography>
         </Box>

diff --git a/frontend/src/theme_2024.ts b/frontend/src/theme_2024.ts
@@ -57,7 +57,8 @@ export const DoNotDisturb = styled(DoNotDisturbOn)(({ theme }) => ({
     fontSize: 16
 }));
 export const CheckCircle = styled(CheckCircleIcon)(({ theme }) => ({
-    color: COLORS.ACCENT_GREEN
+    color: COLORS.ACCENT_GREEN,
+    ariaLabel: 'Check circle'
 }));
 
 export const CenterAlignedStack = styled(Stack)(({ theme }) => ({