added new VerticalDivider, using it in Event-types, fixed padding in app store (#4165)

* added new VerticalDivider, using it in Event-types

* fixed event-type app store empty screen padding and workflows padding

* centered emtpyscreen description

* made empty screen button secondary on app store

* fixed hide from profile on mobile

* squared dropdown on event-types

apps/web/components/v2/eventtype/EventAppsTab.tsx

@@ -75,16 +75,18 @@ export const EventAppsTab = ({
 
   if (installedApps === 0) {
     return (
-      <EmptyScreen
-        Icon={Icon.FiGrid}
-        headline={t("empty_installed_apps_headline")}
-        description={t("empty_installed_apps_description")}
-        buttonRaw={
-          <Button target="_blank" href="/apps">
-            {t("empty_installed_apps_button")}{" "}
-          </Button>
-        }
-      />
+      <div className="pt-4 before:border-0">
+        <EmptyScreen
+          Icon={Icon.FiGrid}
+          headline={t("empty_installed_apps_headline")}
+          description={t("empty_installed_apps_description")}
+          buttonRaw={
+            <Button target="_blank" color="secondary" href="/apps">
+              {t("empty_installed_apps_button")}{" "}
+            </Button>
+          }
+        />
+      </div>
     );
   }
   return (

apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx

@@ -20,6 +20,7 @@ import {
   VerticalTabs,
   HorizontalTabs,
   Switch,
+  Label,
 } from "@calcom/ui/v2";
 import { Dialog } from "@calcom/ui/v2/core/Dialog";
 import Dropdown, {
@@ -28,6 +29,7 @@ import Dropdown, {
   DropdownMenuTrigger,
 } from "@calcom/ui/v2/core/Dropdown";
 import Shell from "@calcom/ui/v2/core/Shell";
+import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
 
 import { ClientSuspense } from "@components/ClientSuspense";
 
@@ -113,13 +115,13 @@ function EventTypeSingleLayout({
         name: "apps",
         tabName: "apps",
         icon: Icon.FiGrid,
-        info: `${enabledAppsNumber} Active`,
+        info: `${enabledAppsNumber} ${t("active")}`,
       },
       {
         name: "workflows",
         tabName: "workflows",
         icon: Icon.FiZap,
-        info: `${enabledWorkflowsNumber} Active`,
+        info: `${enabledWorkflowsNumber} ${t("active")}`,
       },
     ] as VerticalTabItemProps[];
 
@@ -157,17 +159,22 @@ function EventTypeSingleLayout({
       subtitle={eventType.description || ""}
       CTA={
         <div className="flex items-center justify-end">
-          <div className="hidden lg:flex lg:items-center">
-            <p className="pr-2">{t("hide_from_profile")}</p>
+          <div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
+            <Label htmlFor="hiddenSwitch" className="mt-2 hidden cursor-pointer self-center pr-2 sm:inline">
+              {t("hide_from_profile")}
+            </Label>
             <Switch
+              id="hiddenSwitch"
               defaultChecked={formMethods.getValues("hidden")}
               onCheckedChange={(e) => {
                 formMethods.setValue("hidden", e);
               }}
             />
           </div>
+          <VerticalDivider className="hidden lg:block" />
+
           {/* TODO: Figure out why combined isnt working - works in storybook */}
-          <ButtonGroup combined containerProps={{ className: "px-4 border-gray-300 hidden lg:flex" }}>
+          <ButtonGroup combined containerProps={{ className: "border-gray-300 hidden lg:flex" }}>
             {/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
             <Tooltip content={t("preview")}>
               <Button
@@ -203,8 +210,11 @@ function EventTypeSingleLayout({
               onClick={() => setDeleteDialogOpen(true)}
             />
           </ButtonGroup>
+
+          <VerticalDivider />
+
           <Dropdown>
-            <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 lg:hidden">
+            <DropdownMenuTrigger className="focus:ring-brand-900 block h-9 w-9 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 lg:hidden">
               <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
@@ -241,7 +251,7 @@ function EventTypeSingleLayout({
         </div>
       }>
       <ClientSuspense fallback={<Loader />}>
-        <div className="flex flex-col xl:flex-row xl:space-x-8">
+        <div className="mt-4 flex flex-col xl:flex-row xl:space-x-8">
           <div className="hidden xl:block">
             <VerticalTabs tabs={EventTypeTabs} sticky />
           </div>
@@ -251,8 +261,8 @@ function EventTypeSingleLayout({
           <div className="w-full ltr:mr-2 rtl:ml-2">
             <div
               className={classNames(
-                "mt-4 rounded-md  border-neutral-200 bg-white  sm:mx-0 xl:mt-0",
-                disableBorder ? "border-0 xl:-mt-4 " : "p-2 sm:p-10 md:border md:p-6"
+                "mt-4 rounded-md  border-neutral-200 bg-white sm:mx-0 xl:mt-0",
+                disableBorder ? "border-0 xl:-mt-4 " : "p-2 md:border md:p-6"
               )}>
               {children}
             </div>

apps/web/pages/v2/event-types/index.tsx

@@ -20,6 +20,7 @@ import Dropdown, {
   DropdownMenuTrigger,
 } from "@calcom/ui/v2/core/Dropdown";
 import Shell from "@calcom/ui/v2/core/Shell";
+import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
 import CreateEventTypeButton from "@calcom/ui/v2/modules/event-types/CreateEventType";
 
 import { withQuery } from "@lib/QueryCell";
@@ -291,18 +292,19 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           type.$disabled && "pointer-events-none cursor-not-allowed"
                         )}>
                         <Tooltip content={t("show_eventtype_on_profile") as string}>
-                          <div className="py-4">
-                            <div className="-my-2 self-center border-r-2 border-gray-300 pr-4">
-                              <Switch
-                                name="Hidden"
-                                checked={!type.hidden}
-                                onCheckedChange={() => {
-                                  setHiddenMutation.mutate({ id: type.id, hidden: !type.hidden });
-                                }}
-                              />
-                            </div>
+                          <div className="self-center pr-2">
+                            <Switch
+                              name="Hidden"
+                              checked={!type.hidden}
+                              onCheckedChange={() => {
+                                setHiddenMutation.mutate({ id: type.id, hidden: !type.hidden });
+                              }}
+                            />
                           </div>
                         </Tooltip>
+
+                        <VerticalDivider className="mt-2.5" />
+
                         <Tooltip content={t("preview") as string}>
                           <Button
                             color="minimalSecondary"

apps/web/public/static/locales/en/common.json

@@ -1098,5 +1098,6 @@
   "error_updating_password": "Error updating password",
   "two_factor_auth": "Two factor authentication",
   "recurring_event_tab_description": "Set up a repeating schedule",
-  "today": "today"
+  "today": "today",
+  "active": "active"
 }

packages/features/ee/workflows/components/v2/EventWorkflowsTab.tsx

@@ -177,7 +177,7 @@ function EventWorkflowsTab(props: Props) {
     <LicenseRequired>
       {!isLoading ? (
         data?.workflows && data?.workflows.length > 0 ? (
-          <div className="mt-6">
+          <div className="mt-4">
             {sortedWorkflows.map((workflow) => {
               return <WorkflowListItem key={workflow.id} workflow={workflow} eventType={props.eventType} />;
             })}

packages/ui/v2/core/EmptyScreen.tsx

@@ -31,7 +31,7 @@ export default function EmptyScreen({
         </div>
         <div className="flex max-w-[420px] flex-col items-center">
           <h2 className="text-semibold font-cal mt-6 text-xl dark:text-gray-300">{headline}</h2>
-          <p className="mt-3 mb-8 text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
+          <p className="mt-3 mb-8 text-center text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
             {description}
           </p>
           {buttonOnClick && buttonText && <Button onClick={(e) => buttonOnClick(e)}>{buttonText}</Button>}

packages/ui/v2/core/VerticalDivider.tsx

@@ -0,0 +1,17 @@
+import { classNames } from "@calcom/lib";
+
+export default function VerticalDivider({ className, ...props }: JSX.IntrinsicElements["svg"]) {
+  className = classNames(className, "mx-3");
+  return (
+    <svg
+      className={className}
+      {...props}
+      width="2"
+      height="16"
+      viewBox="0 0 2 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <rect width="2" height="16" rx="1" fill="#D1D5DB" />
+    </svg>
+  );
+}