diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index c88adb402..4eb2430fd 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -1,6 +1,6 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
-import { GanttChartSquare, LayoutGrid, List, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
@@ -8,23 +8,9 @@ import useLocalStorage from "hooks/use-local-storage";
// ui
import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
// helper
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
-
-const moduleViewOptions: { type: "list" | "grid" | "gantt_chart"; icon: any }[] = [
- {
- type: "list",
- icon: List,
- },
- {
- type: "grid",
- icon: LayoutGrid,
- },
- {
- type: "gantt_chart",
- icon: GanttChartSquare,
- },
-];
+// constants
+import { MODULE_VIEW_LAYOUTS } from "constants/module";
export const ModulesListHeader: React.FC = observer(() => {
// router
@@ -68,23 +54,26 @@ export const ModulesListHeader: React.FC = observer(() => {
- {moduleViewOptions.map((option) => (
-
{replaceUnderscoreIfSnakeCase(option.type)} Layout}
- position="bottom"
- >
-
-
- ))}
+
+ {MODULE_VIEW_LAYOUTS.map((layout) => (
+
+
+
+ ))}
+
}
diff --git a/web/components/project/priority-select.tsx b/web/components/project/priority-select.tsx
index 322938579..8863d860d 100644
--- a/web/components/project/priority-select.tsx
+++ b/web/components/project/priority-select.tsx
@@ -82,7 +82,7 @@ export const PrioritySelect: React.FC
= ({
: value === "low"
? "text-green-500"
: "text-custom-text-200"
- } ${value === "urgent" && highlightUrgentPriority ? "text-white" : "text-red-500"}`}
+ } ${value === "urgent" ? (highlightUrgentPriority ? "text-white" : "text-red-500") : ""}`}
/>
{showTitle && {value}}
diff --git a/web/constants/cycle.tsx b/web/constants/cycle.tsx
index aa0063067..697dc3660 100644
--- a/web/constants/cycle.tsx
+++ b/web/constants/cycle.tsx
@@ -23,18 +23,21 @@ export const CYCLE_TAB_LIST = [
},
];
-export const CYCLE_VIEWS = [
+export const CYCLE_VIEW_LAYOUTS = [
{
key: "list",
icon: List,
+ title: "List layout",
},
{
key: "board",
icon: LayoutGrid,
+ title: "Grid layout",
},
{
key: "gantt",
icon: GanttChartSquare,
+ title: "Gantt layout",
},
];
diff --git a/web/constants/module.ts b/web/constants/module.ts
index a49df336c..849974084 100644
--- a/web/constants/module.ts
+++ b/web/constants/module.ts
@@ -1,3 +1,4 @@
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
// types
import { TModuleStatus } from "types";
@@ -51,3 +52,21 @@ export const MODULE_STATUS: {
bgColor: "bg-red-50",
},
];
+
+export const MODULE_VIEW_LAYOUTS: { key: "list" | "grid" | "gantt_chart"; icon: any; title: string }[] = [
+ {
+ key: "list",
+ icon: List,
+ title: "List layout",
+ },
+ {
+ key: "grid",
+ icon: LayoutGrid,
+ title: "Grid layout",
+ },
+ {
+ key: "gantt_chart",
+ icon: GanttChartSquare,
+ title: "Gantt layout",
+ },
+];
diff --git a/web/constants/page.ts b/web/constants/page.ts
new file mode 100644
index 000000000..424f1b59c
--- /dev/null
+++ b/web/constants/page.ts
@@ -0,0 +1,37 @@
+import { LayoutGrid, List } from "lucide-react";
+
+export const PAGE_VIEW_LAYOUTS = [
+ {
+ key: "list",
+ icon: List,
+ title: "List layout",
+ },
+ {
+ key: "detailed",
+ icon: LayoutGrid,
+ title: "Detailed layout",
+ },
+];
+
+export const PAGE_TABS_LIST: { key: string; title: string }[] = [
+ {
+ key: "recent",
+ title: "Recent",
+ },
+ {
+ key: "all",
+ title: "All",
+ },
+ {
+ key: "favorites",
+ title: "Favorites",
+ },
+ {
+ key: "created-by-me",
+ title: "Created by me",
+ },
+ {
+ key: "created-by-others",
+ title: "Created by others",
+ },
+];
diff --git a/web/layouts/auth-layout/user-wrapper.tsx b/web/layouts/auth-layout/user-wrapper.tsx
index 321e43888..596612153 100644
--- a/web/layouts/auth-layout/user-wrapper.tsx
+++ b/web/layouts/auth-layout/user-wrapper.tsx
@@ -31,7 +31,7 @@ export const UserAuthWrapper: FC = (props) => {
if (!currentUser && !error) {
return (
-
+
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 095cad0e7..21fd5fe8b 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -20,11 +20,9 @@ import emptyCycle from "public/empty-state/cycle.svg";
import { TCycleView, TCycleLayout } from "types";
import { NextPageWithLayout } from "types/app";
// constants
-import { CYCLE_TAB_LIST, CYCLE_VIEWS } from "constants/cycle";
+import { CYCLE_TAB_LIST, CYCLE_VIEW_LAYOUTS } from "constants/cycle";
// lib cookie
import { setLocalStorage, getLocalStorage } from "lib/local-storage";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
const ProjectCyclesPage: NextPageWithLayout = observer(() => {
const [createModal, setCreateModal] = useState(false);
@@ -118,7 +116,7 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
handleCurrentView(CYCLE_TAB_LIST[i].key as TCycleView);
}}
>
-
+
{CYCLE_TAB_LIST.map((tab) => (
{
))}
- {CYCLE_VIEWS && CYCLE_VIEWS.length > 0 && cycleStore?.cycleView != "active" && (
-
- {CYCLE_VIEWS.map((view) => {
- if (view.key === "gantt" && cycleStore?.cycleView === "draft") return null;
+ {cycleStore?.cycleView != "active" && (
+
+ {CYCLE_VIEW_LAYOUTS.map((layout) => {
+ if (layout.key === "gantt" && cycleStore?.cycleView === "draft") return null;
+
return (
-
{replaceUnderscoreIfSnakeCase(view.key)} Layout
- }
- position="bottom"
- >
+
);
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 6d821ce65..5ad969fde 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -5,16 +5,18 @@ import { Tab } from "@headlessui/react";
// hooks
import useLocalStorage from "hooks/use-local-storage";
import useUserAuth from "hooks/use-user-auth";
-// icons
-import { LayoutGrid, List } from "lucide-react";
// layouts
import { AppLayout } from "layouts/app-layout";
// components
import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
import { PagesHeader } from "components/headers";
+// ui
+import { Tooltip } from "@plane/ui";
// types
import { TPageViewProps } from "types";
import { NextPageWithLayout } from "types/app";
+// constants
+import { PAGE_TABS_LIST, PAGE_VIEW_LAYOUTS } from "constants/page";
const AllPagesList = dynamic(() => import("components/pages").then((a) => a.AllPagesList), {
ssr: false,
@@ -32,8 +34,6 @@ const OtherPagesList = dynamic(() => import("components/pages")
ssr: false,
});
-const tabsList = ["Recent", "All", "Favorites", "Created by me", "Created by others"];
-
const ProjectPagesPage: NextPageWithLayout = () => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@@ -77,25 +77,25 @@ const ProjectPagesPage: NextPageWithLayout = () => {
Pages
-
-
-
+
+ {PAGE_VIEW_LAYOUTS.map((layout) => (
+
+
+
+ ))}
{
>
- {tabsList.map((tab, index) => (
+ {PAGE_TABS_LIST.map((tab) => (
`rounded-full border px-5 py-1.5 text-sm outline-none ${
selected
@@ -132,7 +132,7 @@ const ProjectPagesPage: NextPageWithLayout = () => {
}`
}
>
- {tab}
+ {tab.title}
))}