wip

midday-ai · Dec 28, 2023 · 5c81409 · 5c81409
1 parent 357c65b
commit 5c81409
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 25 deletions.
diff --git a/apps/dashboard/src/components/charts/chart-period.tsx b/apps/dashboard/src/components/charts/chart-period.tsx
@@ -9,15 +9,15 @@ import { format } from "date-fns";
 import { useAction } from "next-safe-action/hook";
 import { parseAsString, useQueryStates } from "next-usequerystate";
 
-export function ChartPeriod({ initialValue, defaultValue, disabled }) {
+export function ChartPeriod({ defaultValue, value, disabled }) {
   let placeholder;
 
   const { execute } = useAction(changeChartPeriodAction);
 
   const [state, setState] = useQueryStates(
     {
-      from: parseAsString.withDefault(initialValue?.from ?? undefined),
-      to: parseAsString.withDefault(initialValue?.to ?? undefined),
+      from: parseAsString.withDefault(value?.from || defaultValue?.from),
+      to: parseAsString.withDefault(value?.to || defaultValue?.to),
     },
     {
       shallow: false,

diff --git a/apps/dashboard/src/components/charts/chart-selectors.tsx b/apps/dashboard/src/components/charts/chart-selectors.tsx
@@ -9,7 +9,7 @@ export async function ChartSelectors({ value, defaultValue }) {
   return (
     <div className="flex justify-between mt-6">
       <ChartType initialValue={chartType} />
-      <ChartPeriod initialValue={value} defaultValue={defaultValue} />
+      <ChartPeriod value={value} defaultValue={defaultValue} />
     </div>
   );
 }
diff --git a/apps/dashboard/src/components/team-menu.tsx b/apps/dashboard/src/components/team-menu.tsx
@@ -46,7 +46,7 @@ export async function TeamMenu() {
           <DropdownMenuItem asDialogTrigger className="border-b-[1px]">
             <DialogTrigger className="w-full p-1 flex items-center space-x-2">
               <Icons.Add />
-              <span>Create team</span>
+              <span className="font-medium text-sm">Create team</span>
             </DialogTrigger>
           </DropdownMenuItem>
           <DialogContent className="max-w-[455px]">
@@ -75,7 +75,7 @@ export async function TeamMenu() {
             return (
               <DropdownMenuItem key={team.id}>
                 <div className="flex justify-between w-full p-1">
-                  <div className="flex space-x-2">
+                  <div className="flex space-x-2 items-center">
                     <Avatar className="rounded-sm w-[24px] h-[24px]">
                       <AvatarImage src={team.logo_url} />
                       <AvatarFallback className="rounded-sm w-[24px] h-[24px]">
@@ -85,7 +85,7 @@ export async function TeamMenu() {
                         </span>
                       </AvatarFallback>
                     </Avatar>
-                    <span>{team.name}</span>
+                    <span className="text-sm">{team.name}</span>
                   </div>
                   {team.id === userData.team.id && <Icons.Check />}
                 </div>

diff --git a/packages/ui/src/components/month-range-picker.tsx b/packages/ui/src/components/month-range-picker.tsx
@@ -5,7 +5,6 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import React, { useState } from "react";
 import { cn } from "../utils";
 import { Button } from "./button";
-import { buttonVariants } from "./button";
 
 const monthsNumber = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
@@ -109,26 +108,35 @@ export const MonthRangePicker = ({ date, setDate }: Props) => {
     const isRange = isSelected && !isSelectedDate;
 
     return (
-      <Button
+      <button
+        type="button"
         key={month}
-        variant="ghost"
         className={cn(
-          "!text-xs font-normal mb-2",
-          isSelectedDate && buttonVariants({ variant: "default" }),
-          isSelectedDate &&
-            "!rounded-md hover:bg-primary hover:text-primary-foreground",
-          isRange && buttonVariants({ variant: "secondary" }),
-          isRange &&
-            "hover:bg-secondary hover:text-secondary-foreground !rounded-none",
-          isStart && "!rounded-none !rounded-l-md",
-          isEnd && "!rounded-none !rounded-r-md",
+          "!w-[40px] !h-[40px] m-0 pr-[60px] rounded-none mb-1.5 bg-transparent",
+          isStart && toDate && "bg-secondary rounded-l-full",
+          isEnd && "bg-secondary rounded-r-full pr-0",
+          isRange && "bg-secondary"
         )}
         onClick={() => handleMonthClick(monthStart)}
       >
-        {new Intl.DateTimeFormat("en-US", { month: "short" }).format(
-          monthStart,
-        )}
-      </Button>
+        <div
+          className={cn(
+            "flex items-center justify-center !w-[40px] !h-[40px] !text-xs font-medium hover:rounded-full border border-transparent hover:border-primary",
+            isSelectedDate && "bg-primary text-primary-foreground",
+            isSelectedDate &&
+              "rounded-full hover:bg-primary hover:text-primary-foreground",
+
+            isStart && "",
+            isEnd && ""
+          )}
+        >
+          <span>
+            {new Intl.DateTimeFormat("en-US", { month: "short" }).format(
+              monthStart
+            )}
+          </span>
+        </div>
+      </button>
     );
   };
 
@@ -163,10 +171,10 @@ export const MonthRangePicker = ({ date, setDate }: Props) => {
       </div>
 
       <div className="flex mt-4 justify-between">
-        <div className="grid grid-cols-3 w-[47%]">
+        <div className="grid grid-cols-3">
           {renderYear(today.getFullYear() + yearOffset)}
         </div>
-        <div className="grid grid-cols-3 w-[47%]">
+        <div className="grid grid-cols-3">
           {renderYear(today.getFullYear() + yearOffset + 1)}
         </div>
       </div>