maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve design

This commit is contained in:
CarinaWolli 2024-01-12 14:39:54 -05:00
parent f1166aea96
commit 2a917e8330
1 changed files with 71 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
apps/web/pages/settings/my-account/out-of-office/index.tsx
View File

@ -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>
</>
);