binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: themes (#902)

Browse source 
* 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 2023-04-20 13:41:24 +05:30 • committed by GitHub
parent 9f04933957
commit 3c2f5d12ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
191 changed files with 1550 additions and 880 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/app/components/workspace/activity-graph.tsx
View file

@ -117,8 +117,8 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
date === "" ? "pointer-events-none opacity-0" : ""
} h-4 w-4 rounded ${
isActive
? `bg-blue-500 ${activitiesIntensity(isActive.activity_count)}`
: "bg-gray-100"
? `bg-brand-accent ${activitiesIntensity(isActive.activity_count)}`
: "bg-brand-base"
}`}
/>
</Tooltip>
@ -127,11 +127,11 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
</div>
<div className="mt-8 flex items-center gap-2 text-xs">
<span>Less</span>
<span className="h-4 w-4 rounded bg-gray-100" />
<span className="h-4 w-4 rounded bg-blue-500 opacity-20" />
<span className="h-4 w-4 rounded bg-blue-500 opacity-40" />
<span className="h-4 w-4 rounded bg-blue-500 opacity-80" />
<span className="h-4 w-4 rounded bg-blue-500" />
<span className="h-4 w-4 rounded bg-brand-base" />
<span className="h-4 w-4 rounded bg-brand-accent opacity-20" />
<span className="h-4 w-4 rounded bg-brand-accent opacity-40" />
<span className="h-4 w-4 rounded bg-brand-accent opacity-80" />
<span className="h-4 w-4 rounded bg-brand-accent" />
<span>More</span>
</div>
</div>

6
apps/app/components/workspace/completed-issues-graph.tsx
View file

@ -37,8 +37,8 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
}
const CustomTooltip = ({ payload, label }: any) => (
<div className="space-y-1 rounded bg-white p-3 text-sm shadow-md">
<h4 className="text-gray-500">{label}</h4>
<div className="space-y-1 rounded bg-brand-surface-1 p-3 text-sm shadow-md">
<h4 className="text-brand-secondary">{label}</h4>
<h5>Completed issues: {payload[0]?.value}</h5>
</div>
);
@ -55,7 +55,7 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
))}
</CustomMenu>
</div>
<div className="rounded-[10px] border bg-white p-8 pl-4">
<div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-8 pl-4">
<ResponsiveContainer width="100%" height={250}>
<LineChart data={data}>
<CartesianGrid stroke="#e2e2e280" />

10
apps/app/components/workspace/confirm-workspace-member-remove.tsx
View file

@ -39,7 +39,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -53,8 +53,8 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon
@ -63,11 +63,11 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
/>
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
Remove {data?.email}?
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
Are you sure you want to remove member- {" "}
<span className="font-bold">{data?.email}</span>
? They will no longer have access to this workspace. This action

8
apps/app/components/workspace/create-workspace-form.tsx
View file

@ -100,7 +100,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
onSubmit={handleSubmit(handleCreateWorkspace)}
>
<div className="flex w-full max-w-xl flex-col">
<div className="flex flex-col rounded-[10px] bg-white">
<div className="flex flex-col rounded-[10px] bg-brand-surface-2">
<div className="flex flex-col justify-between gap-3 px-4 py-7">
<div className="flex flex-col items-start justify-center gap-2.5">
<span>Workspace name</span>
@ -123,8 +123,8 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
</div>
<div className="flex flex-col items-start justify-center gap-2.5">
<span>Workspace URL</span>
<div className="flex w-full items-center rounded-md border border-gray-300 px-3">
<span className="text-sm whitespace-nowrap text-slate-600">
<div className="flex w-full items-center rounded-md border border-brand-base px-3">
<span className="whitespace-nowrap text-sm text-slate-600">
{typeof window !== "undefined" && window.location.origin}/
</span>
<Input
@ -152,7 +152,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
</div>
</div>
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-gray-300 px-4 py-7">
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-4 py-7">
<span>How large is your company</span>
<div className="w-full">
<Controller

6
apps/app/components/workspace/delete-workspace-modal.tsx
View file

@ -88,7 +88,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -102,7 +102,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-6 p-6">
<div className="flex w-full items-center justify-start gap-6">
<span className="place-items-center rounded-full bg-red-100 p-4">
@ -117,7 +117,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
</div>
<span>
<p className="text-sm leading-7 text-gray-500">
<p className="text-sm leading-7 text-brand-secondary">
Are you sure you want to delete workspace{" "}
<span className="break-all font-semibold">{data?.name}</span>? All of the data
related to the workspace will be permanently removed. This action cannot be

28
apps/app/components/workspace/help-section.tsx
View file

@ -58,13 +58,13 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
return (
<div
className={`flex w-full items-center justify-between self-baseline border-t bg-white px-6 py-2 ${
className={`flex w-full items-center justify-between self-baseline border-t border-brand-base bg-brand-sidebar px-6 py-2 ${
sidebarCollapse ? "flex-col" : ""
}`}
>
<button
type="button"
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
sidebarCollapse ? "w-full justify-center" : ""
}`}
onClick={() => {
@ -75,36 +75,36 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
}}
title="Shortcuts"
>
<RocketLaunchIcon className="h-4 w-4 text-gray-500" />
<RocketLaunchIcon className="h-4 w-4 text-brand-secondary" />
{!sidebarCollapse && <span>Shortcuts</span>}
</button>
<button
type="button"
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 ${
className={`flex items-center gap-x-1 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base ${
sidebarCollapse ? "w-full justify-center" : ""
}`}
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
title="Help"
>
<QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
<QuestionMarkCircleIcon className="h-4 w-4 text-brand-secondary" />
{!sidebarCollapse && <span>Help</span>}
</button>
<button
type="button"
className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:hidden"
className="flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:hidden"
onClick={() => setSidebarActive(false)}
>
<ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
<ArrowLongLeftIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary group-hover:text-brand-base" />
</button>
<button
type="button"
className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-gray-500 outline-none hover:bg-gray-100 hover:text-gray-900 md:flex ${
className={`hidden items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-brand-secondary outline-none hover:bg-brand-surface-1 hover:text-brand-base md:flex ${
sidebarCollapse ? "w-full justify-center" : ""
}`}
onClick={() => toggleCollapsed()}
>
<ArrowLongLeftIcon
className={`h-4 w-4 flex-shrink-0 text-gray-500 duration-300 group-hover:text-gray-900 ${
className={`h-4 w-4 flex-shrink-0 text-brand-secondary duration-300 group-hover:text-brand-base ${
sidebarCollapse ? "rotate-180" : ""
}`}
/>
@ -121,7 +121,7 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
leaveTo="transform opacity-0 scale-95"
>
<div
className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-white p-1 shadow-md`}
className={`absolute bottom-2 ${helpOptionMode} space-y-2 rounded-sm bg-brand-surface-2 p-1 shadow-md`}
ref={helpOptionsRef}
>
{helpOptions.map(({ name, Icon, href, onClick }) => {
@ -130,9 +130,9 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
<Link href={href} key={name}>
<a
target="_blank"
className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-gray-100"
className="flex items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-brand-surface-1"
>
<Icon className="h-4 w-4 text-gray-500" />
<Icon className="h-4 w-4 text-brand-secondary" />
<span className="text-sm">{name}</span>
</a>
</Link>
@ -143,9 +143,9 @@ export const WorkspaceHelpSection: FC<WorkspaceHelpSectionProps> = (props) => {
key={name}
type="button"
onClick={onClick ? onClick : undefined}
className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-gray-100"
className="flex w-full items-center gap-x-2 whitespace-nowrap rounded-md px-2 py-1 text-xs hover:bg-brand-surface-1"
>
<Icon className="h-4 w-4 text-gray-500" />
<Icon className="h-4 w-4 text-brand-secondary" />
<span className="text-sm">{name}</span>
</button>
);

10
apps/app/components/workspace/issues-list.tsx
View file

@ -36,10 +36,10 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
<div>
<h3 className="mb-2 font-semibold capitalize">{type} Issues</h3>
{issues ? (
<div className="rounded-[10px] border bg-white p-4 text-sm h-[calc(100%-2.25rem)]">
<div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-4 text-sm h-[calc(100%-2.25rem)]">
<div
className={`mb-2 grid grid-cols-4 gap-2 rounded-lg px-3 py-2 font-medium ${
type === "overdue" ? "bg-red-100" : "bg-gray-100"
type === "overdue" ? "bg-red-600 bg-opacity-20" : "bg-brand-surface-1"
}`}
>
<h4 className="capitalize">{type}</h4>
@ -83,12 +83,12 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
})
) : (
<div className="grid h-full place-items-center">
<div className="flex flex-col items-center gap-4">
<div className="flex flex-col items-center gap-4 my-5">
<LayerDiagonalIcon height={60} width={60} />
<span>
No issues found. Use{" "}
<pre className="inline rounded bg-gray-200 px-2 py-1">C</pre> shortcut to create
a new issue
<pre className="inline rounded bg-brand-surface-1 px-2 py-1">C</pre> shortcut to
create a new issue
</span>
</div>
</div>

2
apps/app/components/workspace/issues-pie-chart.tsx
View file

@ -79,7 +79,7 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
return (
<div>
<h3 className="mb-2 font-semibold">Issues by States</h3>
<div className="rounded-[10px] border bg-white p-4">
<div className="rounded-[10px] border border-brand-base bg-brand-sidebar p-4">
<ResponsiveContainer width="100%" height={320}>
<PieChart>
<Pie

8
apps/app/components/workspace/issues-stats.tsx
View file

@ -11,8 +11,8 @@ type Props = {
};
export const IssuesStats: React.FC<Props> = ({ data }) => (
<div className="grid grid-cols-1 rounded-[10px] border bg-white lg:grid-cols-3">
<div className="grid grid-cols-1 divide-y border-b lg:border-r lg:border-b-0">
<div className="grid grid-cols-1 rounded-[10px] border border-brand-base bg-brand-sidebar lg:grid-cols-3">
<div className="grid grid-cols-1 divide-y divide-brand-base border-b border-brand-base lg:border-r lg:border-b-0">
<div className="flex">
<div className="basis-1/2 p-4">
<h4 className="text-sm">Issues assigned to you</h4>
@ -26,7 +26,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
)}
</h5>
</div>
<div className="basis-1/2 border-l p-4">
<div className="basis-1/2 border-l border-brand-base p-4">
<h4 className="text-sm">Pending issues</h4>
<h5 className="mt-2 text-2xl font-semibold">
{data ? (
@ -52,7 +52,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => (
)}
</h5>
</div>
<div className="basis-1/2 border-l p-4">
<div className="basis-1/2 border-l border-brand-base p-4">
<h4 className="text-sm">Issues due by this week</h4>
<h5 className="mt-2 text-2xl font-semibold">
{data ? (

8
apps/app/components/workspace/send-workspace-invitation-modal.tsx
View file

@ -83,7 +83,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
@ -97,14 +97,14 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-5">
<div>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
Members
</Dialog.Title>
<p className="text-sm text-gray-500">
<p className="text-sm text-brand-secondary">
Invite members to work on your workspace.
</p>
</div>

24
apps/app/components/workspace/sidebar-dropdown.tsx
View file

@ -84,13 +84,13 @@ export const WorkspaceSidebarDropdown = () => {
<div className="relative">
<Menu as="div" className="col-span-4 inline-block w-full p-3 text-left">
<div className="flex items-center justify-between gap-2.5">
<Menu.Button className="flex w-full items-center rounded-md py-2 text-sm font-semibold text-gray-700 focus:outline-none">
<Menu.Button className="flex w-full items-center rounded-md py-2 text-sm font-semibold text-brand-muted-1 focus:outline-none">
<div
className={`flex w-full items-center gap-x-2 rounded-md bg-gray-100 px-2 py-1.5 ${
className={`flex w-full items-center gap-x-2 rounded-md bg-brand-base px-2 py-1.5 ${
sidebarCollapse ? "justify-center" : ""
}`}
>
<div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white">
<div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 dark:bg-brand-surface-2 uppercase text-white dark:text-gray-800">
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
<Image
src={activeWorkspace.logo}
@ -134,11 +134,11 @@ export const WorkspaceSidebarDropdown = () => {
>
<Menu.Items
className="fixed left-2 z-20 mt-1 flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
bg-brand-surface-2 shadow-lg border border-brand-base focus:outline-none"
>
<div className="flex flex-col items-start justify-start gap-3 p-3">
<div className="text-sm text-gray-500">{user?.email}</div>
<span className="text-sm font-semibold text-gray-500">Workspace</span>
<div className="text-sm text-brand-secondary">{user?.email}</div>
<span className="text-sm font-semibold text-brand-secondary">Workspace</span>
{workspaces ? (
<div className="flex h-full w-full flex-col items-start justify-start gap-3.5">
{workspaces.length > 0 ? (
@ -148,7 +148,7 @@ export const WorkspaceSidebarDropdown = () => {
<button
type="button"
onClick={() => handleWorkspaceNavigation(workspace)}
className="flex w-full items-center justify-between gap-1 rounded-md text-sm text-gray-900"
className="flex w-full items-center justify-between gap-1 rounded-md text-sm text-brand-base"
>
<div className="flex items-center justify-start gap-2.5">
<span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white">
@ -169,7 +169,7 @@ export const WorkspaceSidebarDropdown = () => {
</div>
<span className="p-1">
<CheckIcon
className={`h-3 w-3.5 text-gray-600 ${
className={`h-3 w-3.5 text-brand-base ${
active || workspace.id === activeWorkspace?.id
? "opacity-100"
: "opacity-0"
@ -204,12 +204,12 @@ export const WorkspaceSidebarDropdown = () => {
</div>
)}
</div>
<div className="flex w-full flex-col items-start justify-start gap-2 border-t border-t-gray-200 px-3 py-2 text-sm">
<div className="flex w-full flex-col items-start justify-start gap-2 border-t border-t-brand-base px-3 py-2 text-sm">
{userLinks(workspaceSlug as string).map((link, index) => (
<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-gray-100"
className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-gray-600 hover:bg-brand-surface-1"
>
<Link href={link.href}>
<a className="w-full">{link.name}</a>
@ -217,11 +217,11 @@ export const WorkspaceSidebarDropdown = () => {
</Menu.Item>
))}
</div>
<div className="w-full border-t border-t-gray-200 px-3 py-2">
<div className="w-full border-t border-t-brand-base px-3 py-2">
<Menu.Item
as="button"
type="button"
className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-gray-100"
className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-brand-surface-1"
onClick={handleSignOut}
>
Sign out

8
apps/app/components/workspace/sidebar-menu.tsx
View file

@ -43,8 +43,8 @@ export const WorkspaceSidebarMenu: React.FC = () => {
<a
className={`${
link.href === router.asPath
? "bg-indigo-50 text-gray-900"
: "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
? "bg-brand-base text-brand-base"
: "text-brand-secondary hover:bg-brand-base hover:text-brand-base focus:bg-brand-base"
} group flex w-full items-center gap-3 rounded-md p-2 text-sm font-medium outline-none ${
sidebarCollapse ? "justify-center" : ""
}`}
@ -52,8 +52,8 @@ export const WorkspaceSidebarMenu: React.FC = () => {
<span className="grid h-5 w-5 flex-shrink-0 place-items-center">
<link.icon
className={`${
link.href === router.asPath ? "text-gray-900" : "text-gray-600"
} group-hover:text-gray-900`}
link.href === router.asPath ? "text-brand-base" : "text-brand-secondary"
} group-hover:text-brand-base`}
aria-hidden="true"
height="20"
width="20"

6
apps/app/components/workspace/single-invitation.tsx
View file

@ -45,8 +45,8 @@ const SingleInvitation: React.FC<Props> = ({
</span>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-gray-900">{invitation.workspace.name}</div>
<p className="text-sm text-gray-500">
<div className="text-sm font-medium text-brand-base">{invitation.workspace.name}</div>
<p className="text-sm text-brand-secondary">
Invited by {invitation.workspace.owner.first_name}
</p>
</div>
@ -65,7 +65,7 @@ const SingleInvitation: React.FC<Props> = ({
setIsChecked(e.target.checked);
}}
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-indigo-500"
/>
</div>
</label>