From 6479c6c1c94a5507d276199693b7e14d1f4bd709 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Thu, 11 Jan 2024 01:04:51 -0300
Subject: [PATCH] frontend: layout / design tweaks

---
 twenty-frontend/src/css/_global.scss          |   1 -
 twenty-frontend/src/css/_layout.scss          |   4 +
 twenty-frontend/src/css/_panels.scss          |   7 +-
 .../src/html/tasks/edit/index.html.erb        |   4 +-
 .../src/html/tasks/new/index.html.erb         |   4 +-
 twenty-frontend/src/js/components/Task.tsx    | 148 ++++++++++--------
 .../src/js/hooks/mutations/useCreateTask.ts   |  17 +-
 7 files changed, 107 insertions(+), 78 deletions(-)

diff --git a/twenty-frontend/src/css/_global.scss b/twenty-frontend/src/css/_global.scss
index d8cc8d5..0704d86 100644
--- a/twenty-frontend/src/css/_global.scss
+++ b/twenty-frontend/src/css/_global.scss
@@ -13,5 +13,4 @@ body .wrapper {
     margin: 0;
     padding: 0;
   }
-  .w-85 { width: 85%; }
 }
diff --git a/twenty-frontend/src/css/_layout.scss b/twenty-frontend/src/css/_layout.scss
index 57a61d6..328595a 100644
--- a/twenty-frontend/src/css/_layout.scss
+++ b/twenty-frontend/src/css/_layout.scss
@@ -22,3 +22,7 @@
 .w-100 { width: 100%; }
 .w-95 { width: 95%; }
 .w-85 { width: 85%; }
+.h-100 { height: 100%; }
+.h-80 { height: 80%; }
+.h-50 { height: 50%; }
+.h-70 { height: 70%; }
diff --git a/twenty-frontend/src/css/_panels.scss b/twenty-frontend/src/css/_panels.scss
index 438cf20..af14d70 100644
--- a/twenty-frontend/src/css/_panels.scss
+++ b/twenty-frontend/src/css/_panels.scss
@@ -33,8 +33,8 @@
       border-radius: 5px;
       min-width: 120px;
       text-align: center;
-      background: $secondary-color;
-      color: lighten($secondary-color, 15%);
+      background: $primary-color;
+      color: $secondary-color;
       cursor: pointer;
       opacity: 0.5;
     }
@@ -51,6 +51,9 @@
   width: 100%;
   .task.content {
     padding: 10px;
+    ul {
+      padding: revert;
+    }
     ul li {
       line-height: 1.7em;
     }
diff --git a/twenty-frontend/src/html/tasks/edit/index.html.erb b/twenty-frontend/src/html/tasks/edit/index.html.erb
index 0db39ab..faaa5fd 100644
--- a/twenty-frontend/src/html/tasks/edit/index.html.erb
+++ b/twenty-frontend/src/html/tasks/edit/index.html.erb
@@ -1,4 +1,4 @@
-<div class="root align-center max-width">
-  <div class="react-mount edit-task"></div>
+<div class="wrapper align-center max-width h-100">
+  <div class="react-mount edit-task h-100"></div>
   <script src="/js/main/task/edit.js"></script>
 </div>
diff --git a/twenty-frontend/src/html/tasks/new/index.html.erb b/twenty-frontend/src/html/tasks/new/index.html.erb
index d17b804..366a6fe 100644
--- a/twenty-frontend/src/html/tasks/new/index.html.erb
+++ b/twenty-frontend/src/html/tasks/new/index.html.erb
@@ -1,4 +1,4 @@
-<div class="root align-center max-width">
-  <div class="react-mount new-task"></div>
+<div class="wrapper align-center max-width h-100">
+  <div class="react-mount new-task h-100"></div>
   <script src="/js/main/task/new.js"></script>
 </div>
diff --git a/twenty-frontend/src/js/components/Task.tsx b/twenty-frontend/src/js/components/Task.tsx
index 1580851..05b9c4b 100644
--- a/twenty-frontend/src/js/components/Task.tsx
+++ b/twenty-frontend/src/js/components/Task.tsx
@@ -6,6 +6,8 @@ import { useFindTask } from "/hooks/queries/useFindTask";
 import { useProjects } from "/hooks/queries/useProjects";
 import { Task, Project, TaskInput, Maybe } from "/types/schema";
 import { rendermd } from "/lib/markdown-utils";
+import { NavBar } from "/components/NavBar";
+
 import classnames from "classnames";
 
 const DEFAULT_TASK_CONTENT = [
@@ -30,7 +32,7 @@ export function Task({ taskId }: { taskId?: number }) {
     defaultValues: { projectId: 1 },
   });
   const [isEditable, setIsEditable] = useState<boolean>(!taskId);
-  const [createTask] = useCreateTask();
+  const createTask = useCreateTask();
   const updateTask = useUpdateTask();
   const { data: taskData, loading: findingTask } = useFindTask(Number(taskId));
   const { data: projectsData, loading: findingProjects } = useProjects();
@@ -64,77 +66,85 @@ export function Task({ taskId }: { taskId?: number }) {
   }
 
   return (
-    <form className="task" onSubmit={handleSubmit(onSave)}>
-      <div className="panel">
-        <div className="panel-header panel-tabs">
-          <ul className="tabs">
-            <li
-              className={classnames({ active: isEditable })}
-              onClick={() => setIsEditable(true)}
-            >
-              Write
-            </li>
-            <li
-              className={classnames({ active: !isEditable })}
-              onClick={() => setIsEditable(false)}
-            >
-              Preview
-            </li>
-          </ul>
-        </div>
-        <div className="panel-body">
-          <div>
-            <select
-              {...register("projectId")}
-              className="form"
-              value={projectId}
-              onChange={event => {
-                const v: string = event.target.value;
-                set("projectId", Number(v));
-              }}
-            >
-              {projects.map((project: Project, key: number) => {
-                return (
-                  <option key={key} value={project.id}>
-                    {project.name}
-                  </option>
-                );
-              })}
-            </select>
-          </div>
-          <div>
-            <input
-              className="form"
-              type="text"
-              placeholder="Title"
-              defaultValue={task?.title}
-              {...register("title", { required: true })}
-            />
-          </div>
-          {isEditable ? (
-            <>
-              <div className="row textarea">
-                <textarea
+    <div className="two-columns h-100">
+      <div className="column-1">
+        <NavBar />
+      </div>
+      <div className="column-2 h-100">
+        <form className="task h-100" onSubmit={handleSubmit(onSave)}>
+          <div className="panel h-100">
+            <h1>{task ? "Edit task" : "New task"}</h1>
+            <div className="panel-header panel-tabs">
+              <ul className="tabs">
+                <li
+                  className={classnames({ active: isEditable })}
+                  onClick={() => setIsEditable(true)}
+                >
+                  Write
+                </li>
+                <li
+                  className={classnames({ active: !isEditable })}
+                  onClick={() => setIsEditable(false)}
+                >
+                  Preview
+                </li>
+              </ul>
+            </div>
+            <div className="panel-body h-80">
+              <div>
+                <select
+                  {...register("projectId")}
                   className="form"
-                  placeholder="Add your description heren"
-                  defaultValue={task?.content || DEFAULT_TASK_CONTENT}
-                  {...register("content", { required: true })}
+                  value={projectId}
+                  onChange={event => {
+                    const v: string = event.target.value;
+                    set("projectId", Number(v));
+                  }}
+                >
+                  {projects.map((project: Project, key: number) => {
+                    return (
+                      <option key={key} value={project.id}>
+                        {project.name}
+                      </option>
+                    );
+                  })}
+                </select>
+              </div>
+              <div>
+                <input
+                  className="form"
+                  type="text"
+                  placeholder="Title"
+                  defaultValue={task?.title}
+                  {...register("title", { required: true })}
                 />
               </div>
-              <div className="row">
-                <input className="form" type="submit" value="Save" />
-              </div>
-            </>
-          ) : (
-            <div
-              className="task content"
-              dangerouslySetInnerHTML={{
-                __html: rendermd(content || task?.content),
-              }}
-            />
-          )}
-        </div>
+              {isEditable ? (
+                <>
+                  <div className="row textarea h-70">
+                    <textarea
+                      className="form h-100"
+                      placeholder="Add your description heren"
+                      defaultValue={task?.content || DEFAULT_TASK_CONTENT}
+                      {...register("content", { required: true })}
+                    />
+                  </div>
+                  <div className="row">
+                    <input className="form" type="submit" value="Save" />
+                  </div>
+                </>
+              ) : (
+                <div
+                  className="task content h-50"
+                  dangerouslySetInnerHTML={{
+                    __html: rendermd(content || task?.content),
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </form>
       </div>
-    </form>
+    </div>
   );
 }
diff --git a/twenty-frontend/src/js/hooks/mutations/useCreateTask.ts b/twenty-frontend/src/js/hooks/mutations/useCreateTask.ts
index c0824f5..646d18a 100644
--- a/twenty-frontend/src/js/hooks/mutations/useCreateTask.ts
+++ b/twenty-frontend/src/js/hooks/mutations/useCreateTask.ts
@@ -1,4 +1,8 @@
-import { CreateTaskPayload, MutationCreateTaskArgs } from "/types/schema";
+import {
+  CreateTaskPayload,
+  MutationCreateTaskArgs,
+  TaskInput,
+} from "/types/schema";
 import { gql, useMutation } from "@apollo/client";
 
 const GQL = gql`
@@ -9,6 +13,15 @@ const GQL = gql`
   }
 `;
 
+type TArgs = {
+  variables: { input: TaskInput };
+};
+
 export function useCreateTask() {
-  return useMutation<CreateTaskPayload, MutationCreateTaskArgs>(GQL);
+  const [create] = useMutation<CreateTaskPayload, MutationCreateTaskArgs>(GQL);
+  return ({ variables: { input }, ...rest }: TArgs) => {
+    const projectId = Number(input.projectId);
+    const variables = { input: { ...input, ...{ projectId } } };
+    return create({ variables, ...rest });
+  };
 }