From 73567dc7fcfb7f45c802677ec06dbd1bf34b2625 Mon Sep 17 00:00:00 2001 From: Dakshesh Jain Date: Tue, 28 Feb 2023 16:48:02 +0530 Subject: [PATCH] style: redesigned sidebar, added new icons and spacing changes --- .../icons/assignment-clipboard-icon.tsx | 20 ++++ apps/app/components/icons/contrast-icon.tsx | 25 +++++ apps/app/components/icons/grid-view-icons.tsx | 24 +++++ apps/app/components/icons/heartbeat-icon.tsx | 41 +++---- apps/app/components/icons/index.ts | 5 + .../components/icons/layer-diagonal-icon.tsx | 32 +++--- .../components/icons/people-group-icon.tsx | 24 +++++ apps/app/components/icons/setting-icon.tsx | 35 +++--- apps/app/components/icons/tick-mark-icon.tsx | 24 +++++ apps/app/components/project/sidebar-list.tsx | 100 +++++++++--------- .../app/components/workspace/help-section.tsx | 73 +++++++------ .../components/workspace/sidebar-dropdown.tsx | 68 ++++++------ .../app/components/workspace/sidebar-menu.tsx | 25 ++--- apps/app/layouts/app-layout/app-sidebar.tsx | 2 +- apps/app/layouts/app-layout/index.tsx | 2 +- 15 files changed, 315 insertions(+), 185 deletions(-) create mode 100644 apps/app/components/icons/assignment-clipboard-icon.tsx create mode 100644 apps/app/components/icons/contrast-icon.tsx create mode 100644 apps/app/components/icons/grid-view-icons.tsx create mode 100644 apps/app/components/icons/people-group-icon.tsx create mode 100644 apps/app/components/icons/tick-mark-icon.tsx diff --git a/apps/app/components/icons/assignment-clipboard-icon.tsx b/apps/app/components/icons/assignment-clipboard-icon.tsx new file mode 100644 index 000000000..8b9af676e --- /dev/null +++ b/apps/app/components/icons/assignment-clipboard-icon.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +import type { Props } from "./types"; + +export const AssignmentClipboardIcon: React.FC = ({ + width = "24", + height = "24", + className, +}) => ( + + + +); diff --git a/apps/app/components/icons/contrast-icon.tsx b/apps/app/components/icons/contrast-icon.tsx new file mode 100644 index 000000000..5dfa47e4d --- /dev/null +++ b/apps/app/components/icons/contrast-icon.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +import type { Props } from "./types"; + +export const ContrastIcon: React.FC = ({ + width = "24", + height = "24", + color = "#858E96", + className, +}) => ( + + + + +); diff --git a/apps/app/components/icons/grid-view-icons.tsx b/apps/app/components/icons/grid-view-icons.tsx new file mode 100644 index 000000000..f5e81daf8 --- /dev/null +++ b/apps/app/components/icons/grid-view-icons.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +import type { Props } from "./types"; + +export const GridViewIcon: React.FC = ({ + width = "24", + height = "24", + color = "#858E96", + className, +}) => ( + + + +); diff --git a/apps/app/components/icons/heartbeat-icon.tsx b/apps/app/components/icons/heartbeat-icon.tsx index 8c70fbb87..ff950ca0b 100644 --- a/apps/app/components/icons/heartbeat-icon.tsx +++ b/apps/app/components/icons/heartbeat-icon.tsx @@ -2,21 +2,26 @@ import React from "react"; import type { Props } from "./types"; -export const HeartbeatIcon: React.FC = ({ width = "24", height = "24", className }) => ( - - - - ); +export const HeartbeatIcon: React.FC = ({ + width = "24", + height = "24", + color = "#858E96", + className, +}) => ( + + + +); diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts index dfcb2c5dc..b6e069842 100644 --- a/apps/app/components/icons/index.ts +++ b/apps/app/components/icons/index.ts @@ -29,3 +29,8 @@ export * from "./upcoming-cycle-icon"; export * from "./user-group-icon"; export * from "./user-icon-circle"; export * from "./user-icon"; +export * from "./grid-view-icons"; +export * from "./assignment-clipboard-icon"; +export * from "./tick-mark-icon"; +export * from "./contrast-icon"; +export * from "./people-group-icon"; diff --git a/apps/app/components/icons/layer-diagonal-icon.tsx b/apps/app/components/icons/layer-diagonal-icon.tsx index a3eb7a815..aff7bc66c 100644 --- a/apps/app/components/icons/layer-diagonal-icon.tsx +++ b/apps/app/components/icons/layer-diagonal-icon.tsx @@ -6,19 +6,21 @@ export const LayerDiagonalIcon: React.FC = ({ width = "24", height = "24", className, - color = "black", + color = "#858E96", }) => ( - - - - ); + + + +); diff --git a/apps/app/components/icons/people-group-icon.tsx b/apps/app/components/icons/people-group-icon.tsx new file mode 100644 index 000000000..813511208 --- /dev/null +++ b/apps/app/components/icons/people-group-icon.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +import type { Props } from "./types"; + +export const PeopleGroupIcon: React.FC = ({ + width = "24", + height = "16", + color = "#858E96", + className, +}) => ( + + + +); diff --git a/apps/app/components/icons/setting-icon.tsx b/apps/app/components/icons/setting-icon.tsx index 1c572f977..1451be9b9 100644 --- a/apps/app/components/icons/setting-icon.tsx +++ b/apps/app/components/icons/setting-icon.tsx @@ -2,18 +2,23 @@ import React from "react"; import type { Props } from "./types"; -export const SettingIcon: React.FC = ({ width = "24", height = "24", className }) => ( - - - - ); +export const SettingIcon: React.FC = ({ + width = "24", + height = "24", + color = "black", + className, +}) => ( + + + +); diff --git a/apps/app/components/icons/tick-mark-icon.tsx b/apps/app/components/icons/tick-mark-icon.tsx new file mode 100644 index 000000000..3d7c1618c --- /dev/null +++ b/apps/app/components/icons/tick-mark-icon.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +import type { Props } from "./types"; + +export const TickMarkIcon: React.FC = ({ + width = "24", + height = "24", + color = "#858E96", + className, +}) => ( + + + +); diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx index 5f22b78f7..300b141c9 100644 --- a/apps/app/components/project/sidebar-list.tsx +++ b/apps/app/components/project/sidebar-list.tsx @@ -5,14 +5,8 @@ import { Disclosure, Transition } from "@headlessui/react"; import useSWR from "swr"; // icons -import { - ChevronDownIcon, - PlusIcon, - Cog6ToothIcon, - RectangleStackIcon, - RectangleGroupIcon, -} from "@heroicons/react/24/outline"; -import { CyclesIcon } from "components/icons"; +import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon } from "components/icons"; +import { ChevronDownIcon, PlusIcon, Cog6ToothIcon } from "@heroicons/react/24/outline"; // hooks import useToast from "hooks/use-toast"; import useTheme from "hooks/use-theme"; @@ -31,17 +25,17 @@ const navigation = (workspaceSlug: string, projectId: string) => [ { name: "Issues", href: `/${workspaceSlug}/projects/${projectId}/issues`, - icon: RectangleStackIcon, + icon: LayerDiagonalIcon, }, { name: "Cycles", href: `/${workspaceSlug}/projects/${projectId}/cycles`, - icon: CyclesIcon, + icon: ContrastIcon, }, { name: "Modules", href: `/${workspaceSlug}/projects/${projectId}/modules`, - icon: RectangleGroupIcon, + icon: PeopleGroupIcon, }, { name: "Settings", @@ -81,11 +75,8 @@ export const ProjectSidebarList: FC = () => { return ( <> -
+
+ {!sidebarCollapse &&
Projects
} {projects ? ( <> {projects.length > 0 ? ( @@ -93,12 +84,13 @@ export const ProjectSidebarList: FC = () => { {({ open }) => ( <> -
- + +
{project.icon ? ( {String.fromCodePoint(parseInt(project.icon))} @@ -110,26 +102,30 @@ export const ProjectSidebarList: FC = () => { )} {!sidebarCollapse && ( - - - {project?.name} - - - - +

+ {project?.name} +

+ )} +
+ +
+ {!sidebarCollapse && ( + + handleCopyText(project.id)}> + Copy project link + + + )} + {!sidebarCollapse && ( + + )} - - {!sidebarCollapse && ( - - handleCopyText(project.id)}> - Copy project link - - - )} -
+
+ + { } flex flex-col gap-y-1`} > {navigation(workspaceSlug as string, project?.id).map((item) => { - const hi = "hi"; - if (item.name === "Cycles" && !project.cycle_view) return; if (item.name === "Modules" && !project.module_view) return; @@ -154,18 +148,20 @@ export const ProjectSidebarList: FC = () => { - diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx index 3b540e190..5a5e3a600 100644 --- a/apps/app/components/workspace/help-section.tsx +++ b/apps/app/components/workspace/help-section.tsx @@ -56,30 +56,10 @@ export const WorkspaceHelpSection: FC = (props) => { return (
- - + + + +
= (props) => { ))}
-
); diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx index 5a892e069..5faf85618 100644 --- a/apps/app/components/workspace/sidebar-dropdown.tsx +++ b/apps/app/components/workspace/sidebar-dropdown.tsx @@ -69,45 +69,43 @@ export const WorkspaceSidebarDropdown = () => { return (
-
- -
-
- {activeWorkspace?.logo && activeWorkspace.logo !== "" ? ( - Workspace Logo - ) : ( - activeWorkspace?.name?.charAt(0) ?? "..." - )} -
- {!sidebarCollapse && ( -

- {activeWorkspace?.name - ? activeWorkspace.name.length > 17 - ? `${activeWorkspace.name.substring(0, 17)}...` - : activeWorkspace.name - : "Loading..."} -

+ +
+
+ {activeWorkspace?.logo && activeWorkspace.logo !== "" ? ( + Workspace Logo + ) : ( + activeWorkspace?.name?.charAt(0) ?? "..." )}
{!sidebarCollapse && ( -
-
+

+ {activeWorkspace?.name + ? activeWorkspace.name.length > 17 + ? `${activeWorkspace.name.substring(0, 17)}...` + : activeWorkspace.name + : "Loading..."} +

)} - -
+
+ {!sidebarCollapse && ( +
+
+ )} + [ { - icon: HomeIcon, - name: "Home", + icon: GridViewIcon, + name: "Dashboard", href: `/${workspaceSlug}`, }, { - icon: ClipboardDocumentListIcon, + icon: AssignmentClipboardIcon, name: "Projects", href: `/${workspaceSlug}/projects`, }, { - icon: RectangleStackIcon, + icon: TickMarkIcon, name: "My Issues", href: `/${workspaceSlug}/me/my-issues`, }, { - icon: Cog6ToothIcon, + icon: SettingIcon, name: "Settings", href: `/${workspaceSlug}/settings`, }, ]; -export const WorkspaceSidebarMenu = () => { +export const WorkspaceSidebarMenu: React.FC = () => { // router const router = useRouter(); const { workspaceSlug } = router.query; @@ -49,15 +44,15 @@ export const WorkspaceSidebarMenu = () => {