format again & some css fixing in order to get the buttons use at lea…

…st 100% of the width (durationpicker)
Vincit · Jun 26, 2024 · 382c099 · 382c099
1 parent fdbb679
commit 382c099
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/frontend/src/components/BookingDrawer/BookingDrawer.tsx b/frontend/src/components/BookingDrawer/BookingDrawer.tsx
@@ -335,13 +335,15 @@ const BookingDrawer = (props: Props) => {
                         </AvailableText>
                     </RowCentered>
                     <Row>
-                        <DurationPicker
-                            duration={duration}
-                            setDuration={setDuration}
-                            onChange={handleDurationChange}
-                            title="duration"
-                        />
+                        <SmallText>quick duration selection</SmallText>
                     </Row>
+
+                    <DurationPicker
+                        duration={duration}
+                        setDuration={setDuration}
+                        onChange={handleDurationChange}
+                        title="quick duration selection"
+                    />
                     <Row>
                         <SmallText>booking (rounded to next 5 min)</SmallText>
                     </Row>

diff --git a/frontend/src/components/BookingDrawer/DurationPicker.tsx b/frontend/src/components/BookingDrawer/DurationPicker.tsx
@@ -7,6 +7,12 @@ const DurationButton = styled(ToggleButton)(() => ({
     padding: '8px 16px'
 }));
 
+const DurationButtonGroup = styled(ToggleButtonGroup)(() => ({
+    minWidth: '100%',
+    padding: '6px 8px',
+    marginBottom: '0px !important'
+}));
+
 type DurationPickerProps = {
     onChange: (duration: number) => void;
     title: string;
@@ -29,15 +35,7 @@ const DurationPicker = (props: DurationPickerProps) => {
 
     return (
         <div>
-            <Typography
-                variant="subtitle1"
-                textAlign="left"
-                marginBottom={'8px'}
-                marginLeft={'24px'}
-            >
-                {title}
-            </Typography>
-            <ToggleButtonGroup
+            <DurationButtonGroup
                 data-testid="DurationPicker"
                 color="primary"
                 value={duration}
@@ -75,7 +73,7 @@ const DurationPicker = (props: DurationPickerProps) => {
                 >
                     2 h
                 </DurationButton>
-            </ToggleButtonGroup>
+            </DurationButtonGroup>
         </div>
     );
 };

diff --git a/frontend/src/components/BookingView/StartingTimePicker.tsx b/frontend/src/components/BookingView/StartingTimePicker.tsx
@@ -59,7 +59,7 @@ const StartingTimePicker = (props: StartingTimePickerProps) => {
     };
 
     const now = DateTime.now();
-    const startingTimeNow = timeFormat(now.hour, now.minute);
+    const startingTimeNow = 'Now'; //timeFormat(now.hour, now.minute);
     const startingTime2 = formatTimeToHalfAndFullHours(now, 0);
     const startingTime3 = formatTimeToHalfAndFullHours(now, 30);
     const startingTime4 = formatTimeToHalfAndFullHours(now, 60);