From e17c463890ea7d981dbf14c5437d73325ff4c329 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Wed, 31 Aug 2022 12:13:27 +0100
Subject: [PATCH] V2 General Fixes  (#4038)

---
 apps/web/components/v2/eventtype/EventAppsTab.tsx   |  6 +++++-
 .../v2/eventtype/EventTypeSingleLayout.tsx          |  7 ++++---
 apps/web/pages/v2/bookings/[status].tsx             |  4 ++--
 apps/web/pages/v2/event-types/index.tsx             |  6 +++---
 apps/web/public/static/locales/en/common.json       |  4 +++-
 packages/ui/v2/core/Button.tsx                      | 13 +++++++++----
 packages/ui/v2/core/EmptyScreen.tsx                 |  2 +-
 packages/ui/v2/core/Switch.tsx                      |  7 +++++--
 packages/ui/v2/core/layouts/BookingLayout.tsx       | 12 +++++++++---
 .../ui/v2/core/navigation/tabs/VerticalTabItem.tsx  | 11 ++++++++---
 packages/ui/v2/modules/booker/DatePicker.tsx        |  6 +++---
 11 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/apps/web/components/v2/eventtype/EventAppsTab.tsx b/apps/web/components/v2/eventtype/EventAppsTab.tsx
index 7615ee379b..a2ddc83461 100644
--- a/apps/web/components/v2/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/v2/eventtype/EventAppsTab.tsx
@@ -79,7 +79,11 @@ export const EventAppsTab = ({
         Icon={Icon.FiGrid}
         headline={t("empty_installed_apps_headline")}
         description={t("empty_installed_apps_description")}
-        buttonRaw={<Button href="/apps">{t("empty_installed_apps_button")} </Button>}
+        buttonRaw={
+          <Button target="_blank" href="/apps">
+            {t("empty_installed_apps_button")}{" "}
+          </Button>
+        }
       />
     );
   }
diff --git a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
index fdcea1de02..abb81cf93d 100644
--- a/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx
@@ -104,8 +104,8 @@ function EventTypeSingleLayout({
       {
         name: "recurring",
         tabName: "recurring",
-        icon: Icon.FiRotateCcw,
-        info: `recurring_event_description`,
+        icon: Icon.FiRepeat,
+        info: `recurring_event_tab_description`,
       },
       {
         name: "apps",
@@ -191,7 +191,8 @@ function EventTypeSingleLayout({
                 showToast("Link copied!", "success");
               }}
             />
-            <Button color="secondary" size="icon" StartIcon={Icon.FiCode} combined />
+            {/* TODO: Implement embed here @hariom */}
+            {/* <Button color="secondary" size="icon" StartIcon={Icon.FiCode} combined /> */}
             <Button
               color="secondary"
               size="icon"
diff --git a/apps/web/pages/v2/bookings/[status].tsx b/apps/web/pages/v2/bookings/[status].tsx
index b30b0b5d80..bcc3ae6ade 100644
--- a/apps/web/pages/v2/bookings/[status].tsx
+++ b/apps/web/pages/v2/bookings/[status].tsx
@@ -91,7 +91,7 @@ export default function Bookings() {
         )}
         {(query.status === "loading" || query.status === "idle") && <SkeletonLoader />}
         {query.status === "success" && !isEmpty && (
-          <div className="pt-4 xl:mx-6 xl:pt-0">
+          <div className="pt-2 xl:mx-6 xl:pt-0">
             <p className="pb-3 text-xs font-medium leading-4 text-gray-500">Today</p>
             <div className="overflow-hidden rounded-md border border-gray-200">
               <table className="w-full">
@@ -123,7 +123,7 @@ export default function Bookings() {
           </div>
         )}
         {query.status === "success" && isEmpty && (
-          <div className="flex items-center justify-center">
+          <div className="flex items-center justify-center pt-2 xl:mx-6 xl:pt-0">
             <EmptyScreen
               Icon={Icon.FiCalendar}
               headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}
diff --git a/apps/web/pages/v2/event-types/index.tsx b/apps/web/pages/v2/event-types/index.tsx
index fd58e1764d..72419aa5fd 100644
--- a/apps/web/pages/v2/event-types/index.tsx
+++ b/apps/web/pages/v2/event-types/index.tsx
@@ -305,7 +305,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         </Tooltip>
                         <Tooltip content={t("preview") as string}>
                           <Button
-                            color="minimal"
+                            color="minimalSecondary"
                             size="icon"
                             href={calLink}
                             StartIcon={Icon.FiExternalLink}
@@ -315,7 +315,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
 
                         <Tooltip content={t("copy_link") as string}>
                           <Button
-                            color="minimal"
+                            color="minimalSecondary"
                             size="icon"
                             StartIcon={Icon.FiLink}
                             disabled={type.$disabled}
@@ -328,7 +328,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                       </div>
                       <Dropdown>
                         <DropdownMenuTrigger
-                          className="focus:ring-brand-900 flex h-[36px] w-[36px] justify-center rounded-md bg-transparent text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1"
+                          className="focus:ring-brand-900 flex h-[36px] w-[36px] justify-center rounded-md border border-transparent bg-transparent text-gray-700 hover:border-gray-300 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1"
                           data-testid={"event-type-options-" + type.id}>
                           <Icon.FiMoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
                         </DropdownMenuTrigger>
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 7e441b79f8..6d5698d71b 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -307,6 +307,7 @@
   "recurring_bookings": "As soon as someone books a recurring meeting with you it will show up here.",
   "past_bookings": "Your past bookings will show up here.",
   "cancelled_bookings": "Your cancelled bookings will show up here.",
+  "unconfirmed_bookings": "Your unconfirmed bookings will show up here.",
   "on": "on",
   "and": "and",
   "calendar_shows_busy_between": "Your calendar shows you as busy between",
@@ -1086,5 +1087,6 @@
   "old_password": "Old password",
   "secure_password": "Your new super secure password",
   "error_updating_password": "Error updating password",
-  "two_factor_auth": "Two factor authentication"
+  "two_factor_auth": "Two factor authentication",
+  "recurring_event_tab_description": "Set up a repeating schedule"
 }
diff --git a/packages/ui/v2/core/Button.tsx b/packages/ui/v2/core/Button.tsx
index a8a3d21008..7d7f58fad0 100644
--- a/packages/ui/v2/core/Button.tsx
+++ b/packages/ui/v2/core/Button.tsx
@@ -43,6 +43,8 @@ const variantClassName = {
   secondary: "border border-gray-200 text-brand-900 bg-white hover:bg-gray-100",
   minimal:
     "text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-brand-900 dark:text-darkgray-900 hover:dark:text-gray-50",
+  minimalSecondary:
+    "text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-brand-900 dark:text-darkgray-900 hover:dark:text-gray-50 border border-transparent hover:border-gray-300",
   destructive:
     "text-gray-700 bg-transparent hover:bg-red-100 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-100 focus:ring-red-700",
 };
@@ -50,6 +52,7 @@ const variantDisabledClassName = {
   primary: "border border-transparent bg-brand-500 bg-opacity-20 text-white",
   secondary: "border border-gray-200 text-brand-900 bg-white opacity-30",
   minimal: "text-gray-400 bg-transparent",
+  minimalSecondary: "text-gray-400 bg-transparent",
   destructive: "text-red-700 bg-transparent opacity-30",
 };
 
@@ -84,10 +87,12 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         // base styles independent what type of button it is
         "inline-flex justify-center items-center text-sm font-medium relative",
         // different styles depending on size
-        size === "base" && "h-9 px-4 py-2.5 rounded-md ",
-        size === "lg" && "h-[36px] px-4 py-2.5 rounded-md",
-        size === "icon" && "flex justify-center h-[36px] w-[36px] rounded-md",
-        combined && "rounded-none first:border-r-0 last:border-l-0 first:rounded-l-md last:rounded-r-md ",
+        size === "base" && "h-9 px-4 py-2.5  ",
+        size === "lg" && "h-[36px] px-4 py-2.5 ",
+        size === "icon" && "flex justify-center h-[36px] w-[36px] ",
+        combined
+          ? "rounded-none first:border-r-0 last:border-l-0 first:rounded-l-md last:rounded-r-md "
+          : "rounded-md",
         // different styles depending on color
         // set not-allowed cursor if disabled
         disabled ? variantDisabledClassName[color] : variantClassName[color],
diff --git a/packages/ui/v2/core/EmptyScreen.tsx b/packages/ui/v2/core/EmptyScreen.tsx
index 7d81274a44..87fac752f6 100644
--- a/packages/ui/v2/core/EmptyScreen.tsx
+++ b/packages/ui/v2/core/EmptyScreen.tsx
@@ -23,7 +23,7 @@ export default function EmptyScreen({
 }) {
   return (
     <>
-      <div className="min-h-80 my-6 flex w-full flex-col items-center justify-center rounded-sm border border-dashed p-7 lg:p-20">
+      <div className="min-h-80 flex w-full flex-col items-center justify-center rounded-md border border-dashed p-7 lg:p-20">
         <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-200 dark:bg-white">
           <Icon className="inline-block h-10 w-10 text-white dark:bg-gray-900 dark:text-gray-600" />
         </div>
diff --git a/packages/ui/v2/core/Switch.tsx b/packages/ui/v2/core/Switch.tsx
index d8568a2a9f..788f5fad43 100644
--- a/packages/ui/v2/core/Switch.tsx
+++ b/packages/ui/v2/core/Switch.tsx
@@ -18,12 +18,15 @@ const Switch = (
       <PrimitiveSwitch.Root
         className={classNames(
           props.checked ? "bg-gray-900" : "bg-gray-200 hover:bg-gray-300",
-          "focus:ring-brand-800 h-[24px] w-[40px] rounded-full p-0.5 shadow-none focus:ring-1"
+          "focus:ring-brand-800 h-[24px] w-[40px] rounded-full p-0.5 shadow-inner focus:ring-1"
         )}
         {...primitiveProps}>
         <PrimitiveSwitch.Thumb
           id={id}
-          className="block h-[18px] w-[18px] translate-x-0 rounded-full bg-white transition-transform"
+          className={classNames(
+            "block h-[18px] w-[18px] translate-x-0 rounded-full bg-white shadow-md transition-transform",
+            props.checked && "shadow-inner"
+          )}
         />
       </PrimitiveSwitch.Root>
       {label && (
diff --git a/packages/ui/v2/core/layouts/BookingLayout.tsx b/packages/ui/v2/core/layouts/BookingLayout.tsx
index a6212d0095..5881bdbef5 100644
--- a/packages/ui/v2/core/layouts/BookingLayout.tsx
+++ b/packages/ui/v2/core/layouts/BookingLayout.tsx
@@ -11,10 +11,16 @@ const tabs: VerticalTabItemProps[] = [
     href: "/bookings/upcoming",
     icon: Icon.FiCalendar,
   },
+  // TODO: Add filter for unconfimred bookings in a future PR - Out of scope
+  // {
+  //   name: "unconfirmed",
+  //   href: "/bookings/unconfirmed",
+  //   icon: Icon.FiInbox,
+  // },
   {
-    name: "Unconfirmed",
-    href: "/bookings/unconfirmed",
-    icon: Icon.FiInbox,
+    name: "recurring",
+    href: "/bookings/recurring",
+    icon: Icon.FiRotateCcw,
   },
   {
     name: "past",
diff --git a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
index ce8e244d2a..f299a61fba 100644
--- a/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/VerticalTabItem.tsx
@@ -7,6 +7,7 @@ import { FC, Fragment, MouseEventHandler } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
+import { Icon } from "@calcom/ui/Icon";
 
 export type VerticalTabItemProps = {
   name: string;
@@ -74,11 +75,15 @@ const VerticalTabItem: FC<VerticalTabItemProps> = ({ name, href, tabName, info,
             <p>{t(name)}</p>
             {info && <p className="pt-1 text-xs font-normal">{t(info)}</p>}
           </div>
-          {/* {isCurrent && (
+          {isCurrent && (
             <div className="ml-auto self-center">
-              <ChevronRight width={20} height={20} className="h-auto w-[20px] stroke-[1.5px]" />
+              <Icon.FiChevronRight
+                width={20}
+                height={20}
+                className="h-auto w-[20px] stroke-[1.5px] text-gray-700"
+              />
             </div>
-          )} */}
+          )}
         </a>
       </Link>
       {props.children?.map((child) => (
diff --git a/packages/ui/v2/modules/booker/DatePicker.tsx b/packages/ui/v2/modules/booker/DatePicker.tsx
index 5a29252999..ca793eaa60 100644
--- a/packages/ui/v2/modules/booker/DatePicker.tsx
+++ b/packages/ui/v2/modules/booker/DatePicker.tsx
@@ -43,12 +43,12 @@ export const Day = ({
     <button
       style={props.disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }}
       className={classNames(
-        "disabled:text-bookinglighter  absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-md border-2 border-transparent text-center font-medium hover:bg-gray-300 disabled:cursor-default disabled:border-transparent disabled:font-light dark:hover:border-white disabled:dark:border-transparent",
+        "disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-md border-2 border-transparent text-center font-medium disabled:cursor-default disabled:border-transparent disabled:font-light dark:hover:border-white disabled:dark:border-transparent",
         active
           ? "dark:bg-darkmodebrand dark:text-darkmodebrandcontrast bg-brand text-brandcontrast border-2"
           : !props.disabled
-          ? "dark:bg-darkgray-200 bg-gray-100 dark:text-white"
-          : "hover:bg-transparent"
+          ? "dark:bg-darkgray-200 bg-gray-100 hover:bg-gray-300 dark:text-white"
+          : ""
       )}
       data-testid="day"
       data-disabled={props.disabled}