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

chore: update component styles and class names for consistency across the application (#8376)

Browse source
This commit is contained in:
Jayash Tripathy 2025-12-18 16:33:32 +05:30 • committed by GitHub
parent 88f4d8253d
commit c56bb06957
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 134 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/web/core/components/core/image-picker-popover.tsx
View file

@ -9,7 +9,7 @@ import { Tab, Popover } from "@headlessui/react";
// plane imports // plane imports
import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants"; import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
import { useOutsideClickDetector } from "@plane/hooks"; import { useOutsideClickDetector } from "@plane/hooks";
import { Button } from "@plane/propel/button"; import { Button, getButtonStyling } from "@plane/propel/button";
import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { EFileAssetType } from "@plane/types"; import { EFileAssetType } from "@plane/types";
import { Input, Loader } from "@plane/ui"; import { Input, Loader } from "@plane/ui";
@ -180,11 +180,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
return ( return (
<Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}> <Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
<Popover.Button <Popover.Button className={getButtonStyling("secondary", "sm")} onClick={handleOnClick} disabled={disabled}>
className="rounded-sm border border-strong bg-surface-1 px-2 py-1 text-11 text-secondary hover:text-primary"
onClick={handleOnClick}
disabled={disabled}
>
{label} {label}
</Popover.Button> </Popover.Button>

2
apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
View file

@ -26,7 +26,7 @@ export function LayoutSelection(props: Props) {
}; };
return ( return (
<div className="flex items-center gap-1 rounded-sm bg-layer-3 p-1"> <div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
{ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => ( {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
<Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}> <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
<button <button

2
apps/web/core/components/onboarding/create-workspace.tsx
View file

@ -266,7 +266,7 @@ export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
</span> </span>
) )
} }
buttonClassName="!border-[0.5px] !border-strong !shadow-none !rounded-md" buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
input input
> >
{ORGANIZATION_SIZE.map((item) => ( {ORGANIZATION_SIZE.map((item) => (

13
apps/web/core/components/sidebar/add-button.tsx
View file

@ -1,3 +1,4 @@
import { Button } from "@plane/propel/button";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
type Props = React.ComponentProps<"button"> & { type Props = React.ComponentProps<"button"> & {
@ -8,17 +9,15 @@ type Props = React.ComponentProps<"button"> & {
export function SidebarAddButton(props: Props) { export function SidebarAddButton(props: Props) {
const { label, onClick, disabled, ...rest } = props; const { label, onClick, disabled, ...rest } = props;
return ( return (
<button <Button
type="button" variant={"secondary"}
className={cn( size={"xl"}
"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", className="w-full justify-start"
!disabled && "hover:bg-layer-transparent-hover"
)}
onClick={onClick} onClick={onClick}
disabled={disabled} disabled={disabled}
{...rest} {...rest}
> >
{label} {label}
</button> </Button>
); );
} }

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

@ -125,7 +125,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
}} }}
> >
<div className="space-y-6 sm:space-y-7"> <div className="space-y-6 sm:space-y-7">
<div className="space-y-1 text-13"> <div className="flex flex-col gap-2 text-13">
<label htmlFor="workspaceName"> <label htmlFor="workspaceName">
{t("workspace_creation.form.name.label")} {t("workspace_creation.form.name.label")}
<span className="ml-0.5 text-red-500">*</span> <span className="ml-0.5 text-red-500">*</span>
@ -165,12 +165,12 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
<span className="text-11 text-red-500">{errors?.name?.message}</span> <span className="text-11 text-red-500">{errors?.name?.message}</span>
</div> </div>
</div> </div>
<div className="space-y-1 text-13"> <div className="flex flex-col gap-2 text-13">
<label htmlFor="workspaceUrl"> <label htmlFor="workspaceUrl">
{t("workspace_creation.form.url.label")} {t("workspace_creation.form.url.label")}
<span className="ml-0.5 text-red-500">*</span> <span className="ml-0.5 text-red-500">*</span>
</label> </label>
<div className="flex w-full items-center rounded-md border-[0.5px] border-subtle px-3 bg-layer-1"> <div className="flex w-full items-center rounded-md border border-subtle px-3 bg-layer-2">
<span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span> <span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span>
<Controller <Controller
control={control} control={control}
@ -208,7 +208,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
)} )}
{errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>} {errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>}
</div> </div>
<div className="space-y-1 text-13"> <div className="flex flex-col gap-2 text-13">
<span> <span>
{t("workspace_creation.form.organization_size.label")} {t("workspace_creation.form.organization_size.label")}
<span className="ml-0.5 text-red-500">*</span> <span className="ml-0.5 text-red-500">*</span>
@ -229,7 +229,7 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
</span> </span>
) )
} }
buttonClassName="!border-[0.5px] !border-subtle !shadow-none bg-layer-1 text-12" buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
input input
> >
{ORGANIZATION_SIZE.map((item) => ( {ORGANIZATION_SIZE.map((item) => (

2
apps/web/core/components/workspace/settings/workspace-details.tsx
View file

@ -242,7 +242,7 @@ export const WorkspaceDetails = observer(function WorkspaceDetails() {
ORGANIZATION_SIZE.find((c) => c === value) ?? ORGANIZATION_SIZE.find((c) => c === value) ??
t("workspace_settings.settings.general.errors.company_size.select_a_range") t("workspace_settings.settings.general.errors.company_size.select_a_range")
} }
buttonClassName="!border-[0.5px] !border-subtle !shadow-none" buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
input input
disabled={!isAdmin} disabled={!isAdmin}
> >

36
apps/web/core/components/workspace/sidebar/projects-list-item.tsx
View file

@ -16,6 +16,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { Logo } from "@plane/propel/emoji-icon-picker"; import { Logo } from "@plane/propel/emoji-icon-picker";
import { ArchiveIcon, ChevronRightIcon } from "@plane/propel/icons"; import { ArchiveIcon, ChevronRightIcon } from "@plane/propel/icons";
import { IconButton } from "@plane/propel/icon-button";
import { Tooltip } from "@plane/propel/tooltip"; import { Tooltip } from "@plane/propel/tooltip";
import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui"; import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
@ -80,7 +81,7 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
const isProjectListOpen = getIsProjectListOpen(projectId); const isProjectListOpen = getIsProjectListOpen(projectId);
const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined); const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
// refs // refs
const actionSectionRef = useRef<HTMLDivElement | null>(null); const actionSectionRef = useRef<HTMLButtonElement | null>(null);
const projectRef = useRef<HTMLDivElement | null>(null); const projectRef = useRef<HTMLDivElement | null>(null);
const dragHandleRef = useRef<HTMLButtonElement | null>(null); const dragHandleRef = useRef<HTMLButtonElement | null>(null);
// router // router
@ -341,15 +342,17 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
</div> </div>
)} )}
</ControlLink> </ControlLink>
<div className="flex items-center gap-1">
<CustomMenu <CustomMenu
customButton={ customButton={
<span <IconButton
ref={actionSectionRef} ref={actionSectionRef}
className="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm" variant="ghost"
size="sm"
icon={MoreHorizontal}
onClick={() => setIsMenuActive(!isMenuActive)} onClick={() => setIsMenuActive(!isMenuActive)}
> className="text-placeholder"
<MoreHorizontal className="size-4" /> />
</span>
} }
className={cn( className={cn(
"opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto", "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
@ -433,26 +436,23 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
)} )}
</CustomMenu> </CustomMenu>
{isAccordionMode && ( {isAccordionMode && (
<Disclosure.Button <IconButton
as="button" variant="ghost"
type="button" size="sm"
className={cn("hidden group-hover/project-item:inline-block p-0.5 rounded-sm hover:bg-layer-1", { icon={ChevronRightIcon}
"inline-block": isMenuActive,
})}
onClick={() => setIsProjectListOpen(!isProjectListOpen)} onClick={() => setIsProjectListOpen(!isProjectListOpen)}
className={cn("hidden group-hover/project-item:inline-flex text-placeholder transition-transform", {
"inline-flex": isMenuActive,
"rotate-90": isProjectListOpen,
})}
aria-label={t( aria-label={t(
isProjectListOpen isProjectListOpen
? "aria_labels.projects_sidebar.close_project_menu" ? "aria_labels.projects_sidebar.close_project_menu"
: "aria_labels.projects_sidebar.open_project_menu" : "aria_labels.projects_sidebar.open_project_menu"
)} )}
>
<ChevronRightIcon
className={cn("size-4 flex-shrink-0 text-placeholder transition-transform", {
"rotate-90": isProjectListOpen,
})}
/> />
</Disclosure.Button>
)} )}
</div>
</> </>
</div> </div>
{isAccordionMode && ( {isAccordionMode && (

10
packages/propel/src/button/helper.tsx
View file

@ -7,15 +7,15 @@ export const buttonVariants = cva(
variants: { variants: {
variant: { variant: {
primary: primary:
"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", "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
"error-fill": "error-fill":
"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", "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
"error-outline": "error-outline":
"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", "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",
secondary: secondary:
"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", "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",
tertiary: tertiary:
"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", "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
ghost: ghost:
"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", "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",
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", 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",

2
packages/propel/src/charts/radar-chart/root.tsx
View file

@ -37,7 +37,7 @@ function RadarChart<T extends string, K extends string>(props: TRadarChartProps<
<div className={className}> <div className={className}>
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<CoreRadarChart cx="50%" cy="50%" outerRadius="80%" data={data} margin={margin}> <CoreRadarChart cx="50%" cy="50%" outerRadius="80%" data={data} margin={margin}>
<PolarGrid stroke="--alpha(var(--border-color-subtle) / 90%)" /> <PolarGrid stroke="var(--border-color-subtle)" />
<PolarAngleAxis dataKey={angleAxis.key} tick={(props) => <CustomRadarAxisTick {...props} />} /> <PolarAngleAxis dataKey={angleAxis.key} tick={(props) => <CustomRadarAxisTick {...props} />} />
{showTooltip && ( {showTooltip && (
<Tooltip <Tooltip

2
packages/propel/src/input/input.tsx
View file

@ -29,7 +29,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
type={type} type={type}
name={name} name={name}
className={cn( className={cn(
"block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none", "block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
{ {
"rounded-md border-[0.5px]": mode === "primary", "rounded-md border-[0.5px]": mode === "primary",
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong": "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":

39
packages/tailwind-config/variables.css
View file

@ -311,17 +311,17 @@
--background-color-surface-1: var(--color-neutral-white); --background-color-surface-1: var(--color-neutral-white);
--background-color-surface-2: var(--color-neutral-100); --background-color-surface-2: var(--color-neutral-100);
--background-color-layer-1: var(--color-neutral-200); --background-color-layer-1: var(--color-neutral-200);
--background-color-layer-1-hover: var(--color-alpha-black-100); --background-color-layer-1-hover: var(--color-neutral-300);
--background-color-layer-1-active: var(--color-alpha-black-200); --background-color-layer-1-active: var(--color-neutral-400);
--background-color-layer-1-selected: var(--color-alpha-black-300); --background-color-layer-1-selected: var(--color-neutral-400);
--background-color-layer-2: var(--color-neutral-white); --background-color-layer-2: var(--color-neutral-white);
--background-color-layer-2-hover: var(--color-alpha-black-100); --background-color-layer-2-hover: var(--color-neutral-100);
--background-color-layer-2-active: var(--color-alpha-black-200); --background-color-layer-2-active: var(--color-neutral-200);
--background-color-layer-2-selected: var(--color-alpha-black-300); --background-color-layer-2-selected: var(--color-neutral-200);
--background-color-layer-3: var(--color-neutral-300); --background-color-layer-3: var(--color-neutral-300);
--background-color-layer-3-hover: var(--color-alpha-black-100); --background-color-layer-3-hover: var(--color-neutral-400);
--background-color-layer-3-active: var(--color-alpha-black-200); --background-color-layer-3-active: var(--color-neutral-500);
--background-color-layer-3-selected: var(--color-alpha-black-300); --background-color-layer-3-selected: var(--color-neutral-500);
--background-color-layer-transparent: var(--color-alpha-white-0); --background-color-layer-transparent: var(--color-alpha-white-0);
--background-color-layer-transparent-hover: var(--color-alpha-black-100); --background-color-layer-transparent-hover: var(--color-alpha-black-100);
--background-color-layer-transparent-active: var(--color-alpha-black-200); --background-color-layer-transparent-active: var(--color-alpha-black-200);
@ -351,6 +351,7 @@
--background-color-danger-transparent-active: var(--color-red-100); --background-color-danger-transparent-active: var(--color-red-100);
--background-color-danger-transparent-selected: var(--color-red-100); --background-color-danger-transparent-selected: var(--color-red-100);
--background-color-backdrop: var(--color-alpha-black-500); --background-color-backdrop: var(--color-alpha-black-500);
--background-color-inverse: var(--color-alpha-black-1000);
/* Border colors */ /* Border colors */
--border-color-subtle: var(--color-neutral-400); --border-color-subtle: var(--color-neutral-400);
@ -634,17 +635,17 @@
--background-color-surface-1: var(--color-neutral-100); --background-color-surface-1: var(--color-neutral-100);
--background-color-surface-2: var(--color-neutral-100); --background-color-surface-2: var(--color-neutral-100);
--background-color-layer-1: var(--color-neutral-200); --background-color-layer-1: var(--color-neutral-200);
--background-color-layer-1-hover: var(--color-alpha-white-100); --background-color-layer-1-hover: var(--color-neutral-300);
--background-color-layer-1-active: var(--color-alpha-white-200); --background-color-layer-1-active: var(--color-neutral-400);
--background-color-layer-1-selected: var(--color-alpha-white-300); --background-color-layer-1-selected: var(--color-neutral-400);
--background-color-layer-2: var(--color-neutral-300); --background-color-layer-2: var(--color-neutral-300);
--background-color-layer-2-hover: var(--color-alpha-white-100); --background-color-layer-2-hover: var(--color-neutral-400);
--background-color-layer-2-active: var(--color-alpha-white-200); --background-color-layer-2-active: var(--color-neutral-500);
--background-color-layer-2-selected: var(--color-alpha-white-300); --background-color-layer-2-selected: var(--color-neutral-500);
--background-color-layer-3: var(--color-neutral-400); --background-color-layer-3: var(--color-neutral-400);
--background-color-layer-3-hover: var(--color-alpha-white-100); --background-color-layer-3-hover: var(---color-neutral-500);
--background-color-layer-3-active: var(--color-alpha-white-200); --background-color-layer-3-active: var(--color-neutral-600);
--background-color-layer-3-selected: var(--color-alpha-white-300); --background-color-layer-3-selected: var(--color-neutral-600);
--background-color-layer-transparent: var(--color-alpha-black-0); --background-color-layer-transparent: var(--color-alpha-black-0);
--background-color-layer-transparent-hover: var(--color-alpha-white-100); --background-color-layer-transparent-hover: var(--color-alpha-white-100);
--background-color-layer-transparent-active: var(--color-alpha-white-200); --background-color-layer-transparent-active: var(--color-alpha-white-200);
@ -674,6 +675,8 @@
--background-color-danger-transparent-active: var(--color-red-100); --background-color-danger-transparent-active: var(--color-red-100);
--background-color-danger-transparent-selected: var(--color-red-100); --background-color-danger-transparent-selected: var(--color-red-100);
--background-color-backdrop: var(--color-alpha-black-1000); --background-color-backdrop: var(--color-alpha-black-1000);
--background-color-inverse: var(--color-alpha-white-1000);
/* Border colors */ /* Border colors */
--border-color-subtle: var(--color-neutral-400); --border-color-subtle: var(--color-neutral-400);

6
packages/ui/src/breadcrumbs/breadcrumbs.tsx
View file

@ -170,9 +170,11 @@ function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
<Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}> <Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
<div <div
className={cn( className={cn(
"group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium text-tertiary cursor-default", "group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium cursor-default",
{ {
"hover:text-primary hover:bg-surface-2 cursor-pointer": type === "link" && !isLast, "text-primary": isLast,
"text-tertiary": !isLast,
"hover:text-primary hover:bg-layer-transparent-hover cursor-pointer": type === "link" && !isLast,
}, },
className className
)} )}

2
packages/ui/src/dropdowns/custom-select.tsx
View file

@ -94,7 +94,7 @@ function CustomSelect(props: ICustomSelectProps) {
ref={setReferenceElement} ref={setReferenceElement}
type="button" type="button"
className={cn( className={cn(
"flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-strong", "flex w-full items-center justify-between gap-1 rounded border border-strong",
{ {
"px-3 py-2 text-13": input, "px-3 py-2 text-13": input,
"px-2 py-1 text-11": !input, "px-2 py-1 text-11": !input,