style: pages UI (#769)

* style: pages ui

* chore: added toast alert and tooltip

* fix: fixed issues in pages block

* fix: ai buttons inside pages block

apps/app/components/cycles/modal.tsx

@@ -23,7 +23,6 @@ import {
   CYCLE_DRAFT_LIST,
   CYCLE_INCOMPLETE_LIST,
 } from "constants/fetch-keys";
-import { IncomingMessage } from "http";
 
 type CycleModalProps = {
   isOpen: boolean;

apps/app/components/pages/create-update-block-inline.tsx

@@ -1,9 +1,17 @@
+import React, { useCallback, useEffect, useState } from "react";
+
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
 
-import { mutate } from "swr";
+import useSWR, { mutate } from "swr";
 
-import { SparklesIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
+import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
+import {
+  BoltIcon,
+  SparklesIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
@@ -12,22 +20,24 @@ import pagesService from "services/pages.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Loader, PrimaryButton, SecondaryButton, CustomMenu, TextArea } from "components/ui";
 // types
 import { IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-import { useCallback, useEffect } from "react";
 import issuesService from "services/issues.service";
+import aiService from "services/ai.service";
 
 type Props = {
   handleClose: () => void;
   data?: IPageBlock;
   setIsSyncing?: React.Dispatch<React.SetStateAction<boolean>>;
   focus?: keyof IPageBlock;
-  handelAutoGenerateDescription?: () => Promise<void>;
-  iAmFeelingLucky?: boolean;
   setGptAssistantModal: () => void;
+  handleBlockSync?: () => void;
+  handleCopyText?: () => void;
+  pushBlockIntoIssues?: () => void;
+  deletePageBlock?: () => void;
 };
 
 const defaultValues = {
@@ -49,10 +59,15 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   data,
   setIsSyncing,
   focus,
-  handelAutoGenerateDescription,
   setGptAssistantModal,
-  iAmFeelingLucky,
+  handleBlockSync,
+  handleCopyText,
+  pushBlockIntoIssues,
+  deletePageBlock,
 }) => {
+
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug, projectId, pageId } = router.query;
 
@@ -141,6 +156,46 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
       .finally(() => onClose());
   };
 
+  const handleAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(workspaceSlug as string, projectId as string, {
+        prompt: watch("name"),
+        task: "Generate a proper description for this issue in context of a project management software.",
+      })
+      .then((res) => {
+        if (res.response === "")
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "Block title isn't informative enough to generate the description. Please try with a different title.",
+          });
+        else {
+          setValue("description", {});
+          setValue("description_html", `${watch("description_html")}<p>${res.response}</p>`);
+        }
+      })
+      .catch((err) => {
+        if (err.status === 429)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message:
+              "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Some error occurred. Please try again.",
+          });
+      }).finally(()=>setIAmFeelingLucky(false));
+  };
+
   useEffect(() => {
     if (focus) setFocus(focus);
 
@@ -167,19 +222,56 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   }, [handleClose]);
 
   return (
-    <div className="border rounded-[10px] p-2 ml-6">
+    <div>
-      <form onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}>
+      <form
-        <Input
+        className="border divide-y rounded-md shadow-md"
+        onSubmit={data ? handleSubmit(updatePageBlock) : handleSubmit(createPageBlock)}
+      >
+        <div className="px-4 pt-4">
+          <div className="flex justify-between">
+            <TextArea
               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-base ring-0 -ml-2 focus:ring-gray-200"
+              className="min-h-10 block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-xl font-semibold ring-0 focus:ring-gray-200"
               role="textbox"
               autoComplete="off"
               maxLength={255}
             />
-        <div className="page-block-section font relative -mx-3 -mt-3">
+            <CustomMenu label={<BoltIcon className="h-4.5 w-3.5" />} noBorder noChevron>
+              {data?.issue ? (
+                <>
+                  <CustomMenu.MenuItem onClick={handleBlockSync}>
+                    <span className="flex items-center gap-1">
+                      <ArrowPathIcon className="h-4 w-4" />
+                      <span>Turn sync {data?.sync ? "off" : "on"}</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center gap-1">
+                      <LinkIcon className="h-4 w-4" />
+                      Copy issue link
+                    </span>
+                  </CustomMenu.MenuItem>
+                </>
+              ) : (
+                <CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
+                  <span className="flex items-center gap-1">
+                    <LayerDiagonalIcon className="h-4 w-4" />
+                    Push into issues
+                  </span>
+                </CustomMenu.MenuItem>
+              )}
+              <CustomMenu.MenuItem onClick={deletePageBlock}>
+                <span className="flex items-center gap-1">
+                  <TrashIcon className="h-4 w-4" />
+                  Delete block
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+          <div className="page-block-section text-[#495057] relative">
             <Controller
               name="description"
               control={control}
@@ -192,24 +284,20 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   }
                   onJSONChange={(jsonValue) => setValue("description", jsonValue)}
                   onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                placeholder="Description"
+                  placeholder="Write something..."
-                aria-hidden
                   customClassName="text-sm"
                   noBorder
                   borderOnFocus={false}
                 />
               )}
             />
-        </div>
+            <div className="flex m-2 mt-6 ml-2">
-        <div className="flex justify-end items-center gap-2">
-          { data &&
-            <>
-              {console.log(handelAutoGenerateDescription, setGptAssistantModal, iAmFeelingLucky)}
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
+                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs border hover:bg-gray-100 ${
+                  iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
                 }`}
-                onClick={handelAutoGenerateDescription}
+                onClick={handleAutoGenerateDescription}
                 disabled={iAmFeelingLucky}
               >
                 {iAmFeelingLucky ? (
@@ -220,19 +308,21 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   </>
                 )}
               </button>
-              <button
+              {data && <button
                 type="button"
-                className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100"
+                className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs border ml-4 hover:bg-gray-100"
                 onClick={() => {
-                  handleClose();
+                  onClose();
                   setGptAssistantModal();
                 }}
               >
                 <SparklesIcon className="h-4 w-4" />
                 AI
-              </button>
+              </button>}
-            </>
+            </div>
-          }
+          </div>
+        </div>
+        <div className="flex p-4 justify-end items-center gap-2">
           <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
           <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
             {data

apps/app/components/pages/pages-list/recent-pages-list.tsx

@@ -37,16 +37,21 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
     <>
       {pages ? (
         Object.keys(pages).length > 0 && !isEmpty ? (
-          <div className="mt-4 space-y-4">
+          <div className="mt-4 space-y-4 flex flex-col gap-5">
             {Object.keys(pages).map((key) => {
               if (pages[key].length === 0) return null;
 
               return (
                 <React.Fragment key={key}>
-                  <h2 className="text-xl font-medium capitalize">
+                  <div>
+                    <h2 className="text-xl font-semibold capitalize mb-4">
                       {replaceUnderscoreIfSnakeCase(key)}
                     </h2>
-                  <PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
+                    <PagesView
+                      pages={pages[key as keyof RecentPagesResponse]}
+                      viewType={viewType}
+                    />
+                  </div>
                 </React.Fragment>
               );
             })}

apps/app/components/pages/pages-view.tsx

@@ -207,7 +207,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
               ))}
             </ul>
           ) : viewType === "detailed" ? (
-            <div className="rounded-[10px] border border-gray-200 bg-white">
+            <div className="rounded-[10px] border divide-y  border-gray-200 bg-white">
               {pages.map((page) => (
                 <SinglePageDetailedItem
                   key={page.id}

apps/app/components/pages/single-page-block.tsx

@@ -23,13 +23,14 @@ import { CreateUpdateBlockInline } from "components/pages";
 import { CustomMenu, Loader } from "components/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
-import { ArrowPathIcon } from "@heroicons/react/20/solid";
+import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
 import {
   BoltIcon,
   CheckIcon,
   EllipsisVerticalIcon,
   PencilIcon,
   SparklesIcon,
+  TrashIcon,
 } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
@@ -173,7 +174,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       });
   };
 
-  const handelAutoGenerateDescription = async () => {
+  const handleAutoGenerateDescription = async () => {
     if (!workspaceSlug || !projectId) return;
 
     setIAmFeelingLucky(true);
@@ -303,17 +304,19 @@ export const SinglePageBlock: React.FC<Props> = ({
               {...provided.dragHandleProps}
             >
               <CreateUpdateBlockInline
-                handelAutoGenerateDescription={handelAutoGenerateDescription}
                 setGptAssistantModal={() => setGptAssistantModal((prev) => !prev)}
-                iAmFeelingLucky={iAmFeelingLucky}
                 handleClose={() => setCreateBlockForm(false)}
                 data={block}
                 setIsSyncing={setIsSyncing}
+                deletePageBlock={deletePageBlock}
+                handleBlockSync={handleBlockSync}
+                handleCopyText={handleCopyText}
+                pushBlockIntoIssues={pushBlockIntoIssues}
               />
             </div>
           ) : (
             <div
-              className={`group relative pl-6 ${
+              className={`group relative ${
                 snapshot.isDragging ? "border-2 bg-white border-theme shadow-lg rounded-md p-6" : ""
               }`}
               ref={provided.innerRef}
@@ -321,13 +324,13 @@ export const SinglePageBlock: React.FC<Props> = ({
             >
               <button
                 type="button"
-                className="absolute top-4 -left-2 p-0.5 hover:bg-gray-100 rounded hidden group-hover:flex"
+                className="absolute top-4 -left-4 p-0.5 hover:bg-gray-100 rounded hidden group-hover:!flex"
                 {...provided.dragHandleProps}
               >
                 <EllipsisVerticalIcon className="h-[18px]" />
                 <EllipsisVerticalIcon className="h-[18px] -ml-3" />
               </button>
-              <div className="absolute top-4 right-0 items-center gap-2 hidden group-hover:flex bg-white pl-4">
+              <div className="absolute top-4 right-0 items-center gap-2 hidden group-hover:!flex bg-white pl-4">
                 {block.issue && block.sync && (
                   <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-gray-100 py-1 px-1.5 text-xs">
                     {isSyncing ? (
@@ -343,7 +346,7 @@ export const SinglePageBlock: React.FC<Props> = ({
                   className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-gray-100 ${
                     iAmFeelingLucky ? "cursor-wait bg-gray-100" : ""
                   }`}
-                  onClick={handelAutoGenerateDescription}
+                  onClick={handleAutoGenerateDescription}
                   disabled={iAmFeelingLucky}
                 >
                   {iAmFeelingLucky ? (
@@ -373,18 +376,32 @@ export const SinglePageBlock: React.FC<Props> = ({
                   {block.issue ? (
                     <>
                       <CustomMenu.MenuItem onClick={handleBlockSync}>
-                        <>Turn sync {block.sync ? "off" : "on"}</>
+                        <span className="flex items-center gap-1">
+                          <ArrowPathIcon className="h-4 w-4" />
+                          <span>Turn sync {block.sync ? "off" : "on"}</span>
+                        </span>
                       </CustomMenu.MenuItem>
                       <CustomMenu.MenuItem onClick={handleCopyText}>
+                        <span className="flex items-center gap-1">
+                          <LinkIcon className="h-4 w-4" />
                           Copy issue link
+                        </span>
                       </CustomMenu.MenuItem>
                     </>
                   ) : (
                     <CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
+                      <span className="flex items-center gap-1">
+                        <LayerDiagonalIcon className="h-4 w-4" />
                         Push into issues
+                      </span>
                     </CustomMenu.MenuItem>
                   )}
-                  <CustomMenu.MenuItem onClick={deletePageBlock}>Delete block</CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={deletePageBlock}>
+                    <span className="flex items-center gap-1">
+                      <TrashIcon className="h-4 w-4" />
+                      Delete block
+                    </span>
+                  </CustomMenu.MenuItem>
                 </CustomMenu>
               </div>
               <div
@@ -392,21 +409,34 @@ export const SinglePageBlock: React.FC<Props> = ({
                   snapshot.isDragging ? "" : "py-4 [&:not(:last-child)]:border-b"
                 }`}
               >
+                <div
+                  className="px-4 w-full overflow-hidden break-all cursor-pointer"
+                  onClick={() => setCreateBlockForm(true)}
+                >
+                  <div className="flex">
                     {block.issue && (
-                  <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}>
+                      <div className="flex mr-1.5">
-                    <a className="flex flex-shrink-0 items-center gap-1 rounded bg-gray-100 px-1.5 py-1 text-xs">
+                        <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">
                             <LayerDiagonalIcon height="16" width="16" color="black" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
                           </a>
                         </Link>
+                      </div>
                     )}
-                <h3
+                    <h3 className="font-medium text-base overflow-hidden max-w-[1000px]">
-                  className="font-medium text-sm break-all"
-                  onClick={() => setCreateBlockForm(true)}
-                >
                       {block.name}
                     </h3>
                   </div>
+                  {block?.description_stripped.length > 0 && (
+                    <p className="mt-3 text-sm text-gray-500 font-normal h-5 truncate">
+                      {block.description_stripped}
+                    </p>
+                  )}
+                </div>
+              </div>
               <GptAssistantModal
                 block={block}
                 isOpen={gptAssistantModal}

apps/app/components/pages/single-page-detailed-item.tsx

@@ -17,7 +17,7 @@ import {
 } from "@heroicons/react/24/outline";
 // helpers
 import { truncateText } from "helpers/string.helper";
-import { renderShortTime } from "helpers/date-time.helper";
+import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
 // types
 import { IPage } from "types";
 
@@ -44,12 +44,12 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
   const { user } = useUser();
 
   return (
-    <div className="relative first:rounded-t last:rounded-b border">
+    <div className="relative">
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
-        <a className="block p-4">
+        <a className="block py-4 px-6">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
+              <p className="mr-2 truncate text-xl font-semibold">{truncateText(page.name, 75)}</p>
               {page.label_details.length > 0 &&
                 page.label_details.map((label) => (
                   <div
@@ -74,7 +74,14 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
             </div>
 
             <div className="flex items-center gap-2">
+              <Tooltip
+                tooltipContent={`Last updated at ${
+                  renderShortTime(page.updated_at) +
+                  ` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}`
+                } on ${renderShortDate(page.updated_at)}`}
+              >
                 <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
+              </Tooltip>
               {page.is_favorite ? (
                 <button
                   type="button"
@@ -153,7 +160,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
               </CustomMenu>
             </div>
           </div>
-          <div className="relative mt-2 space-y-2 text-sm text-gray-600">
+          <div className="relative mt-2 space-y-2 text-base font-normal text-gray-600">
             {page.blocks.length > 0
               ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
               : null}

apps/app/components/pages/single-page-list-item.tsx

@@ -16,6 +16,7 @@ import {
   StarIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
+import { PencilScribbleIcon } from "components/icons";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { renderShortDate, renderShortTime } from "helpers/date-time.helper";
@@ -48,11 +49,13 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
     <li>
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
         <a>
-          <div className="relative rounded p-4 hover:bg-gray-100">
+          <div className="relative rounded p-4 hover:bg-[#E9ECEF]">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <DocumentTextIcon className="h-4 w-4" />
+                <PencilScribbleIcon className="h-4 w-4" />
-                <p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
+                <p className="mr-2 truncate text-base text-[#212529] font-medium">
+                  {truncateText(page.name, 75)}
+                </p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (
                     <div
@@ -78,9 +81,8 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-2">
                   <Tooltip
-                    tooltipContent={`Last updated at ${renderShortTime(
+                    tooltipContent={`Last updated at ${
-                      page.updated_at
+                      renderShortTime(page.updated_at)} on ${renderShortDate(page.updated_at)}`}
-                    )} ${renderShortDate(page.updated_at)}`}
                   >
                     <p className="text-sm text-gray-400">{renderShortTime(page.updated_at)}</p>
                   </Tooltip>

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -33,12 +33,12 @@ import {
   LockClosedIcon,
   LockOpenIcon,
   PlusIcon,
-  ShareIcon,
   StarIcon,
+  LinkIcon
 } from "@heroicons/react/24/outline";
-import { ColorPalletteIcon } from "components/icons";
+import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
 // helpers
-import { renderShortTime } from "helpers/date-time.helper";
+import { renderShortTime, renderShortDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
@@ -155,7 +155,13 @@ const SinglePage: NextPage = () => {
         is_favorite: true,
       }),
       false
-    );
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Success",
+        message: "Added to favorites",
+      });
+    });;
 
     pagesService.addPageToFavorites(workspaceSlug as string, projectId as string, {
       page: pageId as string,
@@ -172,13 +178,16 @@ const SinglePage: NextPage = () => {
         is_favorite: false,
       }),
       false
-    );
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Success",
+        message: "Removed from favorites",
+      });
+    });;
 
-    pagesService.removePageFromFavorites(
+    pagesService
-      workspaceSlug as string,
+      .removePageFromFavorites(workspaceSlug as string, projectId as string, pageId as string);
-      projectId as string,
-      pageId as string
-    );
   };
 
   const handleOnDragEnd = (result: DropResult) => {
@@ -345,10 +354,10 @@ const SinglePage: NextPage = () => {
                   customButton={
                     <button
                       type="button"
-                      className="flex items-center gap-1 rounded-md bg-gray-100 px-3 py-1.5 text-xs hover:bg-gray-200"
+                      className="flex items-center gap-1 rounded-full bg-gray-100 px-2  pr-2.5 py-1 text-xs hover:bg-gray-200"
                     >
                       <PlusIcon className="h-3 w-3" />
-                      Add new label
+                      Add label
                     </button>
                   }
                   value={pageDetails.labels}
@@ -359,19 +368,17 @@ const SinglePage: NextPage = () => {
                 />
               )}
             </div>
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-6">
               <Tooltip
-                tooltipContent={`Page last updated at ${renderShortTime(pageDetails.updated_at)}`}
+                tooltipContent={`Last updated at ${renderShortTime(
-                theme="dark"
+                  pageDetails.updated_at
+                )} on ${renderShortDate(pageDetails.updated_at)}`}
               >
-                <span className="cursor-default text-sm text-gray-500">
+                <p className="text-sm text-gray-500">{renderShortTime(pageDetails.updated_at)}</p>
-                  {renderShortTime(pageDetails.updated_at)}
-                </span>
               </Tooltip>
-              <PrimaryButton className="flex items-center gap-2" onClick={handleCopyText}>
+              <button className="flex items-center gap-2" onClick={handleCopyText}>
-                <ShareIcon className="h-4 w-4" />
+                <LinkIcon className="h-4 w-4" />
-                Share
+              </button>
-              </PrimaryButton>
               <div className="flex-shrink-0">
                 <Popover className="relative grid place-items-center">
                   {({ open }) => (
@@ -415,7 +422,14 @@ const SinglePage: NextPage = () => {
                 </Popover>
               </div>
               {pageDetails.created_by === user?.id && (
-                <>
+                <Tooltip
+                  tooltipContent={`${
+                    pageDetails.access
+                      ? "This page is only visible to you."
+                      : "This page can be viewed by anyone in the project."
+                  }`}
+                  theme="dark"
+                >
                   {pageDetails.access ? (
                     <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
                       <LockClosedIcon className="h-4 w-4" />
@@ -429,7 +443,7 @@ const SinglePage: NextPage = () => {
                       <LockOpenIcon className="h-4 w-4" />
                     </button>
                   )}
-                </>
+                </Tooltip>
               )}
               {pageDetails.is_favorite ? (
                 <button onClick={handleRemoveFromFavorites} className="z-10">
@@ -442,20 +456,20 @@ const SinglePage: NextPage = () => {
               )}
             </div>
           </div>
-          <div>
+          <div className="px-4 pt-6">
             <TextArea
               id="name"
               name="name"
-              placeholder="Enter issue name"
+              placeholder="Page Title"
               value={watch("name")}
               onBlur={handleSubmit(updatePage)}
               onChange={(e) => setValue("name", e.target.value)}
               required={true}
-              className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-semibold outline-none ring-0 focus:ring-1 focus:ring-gray-200"
+              className="min-h-10 block w-full resize-none overflow-hidden placeholder:text-[#858E96] rounded border-none bg-transparent px-3 py-2 text-3xl font-semibold outline-none ring-0 "
               role="textbox"
             />
           </div>
-          <div className="px-3">
+          <div className="px-7">
             {pageBlocks ? (
               <>
                 <DragDropContext onDragEnd={handleOnDragEnd}>
@@ -481,7 +495,7 @@ const SinglePage: NextPage = () => {
                 {!createBlockForm && (
                   <button
                     type="button"
-                    className="flex items-center gap-1 rounded bg-gray-100 px-2.5 py-1 ml-6 text-xs hover:bg-gray-200 mt-4"
+                    className="flex items-center gap-1 rounded-full bg-gray-100 px-2 py-1 pr-2.5 text-xs hover:bg-gray-200 mt-4"
                     onClick={handleNewBlock}
                   >
                     <PlusIcon className="h-3 w-3" />

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -177,24 +177,28 @@ const ProjectPages: NextPage = () => {
         <div className="space-y-4">
           <form
             onSubmit={handleSubmit(createPage)}
-            className="flex items-center justify-between gap-2 rounded-[10px] border border-gray-200 bg-white p-2 shadow-sm"
+            className="flex relative justify-between gap-2 mb-12 rounded-[6px] h-[80px] border border-gray-200 bg-white p-2 shadow-md"
           >
             <Input
               type="text"
               name="name"
               register={register}
-              className="border-none outline-none focus:ring-0"
+              className="border-none text-start font-semibold flex break-all text-2xl outline-none focus:ring-0"
-              placeholder="Type to create a new page..."
+              placeholder="Title"
             />
             {watch("name") !== "" && (
-              <PrimaryButton type="submit" loading={isSubmitting}>
+              <PrimaryButton
+                type="submit"
+                loading={isSubmitting}
+                className="h-8 absolute top-6 right-2"
+              >
                 {isSubmitting ? "Creating..." : "Create"}
               </PrimaryButton>
             )}
           </form>
           <div>
             <Tab.Group>
-              <Tab.List as="div" className="flex items-center justify-between">
+              <Tab.List as="div" className="flex items-center justify-between mb-6">
                 <div className="flex gap-4">
                   {["Recent", "All", "Favorites", "Created by me", "Created by others"].map(
                     (tab, index) => (
@@ -213,7 +217,7 @@ const ProjectPages: NextPage = () => {
                     )
                   )}
                 </div>
-                <div className="flex items-center gap-x-1">
+                <div className="flex gap-x-1">
                   <button
                     type="button"
                     className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-gray-200 ${