add rebrand landing page (#211)

apps/web/src/app/(dashboard)/dashboard/email-chart.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {
   BarChart,
   Bar,
+  Rectangle,
   XAxis,
   YAxis,
   Tooltip,
@@ -22,6 +23,37 @@ interface EmailChartProps {
   domain: string | null;
 }
 
+const STACK_ORDER: string[] = [
+  "delivered",
+  "bounced",
+  "complained",
+  "opened",
+  "clicked",
+] as const;
+
+type StackKey = (typeof STACK_ORDER)[number];
+
+function createRoundedTopShape(currentKey: StackKey) {
+  const currentIndex = STACK_ORDER.indexOf(currentKey);
+  return (props: any) => {
+    const payload = props.payload as
+      | Partial<Record<StackKey, number>>
+      | undefined;
+    let hasAbove = false;
+    for (let i = currentIndex + 1; i < STACK_ORDER.length; i++) {
+      const key = STACK_ORDER[i];
+      const val = key ? (payload?.[key] ?? 0) : 0;
+      if (val > 0) {
+        hasAbove = true;
+        break;
+      }
+    }
+
+    const radius = hasAbove ? [0, 0, 0, 0] : [2.5, 2.5, 0, 0];
+    return <Rectangle {...props} radius={radius as any} />;
+  };
+}
+
 export default function EmailChart({ days, domain }: EmailChartProps) {
   const domainId = domain ? Number(domain) : undefined;
   const statusQuery = api.dashboard.emailTimeSeries.useQuery({
@@ -197,15 +229,32 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
                 dataKey="delivered"
                 stackId="a"
                 fill={currentColors.delivered}
+                shape={createRoundedTopShape("delivered")}
+              />
+              <Bar
+                dataKey="bounced"
+                stackId="a"
+                fill={currentColors.bounced}
+                shape={createRoundedTopShape("bounced")}
               />
-              <Bar dataKey="bounced" stackId="a" fill={currentColors.bounced} />
               <Bar
                 dataKey="complained"
                 stackId="a"
                 fill={currentColors.complained}
+                shape={createRoundedTopShape("complained")}
+              />
+              <Bar
+                dataKey="opened"
+                stackId="a"
+                fill={currentColors.opened}
+                shape={createRoundedTopShape("opened")}
+              />
+              <Bar
+                dataKey="clicked"
+                stackId="a"
+                fill={currentColors.clicked}
+                shape={createRoundedTopShape("clicked")}
               />
-              <Bar dataKey="opened" stackId="a" fill={currentColors.opened} />
-              <Bar dataKey="clicked" stackId="a" fill={currentColors.clicked} />
             </BarChart>
           </ResponsiveContainer>
         </div>

apps/web/src/app/(dashboard)/dashboard/reputation-metrics.tsx

@@ -94,7 +94,7 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
         <div className="w-1/2 border rounded-xl shadow p-4">
           <div className="flex justify-between">
             <div className=" flex items-center gap-2">
-              <div className="text-muted-foreground">Bounce Rate</div>
+              <div className="text-muted-foreground font-mono">Bounce Rate</div>
               <Tooltip>
                 <TooltipTrigger>
                   <InfoIcon className=" h-3.5  w-3.5 text-muted-foreground" />
@@ -108,7 +108,7 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
             <div></div>
           </div>
           <div className="flex items-baseline gap-4">
-            <div className="text-2xl mt-2">
+            <div className="text-2xl mt-2 font-mono">
               {metrics?.bounceRate.toFixed(2)}%
             </div>
             <StatusBadge status={bounceStatus} />
@@ -242,7 +242,9 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
         </div>
         <div className="w-1/2 border rounded-xl shadow p-4">
           <div className=" flex items-center gap-2">
-            <div className=" text-muted-foreground">Complaint Rate</div>
+            <div className=" text-muted-foreground font-mono">
+              Complaint Rate
+            </div>
             <Tooltip>
               <TooltipTrigger>
                 <InfoIcon className=" h-3.5 w-3.5 text-muted-foreground" />
@@ -254,7 +256,7 @@ export function ReputationMetrics({ days, domain }: ReputationMetricsProps) {
             </Tooltip>
           </div>
           <div className="flex items-baseline gap-4">
-            <div className="text-2xl mt-2">
+            <div className="text-2xl mt-2 font-mono">
               {metrics?.complaintRate.toFixed(2)}%
             </div>
             <StatusBadge status={complaintStatus} />

apps/web/src/components/AppSideBar.tsx

@@ -39,6 +39,7 @@ import { isSelfHosted } from "~/utils/common";
 import { usePathname } from "next/navigation";
 import { Badge } from "@usesend/ui/src/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@usesend/ui/src/avatar";
+import Image from "next/image";
 import {
   DropdownMenu,
   DropdownMenuContent,

apps/web/src/server/auth.ts

@@ -55,9 +55,9 @@ function getProviders() {
         allowDangerousEmailAccountLinking: true,
         authorization: {
           params: {
-            scope: 'read:user user:email'
-          }
-        }
+            scope: "read:user user:email",
+          },
+        },
       })
     );
   }