feat(time-table): Increase lock button size

Author: PrettyCoffee

src/components/ui/icon-button/icon-button.tsx

@@ -29,6 +29,7 @@ interface IconButtonProps
   look?: Exclude<ButtonProps["look"], "link">
   titleSide?: TitleTooltipProps["side"]
   hideTitle?: boolean
+  iconSize?: IconProps["size"]
 }
 
 export const IconButton = ({
@@ -42,6 +43,7 @@ export const IconButton = ({
   hideTitle,
   titleSide,
   iconColor = "current",
+  iconSize = size,
   ...delegated
 }: IconButtonProps) => (
   <TitleTooltip title={hideTitle ? undefined : title} side={titleSide} asChild>
@@ -52,7 +54,7 @@ export const IconButton = ({
       {...delegated}
     >
       <VisuallyHidden>{title}</VisuallyHidden>
-      <Icon icon={icon} size={size} color={iconColor} filled={filled} />
+      <Icon icon={icon} size={iconSize} color={iconColor} filled={filled} />
     </Button>
   </TitleTooltip>
 )

src/features/time-table/time-table-header.tsx

@@ -69,7 +69,7 @@ const DateDurations = ({ entries }: { entries: TimeEntry[] }) => {
       <Tooltip.Trigger asChild>
         <button className="rounded-md">{totalDuration}</button>
       </Tooltip.Trigger>
-      <Tooltip.Content align="end" asChild>
+      <Tooltip.Content align="end" side="bottom" asChild>
         <div className={cn(vstack({ justify: "end" }), "text-sm")}>
           {totalTimeByProject.map(({ duration, projectId }) => (
             <span
@@ -112,17 +112,20 @@ export const TimeTableHeader = ({
         }}
         className={cn(
           hstack({ align: "center" }),
-          "h-10 rounded-t-lg border-b border-stroke-gentle bg-background-page",
+          "h-11 rounded-t-lg border-b border-stroke-gentle bg-background-page",
           "sticky top-18 z-20",
           !isIntersecting && "rounded-lg"
         )}
       >
         <h2 className="mr-2 pl-4 text-base">{formatDate(date)}</h2>
         <IconButton
           icon={isEditable ? Unlock : Lock}
-          title="Toggle editability"
+          title={
+            isEditable ? "Switch to summary mode" : "Switch to editable mode"
+          }
+          titleSide="right"
           iconColor="muted"
-          size="sm"
+          iconSize="sm"
           onClick={() => editableDatesData.actions.toggle(date)}
         />
         <div className="flex-1" />

src/features/time-table/time-table-summary.tsx

@@ -50,7 +50,7 @@ const summarize = (entries: TimeEntry[]): EntrySummary[] => {
 }
 
 const SummaryBlock = ({ description, projectId, minutes }: EntrySummary) => (
-  <div className={cn(surface({ look: "card", size: "md" }), vstack({}), "m-2")}>
+  <div className={cn(surface({ look: "card", size: "md" }), vstack({}))}>
     <div className={cn("line-clamp-2", !description && "text-text-muted")}>
       {description || "No description"}
     </div>
@@ -69,8 +69,8 @@ export const TimeTableSummary = ({ entries }: { entries: TimeEntry[] }) => {
   const summary = useMemo(() => summarize(entries), [entries])
 
   return (
-    <div className="@container">
-      <div className="grid grid-cols-1 @xl:grid-cols-2 @3xl:grid-cols-3">
+    <div className="@container m-2">
+      <div className="grid grid-cols-1 gap-4 @xl:grid-cols-2 @3xl:grid-cols-3">
         {summary.map(entry => (
           <SummaryBlock key={entry.projectId + entry.description} {...entry} />
         ))}