Skip to content

Commit 88f5a06

Browse files
JayashTripathyanmolsinghbhatia
JayashTripathy
and
anmolsinghbhatia
authored
[WEB-5614] fix: new design system consistency (#8351)
* 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 <[email protected]>
1 parent df710e0 commit 88f5a06

File tree

23 files changed

+98
-61
lines changed

23 files changed

+98
-61
lines changed

‎apps/web/app/(all)/create-workspace/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ const CreateWorkspacePage = observer(function CreateWorkspacePage() {
5252

5353
return (
5454
<AuthenticationWrapper>
55-
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0">
55+
<div className="flex h-full flex-col gap-y-2 overflow-hidden sm:flex-row sm:gap-y-0 bg-surface-1">
5656
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
5757
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
5858
<Link
59-
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-surface-1 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
59+
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
6060
href="/"
6161
>
6262
<PlaneLogo className="h-9 w-auto text-primary" />

‎apps/web/app/(all)/invitations/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ function UserInvitationsPage() {
131131
<div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
132132
<Link
133133
href="/"
134-
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-surface-1 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
134+
className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3 z-10"
135135
>
136136
<PlaneLogo className="h-9 w-auto text-primary" />
137137
</Link>

‎apps/web/core/components/comments/card/edit-form.tsx‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { EditorRefApi } from "@plane/editor";
66
import { CloseIcon } from "@plane/propel/icons";
77
// plane imports
88
import type { TCommentsOperations, TIssueComment } from "@plane/types";
9-
import { isCommentEmpty } from "@plane/utils";
9+
import { cn, isCommentEmpty } from "@plane/utils";
1010
// components
1111
import { LiteTextEditor } from "@/components/editor/lite-text";
1212

@@ -46,7 +46,7 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
4646
});
4747
const commentHTML = watch("comment_html");
4848

49-
const isEmpty = isCommentEmpty(commentHTML ?? undefined);
49+
const isEmpty = isCommentEmpty(commentHTML);
5050
const isEditorReadyToDiscard = editorRef.current?.isEditorReadyToDiscard();
5151
const isSubmitButtonDisabled = isSubmitting || !isEditorReadyToDiscard;
5252
const isDisabled = isSubmitting || isEmpty || isSubmitButtonDisabled;
@@ -99,36 +99,53 @@ export const CommentCardEditForm = observer(function CommentCardEditForm(props:
9999
return asset_id;
100100
}}
101101
projectId={projectId}
102-
parentClassName="p-2"
102+
parentClassName="p-2 bg-surface-1"
103103
displayConfig={{
104104
fontSize: "small-font",
105105
}}
106106
/>
107107
</div>
108-
<div className="flex gap-1 self-end">
108+
<div className="flex gap-2 self-end">
109109
{!isEmpty && (
110110
<button
111111
type="button"
112112
onClick={handleSubmit(onEnter)}
113113
disabled={isDisabled}
114-
className={`group rounded-sm border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 ${
115-
isEmpty ? "cursor-not-allowed bg-gray-200" : "hover:bg-green-500"
116-
}`}
114+
className={cn(
115+
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
116+
isDisabled
117+
? "cursor-not-allowed border-green-500/50 bg-green-500/10"
118+
: "border-green-500 bg-green-500/20 hover:bg-green-500"
119+
)}
117120
>
118121
<Check
119-
className={`h-3 w-3 text-green-500 duration-300 ${isEmpty ? "text-black" : "group-hover:text-on-color"}`}
122+
className={cn(
123+
"size-4 duration-300",
124+
isDisabled ? "text-green-500/50" : "text-green-500 group-hover:text-on-color"
125+
)}
120126
/>
121127
</button>
122128
)}
123129
<button
124130
type="button"
125-
className="group rounded-sm border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
131+
disabled={isSubmitting}
132+
className={cn(
133+
"group rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
134+
isSubmitting
135+
? "cursor-not-allowed border-red-500/50 bg-red-500/10"
136+
: "border-red-500 bg-red-500/20 hover:bg-red-500"
137+
)}
126138
onClick={() => {
127139
setIsEditing(false);
128140
editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
129141
}}
130142
>
131-
<CloseIcon className="size-3 text-red-500 duration-300 group-hover:text-on-color" />
143+
<CloseIcon
144+
className={cn(
145+
"size-5 duration-300",
146+
isSubmitting ? "text-red-500/50" : "text-red-500 group-hover:text-on-color"
147+
)}
148+
/>
132149
</button>
133150
</div>
134151
</form>

‎apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,10 +156,10 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
156156
<div className="sticky z-10 top-0 pt-2 flex items-center justify-between bg-surface-1">
157157
<div className="flex items-center justify-center size-5">
158158
<button
159-
className="flex size-4 items-center justify-center rounded-full bg-layer-3"
159+
className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0"
160160
onClick={() => handleClose()}
161161
>
162-
<ChevronRightIcon className="h-3 w-3 stroke-2 text-on-color" />
162+
<ChevronRightIcon className="size-4 stroke-2 text-secondary" />
163163
</button>
164164
</div>
165165
</div>
@@ -168,7 +168,7 @@ export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Pr
168168
<h4 className="w-full break-words text-18 font-semibold text-primary">{cycleDetails.name}</h4>
169169
{currentCycle && (
170170
<span
171-
className="flex h-6 min-w-20 px-3 items-center justify-center rounded-sm text-center text-11 font-medium"
171+
className="flex h-6 min-w-20 px-3 items-center justify-center rounded-sm text-center text-11 font-medium whitespace-nowrap truncate"
172172
style={{
173173
color: currentCycle.color,
174174
backgroundColor: `${currentCycle.color}20`,

‎apps/web/core/components/cycles/list/cycles-list-item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const CyclesListItem = observer(function CyclesListItem(props: TCyclesLis
8282
prependTitleElement={
8383
<CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
8484
{progress === 100 ? (
85-
<Check className="h-3 w-3 stroke-2 text-accent-primary" />
85+
<Check className="h-3 w-3 stroke-2" />
8686
) : (
8787
<span className="text-9 text-primary">{`${progress}%`}</span>
8888
)}

‎apps/web/core/components/issues/issue-detail/label/label-list-item.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
3535
key={labelId}
3636
type="button"
3737
className={cn(
38-
"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",
38+
"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",
3939
{
40-
"cursor-pointer hover:border-danger-strong hover:bg-danger-subtle": !disabled,
40+
"cursor-pointer": !disabled,
4141
}
4242
)}
4343
onClick={handleLabel}

‎apps/web/core/components/issues/issue-layouts/kanban/block.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
269269
href={workItemLink}
270270
ref={cardRef}
271271
className={cn(
272-
"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",
272+
"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",
273273
{ "hover:cursor-pointer": isDragAllowed },
274274
{ "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id) },
275275
{ "bg-layer-1 z-[100]": isCurrentBlockDragging }

‎apps/web/core/components/modules/module-status-dropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const ModuleStatusDropdown = observer(function ModuleStatusDropdown(props
2525
<CustomSelect
2626
customButton={
2727
<span
28-
className={`flex h-6 w-20 items-center justify-center rounded-xs text-center text-11 ${
28+
className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-11 ${
2929
isDisabled ? "cursor-not-allowed" : "cursor-pointer"
3030
}`}
3131
style={{

‎apps/web/core/components/modules/quick-actions.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ export const ModuleQuickActions = observer(function ModuleQuickActions(props: Pr
166166
)}
167167
disabled={item.disabled}
168168
>
169-
{item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
169+
{item.icon && <item.icon className={cn("h-3 w-3 flex-shrink-0", item.iconClassName)} />}
170170
<div>
171171
<h5>{item.title}</h5>
172172
{item.description && (

‎apps/web/core/components/project/card.tsx‎

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

0 commit comments

Comments
 (0)