mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-01-06 05:40:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-5614] refactor: update styling and structure across various components (#8388)

Browse Source
This commit is contained in:
Jayash Tripathy
2025-12-18 20:19:51 +05:30
committed by GitHub
parent cb56fbe3ca
commit 81dbd5ab19
14 changed files with 102 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
View File

@@ -72,17 +72,17 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
<div className={"flex flex-col w-full h-full"}>
<div
className={cn(
"px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-layer-1"
"px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-surface-1"
)}
>
<Tabs.List background="layer-2" className={"my-2 overflow-x-auto flex w-fit"}>
<Tabs.List className={"overflow-x-auto flex w-fit h-7"}>
{ANALYTICS_TABS.map((tab) => (
<Tabs.Trigger
key={tab.key}
value={tab.key}
disabled={tab.isDisabled}
size="md"
className="px-3"
className="px-3 h-6"
onClick={() => {
if (!tab.isDisabled) {
handleTabChange(tab.key);

11
apps/web/core/components/analytics/select/project.tsx
View File

@@ -1,8 +1,10 @@
import { observer } from "mobx-react";
// plane package imports
import { getButtonStyling } from "@plane/propel/button";
import { Logo } from "@plane/propel/emoji-icon-picker";
import { ProjectIcon } from "@plane/propel/icons";
import { ChevronDownIcon, ProjectIcon } from "@plane/propel/icons";
import { CustomSearchSelect } from "@plane/ui";
import { cn } from "@plane/utils";
// hooks
import { useProject } from "@/hooks/store/use-project";
@@ -40,8 +42,9 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
value={value ?? []}
onChange={(val: string[]) => onChange(val)}
options={options}
label={
<div className="flex items-center gap-2 p-1 ">
className="border-none p-0"
customButton={
<div className={cn(getButtonStyling("secondary", "lg"), "gap-2")}>
<ProjectIcon className="h-4 w-4" />
{value && value.length > 3
? `3+ projects`
@@ -51,8 +54,10 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
.map((p) => getProjectById(p)?.name)
.join(", ")
: "All projects"}
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
</div>
}
customButtonClassName="border-none p-0 bg-transparent hover:bg-transparent w-auto h-auto"
multiple
/>
);

4
apps/web/core/components/base-layouts/kanban/group.tsx
View File

@@ -35,7 +35,7 @@ export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBase
<div
ref={groupRef}
className={cn(
"relative flex flex-shrink-0 flex-col w-[350px] border-[1px] border-transparent p-2 pt-0 max-h-full overflow-y-auto bg-surface-2 rounded-md",
"relative flex flex-shrink-0 flex-col w-[350px] border-[1px] border-transparent p-2 pt-0 max-h-full overflow-y-auto bg-layer-1 rounded-md",
{
"bg-layer-1": isDraggingOver,
},
@@ -43,7 +43,7 @@ export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBase
)}
>
{/* Group Header */}
<div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-surface-2 px-1 py-2 cursor-pointer">
<div className="sticky top-0 z-[2] w-full flex-shrink-0 px-1 py-2 cursor-pointer">
{renderGroupHeader ? (
renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
) : (

24
apps/web/core/components/base-layouts/layout-switcher.tsx
View File

@@ -1,6 +1,7 @@
import React from "react";
import { useTranslation } from "@plane/i18n";
import { Tooltip } from "@plane/propel/tooltip";
import type { TBaseLayoutType } from "@plane/types";
import { cn } from "@plane/utils";
import { usePlatformOS } from "@/hooks/use-platform-os";
import { BASE_LAYOUTS } from "./constants";
@@ -13,6 +14,7 @@ type Props = {
export function LayoutSwitcher(props: Props) {
const { layouts, onChange, selectedLayout } = props;
const { isMobile } = usePlatformOS();
const { t } = useTranslation();
const handleOnChange = (layoutKey: TBaseLayoutType) => {
if (selectedLayout !== layoutKey) {
@@ -21,21 +23,29 @@ export function LayoutSwitcher(props: Props) {
};
return (
<div className="flex items-center gap-1 rounded-sm bg-layer-1 p-1">
<div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
{BASE_LAYOUTS.filter((l) => (layouts ? layouts.includes(l.key) : true)).map((layout) => {
const Icon = layout.icon;
return (
<Tooltip key={layout.key} tooltipContent={layout.label} isMobile={isMobile}>
<Tooltip key={layout.key} tooltipContent={t(layout.label)} isMobile={isMobile}>
<button
type="button"
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-surface-1 ${
selectedLayout === layout.key ? "bg-surface-1 shadow-raised-100" : ""
}`}
className={cn(
"group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
{
"bg-layer-transparent-active hover:bg-layer-transparent-active": selectedLayout === layout.key,
}
)}
onClick={() => handleOnChange(layout.key)}
>
<Icon
width={14}
height={14}
strokeWidth={2}
className={`h-3.5 w-3.5 ${selectedLayout === layout.key ? "text-primary" : "text-secondary"}`}
className={cn("size-3.5", {
"text-primary": selectedLayout === layout.key,
"text-secondary": selectedLayout !== layout.key,
})}
/>
</button>
</Tooltip>

4
apps/web/core/components/workspace/sidebar/projects-list-item.tsx
View File

@@ -441,8 +441,10 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
size="sm"
icon={ChevronRightIcon}
onClick={() => setIsProjectListOpen(!isProjectListOpen)}
className={cn("hidden group-hover/project-item:inline-flex text-placeholder transition-transform", {
className={cn("hidden group-hover/project-item:inline-flex text-placeholder", {
"inline-flex": isMenuActive,
})}
iconClassName={cn("transition-transform", {
"rotate-90": isProjectListOpen,
})}
aria-label={t(

37
apps/web/core/components/workspace/sidebar/projects-list.tsx
View File

@@ -9,6 +9,7 @@ import { Disclosure, Transition } from "@headlessui/react";
import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { ChevronRightIcon } from "@plane/propel/icons";
import { IconButton } from "@plane/propel/icon-button";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import { Loader } from "@plane/ui";
@@ -178,39 +179,37 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
>
<span className="text-13 font-semibold">{t("projects")}</span>
</Disclosure.Button>
<div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
<div className="flex items-center gap-1">
{isAuthorizedUser && (
<Tooltip tooltipHeading={t("create_project")} tooltipContent="">
<button
type="button"
data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_TOOLTIP}
className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0"
<IconButton
variant="ghost"
size="sm"
icon={Plus}
onClick={() => {
setIsProjectModalOpen(true);
}}
data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_TOOLTIP}
className="hidden group-hover:inline-flex text-placeholder"
aria-label={t("aria_labels.projects_sidebar.create_new_project")}
>
<Plus className="size-3" />
</button>
/>
</Tooltip>
)}
<Disclosure.Button
as="button"
type="button"
className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0"
<IconButton
variant="ghost"
size="sm"
icon={ChevronRightIcon}
onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
className="text-placeholder"
iconClassName={cn("transition-transform", {
"rotate-90": isAllProjectsListOpen,
})}
aria-label={t(
isAllProjectsListOpen
? "aria_labels.projects_sidebar.close_projects_menu"
: "aria_labels.projects_sidebar.open_projects_menu"
)}
>
<ChevronRightIcon
className={cn("flex-shrink-0 size-3 transition-all", {
"rotate-90": isAllProjectsListOpen,
})}
/>
</Disclosure.Button>
/>
</div>
</div>
<Transition