Skip to content

Commit c56bb06

Browse files
JayashTripathyJayashTripathy
authored
chore: update component styles and class names for consistency across the application (#8376)
1 parent 88f4d82 commit c56bb06

File tree

13 files changed

+134
-134
lines changed

13 files changed

+134
-134
lines changed

‎apps/web/core/components/core/image-picker-popover.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Tab, Popover } from "@headlessui/react";
99
// plane imports
1010
import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
1111
import { useOutsideClickDetector } from "@plane/hooks";
12-
import { Button } from "@plane/propel/button";
12+
import { Button, getButtonStyling } from "@plane/propel/button";
1313
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
1414
import { EFileAssetType } from "@plane/types";
1515
import { Input, Loader } from "@plane/ui";
@@ -180,11 +180,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
180180

181181
return (
182182
<Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
183-
<Popover.Button
184-
className="rounded-sm border border-strong bg-surface-1 px-2 py-1 text-11 text-secondary hover:text-primary"
185-
onClick={handleOnClick}
186-
disabled={disabled}
187-
>
183+
<Popover.Button className={getButtonStyling("secondary", "sm")} onClick={handleOnClick} disabled={disabled}>
188184
{label}
189185
</Popover.Button>
190186

‎apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function LayoutSelection(props: Props) {
2626
};
2727

2828
return (
29-
<div className="flex items-center gap-1 rounded-sm bg-layer-3 p-1">
29+
<div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
3030
{ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
3131
<Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
3232
<button

‎apps/web/core/components/onboarding/create-workspace.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
266266
</span>
267267
)
268268
}
269-
buttonClassName="!border-[0.5px] !border-strong !shadow-none !rounded-md"
269+
buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
270270
input
271271
>
272272
{ORGANIZATION_SIZE.map((item) => (

‎apps/web/core/components/sidebar/add-button.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Button } from "@plane/propel/button";
12
import { cn } from "@plane/utils";
23

34
type Props = React.ComponentProps<"button"> & {
@@ -8,17 +9,15 @@ type Props = React.ComponentProps<"button"> & {
89
export function SidebarAddButton(props: Props) {
910
const { label, onClick, disabled, ...rest } = props;
1011
return (
11-
<button
12-
type="button"
13-
className={cn(
14-
"flex-grow text-tertiary text-13 font-medium border-[0.5px] border-strong text-left rounded-md shadow-raised-100 h-8 px-2 flex items-center gap-1.5 transition-colors",
15-
!disabled && "hover:bg-layer-transparent-hover"
16-
)}
12+
<Button
13+
variant={"secondary"}
14+
size={"xl"}
15+
className="w-full justify-start"
1716
onClick={onClick}
1817
disabled={disabled}
1918
{...rest}
2019
>
2120
{label}
22-
</button>
21+
</Button>
2322
);
2423
}

‎apps/web/core/components/workspace/create-workspace-form.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
125125
}}
126126
>
127127
<div className="space-y-6 sm:space-y-7">
128-
<div className="space-y-1 text-13">
128+
<div className="flex flex-col gap-2 text-13">
129129
<label htmlFor="workspaceName">
130130
{t("workspace_creation.form.name.label")}
131131
<span className="ml-0.5 text-red-500">*</span>
@@ -165,12 +165,12 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
165165
<span className="text-11 text-red-500">{errors?.name?.message}</span>
166166
</div>
167167
</div>
168-
<div className="space-y-1 text-13">
168+
<div className="flex flex-col gap-2 text-13">
169169
<label htmlFor="workspaceUrl">
170170
{t("workspace_creation.form.url.label")}
171171
<span className="ml-0.5 text-red-500">*</span>
172172
</label>
173-
<div className="flex w-full items-center rounded-md border-[0.5px] border-subtle px-3 bg-layer-1">
173+
<div className="flex w-full items-center rounded-md border border-subtle px-3 bg-layer-2">
174174
<span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span>
175175
<Controller
176176
control={control}
@@ -208,7 +208,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
208208
)}
209209
{errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>}
210210
</div>
211-
<div className="space-y-1 text-13">
211+
<div className="flex flex-col gap-2 text-13">
212212
<span>
213213
{t("workspace_creation.form.organization_size.label")}
214214
<span className="ml-0.5 text-red-500">*</span>
@@ -229,7 +229,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
229229
</span>
230230
)
231231
}
232-
buttonClassName="!border-[0.5px] !border-subtle !shadow-none bg-layer-1 text-12"
232+
buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
233233
input
234234
>
235235
{ORGANIZATION_SIZE.map((item) => (

‎apps/web/core/components/workspace/settings/workspace-details.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
242242
ORGANIZATION_SIZE.find((c) => c === value) ??
243243
t("workspace_settings.settings.general.errors.company_size.select_a_range")
244244
}
245-
buttonClassName="!border-[0.5px] !border-subtle !shadow-none"
245+
buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
246246
input
247247
disabled={!isAdmin}
248248
>

‎apps/web/core/components/workspace/sidebar/projects-list-item.tsx‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
1616
import { useTranslation } from "@plane/i18n";
1717
import { Logo } from "@plane/propel/emoji-icon-picker";
1818
import { ArchiveIcon, ChevronRightIcon } from "@plane/propel/icons";
19+
import { IconButton } from "@plane/propel/icon-button";
1920
import { Tooltip } from "@plane/propel/tooltip";
2021
import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
2122
import { cn } from "@plane/utils";
@@ -80,7 +81,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
8081
const isProjectListOpen = getIsProjectListOpen(projectId);
8182
const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
8283
// refs
83-
const actionSectionRef = useRef<HTMLDivElement | null>(null);
84+
const actionSectionRef = useRef<HTMLButtonElement | null>(null);
8485
const projectRef = useRef<HTMLDivElement | null>(null);
8586
const dragHandleRef = useRef<HTMLButtonElement | null>(null);
8687
// router
@@ -341,31 +342,33 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
341342
</div>
342343
)}
343344
</ControlLink>
344-
<CustomMenu
345-
customButton={
346-
<span
347-
ref={actionSectionRef}
348-
className="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm"
349-
onClick={() => setIsMenuActive(!isMenuActive)}
350-
>
351-
<MoreHorizontal className="size-4" />
352-
</span>
353-
}
354-
className={cn(
355-
"opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
356-
{
357-
"opacity-100 pointer-events-auto": isMenuActive,
345+
<div className="flex items-center gap-1">
346+
<CustomMenu
347+
customButton={
348+
<IconButton
349+
ref={actionSectionRef}
350+
variant="ghost"
351+
size="sm"
352+
icon={MoreHorizontal}
353+
onClick={() => setIsMenuActive(!isMenuActive)}
354+
className="text-placeholder"
355+
/>
358356
}
359-
)}
360-
customButtonClassName="grid place-items-center"
361-
placement="bottom-start"
362-
ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
363-
useCaptureForOutsideClick
364-
closeOnSelect
365-
onMenuClose={() => setIsMenuActive(false)}
366-
>
367-
{/* TODO: Removed is_favorite logic due to the optimization in projects API */}
368-
{/* {isAuthorized && (
357+
className={cn(
358+
"opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
359+
{
360+
"opacity-100 pointer-events-auto": isMenuActive,
361+
}
362+
)}
363+
customButtonClassName="grid place-items-center"
364+
placement="bottom-start"
365+
ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
366+
useCaptureForOutsideClick
367+
closeOnSelect
368+
onMenuClose={() => setIsMenuActive(false)}
369+
>
370+
{/* TODO: Removed is_favorite logic due to the optimization in projects API */}
371+
{/* {isAuthorized && (
369372
<CustomMenu.MenuItem
370373
onClick={project.is_favorite ? handleRemoveFromFavorites : handleAddToFavorites}
371374
>
@@ -380,79 +383,76 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
380383
</CustomMenu.MenuItem>
381384
)} */}
382385

383-
{/* publish project settings */}
384-
{isAdmin && (
385-
<CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
386-
<div className="relative flex flex-shrink-0 items-center justify-start gap-2">
387-
<div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-secondary transition-all duration-300 hover:bg-layer-1">
388-
<Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
386+
{/* publish project settings */}
387+
{isAdmin && (
388+
<CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
389+
<div className="relative flex flex-shrink-0 items-center justify-start gap-2">
390+
<div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-secondary transition-all duration-300 hover:bg-layer-1">
391+
<Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
392+
</div>
393+
<div>{t("publish_project")}</div>
389394
</div>
390-
<div>{t("publish_project")}</div>
391-
</div>
395+
</CustomMenu.MenuItem>
396+
)}
397+
<CustomMenu.MenuItem onClick={handleCopyText}>
398+
<span className="flex items-center justify-start gap-2">
399+
<LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
400+
<span>{t("copy_link")}</span>
401+
</span>
392402
</CustomMenu.MenuItem>
393-
)}
394-
<CustomMenu.MenuItem onClick={handleCopyText}>
395-
<span className="flex items-center justify-start gap-2">
396-
<LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
397-
<span>{t("copy_link")}</span>
398-
</span>
399-
</CustomMenu.MenuItem>
400-
{isAuthorized && (
403+
{isAuthorized && (
404+
<CustomMenu.MenuItem
405+
onClick={() => {
406+
router.push(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
407+
}}
408+
>
409+
<div className="flex items-center justify-start gap-2 cursor-pointer">
410+
<ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
411+
<span>{t("archives")}</span>
412+
</div>
413+
</CustomMenu.MenuItem>
414+
)}
401415
<CustomMenu.MenuItem
402416
onClick={() => {
403-
router.push(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
417+
router.push(`/${workspaceSlug}/settings/projects/${project?.id}`);
404418
}}
405419
>
406420
<div className="flex items-center justify-start gap-2 cursor-pointer">
407-
<ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
408-
<span>{t("archives")}</span>
421+
<Settings className="h-3.5 w-3.5 stroke-[1.5]" />
422+
<span>{t("settings")}</span>
409423
</div>
410424
</CustomMenu.MenuItem>
411-
)}
412-
<CustomMenu.MenuItem
413-
onClick={() => {
414-
router.push(`/${workspaceSlug}/settings/projects/${project?.id}`);
415-
}}
416-
>
417-
<div className="flex items-center justify-start gap-2 cursor-pointer">
418-
<Settings className="h-3.5 w-3.5 stroke-[1.5]" />
419-
<span>{t("settings")}</span>
420-
</div>
421-
</CustomMenu.MenuItem>
422-
{/* leave project */}
423-
{!isAuthorized && (
424-
<CustomMenu.MenuItem
425-
onClick={handleLeaveProject}
426-
data-ph-element={MEMBER_TRACKER_ELEMENTS.SIDEBAR_PROJECT_QUICK_ACTIONS}
427-
>
428-
<div className="flex items-center justify-start gap-2">
429-
<LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
430-
<span>{t("leave_project")}</span>
431-
</div>
432-
</CustomMenu.MenuItem>
433-
)}
434-
</CustomMenu>
435-
{isAccordionMode && (
436-
<Disclosure.Button
437-
as="button"
438-
type="button"
439-
className={cn("hidden group-hover/project-item:inline-block p-0.5 rounded-sm hover:bg-layer-1", {
440-
"inline-block": isMenuActive,
441-
})}
442-
onClick={() => setIsProjectListOpen(!isProjectListOpen)}
443-
aria-label={t(
444-
isProjectListOpen
445-
? "aria_labels.projects_sidebar.close_project_menu"
446-
: "aria_labels.projects_sidebar.open_project_menu"
425+
{/* leave project */}
426+
{!isAuthorized && (
427+
<CustomMenu.MenuItem
428+
onClick={handleLeaveProject}
429+
data-ph-element={MEMBER_TRACKER_ELEMENTS.SIDEBAR_PROJECT_QUICK_ACTIONS}
430+
>
431+
<div className="flex items-center justify-start gap-2">
432+
<LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
433+
<span>{t("leave_project")}</span>
434+
</div>
435+
</CustomMenu.MenuItem>
447436
)}
448-
>
449-
<ChevronRightIcon
450-
className={cn("size-4 flex-shrink-0 text-placeholder transition-transform", {
437+
</CustomMenu>
438+
{isAccordionMode && (
439+
<IconButton
440+
variant="ghost"
441+
size="sm"
442+
icon={ChevronRightIcon}
443+
onClick={() => setIsProjectListOpen(!isProjectListOpen)}
444+
className={cn("hidden group-hover/project-item:inline-flex text-placeholder transition-transform", {
445+
"inline-flex": isMenuActive,
451446
"rotate-90": isProjectListOpen,
452447
})}
448+
aria-label={t(
449+
isProjectListOpen
450+
? "aria_labels.projects_sidebar.close_project_menu"
451+
: "aria_labels.projects_sidebar.open_project_menu"
452+
)}
453453
/>
454-
</Disclosure.Button>
455-
)}
454+
)}
455+
</div>
456456
</>
457457
</div>
458458
{isAccordionMode && (

‎packages/propel/src/button/helper.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ export const buttonVariants = cva(
77
variants: {
88
variant: {
99
primary:
10-
"bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active focus:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
10+
"bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
1111
"error-fill":
12-
"bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active focus:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
12+
"bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
1313
"error-outline":
14-
"bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
14+
"bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
1515
secondary:
16-
"bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
16+
"bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
1717
tertiary:
18-
"bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active focus:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
18+
"bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
1919
ghost:
2020
"bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
2121
link: "px-0 underline text-link-primary hover:text-link-primary-hover active:text-link-primary-hover focus:text-link-primary-hover disabled:text-disabled",

‎packages/propel/src/charts/radar-chart/root.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function RadarChart<T extends string, K extends string>(props: TRadarChartProps<
3737
<div className={className}>
3838
<ResponsiveContainer width="100%" height="100%">
3939
<CoreRadarChart cx="50%" cy="50%" outerRadius="80%" data={data} margin={margin}>
40-
<PolarGrid stroke="--alpha(var(--border-color-subtle) / 90%)" />
40+
<PolarGrid stroke="var(--border-color-subtle)" />
4141
<PolarAngleAxis dataKey={angleAxis.key} tick={(props) => <CustomRadarAxisTick {...props} />} />
4242
{showTooltip && (
4343
<Tooltip

‎packages/propel/src/input/input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
2929
type={type}
3030
name={name}
3131
className={cn(
32-
"block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
32+
"block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
3333
{
3434
"rounded-md border-[0.5px]": mode === "primary",
3535
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":

0 commit comments

Comments
 (0)