V2/settings shell (#3987)

* Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Troubleshoot container + Active on count * Improve mobile * NITS * Fix padding on input * Fix icons * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * Create my account folder * Add profile section * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * WIP * Fix scheduling type and remove multi select label * Fix overflow on teams url * Finish profile fields * Show toast on success * General tab WIP * Even Type move order handles * Add switching of destination calendar * List calendar and delete * Render empty screenwhen no calendars * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * added SidebarCard for promo to v2 and storybook (#3906) Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Tooltip Provider - Wrapper due to dep upgrade * public event type list darkmode * V2 Color changes to public booking * Remove unused component * Fix typecheck * Transfer to SSR * Appearance screen made * V2 image uploader * WIP appearance page * Remove unnecessary data from viewer.me * Add profile translations * Add translations to general page * Add calendar switch * Add calendar switch * Add translations to appearance page * Clean up conferencing page * Clean up appearance page * Draft shell on md screen * fixed slots availability by fixing buffertime (#3756) Co-authored-by: Peer Richelsen <peeroke@gmail.com> * Hidding import features from other services (#3970) * Update PULL_REQUEST_TEMPLATE.md * Fixes CLS when loading Avatars (#3973) * Fixes CLS when loading Avatars * Update packages/ui/v2/core/Avatar.tsx Co-authored-by: Leo Giovanetti <hello@leog.me> Co-authored-by: Leo Giovanetti <hello@leog.me> * New Crowdin translations by Github Action (#3954) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * Adding continue button to connectCalendar on getting-started view (#3971) * Adding continue button to connectCalendar view getting-started * Fixing extra space Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Leo Giovanetti <hello@leog.me> * 2.0 Settings / My Account {View} (#3874) * Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Troubleshoot container + Active on count * Improve mobile * NITS * Fix padding on input * Fix icons * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * Create my account folder * Add profile section * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * WIP * Fix scheduling type and remove multi select label * Fix overflow on teams url * Finish profile fields * Show toast on success * General tab WIP * Even Type move order handles * Add switching of destination calendar * List calendar and delete * Render empty screenwhen no calendars * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * added SidebarCard for promo to v2 and storybook (#3906) Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Tooltip Provider - Wrapper due to dep upgrade * public event type list darkmode * V2 Color changes to public booking * Remove unused component * Fix typecheck * Transfer to SSR * Appearance screen made * V2 image uploader * WIP appearance page * Remove unnecessary data from viewer.me * Add profile translations * Add translations to general page * Add calendar switch * Add calendar switch * Add translations to appearance page * Clean up conferencing page * Settings sidebar fixes * Updates middleware * Update SettingsLayout.tsx * Settings layout improvements * Type fix Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * AppStore CLI: Making video app creation a breeze with major cleanup of locations code throughout (#3825) * Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Add Embed ModalBox for routing forms * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Add duplicate form support * Fix duplication logic * Change to feathericons everywhere and other fixes * Dont allow routes for fallback route * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Fix all TS issues * Fix tests * Troubleshoot container + Active on count * Support routing using query params * Improve mobile * NITS * Fix padding on input * Support multiselect in router endpoint * Fix the issue where app goes in embed mode after viewing embed once * Fix icons * Add router url tests * Add Responses download and form toggling tests * Add required validation test * Change Icons everywhere * App typeform app * Improvements in cli * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Add typeform how-to-use page * Add typeform how-to-use page and screenshots * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Fix TS error * Add missing image * Update CliApp.tsx * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * Major locations cleanup, 10s of bug fixes and app-store improvements * Fix missing pieces * More fixes * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * more fixes * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * Fix scheduling type and remove multi select label * Fix overflow on teams url * Revert console * Revert api * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * Fix TS errors * Add missing import * Fix CLI * Add a default placeholder * Remove hardcoded daily:integrations * Fix message for payment page * Revert api and console to main * Update README * Fix TS errors * Fix Lint warnings * Fix Tests * Fix conflict issues * Fix conflict issues Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> * Button to test a workflow action (#3873) * add Test action button + UI improvements * add test action functionality * add confirmation dialog before sending SMS * code clean up * show error message if test action fails * disable test action button in edit mode * fixes SMS testing * use updated values * fix wrongly updated data in useEffect * fix typo * code clean up * fix UI issue in mobile view * small design fix Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Improve CLI App Help Text (#3982) * Adds deprecation notice to QueryCell (#3977) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * added campfire.to app (#3984) * fixed file size campfire (#3985) * added campfire.to app * fixed file size * Draft shell on md screen * Draft small settings bar * Add padding to dropdown menu * WIP * Create mobile settings nav * Fix conferencing render * Only display mobile settings nav * Clean up my account section * Clean up * Remove old draft shell * Remove old draft shell * Implement changes from #3817 * Revise sidebar * WIP * Side navigation drawer * Fix type error * Fix lint problem * Get rid of main top padding on main shell * Fix e2e test * Fix type error * Remove unused imports * Add back button function * Update SettingsSidebarContainer.tsx Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: Kszemi <mkrzemien11@gmail.com> Co-authored-by: Leo Giovanetti <hello@leog.me> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com>
calcom · Sep 6, 2022 · 3a35eb4 · 3a35eb4
1 parent 62ab305
commit 3a35eb4
Show file tree

Hide file tree

Showing 14 changed files with 381 additions and 228 deletions.
diff --git a/apps/web/components/v2/settings/DisableTwoFactorModal.tsx b/apps/web/components/v2/settings/DisableTwoFactorModal.tsx
@@ -1,10 +1,14 @@
-import { SyntheticEvent, useState } from "react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 
+import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/v2/core/Button";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import { Form, Label } from "@calcom/ui/v2/core/form/fields";
+import { PasswordField } from "@calcom/ui/v2/core/form/fields";
 
-import { ErrorCode } from "@lib/auth";
+import TwoFactor from "@components/auth/TwoFactor";
 
 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 
@@ -18,28 +22,32 @@ interface DisableTwoFactorAuthModalProps {
  onDisable: () => void;
 }
 
+interface DisableTwoFactorValues {
+ totpCode: string;
+ password: string;
+}
+
 const DisableTwoFactorAuthModal = ({
  onDisable,
  onCancel,
  open,
  onOpenChange,
 }: DisableTwoFactorAuthModalProps) => {
- const [password, setPassword] = useState("");
  const [isDisabling, setIsDisabling] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const { t } = useLocale();
 
- async function handleDisable(e: SyntheticEvent) {
- e.preventDefault();
+ const form = useForm<DisableTwoFactorValues>();
 
+ async function handleDisable({ totpCode, password }: DisableTwoFactorValues) {
  if (isDisabling) {
  return;
  }
  setIsDisabling(true);
  setErrorMessage(null);
 
  try {
- const response = await TwoFactorAuthAPI.disable(password);
+ const response = await TwoFactorAuthAPI.disable(password, totpCode);
  if (response.status === 200) {
  onDisable();
  return;
@@ -48,6 +56,12 @@ const DisableTwoFactorAuthModal = ({
  const body = await response.json();
  if (body.error === ErrorCode.IncorrectPassword) {
  setErrorMessage(t("incorrect_password"));
+ }
+ if (body.error === ErrorCode.SecondFactorRequired) {
+ setErrorMessage(t("2fa_required"));
+ }
+ if (body.error === ErrorCode.IncorrectTwoFactorCode) {
+ setErrorMessage(t("incorrect_2fa"));
  } else {
  setErrorMessage(t("something_went_wrong"));
  }
@@ -66,39 +80,31 @@ const DisableTwoFactorAuthModal = ({
  description={t("disable_2fa_recommendation")}
  type="creation"
  useOwnActionButtons>
- <form onSubmit={handleDisable}>
+ <Form form={form} handleSubmit={handleDisable}>
  <div className="mb-4">
- <label htmlFor="password" className="mt-4 block text-sm font-medium text-gray-700">
- {t("password")}
- </label>
- <div className="mt-1">
- <input
- type="password"
- name="password"
- id="password"
- required
- value={password}
- onInput={(e) => setPassword(e.currentTarget.value)}
- className="block w-full rounded-sm border-gray-300 text-sm"
- />
- </div>
+ <PasswordField
+ labelProps={{
+ className: "block text-sm font-medium text-gray-700",
+ }}
+ {...form.register("password")}
+ className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+ />
+ <Label className="mt-4"> {t("2fa_code")}</Label>
+
+ <TwoFactor center={false} />
 
  {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
  </div>
- </form>
-
- <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
- <Button
- type="submit"
- className="ltr:ml-2 rtl:mr-2"
- onClick={handleDisable}
- disabled={password.length === 0 || isDisabling}>
- {t("disable")}
- </Button>
- <Button color="secondary" onClick={onCancel}>
- {t("cancel")}
- </Button>
- </div>
+
+ <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+ <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isDisabling}>
+ {t("disable")}
+ </Button>
+ <Button color="secondary" onClick={onCancel}>
+ {t("cancel")}
+ </Button>
+ </div>
+ </Form>
  </DialogContent>
  </Dialog>
  );

diff --git a/apps/web/components/v2/settings/EnableTwoFactorModal.tsx b/apps/web/components/v2/settings/EnableTwoFactorModal.tsx
@@ -1,10 +1,13 @@
-import React, { SyntheticEvent, useState } from "react";
+import React, { BaseSyntheticEvent, useState } from "react";
+import { useForm } from "react-hook-form";
 
+import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/v2/core/Button";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
+import { Form } from "@calcom/ui/v2/core/form/fields";
 
-import { ErrorCode } from "@lib/auth";
+import TwoFactor from "@components/auth/TwoFactor";
 
 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 
@@ -41,22 +44,27 @@ const WithStep = ({
  return step === current ? children : null;
 };
 
+interface EnableTwoFactorValues {
+ totpCode: string;
+}
+
 const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: EnableTwoFactorModalProps) => {
  const { t } = useLocale();
+ const form = useForm<EnableTwoFactorValues>();
+
  const setupDescriptions = {
  [SetupStep.ConfirmPassword]: t("2fa_confirm_current_password"),
  [SetupStep.DisplayQrCode]: t("2fa_scan_image_or_use_code"),
  [SetupStep.EnterTotpCode]: t("2fa_enter_six_digit_code"),
  };
  const [step, setStep] = useState(SetupStep.ConfirmPassword);
  const [password, setPassword] = useState("");
- const [totpCode, setTotpCode] = useState("");
  const [dataUri, setDataUri] = useState("");
  const [secret, setSecret] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
- async function handleSetup(e: SyntheticEvent) {
+ async function handleSetup(e: React.FormEvent) {
  e.preventDefault();
 
  if (isSubmitting) {
@@ -90,10 +98,10 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
  }
  }
 
- async function handleEnable(e: SyntheticEvent) {
- e.preventDefault();
+ async function handleEnable({ totpCode }: EnableTwoFactorValues, e: BaseSyntheticEvent | undefined) {
+ e?.preventDefault();
 
- if (isSubmitting || totpCode.length !== 6) {
+ if (isSubmitting) {
  return;
  }
 
@@ -128,11 +136,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
  title={t("enable_2fa")}
  description={setupDescriptions[step]}
  type="creation"
- useOwnActionButtons
- // Icon={Icon.FiAlertTriangle}>
- >
- {/* <TwoFactorModalHeader title={t("enable_2fa")} description={setupDescriptions[step]} /> */}
-
+ useOwnActionButtons>
  <WithStep step={SetupStep.ConfirmPassword} current={step}>
  <form onSubmit={handleSetup}>
  <div className="mb-4">
@@ -166,64 +170,42 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
  <p className="text-center font-mono text-xs">{secret}</p>
  </>
  </WithStep>
- <WithStep step={SetupStep.EnterTotpCode} current={step}>
- <form onSubmit={handleEnable}>
+ <Form handleSubmit={handleEnable} form={form}>
+ <WithStep step={SetupStep.EnterTotpCode} current={step}>
  <div className="mb-4">
- <label htmlFor="code" className="mt-4 block text-sm font-medium text-gray-700">
- {t("code")}
- </label>
- <div className="mt-1">
- <input
- type="text"
- name="code"
- id="code"
- required
- value={totpCode}
- maxLength={6}
- minLength={6}
- inputMode="numeric"
- onInput={(e) => setTotpCode(e.currentTarget.value)}
- className="block w-full rounded-sm border-gray-300 text-sm"
- autoComplete="one-time-code"
- />
- </div>
+ <TwoFactor center />
 
  {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
  </div>
- </form>
- </WithStep>
-
- <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
- <WithStep step={SetupStep.ConfirmPassword} current={step}>
- <Button
- type="submit"
- className="ltr:ml-2 rtl:mr-2"
- onClick={handleSetup}
- disabled={password.length === 0 || isSubmitting}>
- {t("continue")}
- </Button>
  </WithStep>
- <WithStep step={SetupStep.DisplayQrCode} current={step}>
- <Button
- type="submit"
- className="ltr:ml-2 rtl:mr-2"
- onClick={() => setStep(SetupStep.EnterTotpCode)}>
- {t("continue")}
+ <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+ <WithStep step={SetupStep.ConfirmPassword} current={step}>
+ <Button
+ type="submit"
+ className="ltr:ml-2 rtl:mr-2"
+ onClick={handleSetup}
+ disabled={password.length === 0 || isSubmitting}>
+ {t("continue")}
+ </Button>
+ </WithStep>
+ <WithStep step={SetupStep.DisplayQrCode} current={step}>
+ <Button
+ type="submit"
+ className="ltr:ml-2 rtl:mr-2"
+ onClick={() => setStep(SetupStep.EnterTotpCode)}>
+ {t("continue")}
+ </Button>
+ </WithStep>
+ <WithStep step={SetupStep.EnterTotpCode} current={step}>
+ <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isSubmitting}>
+ {t("enable")}
+ </Button>
+ </WithStep>
+ <Button color="secondary" onClick={onCancel}>
+ {t("cancel")}
  </Button>
- </WithStep>
- <WithStep step={SetupStep.EnterTotpCode} current={step}>
- <Button
- type="submit"
- className="ltr:ml-2 rtl:mr-2"
- onClick={handleEnable}
- disabled={totpCode.length !== 6 || isSubmitting}>
- {t("enable")}
- </Button>
- </WithStep>
- <Button color="secondary" onClick={onCancel}>
- {t("cancel")}
- </Button>
- </div>
+ </div>
+ </Form>
  </DialogContent>
  </Dialog>
  );

diff --git a/apps/web/components/v2/settings/TwoFactorAuthAPI.ts b/apps/web/components/v2/settings/TwoFactorAuthAPI.ts
@@ -19,10 +19,10 @@ const TwoFactorAuthAPI = {
  });
  },
 
- async disable(password: string) {
+ async disable(password: string, code: string) {
  return fetch("/api/auth/two-factor/totp/disable", {
  method: "POST",
- body: JSON.stringify({ password }),
+ body: JSON.stringify({ password, code }),
  headers: {
  "Content-Type": "application/json",
  },

diff --git a/apps/web/pages/v2/auth/login.tsx b/apps/web/pages/v2/auth/login.tsx
@@ -159,7 +159,7 @@ export default function Login({
  </div>
  </div>
 
- {twoFactorRequired && <TwoFactor />}
+ {twoFactorRequired && <TwoFactor center />}
 
  {errorMessage && <Alert severity="error" title={errorMessage} />}
  <div className="pb-8">

diff --git a/apps/web/pages/v2/settings/my-account/conferencing.tsx b/apps/web/pages/v2/settings/my-account/conferencing.tsx
@@ -27,21 +27,21 @@ const ConferencingLayout = (props: inferSSRProps<typeof getServerSideProps>) =>
  // });
 
  return (
- <div className="m-4 rounded-md border-neutral-200 bg-white sm:mx-0  md:border xl:mt-0">
+ <div className="w-40 rounded-md border border-neutral-200 bg-white sm:mx-0 md:w-96 xl:mt-0">
  <Meta title="conferencing" description="conferencing_description" />
  {apps.map((app) => (
  <div
  key={app.title}
- className="flex w-full flex-1 items-center space-x-3 border-b py-5 rtl:space-x-reverse">
+ className="flex flex-1 items-center space-x-3 border-b  py-5 px-4 rtl:space-x-reverse">
  <img className="h-10 w-10" src={app.logo} alt={app.title} />
 
- <div className="flex-grow truncate pl-2">
+ <div className="truncate pl-2">
  <h3 className="truncate text-sm font-medium text-neutral-900">{app.title}</h3>
  <p className="truncate text-sm text-gray-500">{app.description}</p>
  </div>
 
  <Dropdown>
- <DropdownMenuTrigger className="focus:ring-brand-900 mr-4 block h-[36px] w-auto justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1">
+ <DropdownMenuTrigger className="focus:ring-brand-900 block h-[36px] w-auto justify-center  rounded-md border border-gray-200 bg-transparent text-gray-700 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1">
  <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
  </DropdownMenuTrigger>
  <DropdownMenuContent>