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>
2023-05-05 17:07:29 +05:30 · 2023-05-05 17:07:29 +05:30 · a1de3f581f
commit a1de3f581f
parent 443878994a
41 changed files with 1080 additions and 1035 deletions
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/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;
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/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>
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/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">
--- a/apps/app/components/core/issues-view.tsx
+++ b/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
-          className={`flex items-center justify-between gap-2 ${
-            issueView === "list" ? (areFiltersApplied ? "mt-6 px-8" : "") : "-mt-2"
-          }`}
-        >
+          <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
            <FilterList filters={filters} setFilters={setFilters} />
            {areFiltersApplied && (
              <PrimaryButton
@ -471,10 +468,9 @@ export const IssuesView: React.FC<Props> = ({
              </PrimaryButton>
            )}
          </div>
-        {areFiltersApplied && (
-          <div className={`${issueView === "list" ? "mt-4" : "my-4"} border-t border-brand-base`} />
-        )}
+          {<div className="mt-3 border-t border-brand-base" />}
        </>
+      )}

      <DragDropContext onDragEnd={handleOnDragEnd}>
        <StrictModeDroppable droppableId="trashBox">
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/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>
--- a/apps/app/components/integration/github/select-repository.tsx
+++ b/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}
            >
--- a/apps/app/components/issues/my-issues-list-item.tsx
+++ b/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 key={issue.id} className="flex items-center justify-between gap-2 py-3">
+    <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">
        <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" />
--- a/apps/app/components/project/index.ts
+++ b/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";
--- a/apps/app/components/project/settings-header.tsx
+++ b/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>
+);
--- a/apps/app/components/workspace/index.ts
+++ b/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";
--- a/apps/app/components/workspace/settings-header.tsx
+++ b/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>
+);
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/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="flex flex-wrap items-center gap-2">
+  <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 items-center gap-2">
      <div className="block md:hidden">
        <button
          type="button"
--- a/apps/app/layouts/app-layout/app-sidebar.tsx
+++ b/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>
  );
 };

--- a/apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/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
-              className={`flex w-full flex-grow flex-col ${
-                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>
-              )}
+            <div className="h-full w-full overflow-hidden">
+              <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
                {children}
              </div>
+            </div>
          </main>
        )}
      </div>
--- a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ b/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
-                className={`flex w-full flex-grow flex-col ${
-                  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>
-                )}
+              <div className="h-full w-full overflow-hidden">
+                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
                  {children}
                </div>
+              </div>
            </main>
          )}
        </div>
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/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"
--- a/apps/app/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/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
-                        className={`flex items-center justify-start bg-brand-surface-1 px-4 py-2.5 ${
-                          open ? "rounded-t-[10px]" : "rounded-[10px]"
-                        }`}
-                      >
+                  <div>
+                    <div className="flex items-center px-4 py-2.5">
                      <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
--- a/apps/app/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/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>
  );
 };
--- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/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 />
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/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>
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@ -122,7 +122,6 @@ const IssueDetailsPage: NextPage = () => {

  return (
    <ProjectAuthorizationWrapper
-      noPadding
      breadcrumbs={
        <Breadcrumbs>
          <Breadcrumbs.BreadcrumbItem
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/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>

--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/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"
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@ -25,7 +25,7 @@ import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "compone
 import { Input, PrimaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import {ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
 // types
 import { IPage, TPageViewProps } from "types";
 import type { NextPage } from "next";
@ -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"
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/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">
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/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
-          isOpen={estimateFormOpen}
-          data={estimateToUpdate}
-          handleClose={() => {
-            setEstimateFormOpen(false);
-            setEstimateToUpdate(undefined);
-          }}
-        />
+        <div className="px-24 py-8">
+          <SettingsHeader />
          <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>
    </>
  );
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/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>
  );
 };
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/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">
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/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>
  );
 };
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/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 type { GetServerSidePropsContext, NextPage } from "next";
+import { IIssueLabels } from "types";
+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>
    </>
  );
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/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>
    </>
  );
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/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>
    </>
  );
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/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) => (
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/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" />
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ b/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>
  );
 };
--- a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
+++ b/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>
  );
 };
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/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
-                resources within that workspace will be permanently removed and cannot be recovered.
+                  careful consideration and attention. When deleting a workspace, all of the data
+                  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>
  );
 };
--- a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/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>
  );
 };
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/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>
    </>
  );
--- a/apps/app/styles/globals.css
+++ b/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 {
--- a/apps/app/tailwind.config.js
+++ b/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"),