readding sidebar tips for everyone, added 3 more features to teams empty screen (#6475)

* readding sidebar tips for everyone

* added 3 more features to teams plan

* responsive fixes

* responsive fixes

* small responsive fix

* CTA alignment fixed

* Minor alignment fixes to Shell for event-types/[type]

Co-authored-by: Alex van Andel <me@alexvanandel.com>

packages/features/ee/common/components/v2/LicenseRequired.tsx

@@ -11,15 +11,9 @@ type LicenseRequiredProps = {
   className?: string;
   role?: AriaRole | undefined;
   children: React.ReactNode;
-  toHide?: boolean; // if true, the component will be hidden instead of showing the empty screen
 };
 
-/**
- * This component will only render it's children if the installation has a valid
- * license.
- * @param toHide - will hide the component with a license instead of showing the empty screen
- */
-const LicenseRequired = ({ children, as = "", toHide = false, ...rest }: LicenseRequiredProps) => {
+const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) => {
   const session = useSession();
   const { t } = useLocale();
   const Component = as || Fragment;
@@ -28,8 +22,6 @@ const LicenseRequired = ({ children, as = "", toHide = false, ...rest }: License
   return (
     <Component {...rest}>
       {hasValidLicense === null || hasValidLicense ? (
-        !toHide && children
-      ) : toHide ? (
         children
       ) : (
         <EmptyScreen

packages/features/ee/teams/components/TeamsListing.tsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
+import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import isCalcom from "@calcom/lib/isCalcom";
 import { trpc } from "@calcom/trpc/react";
-import { Alert, Button, EmptyScreen, Icon } from "@calcom/ui";
+import { Alert, Button, ButtonGroup, EmptyScreen, Icon } from "@calcom/ui";
 
 import SkeletonLoaderTeamList from "./SkeletonloaderTeamList";
 import TeamList from "./TeamList";
@@ -38,6 +39,21 @@ export function TeamsListing() {
       title: t("fixed_round_robin"),
       description: t("add_one_fixed_attendee"),
     },
+    {
+      icon: <Icon.FiMail className="h-5 w-5 text-gray-700" />,
+      title: t("sms_attendee_action"),
+      description: t("make_it_easy_to_book"),
+    },
+    {
+      icon: <Icon.FiVideo className="h-5 w-5 text-gray-700" />,
+      title: "Cal Video" + " " + t("recordings_title"),
+      description: t("upgrade_to_access_recordings_description"),
+    },
+    {
+      icon: <Icon.FiEyeOff className="h-5 w-5 text-gray-700" />,
+      title: t("disable_cal_branding", { appName: APP_NAME }),
+      description: t("disable_cal_branding_description", { appName: APP_NAME }),
+    },
   ];
 
   return (
@@ -52,8 +68,8 @@ export function TeamsListing() {
       {isLoading && <SkeletonLoaderTeamList />}
       {!teams.length && !isLoading && (
         <>
-          {isCalcom ? (
-            <div className="max-w-[1118px]">
+          {!isCalcom ? (
+            <div className="-mt-6 rtl:ml-4 md:rtl:ml-0">
               <div
                 className="flex w-full justify-between overflow-hidden rounded-lg pt-4 pb-10 md:min-h-[295px] md:pt-10"
                 style={{
@@ -61,22 +77,26 @@ export function TeamsListing() {
                   backgroundSize: "cover",
                   backgroundRepeat: "no-repeat",
                 }}>
-                <div className="mt-3 px-14">
+                <div className="mt-3 px-8 sm:px-14">
                   <h1 className="font-cal text-3xl">{t("calcom_is_better_with_team")}</h1>
                   <p className="my-4 max-w-sm text-gray-600">{t("add_your_team_members")}</p>
                   <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
-                    <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
-                      {t("create_team")}
-                    </Button>
-                    <Button href="https://go.cal.com/teams-video" target="_blank" color="secondary">
-                      {t("learn_more")}
-                    </Button>
+                    <ButtonGroup>
+                      <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
+                        {t("create_team")}
+                      </Button>
+                      <Button color="secondary" href="https://go.cal.com/teams-video" target="_blank">
+                        {t("learn_more")}
+                      </Button>
+                    </ButtonGroup>
                   </div>
                 </div>
               </div>
-              <div className="mt-6 grid-cols-3 md:grid md:gap-6">
+              <div className="mt-4 grid-cols-3 md:grid md:gap-4">
                 {features.map((feature) => (
-                  <div key={feature.title} className="mb-6 min-h-[180px] w-full rounded-md bg-gray-50 p-8">
+                  <div
+                    key={feature.title}
+                    className="mb-4 min-h-[180px] w-full rounded-md bg-gray-50 p-8 md:mb-0">
                     {feature.icon}
                     <h2 className="font-cal mt-4 text-lg">{feature.title}</h2>
                     <p className="text-gray-700">{feature.description}</p>

packages/features/shell/Shell.tsx

@@ -731,9 +731,7 @@ function SideBar() {
         </div>
 
         <div>
-          <LicenseRequired toHide>
-            <Tips />
-          </LicenseRequired>
+          <Tips />
           <div data-testid="user-dropdown-trigger">
             <span className="hidden lg:inline">
               <UserDropdown />
@@ -754,7 +752,7 @@ export function ShellMain(props: LayoutProps) {
   const { isLocaleReady } = useLocale();
   return (
     <>
-      <div className="flex items-baseline sm:mt-0">
+      <div className="mb-6 flex sm:mt-0 lg:mb-10">
         {!!props.backPath && (
           <Button
             size="icon"
@@ -768,11 +766,11 @@ export function ShellMain(props: LayoutProps) {
           />
         )}
         {props.heading && (
-          <header className={classNames(props.large && "py-8", " flex w-full max-w-full items-center")}>
+          <header className={classNames(props.large && "py-8", "flex w-full max-w-full")}>
             {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
             <div className={classNames("w-full ltr:mr-4 rtl:ml-4 sm:block", props.headerClassName)}>
               {props.heading && (
-                <h1 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 mb-1 hidden truncate text-2xl font-semibold tracking-wide text-black sm:block xl:max-w-full">
+                <h1 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 mt-1 hidden truncate text-2xl font-semibold tracking-wide text-black sm:block xl:max-w-full">
                   {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
                 </h1>
               )}
@@ -785,7 +783,9 @@ export function ShellMain(props: LayoutProps) {
             {props.CTA && (
               <div
                 className={classNames(
-                  props.backPath ? "relative" : " fixed bottom-[88px] z-40 ltr:right-4 rtl:left-4 sm:z-auto",
+                  props.backPath
+                    ? "relative"
+                    : "fixed bottom-[88px] z-40 ltr:right-4 rtl:left-4 sm:z-auto md:ltr:right-0 md:rtl:left-0",
                   "flex-shrink-0 sm:relative sm:bottom-auto sm:right-auto"
                 )}>
                 {props.CTA}
@@ -795,7 +795,7 @@ export function ShellMain(props: LayoutProps) {
           </header>
         )}
       </div>
-      <div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col ", "pt-10")}>
+      <div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col")}>
         {props.children}
       </div>
     </>