Skip to content

Commit 995725b

Browse files
JayashTripathyJayashTripathy
committed
refactor: update styling and structure across various components for consistency and improved UI
1 parent 59f024d commit 995725b

File tree

14 files changed

+102
-69
lines changed

14 files changed

+102
-69
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,17 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
7272
<div className={"flex flex-col w-full h-full"}>
7373
<div
7474
className={cn(
75-
"px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-layer-1"
75+
"px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-surface-1"
7676
)}
7777
>
78-
<Tabs.List background="layer-2" className={"my-2 overflow-x-auto flex w-fit"}>
78+
<Tabs.List className={"overflow-x-auto flex w-fit h-7"}>
7979
{ANALYTICS_TABS.map((tab) => (
8080
<Tabs.Trigger
8181
key={tab.key}
8282
value={tab.key}
8383
disabled={tab.isDisabled}
8484
size="md"
85-
className="px-3"
85+
className="px-3 h-6"
8686
onClick={() => {
8787
if (!tab.isDisabled) {
8888
handleTabChange(tab.key);

‎apps/web/core/components/analytics/select/project.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { observer } from "mobx-react";
22
// plane package imports
3+
import { getButtonStyling } from "@plane/propel/button";
34
import { Logo } from "@plane/propel/emoji-icon-picker";
4-
import { ProjectIcon } from "@plane/propel/icons";
5+
import { ChevronDownIcon, ProjectIcon } from "@plane/propel/icons";
56
import { CustomSearchSelect } from "@plane/ui";
7+
import { cn } from "@plane/utils";
68
// hooks
79
import { useProject } from "@/hooks/store/use-project";
810

@@ -40,8 +42,9 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
4042
value={value ?? []}
4143
onChange={(val: string[]) => onChange(val)}
4244
options={options}
43-
label={
44-
<div className="flex items-center gap-2 p-1 ">
45+
className="border-none p-0"
46+
customButton={
47+
<div className={cn(getButtonStyling("secondary", "lg"), "gap-2")}>
4548
<ProjectIcon className="h-4 w-4" />
4649
{value && value.length > 3
4750
? `3+ projects`
@@ -51,8 +54,10 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
5154
.map((p) => getProjectById(p)?.name)
5255
.join(", ")
5356
: "All projects"}
57+
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
5458
</div>
5559
}
60+
customButtonClassName="border-none p-0 bg-transparent hover:bg-transparent w-auto h-auto"
5661
multiple
5762
/>
5863
);

‎apps/web/core/components/base-layouts/kanban/group.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBase
3535
<div
3636
ref={groupRef}
3737
className={cn(
38-
"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",
38+
"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",
3939
{
4040
"bg-layer-1": isDraggingOver,
4141
},
4242
groupClassName
4343
)}
4444
>
4545
{/* Group Header */}
46-
<div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-surface-2 px-1 py-2 cursor-pointer">
46+
<div className="sticky top-0 z-[2] w-full flex-shrink-0 px-1 py-2 cursor-pointer">
4747
{renderGroupHeader ? (
4848
renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
4949
) : (

‎apps/web/core/components/base-layouts/layout-switcher.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React from "react";
1+
import { useTranslation } from "@plane/i18n";
22
import { Tooltip } from "@plane/propel/tooltip";
33
import type { TBaseLayoutType } from "@plane/types";
4+
import { cn } from "@plane/utils";
45
import { usePlatformOS } from "@/hooks/use-platform-os";
56
import { BASE_LAYOUTS } from "./constants";
67

@@ -13,6 +14,7 @@ type Props = {
1314
export function LayoutSwitcher(props: Props) {
1415
const { layouts, onChange, selectedLayout } = props;
1516
const { isMobile } = usePlatformOS();
17+
const { t } = useTranslation();
1618

1719
const handleOnChange = (layoutKey: TBaseLayoutType) => {
1820
if (selectedLayout !== layoutKey) {
@@ -21,21 +23,29 @@ export function LayoutSwitcher(props: Props) {
2123
};
2224

2325
return (
24-
<div className="flex items-center gap-1 rounded-sm bg-layer-1 p-1">
26+
<div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
2527
{BASE_LAYOUTS.filter((l) => (layouts ? layouts.includes(l.key) : true)).map((layout) => {
2628
const Icon = layout.icon;
2729
return (
28-
<Tooltip key={layout.key} tooltipContent={layout.label} isMobile={isMobile}>
30+
<Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
2931
<button
3032
type="button"
31-
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-surface-1 ${
32-
selectedLayout === layout.key ? "bg-surface-1 shadow-raised-100" : ""
33-
}`}
33+
className={cn(
34+
"group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
35+
{
36+
"bg-layer-transparent-active hover:bg-layer-transparent-active": selectedLayout === layout.key,
37+
}
38+
)}
3439
onClick={() => handleOnChange(layout.key)}
3540
>
3641
<Icon
42+
width={14}
43+
height={14}
3744
strokeWidth={2}
38-
className={`h-3.5 w-3.5 ${selectedLayout === layout.key ? "text-primary" : "text-secondary"}`}
45+
className={cn("size-3.5", {
46+
"text-primary": selectedLayout === layout.key,
47+
"text-secondary": selectedLayout !== layout.key,
48+
})}
3949
/>
4050
</button>
4151
</Tooltip>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -441,8 +441,10 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
441441
size="sm"
442442
icon={ChevronRightIcon}
443443
onClick={() => setIsProjectListOpen(!isProjectListOpen)}
444-
className={cn("hidden group-hover/project-item:inline-flex text-placeholder transition-transform", {
444+
className={cn("hidden group-hover/project-item:inline-flex text-placeholder", {
445445
"inline-flex": isMenuActive,
446+
})}
447+
iconClassName={cn("transition-transform", {
446448
"rotate-90": isProjectListOpen,
447449
})}
448450
aria-label={t(

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

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Disclosure, Transition } from "@headlessui/react";
99
import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
1010
import { useTranslation } from "@plane/i18n";
1111
import { ChevronRightIcon } from "@plane/propel/icons";
12+
import { IconButton } from "@plane/propel/icon-button";
1213
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
1314
import { Tooltip } from "@plane/propel/tooltip";
1415
import { Loader } from "@plane/ui";
@@ -178,39 +179,37 @@ export const SidebarProjectsList = observer(function SidebarProjectsList() {
178179
>
179180
<span className="text-13 font-semibold">{t("projects")}</span>
180181
</Disclosure.Button>
181-
<div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
182+
<div className="flex items-center gap-1">
182183
{isAuthorizedUser && (
183184
<Tooltip tooltipHeading={t("create_project")} tooltipContent="">
184-
<button
185-
type="button"
186-
data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_TOOLTIP}
187-
className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0"
185+
<IconButton
186+
variant="ghost"
187+
size="sm"
188+
icon={Plus}
188189
onClick={() => {
189190
setIsProjectModalOpen(true);
190191
}}
192+
data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_TOOLTIP}
193+
className="hidden group-hover:inline-flex text-placeholder"
191194
aria-label={t("aria_labels.projects_sidebar.create_new_project")}
192-
>
193-
<Plus className="size-3" />
194-
</button>
195+
/>
195196
</Tooltip>
196197
)}
197-
<Disclosure.Button
198-
as="button"
199-
type="button"
200-
className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0"
198+
<IconButton
199+
variant="ghost"
200+
size="sm"
201+
icon={ChevronRightIcon}
201202
onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
203+
className="text-placeholder"
204+
iconClassName={cn("transition-transform", {
205+
"rotate-90": isAllProjectsListOpen,
206+
})}
202207
aria-label={t(
203208
isAllProjectsListOpen
204209
? "aria_labels.projects_sidebar.close_projects_menu"
205210
: "aria_labels.projects_sidebar.open_projects_menu"
206211
)}
207-
>
208-
<ChevronRightIcon
209-
className={cn("flex-shrink-0 size-3 transition-all", {
210-
"rotate-90": isAllProjectsListOpen,
211-
})}
212-
/>
213-
</Disclosure.Button>
212+
/>
214213
</div>
215214
</div>
216215
<Transition

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export const AreaChart = React.memo(function AreaChart<K extends string, T exten
112112
left: margin?.left === undefined ? 20 : margin.left,
113113
}}
114114
>
115-
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
115+
<CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
116116
<XAxis
117117
dataKey={xAxis.key}
118118
tick={(props) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
127127
barSize={barSize}
128128
className="recharts-wrapper"
129129
>
130-
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
130+
<CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
131131
<XAxis
132132
dataKey={xAxis.key}
133133
tick={(props) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const LineChart = React.memo(function LineChart<K extends string, T exten
9898
left: margin?.left === undefined ? 20 : margin.left,
9999
}}
100100
>
101-
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
101+
<CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
102102
<XAxis
103103
dataKey={xAxis.key}
104104
tick={(props) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const ScatterChart = React.memo(function ScatterChart<K extends string, T
8282
left: margin?.left === undefined ? 20 : margin.left,
8383
}}
8484
>
85-
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
85+
<CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
8686
<XAxis
8787
dataKey={xAxis.key}
8888
tick={(props) => {

0 commit comments

Comments
 (0)