From 73388195ef3af2beb68b4b9e7a6756663ea57171 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 20 Apr 2023 19:04:10 +0530
Subject: [PATCH] chore: page block input (#907)

* fix: sidebar workspace dropdown logo

* chore: changed textarea to input for page block
---
 .../pages/create-update-block-inline.tsx      | 21 +++++++++----------
 .../components/pages/single-page-block.tsx    | 21 ++++++++++---------
 .../app/components/rich-text-editor/index.tsx |  4 +---
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index d3e3dd92e..089025a23 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -16,7 +16,7 @@ import aiService from "services/ai.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Input, Loader, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
 import { IPageBlock } from "types";
 // fetch-keys
@@ -232,23 +232,22 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   return (
     <div>
       <form
-        className="border divide-y rounded-[10px] shadow"
+        className="divide-y rounded-[10px] border shadow"
         onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
       >
-        <div className="px-2 pt-2">
+        <div className="pt-2">
           <div className="flex justify-between">
-            <TextArea
+            <Input
               id="name"
               name="name"
               placeholder="Title"
               register={register}
-              className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium ring-0 focus:ring-gray-200"
-              role="textbox"
+              className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-lg font-medium"
               autoComplete="off"
               maxLength={255}
             />
           </div>
-          <div className="page-block-section text-gray-500 relative -mt-2">
+          <div className="page-block-section relative -mt-2 text-gray-500">
             <Controller
               name="description"
               control={control}
@@ -268,10 +267,10 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                 />
               )}
             />
-            <div className="flex m-2 mt-6 ml-2">
+            <div className="m-2 mt-6 ml-2 flex">
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs border hover:bg-gray-100 ${
+                className={`flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100 ${
                   iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
                 }`}
                 onClick={handleAutoGenerateDescription}
@@ -288,7 +287,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               {data && (
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs border ml-4 hover:bg-gray-100"
+                  className="-mr-2 ml-4 flex items-center gap-1 rounded border px-1.5 py-1 text-xs hover:bg-gray-100"
                   onClick={() => {
                     onClose();
                     setGptAssistantModal();
@@ -301,7 +300,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             </div>
           </div>
         </div>
-        <div className="flex p-4 justify-end items-center gap-2">
+        <div className="flex items-center justify-end gap-2 p-4">
           <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
           <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
             {data
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index 04f37f334..3d61722ec 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -295,27 +295,28 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 handleClose={() => setCreateBlockForm(false)}
                 data={block}
                 setIsSyncing={setIsSyncing}
+                focus="name"
               />
             </div>
           ) : (
             <div
               className={`group relative ${
-                snapshot.isDragging ? "border-2 bg-white border-theme shadow-lg rounded-md p-6" : ""
+                snapshot.isDragging ? "rounded-md border-2 border-theme bg-white p-6 shadow-lg" : ""
               }`}
               ref={provided.innerRef}
               {...provided.draggableProps}
             >
               <button
                 type="button"
-                className="absolute top-4 -left-4 p-0.5 hover:bg-gray-100 rounded hidden group-hover:!flex"
+                className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-gray-100 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
                 <EllipsisVerticalIcon className="h-[18px]" />
-                <EllipsisVerticalIcon className="h-[18px] -ml-3" />
+                <EllipsisVerticalIcon className="-ml-3 h-[18px]" />
               </button>
               <div
                 ref={actionSectionRef}
-                className={`absolute top-4 right-0 items-center gap-2 hidden group-hover:!flex  bg-white pl-4 ${
+                className={`absolute top-4 right-0 hidden items-center gap-2 bg-white  pl-4 group-hover:!flex ${
                   isMenuActive ? "!flex" : ""
                 }`}
               >
@@ -363,7 +364,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 <CustomMenu
                   customButton={
                     <button
-                      className="flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-gray-100 text-left rounded w-full"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-gray-100"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <BoltIcon className="h-4.5 w-3.5" />
@@ -407,28 +408,28 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 }`}
               >
                 <div
-                  className="px-4 w-full overflow-hidden break-all cursor-pointer"
+                  className="w-full cursor-pointer overflow-hidden break-all px-4"
                   onClick={() => setCreateBlockForm(true)}
                 >
                   <div className="flex">
                     {block.issue && (
-                      <div className="flex mr-1.5">
+                      <div className="mr-1.5 flex">
                         <Link
                           href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
                         >
-                          <a className="flex flex-shrink-0 items-center gap-1 rounded h-6 bg-gray-100 px-1.5 py-1 text-xs">
+                          <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-gray-100 px-1.5 py-1 text-xs">
                             <LayerDiagonalIcon height="16" width="16" color="black" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
                           </a>
                         </Link>
                       </div>
                     )}
-                    <h3 className="font-medium text-base overflow-hidden max-w-[1000px]">
+                    <h3 className="max-w-[1000px] overflow-hidden text-base font-medium">
                       {block.name}
                     </h3>
                   </div>
                   {block?.description_stripped.length > 0 && (
-                    <p className="mt-3 text-sm text-gray-500 font-normal h-5 truncate">
+                    <p className="mt-3 h-5 truncate text-sm font-normal text-gray-500">
                       {block.description_stripped}
                     </p>
                   )}
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 529523d8e..65d1fa5cd 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -209,9 +209,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
         {(!value || value === "" || value?.content?.[0]?.content === undefined) &&
           !(typeof value === "string" && value.includes("<")) &&
           placeholder && (
-            <p className="absolute pointer-events-none top-4 left-4 text-brand-secondary">
-              {placeholder}
-            </p>
+            <p className="pointer-events-none absolute top-4 left-4 text-sm">{placeholder}</p>
           )}
         <EditorComponent />