it-goats · john-sonz · Apr 27, 2022 · Apr 25, 2022 · Apr 25, 2022 · Apr 25, 2022
diff --git a/bode/bode/resources/tasks/api.py b/bode/bode/resources/tasks/api.py
@@ -15,7 +15,7 @@
 class Tasks(MethodView):
     @blueprint.response(200, TaskSchema(many=True))
     def get(self):
-        return Task.query.all()
+        return Task.query.order_by(Task.is_done, Task.due_date).all()
 
     @blueprint.arguments(TaskInputSchema)
     @blueprint.response(201, TaskSchema)

diff --git a/cabra/index.html b/cabra/index.html
@@ -5,6 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cabra</title>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/cabra/src/pages/Home.tsx b/cabra/src/pages/Home.tsx
@@ -1,18 +1,25 @@
 import "twin.macro";
 
-import CreateTaskForm from "./components/CreateTaskForm";
 import Layout from "./components/Layout";
-import RandomGoat from "./components/RandomGoat";
+import { Link } from "react-router-dom";
+import NavigationButton from "./components/NavigationButton";
+import { PlusIcon } from "@heroicons/react/solid";
 import TasksList from "./components/TasksList";
+import { routeHelpers } from "../routes";
 
 export default function HomePage() {
   return (
     <Layout>
-      <div tw="w-[90%] max-w-xl space-y-6 relative z-10">
-        <CreateTaskForm />
+      <div tw="w-[90%] max-w-2xl space-y-6 relative z-10">
+        <div tw="w-full flex justify-end">
+          <Link to={routeHelpers.task.new}>
+            <NavigationButton tw="bg-secondary text-stone-50">
+              <PlusIcon width={20} height={20} /> Add new task
+            </NavigationButton>
+          </Link>
+        </div>
         <TasksList />
       </div>
-      <RandomGoat />
     </Layout>
   );
 }
diff --git a/cabra/src/pages/TaskCreate.tsx b/cabra/src/pages/TaskCreate.tsx
@@ -0,0 +1,28 @@
+import "twin.macro";
+
+import { ArrowLeftIcon } from "@heroicons/react/solid";
+import CreateTaskForm from "./components/CreateTaskForm";
+import Layout from "./components/Layout";
+import NavigationButton from "./components/NavigationButton";
+import { useNavigate } from "react-router-dom";
+
+export default function TaskCreate() {
+  const navigate = useNavigate();
+  return (
+    <Layout>
+      <div tw="w-[90%] max-w-2xl p-4 rounded-xl bg-primary shadow-2xl">
+        <div tw="flex justify-between items-end mb-4">
+          <h1 tw="text-2xl text-stone-50 font-bold ">Create new task</h1>
+          <NavigationButton
+            tw="text-stone-50 bg-secondary"
+            onClick={() => navigate(-1)}
+          >
+            <ArrowLeftIcon height={20} width={20} />
+            Go Back
+          </NavigationButton>
+        </div>
+        <CreateTaskForm />
+      </div>
+    </Layout>
+  );
+}
diff --git a/cabra/src/pages/TaskDetails.tsx b/cabra/src/pages/TaskDetails.tsx
@@ -14,7 +14,7 @@ export default function TaskDetailsPage() {
   return (
     <Layout>
       <NavigationButton
-        tw="text-stone-50 bg-blue-800"
+        tw="text-stone-50 bg-secondary"
         onClick={() => navigate(-1)}
       >
         <ArrowLeftIcon height={20} width={20} /> Go Back

diff --git a/cabra/src/pages/TaskEdit.tsx b/cabra/src/pages/TaskEdit.tsx
@@ -38,11 +38,11 @@ export default function TaskEditPage() {
   if (isLoading || !data) return <Layout>Loading</Layout>;
   return (
     <Layout>
-      <div tw="w-[90%] max-w-xl">
+      <div tw="w-[90%] max-w-2xl p-4 bg-primary rounded-xl">
         <div tw="flex justify-between items-end mb-4">
           <h1 tw="text-2xl text-stone-50 font-bold ">Edit task</h1>
           <NavigationButton
-            tw="text-stone-50 bg-blue-800"
+            tw="text-stone-50 bg-secondary"
             onClick={() => navigate(-1)}
           >
             <ArrowLeftIcon height={20} width={20} />
@@ -52,7 +52,7 @@ export default function TaskEditPage() {
         <TaskForm task={data.data} onSubmit={editTask.mutateAsync} />
         <div tw="grid gap-4">
           <div tw="w-full">
-            <Label>subtasks:</Label>
+            <Label>Subtasks:</Label>
             <SubtasksListEdit parentId={id} />
           </div>
         </div>

diff --git a/cabra/src/pages/components/AddDependenceButton.tsx b/cabra/src/pages/components/AddDependenceButton.tsx
diff --git a/cabra/src/pages/components/CheckBox.tsx b/cabra/src/pages/components/CheckBox.tsx
@@ -1,15 +1,57 @@
-import tw, { styled } from "twin.macro";
+import tw, { TwStyle, styled } from "twin.macro";
 
+import { CheckCircleIcon } from "@heroicons/react/outline";
 import { InputHTMLAttributes } from "react";
 
-const StyledCheckboxInput = styled.input(
-  tw`flex items-center gap-2 p-2 rounded checked:bg-blue-500 checked:border-blue-500`
-);
-
-type Props = Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+type Props = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "id" | "size"
+> & {
   className?: string;
+  id: string;
+  size?: Size;
+};
+type Size = "sm" | "base" | "lg";
+
+const StyledInput = styled.input(tw`absolute h-0 w-0 opacity-0`);
+
+const labelSizes: Record<Size, TwStyle> = {
+  sm: tw`w-7 h-7`,
+  base: tw`w-9 h-9`,
+  lg: tw`w-11 h-11`,
+};
+
+const iconSizes: Record<Size, { height: number; width: number }> = {
+  sm: { height: 20, width: 20 },
+  base: { height: 24, width: 24 },
+  lg: { height: 28, width: 28 },
 };
 
-export default function Checkbox(props: Props) {
-  return <StyledCheckboxInput {...props} type="checkbox" />;
+const Label = styled.label<{ size: Size }>`
+  ${tw`select-none`}
+
+  .checkmark {
+    ${tw`place-items-center rounded grid cursor-pointer`}
+    ${tw`bg-slate-300 text-slate-400 transition-all shadow-xl hover:opacity-60`}
+    ${({ size }) => labelSizes[size]}
+  }
+
+  input:checked ~ .checkmark {
+    ${tw`bg-success text-green-900`}
+  }
+
+  input:focus ~ .checkmark {
+    ${tw`ring-2`}
+  }
+`;
+
+export default function Checkbox({ id, size = "base", ...props }: Props) {
+  return (
+    <Label id={id} size={size}>
+      <StyledInput {...props} id={id} type="checkbox" />
+      <span className="checkmark">
+        <CheckCircleIcon {...iconSizes[size]} />
+      </span>
+    </Label>
+  );
 }
diff --git a/cabra/src/pages/components/CreateTaskForm.tsx b/cabra/src/pages/components/CreateTaskForm.tsx
@@ -3,6 +3,8 @@ import { useMutation, useQueryClient } from "react-query";
 
 import { ITask } from "../../types/task";
 import TaskForm from "./TaskForm";
+import { routeHelpers } from "../../routes";
+import { useNavigate } from "react-router-dom";
 
 const emptyTask: Omit<ITask, "id"> = {
   description: "",
@@ -13,9 +15,13 @@ const emptyTask: Omit<ITask, "id"> = {
 };
 
 export default function CreateTaskForm() {
+  const navigate = useNavigate();
   const client = useQueryClient();
   const addTask = useMutation(createTask, {
-    onSuccess: () => client.invalidateQueries(getTasks.cacheKey),
+    onSuccess: () => {
+      client.invalidateQueries(getTasks.cacheKey);
+      navigate(routeHelpers.tasks);
+    },
   });
 
   return <TaskForm onSubmit={addTask.mutateAsync} task={emptyTask} />;

diff --git a/cabra/src/pages/components/MiniTaskDelete.tsx b/cabra/src/pages/components/MiniTaskDelete.tsx
@@ -15,7 +15,7 @@ export default function MiniTaskDelete({
   taskId,
 }: Props) {
   return (
-    <div tw="rounded-xl w-full bg-white shadow-2xl text-blue-800  p-1.5">
+    <div tw="rounded-xl w-full bg-tertiary shadow-2xl text-black  p-1.5">
       <p tw="flex items-center text-sm">
         {title}
         <NavigationButton

diff --git a/cabra/src/pages/components/NavigationButton.tsx b/cabra/src/pages/components/NavigationButton.tsx
@@ -1,7 +1,7 @@
 import tw, { styled } from "twin.macro";
 
 const NavigationButton = styled.button(
-  tw`flex items-center gap-2 font-bold p-2 rounded transform transition-transform hover:scale-105`
+  tw`flex items-center gap-2 font-bold p-2 shadow-xl rounded transform transition-transform hover:scale-105`
 );
 
 export default NavigationButton;
diff --git a/cabra/src/pages/components/SubtasksList.tsx b/cabra/src/pages/components/SubtasksList.tsx
@@ -46,7 +46,12 @@ const Subtask = ({ subtask, parentId }: Props) => {
     <div tw="rounded-xl bg-tertiary text-secondary p-1.5 grid">
       <p tw="font-medium text-xs">{subtask.title}</p>
       <p tw="place-self-end">
-        <Checkbox checked={subtask.isDone} onChange={handleIsDoneChange} />
+        <Checkbox
+          id={subtask.id}
+          checked={subtask.isDone}
+          onChange={handleIsDoneChange}
+          size="sm"
+        />
       </p>
       {errorMessage && (
         <p tw="flex items-center text-orange-500 pt-1">&nbsp;{errorMessage}</p>

diff --git a/cabra/src/pages/components/SubtasksListEdit.tsx b/cabra/src/pages/components/SubtasksListEdit.tsx
@@ -4,13 +4,19 @@ import { createTask, deleteTask, getTask, getTasks } from "../../api/tasks";
 import tw, { styled } from "twin.macro";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 
-import AddDependenceButton from "./AddDependenceButton";
 import { ITask } from "../../types/task";
 import { ITaskRelation } from "../../types/taskRelation";
 import MiniTaskDelete from "./MiniTaskDelete";
+import { PlusIcon } from "@heroicons/react/solid";
 
-const Container = styled.div(tw`text-gray-50 w-full space-y-4`);
-const fieldStyles = tw`w-full px-4 py-2 rounded-xl text-blue-800 placeholder:text-blue-800/60 font-size[small]`;
+const Container = styled.div(tw`text-gray-50 w-full space-y-2`);
+const AddSubtaskButton = styled.button(
+  tw`bg-secondary p-2 text-white font-semibold`,
+  tw`rounded shadow-2xl flex gap-2 transition-transform transform hover:scale-105`
+);
+const SubtaskInput = styled.input(
+  tw`form-input w-full px-4 py-2 rounded-lg shadow-2xl bg-tertiary text-black placeholder:text-primary/60`
+);
 
 const emptyTask: Omit<ITask, "id"> = {
   description: "",
@@ -77,33 +83,31 @@ export default function SubtasksListEdit({ parentId }: Props) {
 
   return (
     <div>
-      <Container>
-        {subtasks.map((relatedTask) => (
-          <MiniTaskDelete
-            key={relatedTask.relationId}
-            title={relatedTask.task.title}
-            onClickDelete={removeTask.mutateAsync}
-            taskId={relatedTask.task.id}
-          />
-        ))}
-      </Container>
       <form onSubmit={handleSubmitSubtask}>
-        <div tw="rounded-xl w-full text-blue-800  p-1.5">
-          <p tw="flex items-center">
-            <input
-              css={[tw`form-input`, fieldStyles]}
-              id="subtask"
-              type="text"
-              value={val}
-              maxLength={80}
-              required
-              onChange={(event) => setVal(event.target.value)}
-            />
-          </p>
-          <p tw="flex items-center">
-            <AddDependenceButton type="submit">+add</AddDependenceButton>
-          </p>
+        <div tw="w-full flex gap-4 mb-4">
+          <SubtaskInput
+            id="subtask"
+            maxLength={80}
+            onChange={(event) => setVal(event.target.value)}
+            placeholder="Subtask name"
+            required
+            type="text"
+            value={val}
+          />
+          <AddSubtaskButton type="submit">
+            <PlusIcon width={24} height={24} /> Add
+          </AddSubtaskButton>
         </div>
+        <Container>
+          {subtasks.map((relatedTask) => (
+            <MiniTaskDelete
+              key={relatedTask.relationId}
+              title={relatedTask.task.title}
+              onClickDelete={removeTask.mutateAsync}
+              taskId={relatedTask.task.id}
+            />
+          ))}
+        </Container>
       </form>
     </div>
   );

diff --git a/cabra/src/pages/components/Task.tsx b/cabra/src/pages/components/Task.tsx