chore: insights UI refresher (#12498)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

apps/web/pages/insights/index.tsx

@@ -69,17 +69,17 @@ export default function InsightsPage() {
             <FiltersProvider>
               <Filters />
 
-              <div className="mb-4 space-y-6">
+              <div className="mb-4 space-y-4">
                 <BookingKPICards />
 
                 <BookingStatusLineChart />
 
-                <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                   <PopularEventsTable />
 
                   <AverageEventDurationChart />
                 </div>
-                <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                   <MostBookedTeamMembersTable />
                   <LeastBookedTeamMembersTable />
                 </div>

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

@@ -5,7 +5,7 @@ import React, { Fragment, useEffect } from "react";
 
 import { SUPPORT_MAIL_ADDRESS, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen, TopBanner } from "@calcom/ui";
+import { EmptyScreen, Alert } from "@calcom/ui";
 import { AlertTriangle } from "@calcom/ui/components/icon";
 
 type LicenseRequiredProps = {
@@ -37,9 +37,10 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
       ) : process.env.NODE_ENV === "development" ? (
         /** We only show a warning in development mode, but allow the feature to be displayed for development/testing purposes */
         <>
-          <TopBanner
-            text=""
-            actions={
+          <Alert
+            className="mb-4"
+            severity="warning"
+            title={
               <>
                 {t("enterprise_license")}.{" "}
                 <Trans i18nKey="enterprise_license_development">
@@ -52,7 +53,6 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
                 </Trans>
               </>
             }
-            variant="warning"
           />
           {children}
         </>

packages/features/insights/components/BookingKPICards.tsx

@@ -67,7 +67,7 @@ export const BookingKPICards = () => {
 
   return (
     <>
-      <Grid numColsSm={2} numColsLg={4} className="gap-x-6 gap-y-6">
+      <Grid numColsSm={2} numColsLg={4} className="gap-x-4 gap-y-4">
         {categories.map((item) => (
           <KPICard
             key={item.title}
@@ -85,7 +85,7 @@ export const BookingKPICards = () => {
 const LoadingKPICards = (props: { categories: { title: string; index: string }[] }) => {
   const { categories } = props;
   return (
-    <Grid numColsSm={2} numColsLg={4} className="gap-x-6 gap-y-6">
+    <Grid numColsSm={2} numColsLg={4} className="gap-x-4 gap-y-4">
       {categories.map((item) => (
         <CardInsights key={item.title}>
           <SkeletonContainer className="flex w-full flex-col">

packages/features/insights/components/LineChart.tsx

@@ -4,9 +4,5 @@ import type { LineChartProps } from "./tremor.types";
 
 // Honestly this is a mess. Why are all chart libraries in existance horrible to theme
 export const LineChart = (props: LineChartProps) => {
-  return (
-    <div className="dark:invert">
-      <ExternalLineChart {...props} />
-    </div>
-  );
+  return <ExternalLineChart {...props} />;
 };

packages/features/insights/filters/DateSelect.css

@@ -1,6 +1,7 @@
 .custom-date > .tremor-DateRangePicker-root > .tremor-DateRangePicker-button {
   box-shadow: none;
   width: 100%;
+  background-color: transparent;
 }
 
 /* Media query for screens larger than 768px */
@@ -10,23 +11,82 @@
   }
 }
 
+.recharts-cartesian-grid-horizontal line{
+  @apply stroke-emphasis
+}
+
+.tremor-DateRangePicker-button button{
+  @apply !h-9 !max-h-9 border-default hover:border-emphasis
+}
+
 .tremor-DateRangePicker-calendarButton,
 .tremor-DateRangePicker-dropdownButton {
   @apply border-subtle bg-default focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0;
 }
 
+.tremor-DateRangePicker-dropdownModal{
+  @apply divide-none
+}
+
+.tremor-DropdownItem-root{
+  @apply !h-9 !max-h-9 bg-default hover:bg-subtle text-default hover:text-emphasis
+}
+
 .tremor-DateRangePicker-calendarButtonText,
 .tremor-DateRangePicker-dropdownButtonText {
   @apply text-default;
 }
 
-.tremor-DateRangePicker-calendarModal,
-.tremor-DateRangePicker-dropdownModal {
-  @apply dark:invert;
+.tremor-DateRangePicker-calendarHeaderText{
+  @apply !text-default
 }
 
+.tremor-DateRangePicker-calendarHeader svg{
+  @apply text-default
+}
+
+.tremor-DateRangePicker-calendarHeader button{
+  @apply hover:bg-emphasis shadow-none focus:ring-0
+}
+
+
+.tremor-DateRangePicker-calendarHeader button:hover svg{
+  @apply text-emphasis
+}
+
+.tremor-DateRangePicker-calendarButtonIcon{
+  @apply text-default
+}
+
+.tremor-DateRangePicker-calendarModal,
+.tremor-DateRangePicker-dropdownModal {
+  @apply bg-default border-subtle shadow-dropdown
+}
+
+.tremor-DateRangePicker-calendarBodyDate button{
+  @apply text-default  hover:bg-emphasis
+}
+
+.tremor-DateRangePicker-calendarBodyDate button:disabled,
+.tremor-DateRangePicker-calendarBodyDate button[disabled]{
+  @apply opacity-25
+}
+
+.tremor-DateRangePicker-calendarHeader button{
+  @apply border-default text-default
+}
+
+.tremor-DateRangePicker-calendarBodyDate .bg-gray-100{
+  @apply bg-subtle
+}
+
+.tremor-DateRangePicker-calendarBodyDate .bg-gray-500{
+  @apply !bg-brand-default text-inverted
+}
+
+
 .tremor-Card-root {
-  @apply p-5;
+  @apply p-5 bg-default;
 }
 
 .tremor-TableCell-root {

packages/features/insights/filters/DateSelect.tsx

@@ -16,7 +16,7 @@ export const DateSelect = () => {
   const startValue = startDate?.toDate() || null;
   const endValue = endDate?.toDate() || null;
   return (
-    <div className="custom-date w-full sm:w-auto">
+    <div className="custom-date max-w-96 w-full sm:w-auto">
       <DateRangePicker
         value={[startValue, endValue, range]}
         defaultValue={[startValue, endValue, range]}
@@ -63,7 +63,6 @@ export const DateSelect = () => {
         minDate={currentDate.subtract(2, "year").toDate()}
         maxDate={currentDate.toDate()}
         color="gray"
-        className="h-[42px]"
       />
     </div>
   );

packages/features/insights/filters/index.tsx

@@ -37,7 +37,7 @@ const ClearFilters = () => {
 
 export const Filters = () => {
   return (
-    <div className="mb-4 ml-auto mt-6 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:justify-between">
+    <div className="ml-auto mt-6 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:justify-between">
       <div className="flex flex-col gap-2 sm:flex-row sm:flex-nowrap sm:justify-start">
         <TeamAndSelfList />