fix: ui for weekly planning; now more clarity

cabcookie · Dec 9, 2024 · 130414b · 130414b
1 parent fcb3d0f
commit 130414b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 25 deletions.
diff --git a/components/planning/DecisionButton.tsx b/components/planning/DecisionButton.tsx
@@ -18,10 +18,10 @@ const DecisionButton: FC<DecisionButtonProps> = ({
   disabled,
 }) => (
   <Button
-    size="sm"
     onClick={makeDecision}
     variant={selected ? "default" : "outline"}
     disabled={!!isLoading || disabled}
+    className="px-2 h-8"
   >
     {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
     {label}

diff --git a/components/planning/DecisionSection.tsx b/components/planning/DecisionSection.tsx
@@ -41,7 +41,7 @@ const DecisionSection: FC<DecisionSectionProps> = ({
   return (
     weekPlan && (
       <div className={cn(className)}>
-        <Label htmlFor={`${project.id}-decision`} className="font-semibold">
+        <Label htmlFor={`${project.id}-decision`}>
           Can you make progress on this project this week?
         </Label>
 

diff --git a/components/planning/project/MakeProjectDecision.tsx b/components/planning/project/MakeProjectDecision.tsx
@@ -18,7 +18,7 @@ const MakeProjectDecision: FC<MakeProjectDecisionProps> = ({
 
       <DecisionSection
         project={project}
-        className="flex flex-col space-y-2"
+        className="mx-1 md:mx-2 flex flex-col space-y-2"
         saveOnHoldDate={saveOnHoldDate}
       />
     </div>

diff --git a/components/planning/week/PlanWeekContextWork.tsx b/components/planning/week/PlanWeekContextWork.tsx
@@ -33,15 +33,17 @@ const PlanWeekContextWork = () => {
             value={id}
           >
             <Accordion type="single" collapsible>
-              {projects.map((project) => (
-                <MakeProjectDecision
-                  key={project.id}
-                  project={project}
-                  saveOnHoldDate={(onHoldTill) =>
-                    saveProjectDates({ projectId: project.id, onHoldTill })
-                  }
-                />
-              ))}
+              <div className="space-y-6">
+                {projects.map((project) => (
+                  <MakeProjectDecision
+                    key={project.id}
+                    project={project}
+                    saveOnHoldDate={(onHoldTill) =>
+                      saveProjectDates({ projectId: project.id, onHoldTill })
+                    }
+                  />
+                ))}
+              </div>
             </Accordion>
           </DefaultAccordionItem>
         ))}

diff --git a/components/planning/week/ProcessProjects.tsx b/components/planning/week/ProcessProjects.tsx
@@ -1,28 +1,30 @@
+import useWeekPlan from "@/api/useWeekPlan";
 import { PlanningProjectFilterProvider } from "@/components/planning/usePlanningProjectFilter";
 import PlanWeekAction from "@/components/planning/week/PlanWeekAction";
 import PlanWeekContextNotWork from "@/components/planning/week/PlanWeekContextNotWork";
 import PlanWeekContextWork from "@/components/planning/week/PlanWeekContextWork";
 import PlanWeekFilter from "@/components/planning/week/PlanWeekFilter";
 import PlanWeekStatistics from "@/components/planning/week/PlanWeekStatistics";
 import { useContextContext } from "@/contexts/ContextContext";
-import { FC } from "react";
 
-interface ProcessProjectsProps {}
-
-const ProcessProjects: FC<ProcessProjectsProps> = (props) => {
+const ProcessProjects = () => {
   const { context } = useContextContext();
+  const { weekPlan } = useWeekPlan();
+
   return (
-    <>
-      <PlanWeekAction label="Review Projects" />
-      <PlanningProjectFilterProvider>
-        <PlanWeekStatistics />
+    weekPlan && (
+      <>
+        <PlanWeekAction label="Review Projects" />
+        <PlanningProjectFilterProvider>
+          <PlanWeekStatistics />
 
-        <PlanWeekFilter />
+          <PlanWeekFilter />
 
-        {context !== "work" && <PlanWeekContextNotWork />}
-        {context === "work" && <PlanWeekContextWork />}
-      </PlanningProjectFilterProvider>
-    </>
+          {context !== "work" && <PlanWeekContextNotWork />}
+          {context === "work" && <PlanWeekContextWork />}
+        </PlanningProjectFilterProvider>
+      </>
+    )
   );
 };