added dark mode upgrade banner (#8172)

apps/web/pages/insights/index.tsx

@@ -58,14 +58,14 @@ export default function InsightsPage() {
           title={t("make_informed_decisions")}
           description={t("make_informed_decisions_description")}
           features={features}
-          background="/tips/insights.jpg"
+          background="/tips/insights"
           buttons={
             <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
               <ButtonGroup>
                 <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
                   {t("create_team")}
                 </Button>
-                <Button color="secondary" href="https://go.cal.com/insights" target="_blank">
+                <Button color="minimal" href="https://go.cal.com/insights" target="_blank">
                   {t("learn_more")}
                 </Button>
               </ButtonGroup>

packages/app-store/routing-forms/pages/forms/[...appPages].tsx

@@ -102,7 +102,7 @@ export default function RoutingForms({
         title={t("teams_plan_required")}
         description={t("routing_forms_are_a_great_way")}
         features={features}
-        background="/tips/routing-forms.jpg"
+        background="/tips/routing-forms"
         isParentLoading={isLoading && <SkeletonLoaderTeamList />}
         buttons={
           <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
@@ -110,11 +110,7 @@ export default function RoutingForms({
               <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
                 {t("upgrade")}
               </Button>
-              <Button
-                color="minimal"
-                className="text-inverted !bg-transparent opacity-50 hover:opacity-100"
-                href="https://go.cal.com/teams-video"
-                target="_blank">
+              <Button color="minimal" href="https://go.cal.com/teams-video" target="_blank">
                 {t("learn_more")}
               </Button>
             </ButtonGroup>

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

@@ -68,10 +68,8 @@ export function TeamsListing() {
       <UpgradeTip
         title="calcom_is_better_with_team"
         description="add_your_team_members"
-        emptyTitle="no_teams"
-        emptyDescription="no_teams_description"
         features={features}
-        background="/tips/teams.jpg"
+        background="/tips/teams"
         buttons={
           <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
             <ButtonGroup>

packages/features/tips/UpgradeTip.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import type { ReactNode } from "react";
 
 import { classNames } from "@calcom/lib";
@@ -8,8 +7,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 export function UpgradeTip({
   dark,
   title,
-  emptyTitle,
-  emptyDescription,
   description,
   background,
   features,
@@ -21,8 +18,6 @@ export function UpgradeTip({
   title: string;
   description: string;
   /* overwrite EmptyScreen text */
-  emptyTitle?: string;
-  emptyDescription?: string;
   background: string;
   features: Array<{ icon: JSX.Element; title: string; description: string }>;
   buttons?: JSX.Element;
@@ -40,14 +35,15 @@ export function UpgradeTip({
   return (
     <>
       <div className="relative flex min-h-[295px] w-full items-center justify-between overflow-hidden rounded-lg pb-10">
-        <Image
-          alt={title}
-          src={background}
-          className="absolute min-h-[295px] w-full rounded-lg object-cover"
-          height={295}
-          width={1118}
-          quality={100}
-        />
+        <picture className="absolute min-h-[295px] w-full rounded-lg object-cover">
+          <source srcSet={`${background}-dark.jpg`} media="(prefers-color-scheme: dark)" />
+          <img
+            className="absolute min-h-[295px] w-full rounded-lg object-cover"
+            src={`${background}.jpg`}
+            loading="lazy"
+            alt={title}
+          />
+        </picture>
         <div className="relative mt-4 px-8 sm:px-14">
           <h1 className={classNames("font-cal text-3xl", dark && "text-inverted")}>{t(title)}</h1>
           <p className={classNames("mt-4 mb-8 max-w-sm", dark ? "text-inverted" : "text-default")}>