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
|
|
@ -28,7 +28,7 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index, height="20px", widt
|
|||
{user && user.avatar && user.avatar !== "" ? (
|
||||
<div
|
||||
className={`rounded-full border-2 ${
|
||||
index ? "border-white bg-white" : "border-transparent"
|
||||
index ? "border-white bg-brand-surface-2" : "border-transparent"
|
||||
}`}
|
||||
style={{
|
||||
height: height,
|
||||
|
|
@ -80,7 +80,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({
|
|||
|
||||
if ((users && users.length === 0) || (userIds && userIds.length === 0))
|
||||
return (
|
||||
<div className="h-5 w-5 rounded-full border-2 border-white bg-white">
|
||||
<div className="h-5 w-5 rounded-full border-2 border-white bg-brand-surface-2">
|
||||
<Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
|
|||
}) => (
|
||||
<button
|
||||
type={type}
|
||||
className={`${className} border border-theme font-medium duration-300 ${
|
||||
className={`${className} border border-brand-accent font-medium duration-300 ${
|
||||
size === "sm"
|
||||
? "rounded px-3 py-2 text-xs"
|
||||
: size === "md"
|
||||
|
|
@ -25,8 +25,8 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
|
|||
: ""
|
||||
} ${
|
||||
outline
|
||||
? "bg-transparent text-theme hover:bg-theme hover:text-white"
|
||||
: "text-white bg-theme hover:border-opacity-90 hover:bg-opacity-90"
|
||||
? "bg-transparent text-brand-accent hover:bg-brand-accent hover:text-white"
|
||||
: "text-white bg-brand-accent hover:border-opacity-90 hover:bg-opacity-90"
|
||||
} ${loading ? "cursor-wait" : ""}`}
|
||||
onClick={onClick}
|
||||
disabled={disabled || loading}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
|
|||
}) => (
|
||||
<button
|
||||
type={type}
|
||||
className={`${className} border font-medium duration-300 ${
|
||||
className={`${className} border border-brand-base font-medium duration-300 ${
|
||||
size === "sm"
|
||||
? "rounded px-3 py-2 text-xs"
|
||||
: size === "md"
|
||||
|
|
@ -21,12 +21,12 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
|
|||
: "rounded-lg px-4 py-2 text-base"
|
||||
} ${
|
||||
disabled
|
||||
? "cursor-not-allowed border-gray-300 bg-gray-300 hover:border-gray-300 hover:border-opacity-100 hover:bg-gray-300 hover:bg-opacity-100"
|
||||
? "cursor-not-allowed border-brand-base bg-brand-surface-1 hover:border-brand-base hover:border-opacity-100 hover:bg-brand-surface-1 hover:bg-opacity-100"
|
||||
: ""
|
||||
} ${
|
||||
outline
|
||||
? "bg-transparent hover:bg-gray-300"
|
||||
: "bg-gray-300 hover:border-opacity-90 hover:bg-opacity-90"
|
||||
? "bg-transparent hover:bg-brand-surface-2"
|
||||
: "bg-brand-surface-2 hover:border-opacity-70 hover:bg-opacity-70"
|
||||
} ${loading ? "cursor-wait" : ""}`}
|
||||
onClick={onClick}
|
||||
disabled={disabled || loading}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
|
|||
}`}
|
||||
>
|
||||
<div
|
||||
className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border bg-white p-2 text-xs shadow-lg`}
|
||||
className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs shadow-lg`}
|
||||
style={{
|
||||
left: `${position.x}px`,
|
||||
top: `${position.y}px`,
|
||||
|
|
@ -71,7 +71,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
|||
{renderAs === "a" ? (
|
||||
<Link href={href}>
|
||||
<a
|
||||
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
|
||||
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-base`}
|
||||
>
|
||||
<>
|
||||
{Icon && <Icon />}
|
||||
|
|
@ -82,7 +82,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
|||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
|
||||
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-base`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -51,14 +51,14 @@ const CustomMenu = ({
|
|||
{ellipsis || verticalEllipsis ? (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className="relative grid place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none"
|
||||
className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-1 focus:outline-none"
|
||||
>
|
||||
<EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
|
||||
</Menu.Button>
|
||||
) : (
|
||||
<Menu.Button
|
||||
type="button"
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-gray-100 ${
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-1 ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
|
|
@ -67,7 +67,7 @@ const CustomMenu = ({
|
|||
} ${
|
||||
noBorder
|
||||
? "rounded"
|
||||
: "rounded-md border shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
|
||||
: "rounded-md border border-brand-base shadow-sm focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-skinborder-brand-accent"
|
||||
} ${
|
||||
width === "sm"
|
||||
? "w-10"
|
||||
|
|
@ -97,7 +97,7 @@ const CustomMenu = ({
|
|||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md bg-white p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md bg-brand-surface-2 p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
|
||||
} ${
|
||||
height === "sm"
|
||||
|
|
@ -140,8 +140,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
|||
<Link href={href ?? ""}>
|
||||
<a
|
||||
className={`${className} ${
|
||||
active ? "bg-hover-gray" : ""
|
||||
} inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
|
||||
active ? "bg-brand-surface-1" : ""
|
||||
} inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-muted-1`}
|
||||
onClick={close}
|
||||
>
|
||||
{children}
|
||||
|
|
@ -151,8 +151,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
|
|||
<button
|
||||
type="button"
|
||||
className={`${className} ${
|
||||
active ? "bg-hover-gray" : ""
|
||||
} w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500 hover:bg-gray-100 hover:text-gray-900`}
|
||||
active ? "bg-brand-surface-1" : ""
|
||||
} w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-muted-1`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -69,10 +69,10 @@ export const CustomSearchSelect = ({
|
|||
) : (
|
||||
<Combobox.Button
|
||||
className={`flex w-full ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
|
||||
} ${
|
||||
input ? "border-gray-300 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
: textAlignment === "center"
|
||||
|
|
@ -99,12 +99,12 @@ export const CustomSearchSelect = ({
|
|||
<Combobox.Options
|
||||
className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
|
||||
position === "right" ? "right-0" : "left-0"
|
||||
} z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
|
||||
} z-10 mt-1 origin-top-right rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
|
||||
<MagnifyingGlassIcon className="text-brand-muted-1 h-3 w-3" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
className="text-brand-muted-1 w-full bg-transparent py-1 px-2 text-xs focus:outline-none"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Type to search..."
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
|
|
@ -130,9 +130,9 @@ export const CustomSearchSelect = ({
|
|||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`${active || selected ? "bg-hover-gray" : ""} ${
|
||||
`${active || selected ? "bg-brand-surface-1" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
|
||||
} text-brand-muted-1 flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5`
|
||||
}
|
||||
>
|
||||
{({ active, selected }) => (
|
||||
|
|
@ -158,10 +158,10 @@ export const CustomSearchSelect = ({
|
|||
</Combobox.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-center text-gray-500">No matching results</p>
|
||||
<p className="text-center text-brand-secondary">No matching results</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-center text-gray-500">Loading...</p>
|
||||
<p className="text-center text-brand-secondary">Loading...</p>
|
||||
)}
|
||||
</div>
|
||||
{footerOption}
|
||||
|
|
|
|||
|
|
@ -51,9 +51,9 @@ const CustomSelect = ({
|
|||
) : (
|
||||
<Listbox.Button
|
||||
className={`flex w-full ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
||||
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
input ? "border-gray-300 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
|
||||
} items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
|
||||
input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
|
||||
} ${
|
||||
textAlignment === "right"
|
||||
? "text-right"
|
||||
|
|
@ -80,7 +80,7 @@ const CustomSelect = ({
|
|||
<Listbox.Options
|
||||
className={`${optionsClassName} absolute ${
|
||||
position === "right" ? "right-0" : "left-0"
|
||||
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
|
||||
} ${input ? "max-h-48" : ""} ${
|
||||
maxHeight === "lg"
|
||||
|
|
@ -110,9 +110,9 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
|
|||
<Listbox.Option
|
||||
value={value}
|
||||
className={({ active, selected }) =>
|
||||
`${className} ${active || selected ? "bg-hover-gray" : ""} ${
|
||||
`${className} ${active || selected ? "bg-brand-surface-1" : ""} ${
|
||||
selected ? "font-medium" : ""
|
||||
} cursor-pointer select-none truncate rounded px-1 py-1.5 text-gray-500`
|
||||
} cursor-pointer select-none truncate rounded px-1 py-1.5 text-brand-secondary`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
|
|||
<>
|
||||
<Popover.Button
|
||||
className={({ open }) =>
|
||||
`flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200
|
||||
`flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
|
||||
: "hover:bg-brand-accent/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
|
|
@ -37,8 +37,8 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-gray-500" />
|
||||
<span className="text-gray-500">{label}</span>
|
||||
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary" />
|
||||
<span className="text-brand-secondary">{label}</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -36,11 +36,11 @@ export const CustomDatePicker: React.FC<Props> = ({
|
|||
}}
|
||||
className={`${
|
||||
renderAs === "input"
|
||||
? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none"
|
||||
? "block border-brand-base bg-transparent px-3 py-2 text-sm focus:outline-none"
|
||||
: renderAs === "button"
|
||||
? `px-3 py-1 text-xs shadow-sm ${
|
||||
disabled ? "" : "hover:bg-gray-100"
|
||||
} duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`
|
||||
disabled ? "" : "hover:bg-brand-surface-1"
|
||||
} duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
|
||||
: ""
|
||||
} ${error ? "border-red-500 bg-red-100" : ""} ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
||||
|
|
|
|||
|
|
@ -22,15 +22,15 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
|
|||
</div>
|
||||
) : null}
|
||||
|
||||
<h2 className="text-lg font-medium text-gray-900">{title}</h2>
|
||||
<div className="mt-1 text-sm text-gray-500">{description}</div>
|
||||
<ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-b">
|
||||
<h2 className="text-lg font-medium text-brand-base">{title}</h2>
|
||||
<div className="mt-1 text-sm text-brand-secondary">{description}</div>
|
||||
<ul role="list" className="mt-6 divide-y divide-gray-200 border-t border-brand-base border-b">
|
||||
{children}
|
||||
</ul>
|
||||
{link ? (
|
||||
<div className="mt-6 flex">
|
||||
<Link href={link.href}>
|
||||
<a className="text-sm font-medium text-theme hover:text-indigo-500">
|
||||
<a className="text-sm font-medium text-brand-accent hover:text-brand-accent">
|
||||
{link.text}
|
||||
<span aria-hidden="true"> →</span>
|
||||
</a>
|
||||
|
|
@ -57,17 +57,17 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
|
|||
} space-x-3 py-4`}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<span className={`inline-flex h-10 w-10 items-center justify-center rounded-lg bg-theme`}>
|
||||
<span className={`inline-flex h-10 w-10 items-center justify-center rounded-lg bg-brand-accent`}>
|
||||
<Icon className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium text-gray-900">{title}</div>
|
||||
{description ? <div className="text-sm text-gray-500">{description}</div> : null}
|
||||
<div className="text-sm font-medium text-brand-base">{title}</div>
|
||||
{description ? <div className="text-sm text-brand-secondary">{description}</div> : null}
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon
|
||||
className="h-5 w-5 text-gray-400 group-hover:text-gray-500"
|
||||
className="h-5 w-5 text-gray-400 group-hover:text-brand-secondary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,17 +41,17 @@ export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL,
|
|||
<Image src={imgURL} height="128" width="288" alt={type} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold">{title}</h3>
|
||||
<h3 className="text-xl font-semibold text-brand-secondary">{title}</h3>
|
||||
{shortcutKey(type) && (
|
||||
<span>
|
||||
Use shortcut{" "}
|
||||
<span className="mx-1 rounded-sm border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800">
|
||||
<span className="mx-1 rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-muted-1">
|
||||
{shortcutKey(type)}
|
||||
</span>{" "}
|
||||
to create {type} from anywhere.
|
||||
</span>
|
||||
)}
|
||||
<p className="max-w-md text-sm text-gray-500">{description}</p>
|
||||
<p className="max-w-md text-sm text-brand-secondary">{description}</p>
|
||||
|
||||
<PrimaryButton
|
||||
className="flex items-center gap-1"
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export const Input: React.FC<Props> = ({
|
|||
}) => (
|
||||
<>
|
||||
{label && (
|
||||
<label htmlFor={id} className="mb-2 text-gray-500">
|
||||
<label htmlFor={id} className="mb-2 text-brand-muted-1">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
|
|
@ -36,9 +36,9 @@ export const Input: React.FC<Props> = ({
|
|||
}}
|
||||
className={`block rounded-md bg-transparent text-sm focus:outline-none ${
|
||||
mode === "primary"
|
||||
? "rounded-md border border-gray-300"
|
||||
? "rounded-md border border-brand-base"
|
||||
: mode === "transparent"
|
||||
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-indigo-500"
|
||||
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-brand-accent"
|
||||
: mode === "trueTransparent"
|
||||
? "rounded border-none bg-transparent ring-0"
|
||||
: ""
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
|
|||
{labels.slice(0, length).map((color, index) => (
|
||||
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
|
||||
<span
|
||||
className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
|
||||
className={`h-4 w-4 flex-shrink-0 rounded-full border border-brand-base
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: color && color !== "" ? color : "#000000",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ type ItemProps = {
|
|||
|
||||
const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto", light }) => (
|
||||
<div
|
||||
className={`rounded-md ${light ? "bg-gray-200" : "bg-gray-300"}`}
|
||||
className={`rounded-md ${light ? "bg-brand-surface-2" : "bg-gray-300"}`}
|
||||
style={{ height: height, width: width }}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@ export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) =
|
|||
|
||||
return (
|
||||
<>
|
||||
{label && <label className="mb-2 text-gray-500">{label}</label>}
|
||||
<div className="rounded-md border p-2">
|
||||
{label && <label className="mb-2 text-brand-secondary">{label}</label>}
|
||||
<div className="rounded-md border border-brand-base p-2">
|
||||
{watch(name)?.map((tag: any, index: number) => (
|
||||
<button type="button" className="m-1.5 rounded-full bg-slate-300 p-1.5" key={index}>
|
||||
{tag.email} <span onClick={() => removeTag(index)}>×</span>
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
|||
<div>
|
||||
<Menu.Button
|
||||
onClick={() => setOpenChildFor(null)}
|
||||
className={`group flex items-center justify-between gap-2 rounded-md border px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
open ? "bg-gray-100 text-gray-900" : "text-gray-500"
|
||||
className={`group flex items-center justify-between gap-2 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
||||
open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
|
|
@ -60,7 +60,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
|||
>
|
||||
<Menu.Items
|
||||
static
|
||||
className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
{options.map((option) => (
|
||||
<div className="relative p-1" key={option.id}>
|
||||
|
|
@ -83,7 +83,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
|||
<>
|
||||
<div
|
||||
className={`${
|
||||
active || option.selected ? "bg-gray-100" : "text-gray-900"
|
||||
active || option.selected ? "bg-brand-surface-1" : "text-brand-base"
|
||||
} flex items-center gap-1 rounded px-1 py-1.5 ${
|
||||
direction === "right" ? "justify-between" : ""
|
||||
}`}
|
||||
|
|
@ -101,7 +101,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
|||
</Menu.Item>
|
||||
{option.children && option.id === openChildFor && (
|
||||
<div
|
||||
className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-2 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
||||
direction === "left"
|
||||
? "right-full -translate-x-1"
|
||||
: "left-full translate-x-1"
|
||||
|
|
@ -126,8 +126,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
|
|||
onSelect(child.value);
|
||||
}}
|
||||
className={`${
|
||||
child.selected ? "bg-gray-100" : "text-gray-900"
|
||||
} flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize hover:bg-gray-100`}
|
||||
child.selected ? "bg-brand-surface-1" : "text-brand-base"
|
||||
} flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize hover:bg-brand-surface-1`}
|
||||
>
|
||||
{child.label}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
|
|||
<div className="relative mt-1">
|
||||
<Listbox.Button
|
||||
onClick={() => setOpenChildFor(null)}
|
||||
className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
|
||||
className="relative w-full cursor-default rounded-lg bg-brand-surface-2 py-2 pl-3 pr-10 text-left shadow-md sm:text-sm"
|
||||
>
|
||||
<span className="block truncate">{selected?.label ?? label}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
|
|
@ -64,13 +64,13 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
|
|||
>
|
||||
<Listbox.Options
|
||||
static
|
||||
className="absolute mt-1 max-h-60 w-full rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
className="absolute mt-1 max-h-60 w-full rounded-md bg-brand-surface-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
{options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.id}
|
||||
className={
|
||||
"relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-gray-100 hover:text-gray-900"
|
||||
"relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-brand-surface-1 hover:text-brand-base"
|
||||
}
|
||||
onClick={(e: any) => {
|
||||
if (option.children !== null) {
|
||||
|
|
@ -88,7 +88,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
|
|||
<>
|
||||
{openChildFor?.id === option.id && (
|
||||
<div
|
||||
className={`absolute h-auto max-h-72 w-72 rounded-lg border bg-white ${
|
||||
className={`absolute h-auto max-h-72 w-72 rounded-lg border border-brand-base bg-brand-surface-2 ${
|
||||
direction === "right"
|
||||
? "left-full translate-x-2 rounded-tl-none shadow-md"
|
||||
: "right-full -translate-x-2 rounded-tr-none shadow-md"
|
||||
|
|
@ -98,7 +98,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
|
|||
<Listbox.Option
|
||||
key={child.id}
|
||||
className={
|
||||
"relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-gray-100 hover:text-gray-900"
|
||||
"relative cursor-default select-none py-2 pl-10 pr-4 hover:bg-brand-surface-1 hover:text-brand-base"
|
||||
}
|
||||
as="div"
|
||||
value={child}
|
||||
|
|
@ -123,7 +123,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
|
|||
))}
|
||||
|
||||
<div
|
||||
className={`absolute h-0 w-0 border-t-8 border-gray-300 ${
|
||||
className={`absolute h-0 w-0 border-t-8 border-brand-base ${
|
||||
direction === "right"
|
||||
? "top-0 left-0 -translate-x-2 border-r-8 border-b-8 border-b-transparent border-t-transparent border-l-transparent"
|
||||
: "top-0 right-0 translate-x-2 border-l-8 border-b-8 border-b-transparent border-t-transparent border-r-transparent"
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@ export const OutlineButton = React.forwardRef<HTMLButtonElement, Props>(
|
|||
theme === "primary"
|
||||
? `${
|
||||
disabled ? "opacity-70" : ""
|
||||
} border border-theme text-white shadow-sm hover:bg-theme focus:outline-none`
|
||||
} border border-brand-accent text-white shadow-sm hover:bg-brand-accent focus:outline-none`
|
||||
: theme === "secondary"
|
||||
? "border bg-transparent hover:bg-gray-100"
|
||||
? "border bg-transparent hover:bg-brand-surface-1"
|
||||
: theme === "success"
|
||||
? `${
|
||||
disabled ? "opacity-70" : ""
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export const TextArea: React.FC<Props> = ({
|
|||
return (
|
||||
<>
|
||||
{label && (
|
||||
<label htmlFor={id} className="mb-2 text-gray-500">
|
||||
<label htmlFor={id} className="mb-2 text-brand-secondary">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
|
|
@ -67,7 +67,7 @@ export const TextArea: React.FC<Props> = ({
|
|||
}}
|
||||
className={`no-scrollbar w-full bg-transparent px-3 py-2 outline-none ${
|
||||
mode === "primary"
|
||||
? "rounded-md border border-gray-300"
|
||||
? "rounded-md border border-brand-base"
|
||||
: mode === "transparent"
|
||||
? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
|
||||
: ""
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const Tooltip: React.FC<Props> = ({
|
|||
content={
|
||||
<div
|
||||
className={`${className} flex max-w-[600px] flex-col items-start justify-center gap-1 rounded-md p-2 text-left text-xs shadow-md ${
|
||||
theme === "light" ? "bg-white text-gray-700" : "bg-black text-white"
|
||||
theme === "light" ? "bg-brand-surface-2 text-brand-muted-1" : "bg-black text-white"
|
||||
}`}
|
||||
>
|
||||
{tooltipHeading && <h5 className="font-medium">{tooltipHeading}</h5>}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue