From 63b7c1ee478bbac22bcbce9b078c12f64a9a6514 Mon Sep 17 00:00:00 2001 From: Saheb Giri <47132373+iamsahebgiri@users.noreply.github.com> Date: Thu, 30 Mar 2023 13:54:18 +0530 Subject: [PATCH] style: icons consistency and minor fixes (#601) * fix: change discord casing * style: icon and style consistency in cmd k - change discord icon color - make link copy link consistent - bolt to rocket icon for shortcut * style: make icon color throughout the activity log --- .../command-palette/command-pallette.tsx | 158 +++++++++--------- apps/app/components/icons/discord-icon.tsx | 41 ++--- apps/app/components/icons/user-group-icon.tsx | 35 ++-- apps/app/components/issues/activity.tsx | 20 +-- 4 files changed, 131 insertions(+), 123 deletions(-) diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx index 92a419d22..dd715260c 100644 --- a/apps/app/components/command-palette/command-pallette.tsx +++ b/apps/app/components/command-palette/command-pallette.tsx @@ -7,9 +7,11 @@ import { ArrowRightIcon, ChartBarIcon, ChatBubbleOvalLeftEllipsisIcon, - ClipboardIcon, + DocumentTextIcon, FolderPlusIcon, + LinkIcon, MagnifyingGlassIcon, + RocketLaunchIcon, Squares2X2Icon, TrashIcon, UserMinusIcon, @@ -18,7 +20,6 @@ import { } from "@heroicons/react/24/outline"; import { AssignmentClipboardIcon, - BoltIcon, ContrastIcon, DiscordIcon, DocumentIcon, @@ -27,7 +28,6 @@ import { PeopleGroupIcon, SettingIcon, ViewListIcon, - PencilScribbleIcon, } from "components/icons"; // headless ui import { Dialog, Transition } from "@headlessui/react"; @@ -394,7 +394,7 @@ export const CommandPalette: React.FC = () => { > {issueId && issueDetails && (
-

+

{issueDetails.project_detail?.identifier}-{issueDetails.sequence_id}{" "} {issueDetails?.name}

@@ -465,7 +465,7 @@ export const CommandPalette: React.FC = () => { Icon = PeopleGroupIcon; } else if (key === "page") { path = `/${item.workspace__slug}/projects/${item.project_id}/pages/${item.id}`; - Icon = PencilScribbleIcon; + Icon = DocumentTextIcon; } else if (key === "cycle") { path = `/${item.workspace__slug}/projects/${item.project_id}/cycles/${item.id}`; Icon = ContrastIcon; @@ -479,11 +479,11 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); }} value={value} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+

{item.name}

@@ -506,11 +506,11 @@ export const CommandPalette: React.FC = () => { setSearchTerm(""); setPages([...pages, "change-issue-state"]); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Change state...
@@ -520,11 +520,11 @@ export const CommandPalette: React.FC = () => { setSearchTerm(""); setPages([...pages, "change-issue-priority"]); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Change priority...
@@ -534,11 +534,11 @@ export const CommandPalette: React.FC = () => { setSearchTerm(""); setPages([...pages, "change-issue-assignee"]); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Assign to...
@@ -547,18 +547,18 @@ export const CommandPalette: React.FC = () => { handleIssueAssignees(user.id); setSearchTerm(""); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
+
{issueDetails?.assignees.includes(user.id) ? ( <> - + Un-assign from me ) : ( <> - + Assign to me )} @@ -567,11 +567,11 @@ export const CommandPalette: React.FC = () => { -
- +
+ Delete issue
@@ -580,11 +580,11 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); copyIssueUrlToClipboard(); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Copy issue URL to clipboard
@@ -593,11 +593,11 @@ export const CommandPalette: React.FC = () => { -
- +
+ Create new issue
C @@ -608,11 +608,11 @@ export const CommandPalette: React.FC = () => { -
- +
+ Create new project
P @@ -625,11 +625,11 @@ export const CommandPalette: React.FC = () => { -
- +
+ Create new cycle
Q @@ -639,11 +639,11 @@ export const CommandPalette: React.FC = () => { -
- +
+ Create new module
M @@ -653,11 +653,11 @@ export const CommandPalette: React.FC = () => { -
- +
+ Create new view
Q @@ -673,11 +673,11 @@ export const CommandPalette: React.FC = () => { setSearchTerm(""); setPages([...pages, "settings"]); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Search settings...
@@ -685,11 +685,11 @@ export const CommandPalette: React.FC = () => { -
- +
+ Create new workspace
@@ -703,11 +703,11 @@ export const CommandPalette: React.FC = () => { }); document.dispatchEvent(e); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Open keyboard shortcuts
@@ -716,11 +716,11 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); window.open("https://docs.plane.so/", "_blank"); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Open Plane documentation
@@ -729,12 +729,12 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); window.open("https://discord.com/invite/A92xrEGCge", "_blank"); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- - Join our discord +
+ + Join our Discord
{ "_blank" ); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Report a bug
@@ -758,11 +758,11 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); (window as any).$crisp.push(["do", "chat:open"]); }} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Chat with us
@@ -774,51 +774,51 @@ export const CommandPalette: React.FC = () => { <> goToSettings()} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ General
goToSettings("members")} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Members
goToSettings("billing")} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Billings and Plans
goToSettings("integrations")} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Integrations
goToSettings("import-export")} - className="focus:bg-slate-200 focus:outline-none" + className="focus:bg-gray-200 focus:outline-none" tabIndex={0} > -
- +
+ Import/Export
diff --git a/apps/app/components/icons/discord-icon.tsx b/apps/app/components/icons/discord-icon.tsx index 476014b8b..cec62944e 100644 --- a/apps/app/components/icons/discord-icon.tsx +++ b/apps/app/components/icons/discord-icon.tsx @@ -2,22 +2,25 @@ import React from "react"; import type { Props } from "./types"; -export const DiscordIcon: React.FC = ({ width = "24", height = "24", className }) => ( - - - - - - - - - - - ); +export const DiscordIcon: React.FC = ({ width = "24", height = "24", className, color }) => ( + + + + + + + + + + +); diff --git a/apps/app/components/icons/user-group-icon.tsx b/apps/app/components/icons/user-group-icon.tsx index 492cba3ef..37be59e3f 100644 --- a/apps/app/components/icons/user-group-icon.tsx +++ b/apps/app/components/icons/user-group-icon.tsx @@ -2,18 +2,23 @@ import React from "react"; import type { Props } from "./types"; -export const UserGroupIcon: React.FC = ({ width = "24", height = "24", className }) => ( - - - - ); +export const UserGroupIcon: React.FC = ({ + width = "24", + height = "24", + className, + color, +}) => ( + + + +); diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx index b845e12e9..ba116dfbb 100644 --- a/apps/app/components/issues/activity.tsx +++ b/apps/app/components/issues/activity.tsx @@ -12,14 +12,14 @@ import { Squares2X2Icon, UserIcon, } from "@heroicons/react/24/outline"; +import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons"; // services import issuesService from "services/issues.service"; // components import { CommentCard } from "components/issues/comment"; // ui import { Loader } from "components/ui"; -// icons -import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons"; + // helpers import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper"; @@ -35,26 +35,26 @@ const activityDetails: { } = { assignee: { message: "removed the assignee", - icon: