frontend: improve 'New task' page

twenty-frontend/src/js/components/Group.tsx

@@ -30,10 +30,19 @@ export function Group({ groupName, getItems }: Props) {
               const classes = {};
               const editHref = `/tasks/edit#id=${task.id}`;
               return (
-                <li className={classnames("flex flex-row p-3 secondary-hover w-full", classes)} key={key}>
+                <li
+                  className={classnames(
+                    "flex flex-row p-3 secondary-hover w-full",
+                    classes,
+                  )}
+                  key={key}
+                >
                   <div className="flex flex-wrap w-3/4">
                     <div className="w-full">
-                      <a className="no-underline text-accent block h-14" href={editHref}>
+                      <a
+                        className="no-underline text-accent block h-14"
+                        href={editHref}
+                      >
                         <span className="block w-full">{task.title}</span>
                         <span className="block w-full text-smaller text-secondary">
                           {datetime.toFormat("dd LLL, yyyy")} at{" "}
@@ -63,7 +72,8 @@ export function Group({ groupName, getItems }: Props) {
             <br />
             <a className="w-100" href="/tasks/new">
               Add a task
-            </a>            .
+            </a>{" "}
+            .
           </p>
         )}
       </div>

twenty-frontend/src/js/components/NavBar.tsx

@@ -9,7 +9,11 @@ const ACTIVE_CLASSNAMES = [
   "bg-secondary",
   "text-primary",
 ].join(" ");
-const INACTIVE_CLASSNAMES = [...BASE_CLASSNAMES, "text-accent", "secondary-hover"].join(" ");
+const INACTIVE_CLASSNAMES = [
+  ...BASE_CLASSNAMES,
+  "text-accent",
+  "secondary-hover",
+].join(" ");
 
 type Item = { text: string; href: string };
 type Bar = Record<string, Array<Item>>;
@@ -42,13 +46,17 @@ export function NavBar() {
         const items = bar[key];
         return (
           <>
-            <h1>{key}</h1>
+            <h3>{key}</h3>
             <ul>
               {...items.flatMap(item => {
                 return (
                   <li>
                     <a
-                      className={activeItem == item ? ACTIVE_CLASSNAMES : INACTIVE_CLASSNAMES}
+                      className={
+                        activeItem == item
+                          ? ACTIVE_CLASSNAMES
+                          : INACTIVE_CLASSNAMES
+                      }
                       href={item.href}
                     >
                       {item.text}

twenty-frontend/src/js/components/Task.tsx

@@ -72,72 +72,72 @@ export function Task({ taskId }: { taskId?: number }) {
       </div>
       <div className="w-3/4">
         <h1>{task ? "Edit task" : "New task"}</h1>
-        <form className="group h-100" onSubmit={handleSubmit(onSave)}>
+        <form onSubmit={handleSubmit(onSave)}>
-          <div className="group-name">
+          <ul className="flex w-3/4 mb-3">
-            <ul className="tabs">
+            <li className={classnames("tab", { active: isEditable })}>
-              <li className={classnames("tab", { active: isEditable })}>
+              <a
-                <a href="#" onClick={() => setIsEditable(true)}>
+                className="no-underline"
-                  Editor
+                href="#"
-                </a>
+                onClick={() => setIsEditable(true)}
-              </li>
-              <li className={classnames("tab", { active: !isEditable })}>
-                <a href="#" onClick={() => setIsEditable(false)}>
-                  Preview
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="group-items h-80">
-            <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) => {
+                Editor
-                  return (
+              </a>
-                    <option key={key} value={project.id}>
+            </li>
-                      {project.name}
+            <li className={classnames("tab", { active: !isEditable })}>
-                    </option>
+              <a
-                  );
+                className="no-underline"
-                })}
+                href="#"
-              </select>
+                onClick={() => setIsEditable(false)}
-            </div>
+              >
-            <div>
+                Preview
+              </a>
+            </li>
+          </ul>
+          <select
+            {...register("projectId")}
+            className="p-3 w-3/4 mb-3"
+            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>
+          <input
+            className="p-3 flex w-3/4 mb-3"
+            type="text"
+            placeholder="Title"
+            defaultValue={task?.title}
+            {...register("title", { required: true })}
+          />
+          {isEditable ? (
+            <>
+              <textarea
+                className="p-3 h-72 flex w-3/4 mb-3"
+                defaultValue={task?.content || DEFAULT_TASK_CONTENT}
+                {...register("content", { required: true })}
+              />
               <input
-                className="form"
+                className="cursor-pointer bg-secondary text-primary p-3 rounded font-bold"
-                type="text"
+                type="submit"
-                placeholder="Title"
+                value="Save"
-                defaultValue={task?.title}
-                {...register("title", { required: true })}
               />
-            </div>
+            </>
-            {isEditable ? (
+          ) : (
-              <>
+            <div
-                <div className="h-96 w-3/4">
+              className="markdown h-50"
-                  <textarea
+              dangerouslySetInnerHTML={{
-                    className="w-full h-full"
+                __html: rendermd(content || task?.content),
-                    defaultValue={task?.content || DEFAULT_TASK_CONTENT}
+              }}
-                    {...register("content", { required: true })}
+            />
-                  />
+          )}
-                </div>
-                <div className="row">
-                  <input className="form" type="submit" value="Save" />
-                </div>
-              </>
-            ) : (
-              <div
-                className="markdown h-50"
-                dangerouslySetInnerHTML={{
-                  __html: rendermd(content || task?.content),
-                }}
-              />
-            )}
-          </div>
         </form>
       </div>
     </div>