[WEB-2273] Chore: page alignments (#1042)

* chore: headers + common containers

* fix: filters code splitting

* fix: home header

* fix: header changes

* chore: page alignments fixed

* fix: uncommented filters

* fix: used enums

* fix: cards + filters

* fix: enum changes

* fix: reverted package changes

* fix: reverted package changes

* fix: Card + tags seperated + naming fixed

* fix: card + tags seperated + naming fixed

* fix: mobile headers fixed partially

* fix: build errors + minor css

* fix: ee features alignments

* fix: fixed lint issue

web/ee/components/active-cycles/workspace-active-cycles-list.tsx

@@ -7,7 +7,7 @@ import { useParams } from "next/navigation";
 // ui
 import useSWR from "swr";
 import { ICycle } from "@plane/types";
-import { Button, Loader } from "@plane/ui";
+import { Button, ContentWrapper, Loader } from "@plane/ui";
 // components
 import { EmptyState } from "@/components/empty-state";
 // constants
@@ -83,22 +83,20 @@ export const WorkspaceActiveCyclesList = observer(() => {
   }
 
   return (
-    <div
-      ref={containerRef}
-      className="h-full w-full overflow-y-scroll bg-custom-background-90 vertical-scrollbar scrollbar-md"
-    >
-      <div>
-        {cycles.slice(0, cyclesInView).map((cycle: any) => (
-          <div key={cycle.id} className="px-5 pt-5 last:pb-5">
-            <ActiveCycleInfoCard workspaceSlug={workspaceSlug?.toString()} projectId={cycle.project_id} cycle={cycle} />
-          </div>
-        ))}
-        {cyclesInView < cycles.length && cycles.length > 0 && (
-          <div ref={setElementRef} className="p-5">
-            <div className="flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded md:px-1 px-4 py-1.5 bg-custom-background-80 animate-pulse" />
-          </div>
-        )}
-      </div>
+    <ContentWrapper ref={containerRef} className="space-y-4">
+      {cycles.slice(0, cyclesInView).map((cycle: any) => (
+        <ActiveCycleInfoCard
+          key={cycle.id}
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={cycle.project_id}
+          cycle={cycle}
+        />
+      ))}
+      {cyclesInView < cycles.length && cycles.length > 0 && (
+        <div ref={setElementRef} className="p-5">
+          <div className="flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded md:px-1 px-4 py-1.5 bg-custom-background-80 animate-pulse" />
+        </div>
+      )}
       {pageCount + 1 < totalPages && cycles.length !== 0 && (
         <div className="flex items-center justify-center gap-4 text-xs w-full py-5">
           <Button variant="outline-primary" size="sm" onClick={handleLoadMore}>
@@ -108,6 +106,6 @@ export const WorkspaceActiveCyclesList = observer(() => {
       )}
 
       {!isLoading && cycles.length === 0 && <EmptyState type={EmptyStateType.WORKSPACE_ACTIVE_CYCLES} />}
-    </div>
+    </ContentWrapper>
   );
 });

web/ee/components/active-cycles/workspace-active-cycles-upgrade.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 // icons
 import { Crown } from "lucide-react";
 // ui
-import { Button } from "@plane/ui";
+import { Button, ContentWrapper } from "@plane/ui";
 // constants
 import { WORKSPACE_ACTIVE_CYCLES_DETAILS } from "@/constants/cycle";
 // helper
@@ -25,7 +25,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
   const isDarkMode = userProfile?.theme.theme === "dark";
 
   return (
-    <div className="vertical-scrollbar scrollbar-lg flex h-full flex-col gap-10 rounded-xl px-8 pt-8">
+    <ContentWrapper>
       <div
         className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": userProfile?.theme.theme === "dark",
@@ -85,6 +85,6 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
           </div>
         ))}
       </div>
-    </div>
+    </ContentWrapper>
   );
 });

web/ee/components/cycles/active-cycles/card.tsx

@@ -3,6 +3,7 @@ import useSWR from "swr";
 // types
 import { IActiveCycle } from "@plane/types";
 // plane web components
+import { Card } from "@plane/ui";
 import {
   ActiveCyclesProjectTitle,
   ActiveCycleHeader,
@@ -43,10 +44,7 @@ export const ActiveCycleInfoCard: FC<ActiveCycleInfoCardProps> = (props) => {
   }, [progress, cycle]);
 
   return (
-    <div
-      key={cycle.id}
-      className="flex flex-col gap-4 p-4 rounded-xl border border-custom-border-200 bg-custom-background-100"
-    >
+    <Card key={cycle.id}>
       <ActiveCyclesProjectTitle project={cycle.project_detail} />
 
       <ActiveCycleHeader cycle={cycle} workspaceSlug={workspaceSlug} projectId={projectId} />
@@ -56,6 +54,6 @@ export const ActiveCycleInfoCard: FC<ActiveCycleInfoCardProps> = (props) => {
         <ActiveCycleProductivity cycle={cycleData} workspaceSlug={workspaceSlug} />
         <ActiveCyclePriorityIssues cycle={cycle} workspaceSlug={workspaceSlug} projectId={projectId} />
       </div>
-    </div>
+    </Card>
   );
 };

web/ee/components/projects/header/root.tsx

@@ -38,7 +38,7 @@ export const ProjectsListHeader = observer(() => {
 
   if (!workspaceSlug || !workspaceId) return <></>;
   return isProjectGroupingEnabled ? (
-    <div className="flex-shrink-0 relative z-10 flex h-[3.75rem] w-full bg-custom-sidebar-background-100 p-4">
+    <div className="flex-shrink-0 relative z-10 flex h-[3.75rem] w-full bg-custom-sidebar-background-100">
       {/* flex-row items-center justify-between gap-x-2 gap-y-4 */}
       <div className="w-full h-full relative flex justify-between items-center gap-x-2 gap-y-4">
         <div className="flex items-center gap-4">

web/ee/components/projects/layouts/attributes.tsx

@@ -51,7 +51,7 @@ const Attributes: React.FC<Props> = observer((props) => {
     e.preventDefault();
   };
   return (
-    <div className={cn("flex gap-2 flex-wrap p-2", containerClass)} data-prevent-nprogress>
+    <div className={cn("flex gap-2 flex-wrap p-4", containerClass)} data-prevent-nprogress>
       <div className="h-5 my-auto" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
         <StateDropdown
           value={project.state_id || ""}

web/ee/components/projects/layouts/board/group.tsx

@@ -17,7 +17,7 @@ export const ProjectBoardGroup: FC<ProjectBoardGroup> = observer((props) => {
   const [verticalAlign, setVerticalAlign] = useState<{ [key: string]: boolean }>({});
 
   return (
-    <div className="w-full h-full overflow-hidden overflow-x-auto relative flex px-3 space-x-3 horizontal-scrollbar scrollbar-lg">
+    <div className="w-full h-full overflow-hidden overflow-x-auto relative flex space-x-3 horizontal-scrollbar scrollbar-lg">
       {Object.entries(groupByProjectIds)?.map(([groupKey, projectIds]) => (
         <div
           key={groupKey}

web/ee/components/projects/layouts/board/root.tsx

@@ -3,6 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // plane web components
+import { ContentWrapper } from "@plane/ui";
 import { ProjectBoardGroup } from "@/plane-web/components/projects/layouts/board";
 // plane web hooks
 import { useProjectFilter } from "@/plane-web/hooks/store";
@@ -17,9 +18,9 @@ export const ProjectBoardLayout: FC = observer(() => {
 
   return (
     <ProjectLayoutHOC layout={EProjectLayouts.BOARD}>
-      <div className="w-full h-full overflow-hidden">
+      <ContentWrapper className="!py-0">
         <ProjectBoardGroup groupByProjectIds={groupByProjectIds || {}} />
-      </div>
+      </ContentWrapper>
     </ProjectLayoutHOC>
   );
 });

web/ee/components/projects/layouts/gallery/base-gallery-root.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 // assets
+import { ContentWrapper } from "@plane/ui";
 import { useProject } from "@/hooks/store";
 import { useProjectFilter } from "@/plane-web/hooks/store/workspace-project-states/use-project-filters";
 import { TProject } from "@/plane-web/types/projects";
@@ -16,7 +17,7 @@ export const BaseProjectRoot = observer(() => {
 
   return (
     <ProjectLayoutHOC layout={EProjectLayouts.GALLERY}>
-      <div className="vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto p-8">
+      <ContentWrapper>
         <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5">
           {filteredProjectIds &&
             filteredProjectIds.map((projectId) => {
@@ -25,7 +26,7 @@ export const BaseProjectRoot = observer(() => {
               return <ProjectCard key={projectDetails.id} project={projectDetails as TProject} />;
             })}
         </div>
-      </div>
+      </ContentWrapper>
     </ProjectLayoutHOC>
   );
 });

web/ee/components/projects/layouts/gallery/card.tsx

@@ -112,7 +112,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
       </Link>
 
       {!project.archived_at && filters?.scope === EProjectScope.ALL_PROJECTS && (
-        <JoinButton className="m-2" project={project} />
+        <JoinButton className="m-4 mt-0" project={project} />
       )}
     </div>
   );

web/ee/components/projects/layouts/gallery/details.tsx

@@ -131,7 +131,7 @@ const Details: React.FC<Props> = observer((props) => {
   ];
 
   return (
-    <div className=" w-full rounded-t ">
+    <div className="w-full rounded-t ">
       <div className="relative ">
         <div>
           <img
@@ -206,7 +206,7 @@ const Details: React.FC<Props> = observer((props) => {
           )}
         </div>
       </div>
-      <div className="flex h-10 w-full items-center justify-between gap-3 mt-3 p-2">
+      <div className="flex h-10 w-full items-center justify-between gap-3 mt-3 p-4">
         <div className="flex flex-grow items-center gap-2.5 truncate">
           <div className="h-9 w-9 flex-shrink-0 grid place-items-center rounded bg-custom-background-90">
             <Logo logo={project.logo_props} size={18} />

web/ee/components/projects/layouts/gantt/blocks.tsx

@@ -100,12 +100,12 @@ export const ProjectGanttSidebarBlock: React.FC<SidebarProps> = observer((props)
   return projectDetails.is_member ? (
     <Link
       href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
-      className=" w-full cursor-pointer text-sm text-custom-text-100 flex justify-between px-4 h-11"
+      className="px-page-x w-full cursor-pointer text-sm text-custom-text-100 flex justify-between h-11"
     >
       {children}
     </Link>
   ) : (
-    <div className="w-full cursor-not-allowed text-sm text-custom-text-100 flex justify-between px-4 h-11">
+    <div className="px-page-x w-full cursor-not-allowed text-sm text-custom-text-100 flex justify-between h-11">
       {children}
     </div>
   );

web/ee/components/projects/layouts/list/block.tsx

@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
 // ui
-import { Spinner, Tooltip, setToast, TOAST_TYPE, Logo } from "@plane/ui";
+import { Spinner, Tooltip, setToast, TOAST_TYPE, Logo, Row } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -43,10 +43,10 @@ export const ProjectBlock = observer((props: ProjectBlockProps) => {
   const projectDetails = getProjectById(projectId);
   if (!projectDetails || !currentWorkspace) return <Spinner />;
   return (
-    <div
+    <Row
       ref={projectRef}
       className={cn(
-        "group/list-block min-h-[52px] relative flex flex-col gap-2 bg-custom-background-100 hover:bg-custom-background-90 p-3 px-4 py-4 text-sm transition-colors border border-transparent border-b border-b-custom-border-200 md:py-0",
+        "group/list-block min-h-[52px] relative flex flex-col gap-2 bg-custom-background-100 hover:bg-custom-background-90 py-4 text-sm transition-colors border border-transparent border-b border-b-custom-border-200 md:py-0",
         {
           "bg-custom-background-80": isCurrentBlockDragging,
           "md:flex-row md:items-center": isSidebarCollapsed,
@@ -127,6 +127,6 @@ export const ProjectBlock = observer((props: ProjectBlockProps) => {
           </div>
         </>
       </div>
-    </div>
+    </Row>
   );
 });

web/ee/components/projects/layouts/list/list-group.tsx

@@ -6,6 +6,7 @@ import { cn } from "@plane/editor";
 // plane
 import { TIssueGroupByOptions, IIssueDisplayProperties } from "@plane/types";
 //
+import { Row } from "@plane/ui";
 import { useMember, useWorkspace } from "@/hooks/store";
 import { useProjectFilter, useWorkspaceProjectStates } from "@/plane-web/hooks/store";
 import { groupDetails } from "../board/utils";
@@ -70,7 +71,7 @@ export const ListGroup = observer((props: Props) => {
 
   return groupedProjectIds.length > 0 ? (
     <div ref={groupRef} className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`)}>
-      <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 pl-4 pr-3 py-1">
+      <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 py-1">
         <HeaderGroupByCard
           groupID={group}
           icon={details?.icon}
@@ -78,7 +79,7 @@ export const ListGroup = observer((props: Props) => {
           toggleListGroup={toggleListGroup}
           count={groupedProjectIds.length}
         />
-      </div>
+      </Row>
       {shouldExpand && (
         <div className="relative">{groupedProjectIds && <ProjectBlocksList projectIds={groupedProjectIds} />}</div>
       )}