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>) => { const CustomTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
if (active && payload && payload.length) { if (active && payload && payload.length) {
return ( 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> <p>{payload[0].payload.currentDate}</p>
</div> </div>
); );
@ -68,20 +68,8 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
<stop offset="100%" stopColor="#3F76FF" stopOpacity={0} /> <stop offset="100%" stopColor="#3F76FF" stopOpacity={0} />
</linearGradient> </linearGradient>
</defs> </defs>
<XAxis <XAxis dataKey="currentDate" tickSize={10} minTickGap={10} />
dataKey="currentDate" <YAxis tickSize={10} minTickGap={10} allowDecimals={false} />
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}
/>
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />
<Area <Area
type="monotone" type="monotone"

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

@ -135,7 +135,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div <div
className={`fixed top-0 ${ className={`fixed top-0 ${
isOpen ? "right-0" : "-right-[24rem]" 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 ? ( {cycle ? (
<> <>
@ -297,15 +297,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
</CustomMenu> </CustomMenu>
</div> </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} {cycle.description}
</span> </span>
</div> </div>
<div className="flex flex-col gap-4 text-sm"> <div className="flex flex-col gap-4 text-sm">
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2"> <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<UserCircleIcon className="h-5 w-5 text-gray-400" /> <UserCircleIcon className="h-5 w-5" />
<span>Lead</span> <span>Lead</span>
</div> </div>
@ -323,17 +323,17 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
{cycle.owned_by.first_name.charAt(0)} {cycle.owned_by.first_name.charAt(0)}
</span> </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> </div>
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2"> <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<ChartPieIcon className="h-5 w-5 text-gray-400" /> <ChartPieIcon className="h-5 w-5" />
<span>Progress</span> <span>Progress</span>
</div> </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"> <span className="h-4 w-4">
<ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} /> <ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
</span> </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 ( return (
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2"> <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<UserCircleIcon className="h-5 w-5 text-gray-400" /> <UserCircleIcon className="h-5 w-5" />
<span>Lead</span> <span>Lead</span>
</div> </div>
<div className="sm:basis-1/2"> <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 ( return (
<div className="flex items-center justify-start gap-1"> <div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2"> <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<UserGroupIcon className="h-5 w-5 text-gray-400" /> <UserGroupIcon className="h-5 w-5" />
<span>Members</span> <span>Members</span>
</div> </div>
<div className="sm:basis-1/2"> <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 <div
className={`fixed top-0 ${ className={`fixed top-0 ${
isOpen ? "right-0" : "-right-[24rem]" 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 ? ( {module ? (
<> <>
@ -336,7 +336,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
</CustomMenu> </CustomMenu>
</div> </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} {module.description}
</span> </span>
</div> </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 items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2"> <div className="flex w-40 items-center justify-start gap-2 text-brand-secondary">
<ChartPieIcon className="h-5 w-5 text-gray-400" /> <ChartPieIcon className="h-5 w-5" />
<span>Progress</span> <span>Progress</span>
</div> </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"> <span className="h-4 w-4">
<ProgressBar <ProgressBar
value={module.completed_issues} value={module.completed_issues}
@ -532,7 +532,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />
</button> </button>
</div> </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 ? ( {memberRole && module.link_module && module.link_module.length > 0 ? (
<LinksList <LinksList
links={module.link_module} 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 ( return (
<svg width={radius * 2} height={radius * 2}> <svg width={radius * 2} height={radius * 2}>
{renderOuterCircle()} {renderOuterCircle()}
<circle r={radius - strokeWidth} cx={radius} cy={radius} fill="#f9fafb" /> <circle r={radius - strokeWidth} cx={radius} cy={radius} className="progress-bar"/>
</svg> </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"> <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"> <Menu.Button className="text-brand-muted-1 flex w-full items-center rounded-md py-2 text-sm font-semibold focus:outline-none">
<div <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" : "" sidebarCollapse ? "justify-center" : ""
}`} }`}
> >
@ -189,9 +189,9 @@ export const WorkspaceSidebarDropdown = () => {
onClick={() => { onClick={() => {
router.push("/create-workspace"); 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 Create Workspace
</Menu.Item> </Menu.Item>
</div> </div>
@ -209,7 +209,7 @@ export const WorkspaceSidebarDropdown = () => {
<Menu.Item <Menu.Item
key={index} key={index}
as="div" 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}> <Link href={link.href}>
<a className="w-full">{link.name}</a> <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 */ /* end react datepicker styling */