[ITG-95] Update styles of task list and task form according to the design

bode/bode/resources/tasks/api.py

@@ -14,7 +14,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.desc(), Task.due_date.desc()).all()
 
     @blueprint.arguments(TaskInputSchema)
     @blueprint.response(201, TaskSchema)

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>
   );
 }

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>
+  );
+}

cabra/src/pages/TaskDetails.tsx

@@ -1,5 +1,7 @@
 import "twin.macro";
+
 import { useNavigate, useParams } from "react-router-dom";
+
 import { ArrowLeftIcon } from "@heroicons/react/solid";
 import Layout from "./components/Layout";
 import NavigationButton from "./components/NavigationButton";
@@ -12,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

cabra/src/pages/TaskEdit.tsx

@@ -34,11 +34,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} />

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>
+  );
 }

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} />;

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;

cabra/src/pages/components/TaskDetailsCard.tsx

@@ -1,4 +1,5 @@
 import { PencilIcon, TrashIcon } from "@heroicons/react/solid";
+
 import CardField from "./CardField";
 import CheckBox from "./CheckBox";
 import { Link } from "react-router-dom";
@@ -23,10 +24,6 @@ const Ctas = styled(CardField)`
   ${tw`flex place-content-around`}
 `;
 
-const StatusCheckbox = styled(CheckBox)`
-  ${tw`h-8 w-8`}
-`;
-
 interface Props {
   id: string;
 }
@@ -48,20 +45,21 @@ export default function TaskDetails({ id }: Props) {
             {task?.dueDate ? formatDateTime(task.dueDate) : "<No deadline>"}
           </CardField>
           <Ctas align="center">
-            <StatusCheckbox
+            <CheckBox
               checked={task.isDone}
+              id={`task-${task.id}`}
               onChange={handleStatusChange}
             />
             <Link to={routeHelpers.task.edit(task.id)}>
               <NavigationButton tw="text-amber-600 bg-amber-100">
-                <PencilIcon height={16} width={16} />
+                <PencilIcon height={20} width={20} />
               </NavigationButton>
             </Link>
             <NavigationButton
               tw="text-red-800 bg-red-500"
               onClick={() => removeTask()}
             >
-              <TrashIcon height={16} width={16} />
+              <TrashIcon height={20} width={20} />
             </NavigationButton>
           </Ctas>
         </ColumnFields>

cabra/src/pages/components/TaskForm.tsx

@@ -28,24 +28,24 @@ const schema = yup.object({
   dueDate: yup.date().nullable(),
 });
 
-const fieldStyles = tw`w-full px-4 py-2 rounded shadow-2xl text-blue-800 placeholder:text-blue-800/60`;
+const fieldStyles = tw`w-full px-4 py-2 rounded-lg shadow-2xl bg-tertiary text-black placeholder:text-primary/60`;
 
 const Form = styled.form`
-  ${tw`flex flex-col space-y-4 w-full`}
+  ${tw`flex flex-col w-full`}
 
   .react-datepicker-wrapper {
     ${tw` text-blue-800 placeholder:text-blue-800/60`}
 
     input[type="text"] {
       max-width: 100%;
-      ${tw`rounded shadow-2xl`}
+      ${tw`bg-tertiary rounded-lg shadow-2xl text-black`}
     }
   }
 `;
-const Label = styled.label(tw`text-gray-50`);
+const Label = styled.label(tw`text-gray-50 font-bold`);
 const SubmitButton = styled.button(
-  tw`bg-gradient-to-r from-green-400 to-cyan-500 py-2 text-white font-semibold`,
-  tw`rounded shadow-2xl transition-transform transform hover:scale-105 disabled:opacity-50`
+  tw`bg-green-500 mt-4 py-2 text-white font-semibold`,
+  tw`rounded shadow-2xl transition-transform transform hover:scale-[102%] disabled:opacity-50`
 );
 
 export default function TaskForm({ task, onSubmit }: Props) {
@@ -83,20 +83,31 @@ export default function TaskForm({ task, onSubmit }: Props) {
 
   return (
     <Form onSubmit={handleSubmit(internalOnSubmit)}>
-      <div tw="grid gap-4 grid-cols-1 sm:grid-cols-[1fr 200px]">
-        <div tw="w-full">
-          <Label htmlFor="task-title">Title</Label>
+      <fieldset tw="space-y-2">
+        <div tw="space-y-2">
+          <Label htmlFor="task-title">Name:</Label>
           <input
             css={[tw`form-input`, fieldStyles]}
             id="task-title"
             type="text"
             maxLength={80}
-            placeholder="Your next task... "
+            placeholder="My new task"
             required
             {...register("title")}
           />
         </div>
-        <div tw="w-full">
+        <div tw="space-y-2">
+          <Label htmlFor="task-description">Description</Label>
+          <textarea
+            css={[tw`form-textarea text-sm`, fieldStyles]}
+            id="task-description"
+            maxLength={1024}
+            placeholder="My new task details"
+            rows={6}
+            {...register("description")}
+          ></textarea>
+        </div>
+        <div tw="space-y-2">
           <Label htmlFor="title">Due date</Label>
           <Controller
             control={control}
@@ -118,22 +129,11 @@ export default function TaskForm({ task, onSubmit }: Props) {
             )}
           />
         </div>
-      </div>
-      <div>
-        <Label htmlFor="task-description">Description</Label>
-        <textarea
-          css={[tw`form-textarea text-sm`, fieldStyles]}
-          id="task-description"
-          maxLength={1024}
-          placeholder="Some description..."
-          rows={6}
-          {...register("description")}
-        ></textarea>
-      </div>
+      </fieldset>
       <SubmitButton type="submit" disabled={isSubmitting}>
         Submit!
       </SubmitButton>
-      <div tw="text-orange-500 pt-1">&nbsp;{errors.title?.message}</div>
+      <div tw="text-red-500 pt-1">&nbsp;{errors.title?.message}</div>
     </Form>
   );
 }