chore(root): Release 2024-10-04 08:06 (#6614)

novuhq · Oct 4, 2024 · 07c41f1 · 07c41f1
2 parents 8a62e62 + 337a803
commit 07c41f1
Show file tree

Hide file tree

Showing 28 changed files with 1,028 additions and 209 deletions.
diff --git a/.source b/.source
diff --git a/apps/dashboard/src/components/primitives/badge.tsx b/apps/dashboard/src/components/primitives/badge.tsx
@@ -7,7 +7,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary/5 text-primary/50',
+        default: 'border-transparent bg-secondary-alpha-100 text-secondary-500',
         destructive: 'border-transparent bg-destructive/10 text-destructive',
         success: 'border-transparent bg-success/10 text-success',
         warning: 'border-transparent bg-warning/10 text-warning',

diff --git a/apps/dashboard/src/components/primitives/button.tsx b/apps/dashboard/src/components/primitives/button.tsx
@@ -9,13 +9,13 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
+          'bg-gradient-to-b from-secondary-alpha-900 to-secondary-900 text-secondary-foreground shadow-[inset_0_-4px_2px_-2px_hsl(var(--secondary-900)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--secondary-900)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
+        primary:
           'bg-gradient-to-b from-primary/90 to-primary text-primary-foreground shadow-[inset_0_-4px_2px_-2px_hsl(var(--primary)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--primary)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
-        novu: 'bg-gradient-to-b from-novu/90 to-novu text-novu-foreground shadow-[inset_0_-4px_2px_-2px_hsl(var(--novu)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--novu)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
         destructive:
           'bg-gradient-to-b from-destructive/90 to-destructive text-destructive-foreground shadow-[inset_0_-4px_2px_-2px_hsl(var(--destructive)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--destructive)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
         outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        ghost: 'hover:bg-accent',
       },
       size: {
         default: 'h-9 p-2.5',

diff --git a/apps/dashboard/src/components/primitives/popover.tsx b/apps/dashboard/src/components/primitives/popover.tsx
@@ -19,6 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
+        //TODO: Change bg and text colors
         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
         className
       )}

diff --git a/apps/dashboard/src/components/primitives/step.tsx b/apps/dashboard/src/components/primitives/step.tsx
@@ -8,7 +8,7 @@ const stepVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-primary/5 bg-primary/2.5 text-primary/30',
+        default: 'border-secondary-alpha-100 bg-secondary-alpha-50 text-secondary-alpha-400',
         feature: 'border-feature/30  bg-foreground/2.5 text-feature/30',
         information: 'border-information/30 bg-foreground/2.5 text-information/30',
         highlighted: 'border-highlighted/30  bg-foreground/2.5 text-highlighted/30',

diff --git a/apps/dashboard/src/components/primitives/tag.tsx b/apps/dashboard/src/components/primitives/tag.tsx
@@ -8,7 +8,7 @@ const tagVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary/5 text-primary/50',
+        default: 'border-transparent bg-secondary-alpha-100 text-secondary-alpha-500',
         feature: 'border-transparent bg-feature/10 text-feature',
         information: 'border-transparent bg-information/10 text-information',
       },

diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
@@ -4,22 +4,52 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222 32% 8%;
 
-    --card: 0 0% 98%;
-    --card-foreground: 222 32% 8%;
+    --foreground-0: 210 10% 100%;
+    --foreground-50: 210 10% 96%;
+    --foreground-100: 210 30% 96%;
+    --foreground-200: 220 18% 90%;
+    --foreground-300: 219 15% 82%;
+    --foreground-400: 220 11% 64%;
+    --foreground-500: 221 8% 48%;
+    --foreground-600: 222 11% 36%;
+    --foreground-700: 221 16% 20%;
+    --foreground-800: 227 17% 16%;
+    --foreground-900: 226 21% 12%;
+    --foreground-950: 222 32% 8%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222 32% 8%;
+    --primary: 346 73% 50%;
+    --primary-foreground: 0 0% 100%;
 
-    --novu: 346 73% 50%;
-    --novu-foreground: 0 0% 100%;
+    --secondary-0: 210 10% 100%;
+    --secondary-50: 210 10% 96%;
+    --secondary-100: 210 30% 96%;
+    --secondary-200: 220 18% 90%;
+    --secondary-300: 219 15% 82%;
+    --secondary-400: 220 11% 64%;
+    --secondary-500: 221 8% 48%;
+    --secondary-600: 222 11% 36%;
+    --secondary-700: 221 16% 20%;
+    --secondary-800: 227 17% 16%;
+    --secondary-900: 226 21% 12%;
+    --secondary-950: 222 32% 8%;
+    --secondary: 0 0 0%;
+    --secondary-foreground: 0 0% 100%;
 
-    --primary: 222 32% 8%;
-    --primary-foreground: 0 0% 100%;
+    /* Secondary scale in alpha that looks the same on white background */
+    --secondary-alpha-50: 0 0% 69% / 0.05;
+    --secondary-alpha-100: 210 30% 61% / 0.1;
+    --secondary-alpha-200: 220 18% 50% / 0.2;
+    --secondary-alpha-300: 218 23% 40% / 0.3;
+    --secondary-alpha-400: 220 100% 10% / 0.4;
+    --secondary-alpha-500: 240 100% 2% / 0.5;
+    --secondary-alpha-600: 0 0% 0% / 0.6;
+    --secondary-alpha-700: 0 0% 0% / 0.7;
+    --secondary-alpha-800: 0 0% 0% / 0.8;
+    --secondary-alpha-900: 231 100% 3% / 0.9;
+    --secondary-alpha-950: 219 88% 3% / 0.95;
 
     --accent: 0 0% 96.1%;
-    --accent-foreground: 222 32% 8%;
 
     --destructive: 355 96% 60%;
     --destructive-foreground: 0 0% 100%;
@@ -40,12 +70,6 @@
     --input: 0 0% 89.8%;
     --ring: 222 32% 8%;
 
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-
     --radius: 0.5rem;
   }
 }
@@ -54,6 +78,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground-950;
   }
 }
diff --git a/apps/dashboard/src/routes/primitives.tsx b/apps/dashboard/src/routes/primitives.tsx
@@ -22,16 +22,16 @@ export const Primitives = () => {
       <h1>Home page</h1>
       <div className="flex w-full flex-col items-center justify-center gap-4">
         <h2 className="text-lg font-semibold">Buttons</h2>
-        <Button>Primary button</Button>
-        <Button variant="novu">Novu button</Button>
+        <Button>Default button</Button>
+        <Button variant="primary">Primary button</Button>
         <Button variant="destructive">Destructive button</Button>
         <Button variant="ghost">Ghost button</Button>
         <Button variant="outline">Outline button</Button>
       </div>
 
       <div className="flex w-full flex-col items-center justify-center gap-4">
         <h2 className="text-lg font-semibold">Badges</h2>
-        <Badge>Primary badge</Badge>
+        <Badge>Secondary badge</Badge>
         <Badge variant="success">Success badge</Badge>
         <Badge variant="destructive">Destructive badge</Badge>
         <Badge variant="warning">Warning badge</Badge>

diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
@@ -8,6 +8,86 @@ export default {
       sm: '0px 1px 2px 0px #1018280F,0px 1px 3px 0px #1018281A',
       DEFAULT: '0px 16px 32px -12px #0E121B1A',
     },
+    colors: {
+      background: 'hsl(var(--background))',
+      foreground: {
+        0: 'hsl(var(--foreground-0))',
+        50: 'hsl(var(--foreground-50))',
+        100: 'hsl(var(--foreground-100))',
+        200: 'hsl(var(--foreground-200))',
+        300: 'hsl(var(--foreground-300))',
+        400: 'hsl(var(--foreground-400))',
+        500: 'hsl(var(--foreground-500))',
+        600: 'hsl(var(--foreground-600))',
+        700: 'hsl(var(--foreground-700))',
+        800: 'hsl(var(--foreground-800))',
+        900: 'hsl(var(--foreground-900))',
+        950: 'hsl(var(--foreground-950))',
+      },
+      neutral: {
+        DEFAULT: 'hsl(var(--secondary))',
+        0: 'hsl(var(--secondary-0))',
+        50: 'hsl(var(--secondary-50))',
+        100: 'hsl(var(--secondary-100))',
+        200: 'hsl(var(--secondary-200))',
+        300: 'hsl(var(--secondary-300))',
+        400: 'hsl(var(--secondary-400))',
+        500: 'hsl(var(--secondary-500))',
+        600: 'hsl(var(--secondary-600))',
+        700: 'hsl(var(--secondary-700))',
+        800: 'hsl(var(--secondary-800))',
+        900: 'hsl(var(--secondary-900))',
+        950: 'hsl(var(--secondary-950))',
+        1000: 'hsl(var(--secondary-1000))',
+        foreground: 'hsl(var(--secondary-foreground))',
+      },
+      'secondary-alpha': {
+        50: 'hsl(var(--secondary-alpha-50))',
+        100: 'hsl(var(--secondary-alpha-100))',
+        200: 'hsl(var(--secondary-alpha-200))',
+        300: 'hsl(var(--secondary-alpha-300))',
+        400: 'hsl(var(--secondary-alpha-400))',
+        500: 'hsl(var(--secondary-alpha-500))',
+        600: 'hsl(var(--secondary-alpha-600))',
+        700: 'hsl(var(--secondary-alpha-700))',
+        800: 'hsl(var(--secondary-alpha-800))',
+        900: 'hsl(var(--secondary-alpha-900))',
+        950: 'hsl(var(--secondary-alpha-950))',
+        1000: 'hsl(var(--secondary-alpha-1000))',
+      },
+      primary: {
+        DEFAULT: 'hsl(var(--primary))',
+        foreground: 'hsl(var(--primary-foreground))',
+      },
+      accent: {
+        DEFAULT: 'hsl(var(--accent))',
+      },
+      destructive: {
+        DEFAULT: 'hsl(var(--destructive))',
+        foreground: 'hsl(var(--destructive-foreground))',
+      },
+      success: {
+        DEFAULT: 'hsl(var(--success))',
+      },
+      warning: {
+        DEFAULT: 'hsl(var(--warning))',
+      },
+      feature: {
+        DEFAULT: 'hsl(var(--feature))',
+      },
+      information: {
+        DEFAULT: 'hsl(var(--information))',
+      },
+      highlighted: {
+        DEFAULT: 'hsl(var(--highlighted))',
+      },
+      stable: {
+        DEFAULT: 'hsl(var(--stable))',
+      },
+      border: 'hsl(var(--border))',
+      input: 'hsl(var(--input))',
+      ring: 'hsl(var(--ring))',
+    },
     extend: {
       opacity: {
         2.5: 0.025,
@@ -17,62 +97,6 @@ export default {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        novu: {
-          DEFAULT: 'hsl(var(--novu))',
-          foreground: 'hsl(var(--novu-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        success: {
-          DEFAULT: 'hsl(var(--success))',
-        },
-        warning: {
-          DEFAULT: 'hsl(var(--warning))',
-        },
-        feature: {
-          DEFAULT: 'hsl(var(--feature))',
-        },
-        information: {
-          DEFAULT: 'hsl(var(--information))',
-        },
-        highlighted: {
-          DEFAULT: 'hsl(var(--highlighted))',
-        },
-        stable: {
-          DEFAULT: 'hsl(var(--stable))',
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          1: 'hsl(var(--chart-1))',
-          2: 'hsl(var(--chart-2))',
-          3: 'hsl(var(--chart-3))',
-          4: 'hsl(var(--chart-4))',
-          5: 'hsl(var(--chart-5))',
-        },
-      },
     },
   },
   plugins: [require('tailwindcss-animate')],

diff --git a/apps/web/src/ee/billing/components/Plan.tsx b/apps/web/src/ee/billing/components/Plan.tsx
@@ -8,15 +8,11 @@ import { planList } from '../utils/planList';
 import { PlanFooter } from './PlanFooter';
 import { FreeTrialPlanWidget } from './FreeTrialPlanWidget';
 import { useSubscriptionContext } from './SubscriptionProvider';
-import { ActivePlanBanner } from './billingV2/ActivePlanBanner';
-import { useFeatureFlag } from '../../../hooks';
-import { FeatureFlagsKeysEnum } from '@novu/shared';
 
 export const Plan = () => {
   const { colorScheme } = useMantineTheme();
   const isDark = colorScheme === 'dark';
   const { isLoading, trial } = useSubscriptionContext();
-  const isImprovedBillingEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_IMPROVED_BILLING_ENABLED);
 
   if (isLoading || trial.daysLeft === null) {
     return (
@@ -28,8 +24,7 @@ export const Plan = () => {
 
   return (
     <>
-      {!isImprovedBillingEnabled && <FreeTrialPlanWidget isDark={isDark} />}
-      {isImprovedBillingEnabled && <ActivePlanBanner />}
+      <FreeTrialPlanWidget isDark={isDark} />
       <PlanWrapper isDark={isDark}>
         <PlanHeader />
         {planList.map((row, index) => (