orb style

Author: sdairs

apps/web/src/app/[id]/page.tsx

@@ -57,7 +57,7 @@ export default function AppPage({ params }: { params: Promise<{ id: string }> })
   const Component = toolState === 'configured' ? tool_comps.Dashboard : tool_comps.Readme;
 
   return (
-    <div className="py-6">
+    <div className="py-6 mb-6 pb-6">
       <div className="flex flex-col gap-6">
         <div className="flex items-center gap-2">
           <h1 className="text-2xl font-bold">{TOOLS[id].name}</h1>

apps/web/src/components/tools/orb/dashboard.tsx

@@ -93,9 +93,8 @@ export default function OrbDashboard() {
             {/* Charts Grid */}
             <div className="grid gap-4 grid-cols-1">
                 <SubsChart data={subsTimeSeriesData} />
-
             </div>
-            <div className="grid gap-4 md:grid-cols-2">
+            <div className="grid gap-4 md:grid-cols-2 max-h-[400px]">
                 <SubsByPlanTsChart data={subsByPlanTsData} />
                 <SubsByPlanChart data={subsByPlanData} />
             </div>

apps/web/src/components/tools/orb/sub-by-plan-chart.tsx

@@ -60,7 +60,7 @@ export function SubsByPlanChart({ data: rawData }: SubsByPlanChartData) {
             <CardContent className="flex-1 pb-0">
                 <ChartContainer
                     config={chartConfig}
-                    className="mx-auto aspect-square max-h-[300px]"
+                    className="mx-auto"
                 >
                     <PieChart>
                         <Pie data={data} dataKey="subs" nameKey="plan" />

apps/web/src/components/tools/orb/sub-by-plan-ts-chart.tsx

@@ -64,6 +64,8 @@ export function SubsByPlanTsChart({ data: rawData }: SubsByPlanTsChartData) {
                         margin={{
                             left: 12,
                             right: 12,
+                            top: 12,
+                            bottom: 12,
                         }}
                     >
                         <XAxis
@@ -89,14 +91,15 @@ export function SubsByPlanTsChart({ data: rawData }: SubsByPlanTsChartData) {
                             }}
                         />
                         <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-                        {planNames.map((plan) => (
+                        {planNames.map((plan, i) => (
                             <Line
                                 key={plan}
                                 type="monotone"
                                 dataKey={plan}
                                 name={plan}
                                 strokeWidth={2}
                                 dot={false}
+                                stroke={`hsl(var(--chart-${i}))`}
                             />
                         ))}
                     </LineChart>

apps/web/src/components/tools/orb/subs-chart.tsx

@@ -25,7 +25,7 @@ export interface SubsChartProps {
 
 const chartConfig = {
     invoices: {
-        color: "hsl(var(--primary))",
+        color: "hsl(var(--chart-1))",
         label: "New Subscriptions",
     },
 } satisfies ChartConfig
@@ -43,6 +43,8 @@ export function SubsChart({ data }: SubsChartProps) {
                         margin={{
                             left: 12,
                             right: 12,
+                            top: 12,
+                            bottom: 12
                         }}
                     >
                         <XAxis
@@ -77,11 +79,9 @@ export function SubsChart({ data }: SubsChartProps) {
                             strokeWidth={2}
                             activeDot={{
                                 r: 4,
-                                style: { fill: "hsl(var(--primary))" },
-                            }}
-                            style={{
-                                stroke: "hsl(var(--primary))",
+                                style: { fill: chartConfig.invoices.color },
                             }}
+                            stroke={chartConfig.invoices.color}
                         />
                     </LineChart>
                 </ChartContainer>