From 382c0993d125b5d9f99af9a894e148e73fbb0b82 Mon Sep 17 00:00:00 2001
From: Ilkka Korhonen <Ilkka.Korhonen@vincit.fi>
Date: Wed, 26 Jun 2024 17:54:52 +0300
Subject: [PATCH] format again & some css fixing in order to get the buttons
 use at least 100% of the width (durationpicker)

---
 .../components/BookingDrawer/BookingDrawer.tsx | 14 ++++++++------
 .../BookingDrawer/DurationPicker.tsx           | 18 ++++++++----------
 .../BookingView/StartingTimePicker.tsx         |  2 +-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/BookingDrawer/BookingDrawer.tsx b/frontend/src/components/BookingDrawer/BookingDrawer.tsx
index 4d2b5999..a4033589 100644
--- 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
index 52052b40..25d79db3 100644
--- 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
index 42cda236..eb02a532 100644
--- 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);