fix: layout height and overflow (#1004)

* fix: kanban height issue

* dev: Layout fixes

* dev: layout changes

* fix: layout overflow settings and fixed header

* style: filters padding fixed

* fix: hide filters if none are applied

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

apps/app/components/core/board-view/all-boards.tsx

@@ -44,7 +44,7 @@ export const AllBoards: React.FC<Props> = ({
   return (
     <>
       {groupedByIssues ? (
-        <div className="horizontal-scroll-enable flex h-[calc(100vh-140px)] gap-x-4">
+        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
           {Object.keys(groupedByIssues).map((singleGroup, index) => {
             const currentState =
               selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;

apps/app/components/core/board-view/single-issue.tsx

@@ -392,7 +392,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                   <div className="flex items-center gap-1 text-brand-secondary">
-                    <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
+                    <LinkIcon className="h-3.5 w-3.5" />
                     {issue.link_count}
                   </div>
                 </Tooltip>
@@ -402,7 +402,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                   <div className="flex items-center gap-1 text-brand-secondary">
-                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
+                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                     {issue.attachment_count}
                   </div>
                 </Tooltip>

apps/app/components/core/calendar-view/calendar.tsx

@@ -229,7 +229,7 @@ export const CalendarView: React.FC<Props> = ({ addIssueToDate }) => {
 
   return calendarIssues ? (
     <DragDropContext onDragEnd={onDragEnd}>
-      <div className="-m-2 h-full overflow-y-auto rounded-lg text-brand-secondary">
+      <div className="-m-2 h-full overflow-y-auto rounded-lg p-8 text-brand-secondary">
         <div className="mb-4 flex items-center justify-between">
           <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
             <Popover className="flex h-full items-center justify-start rounded-lg">

apps/app/components/core/issues-view.tsx

@@ -353,7 +353,7 @@ export const IssuesView: React.FC<Props> = ({
           console.log(e);
         });
     },
-    [workspaceSlug, projectId, cycleId, params]
+    [workspaceSlug, projectId, cycleId, params, selectedGroup, setToastAlert]
   );
 
   const removeIssueFromModule = useCallback(
@@ -396,7 +396,7 @@ export const IssuesView: React.FC<Props> = ({
           console.log(e);
         });
     },
-    [workspaceSlug, projectId, moduleId, params]
+    [workspaceSlug, projectId, moduleId, params, selectedGroup, setToastAlert]
   );
 
   const handleTrashBox = useCallback(
@@ -442,12 +442,9 @@ export const IssuesView: React.FC<Props> = ({
         handleClose={() => setTransferIssuesModal(false)}
         isOpen={transferIssuesModal}
       />
+      {areFiltersApplied && (
         <>
-        <div
+          <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
-          className={`flex items-center justify-between gap-2 ${
-            issueView === "list" ? (areFiltersApplied ? "mt-6 px-8" : "") : "-mt-2"
-          }`}
-        >
             <FilterList filters={filters} setFilters={setFilters} />
             {areFiltersApplied && (
               <PrimaryButton
@@ -471,10 +468,9 @@ export const IssuesView: React.FC<Props> = ({
               </PrimaryButton>
             )}
           </div>
-        {areFiltersApplied && (
+          {<div className="mt-3 border-t border-brand-base" />}
-          <div className={`${issueView === "list" ? "mt-4" : "my-4"} border-t border-brand-base`} />
-        )}
         </>
+      )}
 
       <DragDropContext onDragEnd={handleOnDragEnd}>
         <StrictModeDroppable droppableId="trashBox">

apps/app/components/core/list-view/single-issue.tsx

@@ -314,7 +314,7 @@ export const SingleListIssue: React.FC<Props> = ({
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
                 <div className="flex items-center gap-1 text-brand-secondary">
-                  <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
+                  <LinkIcon className="h-3.5 w-3.5" />
                   {issue.link_count}
                 </div>
               </Tooltip>
@@ -324,7 +324,7 @@ export const SingleListIssue: React.FC<Props> = ({
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
                 <div className="flex items-center gap-1 text-brand-secondary">
-                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
+                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
                   {issue.attachment_count}
                 </div>
               </Tooltip>

apps/app/components/integration/github/select-repository.tsx

@@ -81,7 +81,7 @@ export const SelectRepository: React.FC<Props> = ({
           {userRepositories && options.length < totalCount && (
             <button
               type="button"
-              className="w-full p-1 text-center text-[0.6rem] text-gray-500 hover:bg-hover-gray"
+              className="w-full p-1 text-center text-[0.6rem] text-brand-secondary hover:bg-brand-surface-2"
               onClick={() => setSize(size + 1)}
               disabled={isValidating}
             >

apps/app/components/issues/my-issues-list-item.tsx

@@ -82,8 +82,8 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
   const isNotAllowed = false;
 
   return (
-    <div className="mx-6 border-b border-brand-base last:border-b-0">
+    <div className="border-b border-brand-base bg-brand-base px-4 py-2.5 last:border-b-0">
-      <div key={issue.id} className="flex items-center justify-between gap-2 py-3">
+      <div key={issue.id} className="flex items-center justify-between gap-2">
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
             {properties?.key && (
@@ -171,7 +171,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </Tooltip>
           )}
           {properties.link && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                 <div className="flex items-center gap-1 text-brand-secondary">
                   <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
@@ -181,7 +181,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
             </div>
           )}
           {properties.attachment_count && (
-            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
+            <div className="flex cursor-default items-center rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                 <div className="flex items-center gap-1 text-brand-secondary">
                   <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />

apps/app/components/project/index.ts

@@ -1,6 +1,7 @@
 export * from "./create-project-modal";
 export * from "./delete-project-modal";
 export * from "./sidebar-list";
+export * from "./settings-header"
 export * from "./single-integration-card";
 export * from "./single-project-card";
 export * from "./single-sidebar-project";

apps/app/components/project/settings-header.tsx

@@ -0,0 +1,13 @@
+import SettingsNavbar from "layouts/settings-navbar";
+
+export const SettingsHeader = () => (
+  <div className="mb-12 space-y-6">
+    <div>
+      <h3 className="text-3xl font-semibold">Project Settings</h3>
+      <p className="mt-1 text-brand-secondary">
+        This information will be displayed to every member of the project.
+      </p>
+    </div>
+    <SettingsNavbar />
+  </div>
+);

apps/app/components/workspace/index.ts

@@ -6,5 +6,6 @@ export * from "./help-section";
 export * from "./issues-list";
 export * from "./issues-pie-chart";
 export * from "./issues-stats";
+export * from "./settings-header";
 export * from "./sidebar-dropdown";
 export * from "./sidebar-menu";

apps/app/components/workspace/settings-header.tsx

@@ -0,0 +1,13 @@
+import SettingsNavbar from "layouts/settings-navbar";
+
+export const SettingsHeader = () => (
+  <div className="mb-12 space-y-6">
+    <div>
+      <h3 className="text-3xl font-semibold">Workspace Settings</h3>
+      <p className="mt-1 text-brand-secondary">
+        This information will be displayed to every member of the workspace.
+      </p>
+    </div>
+    <SettingsNavbar />
+  </div>
+);

apps/app/layouts/app-layout/app-header.tsx

@@ -9,8 +9,8 @@ type Props = {
 };
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
-  <div className="flex w-full flex-row flex-wrap items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4">
+  <div className="relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-y-4 border border-b border-brand-base bg-brand-sidebar px-5 py-4">
-    <div className="flex flex-wrap items-center gap-2">
+    <div className="flex items-center gap-2">
       <div className="block md:hidden">
         <button
           type="button"

apps/app/layouts/app-layout/app-sidebar.tsx

@@ -18,13 +18,13 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
   const { collapsed: sidebarCollapse } = useTheme();
 
   return (
-    <nav className="relative z-20 h-screen">
     <div
-        className={`${sidebarCollapse ? "" : "w-auto md:w-[17rem]"} fixed inset-y-0 top-0 ${
+      className={`z-20 h-full flex-shrink-0 border-r border-brand-base ${
+        sidebarCollapse ? "" : "w-auto md:w-[17rem]"
+      } fixed inset-y-0 top-0 ${
         toggleSidebar ? "left-0" : "-left-full md:left-0"
       } flex h-full flex-col bg-brand-sidebar duration-300 md:relative`}
     >
-        <div className="flex h-full flex-1 flex-col border-r border-brand-base">
       <div className="flex h-full flex-1 flex-col">
         <WorkspaceSidebarDropdown />
         <WorkspaceSidebarMenu />
@@ -32,8 +32,6 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
         <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
       </div>
     </div>
-      </div>
-    </nav>
   );
 };
 

apps/app/layouts/auth-layout/project-authorization-wrapper.tsx

@@ -11,7 +11,6 @@ import useIssuesView from "hooks/use-issues-view";
 import Container from "layouts/container";
 import AppHeader from "layouts/app-layout/app-header";
 import AppSidebar from "layouts/app-layout/app-sidebar";
-import SettingsNavbar from "layouts/settings-navbar";
 // components
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
@@ -30,7 +29,6 @@ type Meta = {
 type Props = {
   meta?: Meta;
   children: React.ReactNode;
-  noPadding?: boolean;
   noHeader?: boolean;
   bg?: "primary" | "secondary";
   breadcrumbs?: JSX.Element;
@@ -47,7 +45,6 @@ export const ProjectAuthorizationWrapper: React.FC<Props> = (props) => (
 const ProjectAuthorizationWrapped: React.FC<Props> = ({
   meta,
   children,
-  noPadding = false,
   noHeader = false,
   bg = "primary",
   breadcrumbs,
@@ -68,8 +65,9 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
   return (
     <Container meta={meta}>
       <CommandPalette />
-      <div className="flex h-screen w-full overflow-x-hidden">
+      <div className="relative flex h-screen w-full overflow-hidden">
         <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+
         {loading ? (
           <div className="grid h-full w-full place-items-center p-4">
             <div className="flex flex-col items-center gap-3 text-center">
@@ -107,7 +105,15 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
             type="project"
           />
         ) : (
-          <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
+          <main
+            className={`relative flex h-full w-full flex-col overflow-hidden ${
+              bg === "primary"
+                ? "bg-brand-surface-1"
+                : bg === "secondary"
+                ? "bg-brand-sidebar"
+                : "bg-brand-base"
+            }`}
+          >
             {!noHeader && (
               <AppHeader
                 breadcrumbs={breadcrumbs}
@@ -116,30 +122,11 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
                 setToggleSidebar={setToggleSidebar}
               />
             )}
-            <div
+            <div className="h-full w-full overflow-hidden">
-              className={`flex w-full flex-grow flex-col ${
+              <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
-                noPadding || issueView === "list" ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
-              } ${
-                bg === "primary"
-                  ? "bg-brand-surface-1"
-                  : bg === "secondary"
-                  ? "bg-brand-sidebar"
-                  : "bg-brand-base"
-              }`}
-            >
-              {settingsLayout && (
-                <div className="mb-12 space-y-6">
-                  <div>
-                    <h3 className="text-3xl font-semibold">Project Settings</h3>
-                    <p className="mt-1 text-brand-secondary">
-                      This information will be displayed to every member of the project.
-                    </p>
-                  </div>
-                  <SettingsNavbar />
-                </div>
-              )}
                 {children}
               </div>
+            </div>
           </main>
         )}
       </div>

apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx

@@ -32,25 +32,21 @@ type Meta = {
 type Props = {
   meta?: Meta;
   children: React.ReactNode;
-  noPadding?: boolean;
   noHeader?: boolean;
   bg?: "primary" | "secondary";
   breadcrumbs?: JSX.Element;
   left?: JSX.Element;
   right?: JSX.Element;
-  profilePage?: boolean;
 };
 
 export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
   meta,
   children,
-  noPadding = false,
   noHeader = false,
   bg = "primary",
   breadcrumbs,
   left,
   right,
-  profilePage = false,
 }) => {
   const [toggleSidebar, setToggleSidebar] = useState(false);
 
@@ -101,7 +97,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
     <UserAuthorizationLayout>
       <Container meta={meta}>
         <CommandPalette />
-        <div className="flex h-screen w-full overflow-x-hidden">
+        <div className="relative flex h-screen w-full overflow-hidden">
           <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
           {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
             <NotAuthorizedView
@@ -117,7 +113,15 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
               type="workspace"
             />
           ) : (
-            <main className="flex h-screen w-full min-w-0 flex-col overflow-y-auto">
+            <main
+              className={`relative flex h-full w-full flex-col overflow-hidden ${
+                bg === "primary"
+                  ? "bg-brand-surface-1"
+                  : bg === "secondary"
+                  ? "bg-brand-sidebar"
+                  : "bg-brand-base"
+              }`}
+            >
               {!noHeader && (
                 <AppHeader
                   breadcrumbs={breadcrumbs}
@@ -126,34 +130,11 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
                   setToggleSidebar={setToggleSidebar}
                 />
               )}
-              <div
+              <div className="h-full w-full overflow-hidden">
-                className={`flex w-full flex-grow flex-col ${
+                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
-                  noPadding ? "" : settingsLayout || profilePage ? "p-8 lg:px-28" : "p-8"
-                } ${
-                  bg === "primary"
-                    ? "bg-brand-surface-1"
-                    : bg === "secondary"
-                    ? "bg-brand-surface-1"
-                    : "bg-brand-base"
-                }`}
-              >
-                {(settingsLayout || profilePage) && (
-                  <div className="mb-12 space-y-6">
-                    <div>
-                      <h3 className="text-3xl font-semibold">
-                        {profilePage ? "Profile" : "Workspace"} Settings
-                      </h3>
-                      <p className="mt-1 text-brand-secondary">
-                        {profilePage
-                          ? "This information will be visible to only you."
-                          : "This information will be displayed to every member of the workspace."}
-                      </p>
-                    </div>
-                    <SettingsNavbar profilePage={profilePage} />
-                  </div>
-                )}
                   {children}
                 </div>
+              </div>
             </main>
           )}
         </div>

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

@@ -45,7 +45,7 @@ const WorkspacePage: NextPage = () => {
         isOpen={isProductUpdatesModalOpen}
         setIsOpen={setIsProductUpdatesModalOpen}
       />
-      <div className="h-full w-full">
+      <div className="p-8">
         <div className="flex flex-col gap-8">
           <div
             className="text-brand-muted-1 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg bg-brand-base px-8 py-6 md:flex-row md:items-center md:py-3"

apps/app/pages/[workspaceSlug]/me/my-issues.tsx

@@ -43,7 +43,6 @@ const MyIssuesPage: NextPage = () => {
           <BreadcrumbItem title="My Issues" />
         </Breadcrumbs>
       }
-      noPadding
       right={
         <div className="flex items-center gap-2">
           {myIssues && myIssues.length > 0 && (
@@ -115,24 +114,12 @@ const MyIssuesPage: NextPage = () => {
         {myIssues ? (
           <>
             {myIssues.length > 0 ? (
-              <div className="flex flex-col space-y-5">
               <Disclosure as="div" defaultOpen>
                 {({ open }) => (
-                    <div className="rounded-[10px] border border-brand-base bg-brand-base">
+                  <div>
-                      <div
+                    <div className="flex items-center px-4 py-2.5">
-                        className={`flex items-center justify-start bg-brand-surface-1 px-4 py-2.5 ${
-                          open ? "rounded-t-[10px]" : "rounded-[10px]"
-                        }`}
-                      >
                       <Disclosure.Button>
                         <div className="flex items-center gap-x-2">
-                            <span>
-                              <ChevronDownIcon
-                                className={`h-4 w-4 text-gray-500 ${
-                                  !open ? "-rotate-90 transform" : ""
-                                }`}
-                              />
-                            </span>
                           <h2 className="font-medium leading-5">My Issues</h2>
                           <span className="rounded-full bg-brand-surface-2 py-0.5 px-3 text-sm text-brand-secondary">
                             {myIssues.length}
@@ -163,7 +150,6 @@ const MyIssuesPage: NextPage = () => {
                   </div>
                 )}
               </Disclosure>
-              </div>
             ) : (
               <div className="flex h-full w-full flex-col items-center justify-center px-4">
                 <EmptySpace

apps/app/pages/[workspaceSlug]/me/profile/activity.tsx

@@ -11,6 +11,7 @@ import { Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // fetch-keys
 import { USER_ACTIVITY } from "constants/fetch-keys";
+import SettingsNavbar from "layouts/settings-navbar";
 
 const ProfileActivity = () => {
   const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
@@ -25,8 +26,17 @@ const ProfileActivity = () => {
           <BreadcrumbItem title="My Profile Activity" />
         </Breadcrumbs>
       }
-      profilePage
     >
+      <div className="px-24 py-8">
+        <div className="mb-12 space-y-6">
+          <div>
+            <h3 className="text-3xl font-semibold">Profile Settings</h3>
+            <p className="mt-1 text-brand-secondary">
+              This information will be visible to only you.
+            </p>
+          </div>
+          <SettingsNavbar profilePage />
+        </div>
         {userActivity ? (
           userActivity.results.length > 0 ? (
             <Feeds activities={userActivity.results} />
@@ -39,6 +49,7 @@ const ProfileActivity = () => {
             <Loader.Item height="40px" />
           </Loader>
         )}
+      </div>
     </WorkspaceAuthorizationLayout>
   );
 };

apps/app/pages/[workspaceSlug]/me/profile/index.tsx

@@ -24,6 +24,7 @@ import type { NextPage } from "next";
 import type { IUser } from "types";
 // constants
 import { USER_ROLES } from "constants/workspace";
+import SettingsNavbar from "layouts/settings-navbar";
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
@@ -130,7 +131,6 @@ const Profile: NextPage = () => {
           <BreadcrumbItem title="My Profile" />
         </Breadcrumbs>
       }
-      profilePage
     >
       <ImageUploadModal
         isOpen={isImageUploadModalOpen}
@@ -144,6 +144,16 @@ const Profile: NextPage = () => {
         userImage
       />
       {myProfile ? (
+        <div className="px-24 py-8">
+          <div className="mb-12 space-y-6">
+            <div>
+              <h3 className="text-3xl font-semibold">Profile Settings</h3>
+              <p className="mt-1 text-brand-secondary">
+                This information will be visible to only you.
+              </p>
+            </div>
+            <SettingsNavbar profilePage />
+          </div>
           <div className="space-y-8 sm:space-y-12">
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
@@ -225,7 +235,9 @@ const Profile: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold text-brand-base">Email</h4>
-              <p className="text-sm text-brand-secondary">The email address that you are using.</p>
+                <p className="text-sm text-brand-secondary">
+                  The email address that you are using.
+                </p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Input
@@ -285,6 +297,7 @@ const Profile: NextPage = () => {
               </SecondaryButton>
             </div>
           </div>
+        </div>
       ) : (
         <div className="grid h-full w-full place-items-center px-4 sm:px-0">
           <Spinner />

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

@@ -124,7 +124,7 @@ const ProjectCycles: NextPage = () => {
         handleClose={() => setCreateUpdateCycleModal(false)}
         data={selectedCycle}
       />
-      <div className="space-y-8">
+      <div className="space-y-8 p-8">
         <div className="flex flex-col gap-5">
           {currentAndUpcomingCycles && currentAndUpcomingCycles.current_cycle.length > 0 && (
             <h3 className="text-3xl font-semibold text-brand-base">Current Cycle</h3>

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -122,7 +122,6 @@ const IssueDetailsPage: NextPage = () => {
 
   return (
     <ProjectAuthorizationWrapper
-      noPadding
       breadcrumbs={
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem

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

@@ -77,7 +77,7 @@ const ProjectModules: NextPage = () => {
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon className="w-4 h-4" />
+          <PlusIcon className="h-4 w-4" />
           Add Module
         </PrimaryButton>
       }
@@ -89,7 +89,7 @@ const ProjectModules: NextPage = () => {
       />
       {modules ? (
         modules.length > 0 ? (
-          <div className="space-y-5">
+          <div className="space-y-5 p-8">
             <div className="flex flex-col gap-5">
               <h3 className="text-3xl font-semibold text-brand-base">Modules</h3>
 

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

@@ -312,7 +312,7 @@ const SinglePage: NextPage = () => {
       }
     >
       {pageDetails ? (
-        <div className="h-full w-full space-y-4 rounded-md border border-brand-base bg-brand-base p-4">
+        <div className="space-y-4 p-4">
           <div className="flex items-center justify-between gap-2 px-3">
             <button
               type="button"

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

@@ -195,7 +195,7 @@ const ProjectPages: NextPage = () => {
           </PrimaryButton>
         }
       >
-        <div className="space-y-4">
+        <div className="space-y-4 p-8">
           <form
             onSubmit={handleSubmit(createPage)}
             className="relative mb-12 flex items-center justify-between gap-2 rounded-[6px] border border-brand-base p-2 shadow"

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx

@@ -20,6 +20,7 @@ import { IProject, IWorkspace } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
+import { SettingsHeader } from "components/project";
 
 const defaultValues: Partial<IProject> = {
   project_lead: null,
@@ -103,7 +104,8 @@ const ControlSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(onSubmit)} className="px-24 py-8">
+        <SettingsHeader />
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx

@@ -27,6 +27,7 @@ import { IEstimate, IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import { SettingsHeader } from "components/project";
 
 const EstimatesSettings: NextPage = () => {
   const [estimateFormOpen, setEstimateFormOpen] = useState(false);
@@ -98,6 +99,14 @@ const EstimatesSettings: NextPage = () => {
 
   return (
     <>
+      <CreateUpdateEstimateModal
+        isOpen={estimateFormOpen}
+        data={estimateToUpdate}
+        handleClose={() => {
+          setEstimateFormOpen(false);
+          setEstimateToUpdate(undefined);
+        }}
+      />
       <ProjectAuthorizationWrapper
         breadcrumbs={
           <Breadcrumbs>
@@ -109,14 +118,8 @@ const EstimatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <CreateUpdateEstimateModal
+        <div className="px-24 py-8">
-          isOpen={estimateFormOpen}
+          <SettingsHeader />
-          data={estimateToUpdate}
-          handleClose={() => {
-            setEstimateFormOpen(false);
-            setEstimateToUpdate(undefined);
-          }}
-        />
           <section className="flex items-center justify-between">
             <h3 className="text-2xl font-semibold">Estimates</h3>
             <div className="col-span-12 space-y-5 sm:col-span-7">
@@ -139,7 +142,7 @@ const EstimatesSettings: NextPage = () => {
           </section>
           {estimatesList ? (
             estimatesList.length > 0 ? (
-            <section className="mt-4 mb-8 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
+              <section className="mt-4 divide-y divide-brand-base rounded-xl border border-brand-base bg-brand-base px-6">
                 {estimatesList.map((estimate) => (
                   <SingleEstimate
                     key={estimate.id}
@@ -171,6 +174,7 @@ const EstimatesSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           )}
+        </div>
       </ProjectAuthorizationWrapper>
     </>
   );

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx

@@ -22,6 +22,7 @@ import { IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+import { SettingsHeader } from "components/project";
 
 const featuresList = [
   {
@@ -134,6 +135,8 @@ const FeaturesSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
+      <div className="px-24 py-8">
+        <SettingsHeader />
         <section className="space-y-8">
           <h3 className="text-2xl font-semibold">Features</h3>
           <div className="space-y-5">
@@ -182,6 +185,7 @@ const FeaturesSettings: NextPage = () => {
             </a>
           </div>
         </section>
+      </div>
     </ProjectAuthorizationWrapper>
   );
 };

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

@@ -12,7 +12,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // services
 import projectService from "services/project.service";
 // components
-import { DeleteProjectModal } from "components/project";
+import { DeleteProjectModal, SettingsHeader } from "components/project";
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
 // hooks
@@ -151,7 +151,8 @@ const GeneralSettings: NextPage = () => {
           router.push(`/${workspaceSlug}/projects`);
         }}
       />
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(onSubmit)} className="py-8 px-24">
+        <SettingsHeader />
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx

@@ -10,7 +10,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 import IntegrationService from "services/integration";
 import projectService from "services/project.service";
 // components
-import { SingleIntegration } from "components/project";
+import { SettingsHeader, SingleIntegration } from "components/project";
 // ui
 import { EmptySpace, EmptySpaceItem, Loader } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -54,13 +54,19 @@ const ProjectIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
+      <div className="px-24 py-8">
+        <SettingsHeader />
         {workspaceIntegrations ? (
           workspaceIntegrations.length > 0 ? (
             <section className="space-y-8">
               <div className="flex flex-col items-start gap-3">
                 <h3 className="text-2xl font-semibold">Integrations</h3>
                 <div className="flex items-center gap-3 rounded-[10px] border border-brand-accent/75 bg-brand-accent/5 p-4 text-sm text-brand-base">
-                <ExclamationIcon height={24} width={24} className="fill-current text-brand-base" />
+                  <ExclamationIcon
+                    height={24}
+                    width={24}
+                    className="fill-current text-brand-base"
+                  />
                   <p className="leading-5">
                     Integrations and importers are only available on the cloud version. We plan to
                     open-source our SDKs in the near future so that the community can request or
@@ -102,6 +108,7 @@ const ProjectIntegrations: NextPage = () => {
             <Loader.Item height="40px" />
           </Loader>
         )}
+      </div>
     </ProjectAuthorizationWrapper>
   );
 };

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -7,8 +7,6 @@ import useSWR from "swr";
 // services
 import projectService from "services/project.service";
 import issuesService from "services/issues.service";
-// lib
-import { requiredAdmin } from "lib/auth";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
@@ -24,10 +22,11 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssueLabels, UserAuth } from "types";
+import { IIssueLabels } from "types";
-import type { GetServerSidePropsContext, NextPage } from "next";
+import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { SettingsHeader } from "components/project";
 
 const LabelsSettings: NextPage = () => {
   // create/edit label form
@@ -103,6 +102,8 @@ const LabelsSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
+        <div className="px-24 py-8">
+          <SettingsHeader />
           <section className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">
               <h3 className="text-2xl font-semibold">Labels</h3>
@@ -173,6 +174,7 @@ const LabelsSettings: NextPage = () => {
               </>
             </div>
           </section>
+        </div>
       </ProjectAuthorizationWrapper>
     </>
   );

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx

@@ -27,6 +27,7 @@ import type { NextPage } from "next";
 import { PROJECT_INVITATIONS, PROJECT_MEMBERS, WORKSPACE_DETAILS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
+import { SettingsHeader } from "components/project";
 
 const MembersSettings: NextPage = () => {
   const [inviteModal, setInviteModal] = useState(false);
@@ -141,6 +142,8 @@ const MembersSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
+        <div className="px-24 py-8">
+          <SettingsHeader />
           <section className="space-y-8">
             <div className="flex items-end justify-between gap-4">
               <h3 className="text-2xl font-semibold">Members</h3>
@@ -255,6 +258,7 @@ const MembersSettings: NextPage = () => {
               </div>
             )}
           </section>
+        </div>
       </ProjectAuthorizationWrapper>
     </>
   );

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -28,6 +28,7 @@ import { getStatesList, orderStateGroups } from "helpers/state.helper";
 import type { NextPage } from "next";
 // fetch-keys
 import { STATES_LIST } from "constants/fetch-keys";
+import { SettingsHeader } from "components/project";
 
 const StatesSettings: NextPage = () => {
   const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
@@ -66,6 +67,8 @@ const StatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
+        <div className="px-24 py-8">
+          <SettingsHeader />
           <div className="grid grid-cols-12 gap-10">
             <div className="col-span-12 sm:col-span-5">
               <h3 className="text-2xl font-semibold text-brand-base">States</h3>
@@ -141,6 +144,7 @@ const StatesSettings: NextPage = () => {
               )}
             </div>
           </div>
+        </div>
       </ProjectAuthorizationWrapper>
     </>
   );

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

@@ -97,7 +97,7 @@ const ProjectViews: NextPage = () => {
       />
       {views ? (
         views.length > 0 ? (
-          <div className="space-y-5">
+          <div className="space-y-5 p-8">
             <h3 className="text-3xl font-semibold text-brand-base">Views</h3>
             <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
               {views.map((view) => (

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

@@ -83,7 +83,7 @@ const ProjectsPage: NextPage = () => {
         data={projects?.find((item) => item.id === deleteProject) ?? null}
       />
       {projects ? (
-        <>
+        <div className="p-8">
           {projects.length === 0 ? (
             <EmptyState
               type="project"
@@ -103,7 +103,7 @@ const ProjectsPage: NextPage = () => {
               ))}
             </div>
           )}
-        </>
+        </div>
       ) : (
         <Loader className="grid grid-cols-3 gap-4">
           <Loader.Item height="100px" />

apps/app/pages/[workspaceSlug]/settings/billing.tsx

@@ -8,6 +8,7 @@ import useSWR from "swr";
 import workspaceService from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { SettingsHeader } from "components/workspace";
 // ui
 import { SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -38,6 +39,8 @@ const BillingSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
+      <div className="px-24 py-8">
+        <SettingsHeader />
         <section className="space-y-8">
           <div>
             <h3 className="text-3xl font-bold leading-6">Billing & Plans</h3>
@@ -65,6 +68,7 @@ const BillingSettings: NextPage = () => {
             </div>
           </div>
         </section>
+      </div>
     </WorkspaceAuthorizationLayout>
   );
 };

apps/app/pages/[workspaceSlug]/settings/import-export.tsx

@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { SettingsHeader } from "components/workspace";
 // components
 import IntegrationGuide from "components/integration/guide";
 // ui
@@ -22,7 +23,10 @@ const ImportExport: NextPage = () => {
         </Breadcrumbs>
       }
     >
+      <div className="px-24 py-8">
+        <SettingsHeader />
         <IntegrationGuide />
+      </div>
     </WorkspaceAuthorizationLayout>
   );
 };

apps/app/pages/[workspaceSlug]/settings/index.tsx

@@ -14,9 +14,10 @@ import fileService from "services/file.service";
 import useToast from "hooks/use-toast";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import SettingsNavbar from "layouts/settings-navbar";
 // components
 import { ImageUploadModal } from "components/core";
-import { DeleteWorkspaceModal } from "components/workspace";
+import { DeleteWorkspaceModal, SettingsHeader } from "components/workspace";
 // ui
 import { Spinner, Input, CustomSelect, SecondaryButton, DangerButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -172,6 +173,8 @@ const WorkspaceSettings: NextPage = () => {
         }}
         data={activeWorkspace ?? null}
       />
+      <div className="px-24 py-8">
+        <SettingsHeader />
         {activeWorkspace ? (
           <div className="space-y-8 sm:space-y-12">
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
@@ -313,8 +316,9 @@ const WorkspaceSettings: NextPage = () => {
                 <h4 className="text-lg font-semibold">Danger Zone</h4>
                 <p className="text-sm text-brand-secondary">
                   The danger zone of the workspace delete page is a critical area that requires
-                careful consideration and attention. When deleting a workspace, all of the data and
+                  careful consideration and attention. When deleting a workspace, all of the data
-                resources within that workspace will be permanently removed and cannot be recovered.
+                  and resources within that workspace will be permanently removed and cannot be
+                  recovered.
                 </p>
               </div>
               <div className="col-span-12 sm:col-span-6">
@@ -329,6 +333,7 @@ const WorkspaceSettings: NextPage = () => {
             <Spinner />
           </div>
         )}
+      </div>
     </WorkspaceAuthorizationLayout>
   );
 };

apps/app/pages/[workspaceSlug]/settings/integrations.tsx

@@ -9,6 +9,7 @@ import workspaceService from "services/workspace.service";
 import IntegrationService from "services/integration";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { SettingsHeader } from "components/workspace";
 // components
 import { SingleIntegrationCard } from "components/integration";
 // ui
@@ -46,6 +47,8 @@ const WorkspaceIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
+      <div className="px-24 py-8">
+        <SettingsHeader />
         <section className="space-y-8">
           <div className="flex flex-col items-start gap-3">
             <h3 className="text-2xl font-semibold">Integrations</h3>
@@ -71,6 +74,7 @@ const WorkspaceIntegrations: NextPage = () => {
             )}
           </div>
         </section>
+      </div>
     </WorkspaceAuthorizationLayout>
   );
 };

apps/app/pages/[workspaceSlug]/settings/members.tsx

@@ -11,6 +11,7 @@ import useToast from "hooks/use-toast";
 import workspaceService from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { SettingsHeader } from "components/workspace";
 // components
 import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove";
 import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
@@ -137,6 +138,8 @@ const MembersSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
+        <div className="px-24 py-8">
+          <SettingsHeader />
           <section className="space-y-8">
             <div className="flex items-end justify-between gap-4">
               <h3 className="text-2xl font-semibold">Members</h3>
@@ -248,6 +251,7 @@ const MembersSettings: NextPage = () => {
               </div>
             )}
           </section>
+        </div>
       </WorkspaceAuthorizationLayout>
     </>
   );

apps/app/styles/globals.css

@@ -112,6 +112,7 @@ body {
 .horizontal-scroll-enable::-webkit-scrollbar {
   display: block;
   height: 7px;
+  width: 0;
 }
 
 .horizontal-scroll-enable::-webkit-scrollbar-track {

apps/app/tailwind.config.js

@@ -12,10 +12,6 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        theme: "#3f76ff",
-        "hover-gray": "#f5f5f5",
-        primary: "#f9fafb", // gray-50
-        secondary: "white",
         brand: {
           accent: withOpacity("--color-accent"),
           base: withOpacity("--color-bg-base"),