From 2a917e8330fa7b82534c5db8672dbec5747ad041 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Fri, 12 Jan 2024 14:39:54 -0500
Subject: [PATCH] improve design

---
 .../my-account/out-of-office/index.tsx        | 145 +++++++++---------
 1 file changed, 71 insertions(+), 74 deletions(-)

diff --git a/apps/web/pages/settings/my-account/out-of-office/index.tsx b/apps/web/pages/settings/my-account/out-of-office/index.tsx
index 5819b06d99..7a7eed2360 100644
--- a/apps/web/pages/settings/my-account/out-of-office/index.tsx
+++ b/apps/web/pages/settings/my-account/out-of-office/index.tsx
@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import { Controller, useForm, useFormState } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
+import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { ShellMain } from "@calcom/features/shell/Shell";
 import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan";
@@ -83,86 +84,81 @@ const OutOfOfficeSection = () => {
           setValue("toTeamUserId", null);
           setSelectedMember(null);
         })}>
-        <div className="border-subtle flex flex-col rounded-b-lg border border-t-0 p-6 px-6 py-8 text-sm">
+        <div className="border-subtle flex flex-col border border-b-0 border-t-0 p-6 px-6 py-8 text-sm">
           {/* Add startDate and end date inputs */}
-          <div className="border-subtle mt-2 rounded-lg border bg-gray-50 p-6 dark:bg-transparent">
-            {/* Add toggle to enable/disable redirect */}
-            <div className="flex flex-row">
-              <Switch
-                disabled={!hasTeamPlan}
-                data-testid="profile-redirect-switch"
-                checked={profileRedirect}
-                id="profile-redirect-switch"
-                onCheckedChange={(state) => {
-                  setProfileRedirect(state);
-                }}
-                label={hasTeamPlan ? t("redirect_team_enabled") : t("redirect_team_disabled")}
-              />
-              {!hasTeamPlan && (
-                <div className="mx-2" data-testid="upgrade-team-badge">
-                  <UpgradeTeamsBadge />
-                </div>
-              )}
-            </div>
-            <div className="mt-4 flex flex-row">
-              {profileRedirect && (
-                <div className="mr-2 w-1/2 lg:w-1/3">
-                  <p className="text-emphasis block text-sm font-medium">{t("team_member")}</p>
-                  <Select
-                    className="mt-1 h-4 max-w-[350px] text-white"
-                    name="toTeamUsername"
-                    data-testid="team_username_select"
-                    value={selectedMember}
-                    placeholder={t("select_team_member")}
-                    isSearchable
-                    innerClassNames={{
-                      control: "h-[38px]",
-                    }}
-                    options={memberListOptions}
-                    onChange={(selectedOption) => {
-                      if (selectedOption?.value) {
-                        setSelectedMember(selectedOption);
-                        setValue("toTeamUserId", selectedOption?.value);
-                      }
-                    }}
-                  />
-                </div>
-              )}
-              <div className="w-1/2 lg:w-1/3">
-                <p className="text-emphasis mb-1 block text-sm font-medium">{t("time_range")}</p>
-                <Controller
-                  name="dateRange"
-                  control={control}
-                  defaultValue={dateRange}
-                  render={() => (
-                    <DateRangePicker
-                      startDate={getValues("dateRange").startDate}
-                      endDate={getValues("dateRange").endDate}
-                      onDatesChange={({ startDate, endDate }) => {
-                        setValue("dateRange", {
-                          startDate,
-                          endDate,
-                        });
-                      }}
-                    />
-                  )}
+          {/* Add toggle to enable/disable redirect */}
+          <div className="flex flex-row">
+            <Switch
+              disabled={!hasTeamPlan}
+              data-testid="profile-redirect-switch"
+              checked={profileRedirect}
+              id="profile-redirect-switch"
+              onCheckedChange={(state) => {
+                setProfileRedirect(state);
+              }}
+              label={hasTeamPlan ? t("redirect_team_enabled") : t("redirect_team_disabled")}
+            />
+            {!hasTeamPlan && (
+              <div className="mx-2" data-testid="upgrade-team-badge">
+                <UpgradeTeamsBadge />
+              </div>
+            )}
+          </div>
+          <div className="mt-4 flex flex-row">
+            {profileRedirect && (
+              <div className="mr-2 w-1/2 lg:w-1/3">
+                <p className="text-emphasis block text-sm font-medium">{t("team_member")}</p>
+                <Select
+                  className="mt-1 h-4 max-w-[350px] text-white"
+                  name="toTeamUsername"
+                  data-testid="team_username_select"
+                  value={selectedMember}
+                  placeholder={t("select_team_member")}
+                  isSearchable
+                  innerClassNames={{
+                    control: "h-[38px]",
+                  }}
+                  options={memberListOptions}
+                  onChange={(selectedOption) => {
+                    if (selectedOption?.value) {
+                      setSelectedMember(selectedOption);
+                      setValue("toTeamUserId", selectedOption?.value);
+                    }
+                  }}
                 />
               </div>
-            </div>
-
-            <div className="mt-7">
-              <Button
-                color="primary"
-                type="submit"
-                disabled={createOutOfOfficeEntry.isLoading}
-                data-testid="create-entry-ooo-redirect">
-                {t("create_entry")}
-              </Button>
+            )}
+            <div className="w-1/2 lg:w-1/3">
+              <p className="text-emphasis mb-1 block text-sm font-medium">{t("time_range")}</p>
+              <Controller
+                name="dateRange"
+                control={control}
+                defaultValue={dateRange}
+                render={() => (
+                  <DateRangePicker
+                    startDate={getValues("dateRange").startDate}
+                    endDate={getValues("dateRange").endDate}
+                    onDatesChange={({ startDate, endDate }) => {
+                      setValue("dateRange", {
+                        startDate,
+                        endDate,
+                      });
+                    }}
+                  />
+                )}
+              />
             </div>
           </div>
-
-          <OutOfOfficeEntriesList />
         </div>
+        <SectionBottomActions className="mb-6" align="end">
+          <Button
+            color="primary"
+            type="submit"
+            disabled={createOutOfOfficeEntry.isLoading}
+            data-testid="create-entry-ooo-redirect">
+            {t("create_entry")}
+          </Button>
+        </SectionBottomActions>
       </form>
     </>
   );
@@ -250,6 +246,7 @@ const OutOfOfficePage = () => {
       <Meta title={t("out_of_office")} description={t("out_of_office_description")} borderInShellHeader />
       <ShellMain>
         <OutOfOfficeSection />
+        <OutOfOfficeEntriesList />
       </ShellMain>
     </>
   );