github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: sidebar theming (#925)

Browse Source 
* style: sidebar workspace dropdown theming

* style: progress chart and progress bar theming

* style: module and cycle sidebar theming
This commit is contained in:
Anmol Singh Bhatia 2023-04-22 00:15:45 +05:30 committed by GitHub
parent e59137f6f2
commit 68930c256f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/app/components/core/sidebar/progress-chart.tsx
View File

@ -40,7 +40,7 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
const CustomTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
if (active && payload && payload.length) {
return (
<div className="rounded-sm bg-gray-300 p-1 text-xs text-gray-800">
<div className="rounded-sm bg-brand-surface-1 p-1 text-xs text-brand-base">
<p>{payload[0].payload.currentDate}</p>
</div>
);
@ -68,20 +68,8 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
<stop offset="100%" stopColor="#3F76FF" stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
dataKey="currentDate"
stroke="#9ca3af"
tick={{ fontSize: "12px", fill: "#1f2937" }}
tickSize={10}
minTickGap={10}
/>
<YAxis
stroke="#9ca3af"
tick={{ fontSize: "12px", fill: "#1f2937" }}
tickSize={10}
minTickGap={10}
allowDecimals={false}
/>
<XAxis dataKey="currentDate" tickSize={10} minTickGap={10} />
<YAxis tickSize={10} minTickGap={10} allowDecimals={false} />
<Tooltip content={<CustomTooltip />} />
<Area
type="monotone"

16
apps/app/components/cycles/sidebar.tsx
View File

@ -135,7 +135,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div
className={`fixed top-0 ${
isOpen ? "right-0" : "-right-[24rem]"
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
>
{cycle ? (
<>
@ -297,15 +297,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</CustomMenu>
</div>
<span className="whitespace-normal text-sm leading-5 text-brand-base">
<span className="whitespace-normal text-sm leading-5 text-brand-secondary">
{cycle.description}
</span>
</div>
<div className="flex flex-col gap-4 text-sm">
<div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2">
<UserCircleIcon className="h-5 w-5 text-gray-400" />
<div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<UserCircleIcon className="h-5 w-5" />
<span>Lead</span>
</div>
@ -323,17 +323,17 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
{cycle.owned_by.first_name.charAt(0)}
</span>
)}
<span className="text-brand-base">{cycle.owned_by.first_name}</span>
<span className="text-brand-secondary">{cycle.owned_by.first_name}</span>
</div>
</div>
<div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2">
<ChartPieIcon className="h-5 w-5 text-gray-400" />
<div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<ChartPieIcon className="h-5 w-5" />
<span>Progress</span>
</div>
<div className="flex items-center gap-2.5 text-brand-muted-1">
<div className="flex items-center gap-2.5 text-brand-secondary">
<span className="h-4 w-4">
<ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
</span>

4
apps/app/components/modules/sidebar-select/select-lead.tsx
View File

@ -54,8 +54,8 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
return (
<div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2">
<UserCircleIcon className="h-5 w-5 text-gray-400" />
<div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<UserCircleIcon className="h-5 w-5" />
<span>Lead</span>
</div>
<div className="sm:basis-1/2">

4
apps/app/components/modules/sidebar-select/select-members.tsx
View File

@ -50,8 +50,8 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
return (
<div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2">
<UserGroupIcon className="h-5 w-5 text-gray-400" />
<div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<UserGroupIcon className="h-5 w-5" />
<span>Members</span>
</div>
<div className="sm:basis-1/2">

12
apps/app/components/modules/sidebar.tsx
View File

@ -185,7 +185,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<div
className={`fixed top-0 ${
isOpen ? "right-0" : "-right-[24rem]"
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-sidebar py-5 duration-300`}
>
{module ? (
<>
@ -336,7 +336,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</CustomMenu>
</div>
<span className="whitespace-normal text-sm leading-5 text-brand-base">
<span className="whitespace-normal text-sm leading-5 text-brand-secondary">
{module.description}
</span>
</div>
@ -368,12 +368,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
/>
<div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2">
<ChartPieIcon className="h-5 w-5 text-gray-400" />
<div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<ChartPieIcon className="h-5 w-5" />
<span>Progress</span>
</div>
<div className="flex items-center gap-2.5 text-brand-muted-1">
<div className="flex items-center gap-2.5 text-brand-secondary">
<span className="h-4 w-4">
<ProgressBar
value={module.completed_issues}
@ -532,7 +532,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<PlusIcon className="h-4 w-4" />
</button>
</div>
<div className="mt-2 space-y-2 hover:bg-gray-100">
<div className="mt-2 space-y-2 hover:bg-brand-surface-2">
{memberRole && module.link_module && module.link_module.length > 0 ? (
<LinksList
links={module.link_module}

2
apps/app/components/ui/progress-bar.tsx
View File

@ -63,7 +63,7 @@ export const ProgressBar: React.FC<Props> = ({
return (
<svg width={radius * 2} height={radius * 2}>
{renderOuterCircle()}
<circle r={radius - strokeWidth} cx={radius} cy={radius} fill="#f9fafb" />
<circle r={radius - strokeWidth} cx={radius} cy={radius} className="progress-bar"/>
</svg>
);
};

8
apps/app/components/workspace/sidebar-dropdown.tsx
View File

@ -86,7 +86,7 @@ export const WorkspaceSidebarDropdown = () => {
<div className="flex items-center justify-between gap-2.5">
<Menu.Button className="text-brand-muted-1 flex w-full items-center rounded-md py-2 text-sm font-semibold focus:outline-none">
<div
className={`flex w-full items-center gap-x-2 rounded-md bg-brand-base px-2 py-1.5 ${
className={`flex w-full items-center gap-x-2 rounded-md bg-brand-surface-2 px-2 py-1.5 ${
sidebarCollapse ? "justify-center" : ""
}`}
>
@ -189,9 +189,9 @@ export const WorkspaceSidebarDropdown = () => {
onClick={() => {
router.push("/create-workspace");
}}
className="flex w-full items-center gap-1 text-sm text-gray-600"
className="flex w-full items-center gap-1 text-sm text-brand-secondary"
>
<PlusIcon className="h-3 w-3 text-gray-600" />
<PlusIcon className="h-3 w-3" />
Create Workspace
</Menu.Item>
</div>
@ -209,7 +209,7 @@ export const WorkspaceSidebarDropdown = () => {
<Menu.Item
key={index}
as="div"
className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-gray-600 hover:bg-brand-surface-1"
className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-brand-secondary hover:bg-brand-surface-1"
>
<Link href={link.href}>
<a className="w-full">{link.name}</a>

5
apps/app/styles/globals.css
View File

@ -206,4 +206,9 @@
);
}
.progress-bar{
fill: currentColor;
color: rgba(var(--color-bg-sidebar));
}
/* end react datepicker styling */