Improved "No sprints left", larger font sizes for IssueLine

packages/frontend/src/pages/Timeline.tsx

@@ -10,6 +10,7 @@ import { useSelection } from "@/components/selection-provider";
 import { SprintForm } from "@/components/sprint-form";
 import StatusTag from "@/components/status-tag";
 import TopBar from "@/components/top-bar";
+import { Button } from "@/components/ui/button";
 import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { BREATHING_ROOM } from "@/lib/layout";
 import {
@@ -238,13 +239,7 @@ export default function Timeline() {
           </div>
         )}
 
-        {selectedOrganisationId && selectedProjectId && sprints.length === 0 && (
-          <div className="text-sm text-muted-foreground text-pretty">
-            No sprints yet. Create a sprint from the organisations menu to start planning work.
-          </div>
-        )}
-
-        {selectedOrganisationId && selectedProjectId && sprints.length > 0 && (
+        {selectedOrganisationId && selectedProjectId && (
           <div className="border">
             <ResizablePanelGroup className="h-full">
               <ResizablePanel
@@ -278,6 +273,7 @@ export default function Timeline() {
                   </div>
                 </div>
               </ResizablePanel>
+              {sprints.length > 0 ? (
                 <ResizablePanel id="timeline-grid">
                   <div className="overflow-x-auto" ref={scrollRef}>
                     <div style={{ minWidth: `${weeks.length * WEEK_COLUMN_WIDTH}px` }}>
@@ -378,6 +374,20 @@ export default function Timeline() {
                     </div>
                   </div>
                 </ResizablePanel>
+              ) : (
+                <ResizablePanel
+                  id="timeline-grid"
+                  className={"flex flex-col items-center justify-center gap-2"}
+                >
+                  No sprints yet...
+                  <SprintForm
+                    projectId={selectedProjectId}
+                    mode="create"
+                    sprints={sprints}
+                    trigger={<Button variant={"outline"}>Create a sprint</Button>}
+                  />
+                </ResizablePanel>
+              )}
             </ResizablePanelGroup>
           </div>
         )}
@@ -399,7 +409,7 @@ function SprintLabelContent({
     <>
       <div className="flex items-center justify-between gap-3">
         <span
-          className="text-sm font-medium"
+          className="text-md font-medium"
           style={{
             color: sprint.color || DEFAULT_SPRINT_COLOUR,
           }}
@@ -435,7 +445,7 @@ function BacklogLabelContent({
 }) {
   return (
     <>
-      <div className="text-sm font-medium">Backlog</div>
+      <div className="text-md font-medium">Backlog</div>
       {issueGroup.unassigned.length === 0 && (
         <div className="text-xs text-muted-foreground text-pretty">No unassigned issues.</div>
       )}
@@ -466,12 +476,12 @@ function IssueLine({ issue, statusColour }: { issue: IssueResponse; statusColour
         <button
           type="button"
           className={cn(
-            `flex items-center gap-${BREATHING_ROOM} text-xs text-muted-foreground`,
+            `flex items-center gap-${BREATHING_ROOM} text-sm text-muted-foreground`,
             "hover:text-foreground cursor-pointer",
           )}
         >
           <span className="tabular-nums">{issue.Issue.number.toString().padStart(3, "0")}</span>
-          <StatusTag status={issue.Issue.status} colour={statusColour} className="text-[10px]" />
+          <StatusTag status={issue.Issue.status} colour={statusColour} className="text-[10.5px] font-600" />
           <span className="truncate">{issue.Issue.title}</span>
         </button>
       }