binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5614] fix: new design system consistency (#8351)

Browse source 
* chore: tooltip enhancements

* chore: project card enhancements

* chore: work item card enhancements

* chore: update component styles and class names for consistency across the application

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
This commit is contained in:
Jayash Tripathy 2025-12-17 13:32:29 +05:30 • committed by GitHub
parent df710e00dc
commit 88f5a063d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 98 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

37
apps/web/core/components/comments/card/edit-form.tsx
View file

@ -6,7 +6,7 @@ import type { EditorRefApi } from "@plane/editor";
import { CloseIcon } from "@plane/propel/icons";
// plane imports
import type { TCommentsOperations, TIssueComment } from "@plane/types";
import { isCommentEmpty } from "@plane/utils";
import { cn, isCommentEmpty } from "@plane/utils";
// components
import { LiteTextEditor } from "@/components/editor/lite-text";
@ -46,7 +46,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
});
const commentHTML = watch("comment_html");
const isEmpty = isCommentEmpty(commentHTML ?? undefined);
const isEmpty = isCommentEmpty(commentHTML);
const isEditorReadyToDiscard = editorRef.current?.isEditorReadyToDiscard();
const isSubmitButtonDisabled = isSubmitting || !isEditorReadyToDiscard;
const isDisabled = isSubmitting || isEmpty || isSubmitButtonDisabled;
@ -99,36 +99,53 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
return asset_id;
}}
projectId={projectId}
parentClassName="p-2"
parentClassName="p-2 bg-surface-1"
displayConfig={{
fontSize: "small-font",
}}
/>
</div>
<div className="flex gap-1 self-end">
<div className="flex gap-2 self-end">
{!isEmpty && (
<button
type="button"
onClick={handleSubmit(onEnter)}
disabled={isDisabled}
className={`group rounded-sm border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 ${
isEmpty ? "cursor-not-allowed bg-gray-200" : "hover:bg-green-500"
}`}
className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isDisabled
? "cursor-not-allowed border-green-500/50 bg-green-500/10"
: "border-green-500 bg-green-500/20 hover:bg-green-500"
)}
>
<Check
className={`h-3 w-3 text-green-500 duration-300 ${isEmpty ? "text-black" : "group-hover:text-on-color"}`}
className={cn(
"size-4 duration-300",
isDisabled ? "text-green-500/50" : "text-green-500 group-hover:text-on-color"
)}
/>
</button>
)}
<button
type="button"
className="group rounded-sm border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
disabled={isSubmitting}
className={cn(
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
isSubmitting
? "cursor-not-allowed border-red-500/50 bg-red-500/10"
: "border-red-500 bg-red-500/20 hover:bg-red-500"
)}
onClick={() => {
setIsEditing(false);
editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
}}
>
<CloseIcon className="size-3 text-red-500 duration-300 group-hover:text-on-color" />
<CloseIcon
className={cn(
"size-5 duration-300",
isSubmitting ? "text-red-500/50" : "text-red-500 group-hover:text-on-color"
)}
/>
</button>
</div>
</form>

6
apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
View file

@ -156,10 +156,10 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
<div className="sticky z-10 top-0 pt-2 flex items-center justify-between bg-surface-1">
<div className="flex items-center justify-center size-5">
<button
className="flex size-4 items-center justify-center rounded-full bg-layer-3"
className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0"
onClick={() => handleClose()}
>
<ChevronRightIcon className="h-3 w-3 stroke-2 text-on-color" />
<ChevronRightIcon className="size-4 stroke-2 text-secondary" />
</button>
</div>
</div>
@ -168,7 +168,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
<h4 className="w-full break-words text-18 font-semibold text-primary">{cycleDetails.name}</h4>
{currentCycle && (
<span
className="flex h-6 min-w-20 px-3 items-center justify-center rounded-sm text-center text-11 font-medium"
className="flex h-6 min-w-20 px-3 items-center justify-center rounded-sm text-center text-11 font-medium whitespace-nowrap truncate"
style={{
color: currentCycle.color,
backgroundColor: `${currentCycle.color}20`,

2
apps/web/core/components/cycles/list/cycles-list-item.tsx
View file

@ -82,7 +82,7 @@ export const CyclesListItem = observer(function CyclesListItem(props: TCyclesLis
prependTitleElement={
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
{progress === 100 ? (
<Check className="h-3 w-3 stroke-2 text-accent-primary" />
<Check className="h-3 w-3 stroke-2" />
) : (
<span className="text-9 text-primary">{`${progress}%`}</span>
)}

4
apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
View file

@ -35,9 +35,9 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
key={labelId}
type="button"
className={cn(
"h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active hover:bg-layer-transparent-hover text-body-xs-regular text-tertiary",
"h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
{
"cursor-pointer hover:border-danger-strong hover:bg-danger-subtle": !disabled,
"cursor-pointer": !disabled,
}
)}
onClick={handleLabel}

2
apps/web/core/components/issues/issue-layouts/kanban/block.tsx
View file

@ -269,7 +269,7 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
href={workItemLink}
ref={cardRef}
className={cn(
"block rounded-lg border-[1px] outline-[0.5px] outline-transparent w-full border-strong bg-layer-2 text-13 transition-all hover:bg-layer-2-hover p-3",
"block rounded-lg border outline-[0.5px] outline-transparent shadow-raised-100 w-full border-subtle bg-layer-2 text-13 transition-all p-3 hover:shadow-raised-200 hover:border-strong",
{ "hover:cursor-pointer": isDragAllowed },
{ "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id) },
{ "bg-layer-1 z-[100]": isCurrentBlockDragging }

2
apps/web/core/components/modules/module-status-dropdown.tsx
View file

@ -25,7 +25,7 @@ export const ModuleStatusDropdown = observer(function ModuleStatusDropdown(props
<CustomSelect
customButton={
<span
className={`flex h-6 w-20 items-center justify-center rounded-xs text-center text-11 ${
className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-11 ${
isDisabled ? "cursor-not-allowed" : "cursor-pointer"
}`}
style={{

2
apps/web/core/components/modules/quick-actions.tsx
View file

@ -166,7 +166,7 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
)}
disabled={item.disabled}
>
{item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
{item.icon && <item.icon className={cn("h-3 w-3 flex-shrink-0", item.iconClassName)} />}
<div>
<h5>{item.title}</h5>
{item.description && (

2
apps/web/core/components/project/card.tsx
View file

@ -198,7 +198,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
}
}}
data-prevent-progress={!isMemberOfProject || isArchived}
className="flex flex-col rounded-sm border border-subtle bg-layer-1 hover:bg-layer-1-hover rounded-xl overflow-hidden"
className="flex flex-col border border-subtle bg-layer-2 hover:shadow-raised-2x00 rounded-lg overflow-hidden duration-300 transition-all"
>
<ContextMenu parentRef={projectCardRef} items={MENU_ITEMS} />
<div className="relative h-[118px] w-full rounded-t ">

2
apps/web/core/components/project/create/header.tsx
View file

@ -32,7 +32,7 @@ function ProjectCreateHeader(props: Props) {
const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
return (
<div className="group relative h-44 w-full rounded-lg bg-layer-1">
<div className="group relative h-44 w-full rounded-lg">
{coverImage && (
<img
src={getCoverImageDisplayURL(coverImage, DEFAULT_COVER_IMAGE_URL)}

8
apps/web/core/components/workspace/create-workspace-form.tsx
View file

@ -170,8 +170,8 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
{t("workspace_creation.form.url.label")}
<span className="ml-0.5 text-red-500">*</span>
</label>
<div className="flex w-full items-center rounded-md border-[0.5px] border-subtle px-3">
<span className="whitespace-nowrap text-13 text-secondary">{window && window.location.host}/</span>
<div className="flex w-full items-center rounded-md border-[0.5px] border-subtle px-3 bg-layer-1">
<span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span>
<Controller
control={control}
name="slug"
@ -195,7 +195,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
ref={ref}
hasError={Boolean(errors.slug)}
placeholder={t("workspace_creation.form.url.placeholder")}
className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-13"
className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-12"
/>
)}
/>
@ -229,7 +229,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
</span>
)
}
buttonClassName="!border-[0.5px] !border-subtle !shadow-none"
buttonClassName="!border-[0.5px] !border-subtle !shadow-none bg-layer-1 text-12"
input
>
{ORGANIZATION_SIZE.map((item) => (

22
apps/web/core/components/workspace/sidebar/dropdown-item.tsx
View file

@ -87,21 +87,27 @@ const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps)
{[EUserPermissions.ADMIN, EUserPermissions.MEMBER].includes(workspace?.role) && (
<Link
href={`/${workspace.slug}/settings`}
onClick={handleClose}
className="flex border border-subtle rounded-md py-1 px-2 gap-1 hover:text-secondary text-tertiary hover:border-strong bg-layer-3 hover:bg-layer-3-hover"
onClick={(e) => {
e.stopPropagation();
handleClose();
}}
className="flex border border-strong rounded-md py-1.5 px-2.5 gap-1.5 hover:text-secondary text-secondary hover:border-strong bg-layer-2 hover:shadow-raised-100 transition-colors"
>
<Settings className="h-4 w-4 my-auto" />
<span className="text-13 font-medium my-auto">{t("settings")}</span>
<Settings className="h-4 w-4 my-auto flex-shrink-0" />
<span className="text-13 font-medium my-auto whitespace-nowrap">{t("settings")}</span>
</Link>
)}
{[EUserPermissions.ADMIN].includes(workspace?.role) && (
<Link
href={`/${workspace.slug}/settings/members`}
onClick={handleClose}
className="flex border border-subtle rounded-md py-1 px-2 gap-1 hover:text-secondary text-tertiary hover:border-strong bg-layer-3 hover:bg-layer-3-hover"
onClick={(e) => {
e.stopPropagation();
handleClose();
}}
className="flex border border-strong rounded-md py-1.5 px-2.5 gap-1.5 hover:text-secondary text-secondary hover:border-strong bg-layer-2 hover:shadow-raised-100 transition-colors"
>
<UserPlus className="h-4 w-4 my-auto" />
<span className="text-13 font-medium my-auto">
<UserPlus className="h-4 w-4 my-auto flex-shrink-0" />
<span className="text-13 font-medium my-auto whitespace-nowrap">
{t("project_settings.members.invite_members.title")}
</span>
</Link>

4
apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
View file

@ -126,7 +126,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
// if list of workspaces are not there then we have to render the spinner
if (isParentLoading || allWorkspaces === undefined || loader) {
return (
<div className="grid h-full place-items-center bg-surface-1 p-4 rounded-lg border border-subtle">
<div className="grid h-full place-items-center p-4 rounded-lg border border-subtle">
<div className="flex flex-col items-center gap-3 text-center">
<LogoSpinner />
</div>
@ -157,7 +157,7 @@ export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props
</div>
<div className="relative flex h-full w-full flex-grow flex-col items-center justify-center space-y-3">
<div className="relative flex-shrink-0">
<img src={WorkSpaceNotAvailable} className="h-[220px] object-cover object-center" alt="Plane logo" />
<img src={WorkSpaceNotAvailable} className="h-[220px] object-contain object-center" alt="Plane logo" />
</div>
<h3 className="text-center text-16 font-semibold">Workspace not found</h3>
<p className="text-center text-13 text-secondary">