feat: themes (#902)
* chore: add next theme and initial setup * chore: add dark mode colors to layouts * chore: user general setting page theming * chore: dashboard theming * chore: project page theming * chore: workspace setting page theming * chore: my issue page theming * chore: cmdk theming * chore: change hardcode bg and text color to theme * chore: change color name according to the design * style: fix card in the dashboard * style: fix merge conflict design issues * style: add light high contrast and dark high contrast * style: fix cmd k menu color and selection * feat: change theme from cmdk menu * chore: add multiple theme field to custom theme * chore: removed custom theming * fix: build error --------- Co-authored-by: Saheb Giri <iamsahebgiri@gmail.com>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
9f04933957
commit
3c2f5d12ed
191 changed files with 1550 additions and 880 deletions
|
|
@ -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 bg-gray-50 py-5 duration-300`}
|
||||
} z-20 h-full w-[24rem] overflow-y-auto border-l border-brand-base bg-brand-surface-2 py-5 duration-300`}
|
||||
>
|
||||
{cycle ? (
|
||||
<>
|
||||
|
|
@ -143,19 +143,19 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
<div className="flex gap-2.5 px-5 text-sm">
|
||||
<div className="flex items-center ">
|
||||
<span
|
||||
className={`flex items-center rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-center text-sm capitalize text-gray-800 `}
|
||||
className={`flex items-center rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-center text-sm capitalize text-brand-muted-1 `}
|
||||
>
|
||||
{capitalizeFirstLetter(cycleStatus)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-gray-800">
|
||||
<div className="relative flex h-full w-52 items-center justify-center gap-2 text-sm text-brand-muted-1">
|
||||
<Popover className="flex h-full items-center justify-center rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800 ${
|
||||
open ? "bg-gray-100" : ""
|
||||
className={`group flex h-full items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3" />
|
||||
|
|
@ -216,8 +216,8 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
<>
|
||||
<Popover.Button
|
||||
disabled={isCompleted ?? false}
|
||||
className={`group flex items-center gap-1 rounded border-[0.5px] border-gray-200 bg-gray-100 px-2.5 py-1.5 text-gray-800 ${
|
||||
open ? "bg-gray-100" : ""
|
||||
className={`group flex items-center gap-1 rounded border-[0.5px] border-brand-base bg-brand-surface-1 px-2.5 py-1.5 text-brand-muted-1 ${
|
||||
open ? "bg-brand-surface-1" : ""
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-3 w-3 " />
|
||||
|
|
@ -278,7 +278,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
<div className="flex flex-col gap-6 px-6 py-6 w-full">
|
||||
<div className="flex flex-col items-start justify-start gap-2 w-full">
|
||||
<div className="flex items-start justify-between gap-2 w-full">
|
||||
<h4 className="text-xl font-semibold text-gray-900">{cycle.name}</h4>
|
||||
<h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4>
|
||||
<CustomMenu width="lg" ellipsis>
|
||||
{!isCompleted && (
|
||||
<CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
|
||||
|
|
@ -297,7 +297,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
</CustomMenu>
|
||||
</div>
|
||||
|
||||
<span className="whitespace-normal text-sm leading-5 text-black">
|
||||
<span className="whitespace-normal text-sm leading-5 text-brand-base">
|
||||
{cycle.description}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -323,7 +323,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
{cycle.owned_by.first_name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-gray-900">{cycle.owned_by.first_name}</span>
|
||||
<span className="text-brand-base">{cycle.owned_by.first_name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -333,7 +333,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
<span>Progress</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 text-gray-800">
|
||||
<div className="flex items-center gap-2.5 text-brand-muted-1">
|
||||
<span className="h-4 w-4">
|
||||
<ProgressBar value={cycle.completed_issues} maxValue={cycle.total_issues} />
|
||||
</span>
|
||||
|
|
@ -344,15 +344,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
|
||||
<Disclosure defaultOpen>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<div
|
||||
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between gap-2 ">
|
||||
<div className="flex items-center justify-start gap-2 text-sm">
|
||||
<span className="font-medium text-gray-500">Progress</span>
|
||||
<span className="font-medium text-brand-secondary">Progress</span>
|
||||
{!open && progressPercentage ? (
|
||||
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
|
||||
{progressPercentage ? `${progressPercentage}%` : ""}
|
||||
|
|
@ -371,7 +371,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
) : (
|
||||
<div className="flex items-center gap-1">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span className="text-xs italic text-gray-500">
|
||||
<span className="text-xs italic text-brand-secondary">
|
||||
{cycleStatus === "upcoming"
|
||||
? "Cycle is yet to start."
|
||||
: "Invalid date. Please enter valid date."}
|
||||
|
|
@ -386,7 +386,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
<div className="flex items-start justify-between gap-4 py-2 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<span>
|
||||
<DocumentIcon className="h-3 w-3 text-gray-500" />
|
||||
<DocumentIcon className="h-3 w-3 text-brand-secondary" />
|
||||
</span>
|
||||
<span>
|
||||
Pending Issues -{" "}
|
||||
|
|
@ -395,7 +395,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 text-gray-900">
|
||||
<div className="flex items-center gap-3 text-brand-base">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
|
||||
<span>Ideal</span>
|
||||
|
|
@ -424,15 +424,15 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
</Disclosure>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-gray-300 px-6 py-6 ">
|
||||
<Disclosure defaultOpen>
|
||||
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-brand-base p-6">
|
||||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<div
|
||||
className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between gap-2">
|
||||
<div className="flex items-center justify-start gap-2 text-sm">
|
||||
<span className="font-medium text-gray-500">Other Information</span>
|
||||
<span className="font-medium text-brand-secondary">Other Information</span>
|
||||
</div>
|
||||
|
||||
{cycle.total_issues > 0 ? (
|
||||
|
|
@ -445,7 +445,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
|
|||
) : (
|
||||
<div className="flex items-center gap-1">
|
||||
<ExclamationIcon height={14} width={14} />
|
||||
<span className="text-xs italic text-gray-500">
|
||||
<span className="text-xs italic text-brand-secondary">
|
||||
No issues found. Please add issue.
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue