3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-05 04:02:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

Use color variable for theme

Browse source
This commit is contained in:
Luke Vella 2022-06-01 18:52:25 +01:00
parent f666702527
commit 32f7bb60fa
20 changed files with 64 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/cookie-consent.tsx
View file

@ -39,7 +39,7 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => {
</div>
<div className="flex items-center space-x-6">
<Link href="/privacy-policy">
<a className="text-slate-400 hover:text-indigo-500">
<a className="hover:text-primary-500 text-slate-400">
Privacy Policy
</a>
</Link>
@ -48,7 +48,7 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => {
Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
setVisible(false);
}}
className="grow rounded-md bg-indigo-500 px-5 py-1 font-semibold text-white shadow-sm transition-all hover:bg-indigo-500/90 focus:ring-2 focus:ring-indigo-200 active:bg-indigo-600/90"
className="bg-primary-500 hover:bg-primary-500/90 focus:ring-primary-200 active:bg-primary-600/90 grow rounded-md px-5 py-1 font-semibold text-white shadow-sm transition-all focus:ring-2"
>
OK
</button>

4
src/components/dropdown.tsx
View file

@ -120,7 +120,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
className={clsx(
"group flex w-full items-center rounded py-2 pl-2 pr-4",
{
"bg-indigo-500 text-white": active,
"bg-primary-500 text-white": active,
"text-gray-700": !active,
"opacity-50": disabled,
},
@ -130,7 +130,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
<Icon
className={clsx("mr-2 h-5 w-5", {
"text-white": active,
"text-indigo-500": !active,
"text-primary-500": !active,
})}
/>
)}

2
src/components/error-page.tsx
View file

@ -28,7 +28,7 @@ const ErrorPage: React.VoidFunctionComponent<ComponentProps> = ({
<div className="flex items-start">
<div className="text-center">
<Icon className="mb-4 inline-block w-24 text-slate-400" />
<div className="mb-2 text-3xl font-bold text-indigo-500 ">
<div className="text-primary-500 mb-2 text-3xl font-bold ">
{title}
</div>
<p>{description}</p>

2
src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
View file

@ -161,7 +161,7 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
{
"bg-slate-50 text-slate-400": day.outOfMonth,
"font-bold": day.today,
"text-indigo-500": day.today && !day.selected,
"text-primary-500": day.today && !day.selected,
"border-r": (i + 1) % 7 !== 0,
"border-b": i < datepicker.days.length - 7,
"font-normal text-white after:absolute after:-z-0 after:h-8 after:w-8 after:animate-popIn after:rounded-full after:bg-green-500 after:content-['']":

2
src/components/full-page-loader.tsx
View file

@ -16,7 +16,7 @@ const FullPageLoader: React.VoidFunctionComponent<FullPageLoaderProps> = ({
<div
className={clsx(" flex h-full items-center justify-center", className)}
>
<div className="flex items-center rounded-lg bg-indigo-500 px-4 py-3 text-sm text-white shadow-sm">
<div className="bg-primary-500 flex items-center rounded-lg px-4 py-3 text-sm text-white shadow-sm">
<Spinner className="mr-3 h-5 animate-spin" />
{children}
</div>

10
src/components/home/hero.tsx
View file

@ -17,7 +17,7 @@ const Hero: React.VoidFunctionComponent = () => {
<h1 className="text-4xl font-bold sm:text-5xl">
Schedule
<br />
<span className="text-indigo-500">group&nbsp;meetings</span>
<span className="text-primary-500">group&nbsp;meetings</span>
<br />
with ease
</h1>
@ -26,13 +26,13 @@ const Hero: React.VoidFunctionComponent = () => {
</div>
<div className="space-x-3">
<Link href="/new">
<a className="rounded-lg bg-indigo-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-indigo-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-indigo-600/90">
<a className="bg-primary-500 hover:bg-primary-500/90 focus:ring-primary-200 active:bg-primary-600/90 rounded-lg px-5 py-3 font-semibold text-white shadow-sm transition-all hover:text-white hover:no-underline hover:shadow-md focus:ring-2">
{t("getStarted")}
</a>
</Link>
<Link href="/demo">
<a
className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-slate-600/90"
className="focus:ring-primary-200 rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 active:bg-slate-600/90"
rel="nofollow"
>
{t("viewDemo")}
@ -44,13 +44,13 @@ const Hero: React.VoidFunctionComponent = () => {
<UserAvatarProvider seed="mock" names={names}>
<div className="relative inline-block">
<motion.div
className="absolute z-20 h-full rounded-2xl border-4 border-indigo-500 bg-indigo-200/10 shadow-md"
className="border-primary-500 bg-primary-200/10 absolute z-20 h-full rounded-2xl border-4 shadow-md"
initial={{ opacity: 0, width: 100, scale: 1.2, translateX: 384 }}
animate={{ opacity: 1, scale: 1.1 }}
transition={{ type: "spring", delay: 1 }}
/>
<motion.div
className="absolute z-20 rounded-full bg-indigo-500 py-1 px-3 text-sm text-slate-100"
className="bg-primary-500 absolute z-20 rounded-full py-1 px-3 text-sm text-slate-100"
initial={{
opacity: 0,
right: 190,

2
src/components/home/poll-demo.tsx
View file

@ -20,7 +20,7 @@ const participants = [
},
{
name: "Johnny",
color: "bg-indigo-400",
color: "bg-primary-400",
votes: [2, 3],
},
{

4
src/components/home/stats.tsx
View file

@ -10,13 +10,13 @@ const Stats: React.VoidFunctionComponent = () => {
<p className="subheading text-center">100,000+ polls created</p>
<div className="flex justify-center space-x-3">
<Link href="/new">
<a className="rounded-lg bg-indigo-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-indigo-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-indigo-600/90">
<a className="bg-primary-500 hover:bg-primary-500/90 focus:ring-primary-200 active:bg-primary-600/90 rounded-lg px-5 py-3 font-semibold text-white shadow-sm transition-all hover:text-white hover:no-underline hover:shadow-md focus:ring-2">
{t("getStarted")}
</a>
</Link>
<Link href="/demo">
<a
className="rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 focus:ring-indigo-200 active:bg-slate-600/90"
className="focus:ring-primary-200 rounded-lg bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md focus:ring-2 active:bg-slate-600/90"
rel="nofollow"
>
{t("viewDemo")}

2
src/components/login-form.tsx
View file

@ -65,7 +65,7 @@ const LoginForm: React.VoidFunctionComponent = () => {
) : (
<div>
<div className="text-slate-500">A magic link has been sent to:</div>
<div className="font-mono text-indigo-500">
<div className="text-primary-500 font-mono">
{getValues("email")}
</div>
<div className="mt-2 text-slate-500">Please check you inbox.</div>

2
src/components/maintenance.tsx
View file

@ -12,7 +12,7 @@ const Maintenance: NextPage = () => {
</Head>
<div className="w-96 rounded-lg border bg-white p-8 text-center shadow-sm">
<div className="mb-4">
<Clock className="inline-block h-20 text-indigo-500" />
<Clock className="text-primary-500 inline-block h-20" />
</div>
<div className="">
The site is currently down for some maintenance and will be back

12
src/components/page-layout.tsx
View file

@ -28,7 +28,7 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
<Link href="/">
<a
className={clsx(
"text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2",
"hover:text-primary-500 text-gray-400 transition-colors hover:no-underline hover:underline-offset-2",
{
"pointer-events-none font-bold text-gray-600":
pathname === "/home",
@ -41,7 +41,7 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
<Link href="https://blog.rallly.co">
<a
className={clsx(
"text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2",
"hover:text-primary-500 text-gray-400 transition-colors hover:no-underline hover:underline-offset-2",
)}
>
Blog
@ -49,12 +49,12 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
</Link>
<a
href="https://support.rallly.co"
className="text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2"
className="hover:text-primary-500 text-gray-400 transition-colors hover:no-underline hover:underline-offset-2"
>
Support
</a>
<Link href="https://github.com/lukevella/rallly">
<a className="text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2">
<a className="hover:text-primary-500 text-gray-400 transition-colors hover:no-underline hover:underline-offset-2">
<Github className="w-6" />
</a>
</Link>
@ -76,7 +76,7 @@ const PageLayout: React.VoidFunctionComponent<PageLayoutProps> = ({
<div className="relative inline-block">
<Link href="/">
<a>
<Logo className="w-40 text-indigo-500" alt="Rallly" />
<Logo className="text-primary-500 w-40" alt="Rallly" />
</a>
</Link>
<span className="absolute -bottom-6 right-0 text-sm text-slate-400 transition-colors">
@ -89,7 +89,7 @@ const PageLayout: React.VoidFunctionComponent<PageLayoutProps> = ({
<Popover
placement="left-start"
trigger={
<button className="text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2">
<button className="hover:text-primary-500 text-gray-400 transition-colors hover:no-underline hover:underline-offset-2">
<DotsVertical className="w-5" />
</button>
}

4
src/components/poll/notifications-toggle.tsx
View file

@ -25,7 +25,7 @@ const NotificationsToggle: React.VoidFunctionComponent = () => {
poll.verified ? (
poll.notifications ? (
<div>
<div className="font-medium text-indigo-300">
<div className="text-primary-300 font-medium">
Notifications are on
</div>
<div className="max-w-sm">
@ -37,7 +37,7 @@ const NotificationsToggle: React.VoidFunctionComponent = () => {
}}
components={{
b: (
<span className="whitespace-nowrap font-mono font-medium text-indigo-300 " />
<span className="text-primary-300 whitespace-nowrap font-mono font-medium " />
),
}}
/>

4
src/components/poll/poll-subheader.tsx
View file

@ -28,7 +28,7 @@ const PollSubheader: React.VoidFunctionComponent = () => {
name: poll.authorName,
}}
components={{
b: <span className="font-medium text-indigo-500" />,
b: <span className="text-primary-500 font-medium" />,
}}
/>
&nbsp;
@ -52,7 +52,7 @@ const PollSubheader: React.VoidFunctionComponent = () => {
values={{ email: poll.user.email }}
components={{
b: (
<span className="whitespace-nowrap font-mono font-medium text-indigo-500" />
<span className="text-primary-500 whitespace-nowrap font-mono font-medium" />
),
}}
/>

4
src/components/poll/user-avatar.tsx
View file

@ -20,13 +20,13 @@ const UserAvatarContext =
const colors = [
"bg-fuchsia-300",
"bg-purple-400",
"bg-indigo-400",
"bg-primary-400",
"bg-blue-400",
"bg-sky-400",
"bg-cyan-400",
"bg-sky-400",
"bg-blue-400",
"bg-indigo-400",
"bg-primary-400",
"bg-purple-400",
"bg-fuchsia-400",
"bg-pink-400",

2
src/components/poll/vote-selector.tsx
View file

@ -31,7 +31,7 @@ export const VoteSelector = React.forwardRef<
onFocus={onFocus}
onBlur={onBlur}
onKeyDown={onKeyDown}
className="relative inline-flex h-9 w-9 items-center justify-center rounded-lg border bg-white shadow-sm transition focus-visible:border-0 focus-visible:ring-2 focus-visible:ring-indigo-500 active:scale-95"
className="focus-visible:ring-primary-500 relative inline-flex h-9 w-9 items-center justify-center rounded-lg border bg-white shadow-sm transition focus-visible:border-0 focus-visible:ring-2 active:scale-95"
onClick={() => {
onChange?.(value ? getNext(value) : orderedVoteTypes[0]);
}}

8
src/components/profile.tsx
View file

@ -35,8 +35,8 @@ export const Profile: React.VoidFunctionComponent = () => {
return (
<div className="mx-auto max-w-3xl py-4 lg:mx-0">
<div className="mb-4 flex items-center px-4">
<div className="mr-4 inline-flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-50">
<User className="h-7 text-indigo-500" />
<div className="bg-primary-50 mr-4 inline-flex h-14 w-14 items-center justify-center rounded-lg">
<User className="text-primary-500 h-7" />
</div>
<div>
<div
@ -71,9 +71,9 @@ export const Profile: React.VoidFunctionComponent = () => {
<div className="sm:table-cell sm:p-4">
<div>
<div className="flex">
<Calendar className="mr-2 mt-[1px] h-5 text-indigo-500" />
<Calendar className="text-primary-500 mr-2 mt-[1px] h-5" />
<Link href={`/admin/${poll.links[0].urlId}`}>
<a className="text-slate-700 hover:text-indigo-500 hover:no-underline">
<a className="hover:text-primary-500 text-slate-700 hover:no-underline">
<div>{poll.title}</div>
</a>
</Link>

34
src/components/standard-layout.tsx
View file

@ -30,7 +30,7 @@ const HomeLink = () => {
return (
<Link href="/">
<a>
<Logo className="inline-block w-28 text-indigo-500 transition-colors active:text-indigo-600 lg:w-32" />
<Logo className="text-primary-500 active:text-primary-600 inline-block w-28 transition-colors lg:w-32" />
</a>
</Link>
);
@ -72,7 +72,7 @@ const MobileNavigation: React.VoidFunctionComponent<{
className="group inline-flex w-full items-center space-x-2 rounded-lg px-2 py-1 text-left transition-colors hover:bg-slate-500/10 active:bg-slate-500/20"
>
<div className="relative shrink-0">
<UserCircle className="w-5 opacity-75 group-hover:text-indigo-500 group-hover:opacity-100" />
<UserCircle className="group-hover:text-primary-500 w-5 opacity-75 group-hover:opacity-100" />
</div>
<div className="hidden max-w-[120px] truncate font-medium xs:block">
{user.shortName}
@ -89,7 +89,7 @@ const MobileNavigation: React.VoidFunctionComponent<{
type="button"
className="group flex items-center whitespace-nowrap rounded-md px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
>
<Adjustments className="h-5 opacity-75 group-hover:text-indigo-500" />
<Adjustments className="group-hover:text-primary-500 h-5 opacity-75" />
<span className="ml-2 hidden sm:block">Preferences</span>
</button>
}
@ -103,7 +103,7 @@ const MobileNavigation: React.VoidFunctionComponent<{
type="button"
className="group flex items-center rounded-md px-2 py-1 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
>
<Menu className="w-5 group-hover:text-indigo-500" />
<Menu className="group-hover:text-primary-500 w-5" />
<span className="ml-2 hidden sm:block">Menu</span>
</button>
}
@ -160,7 +160,7 @@ const UserDropdown: React.VoidFunctionComponent<
content: (
<div className="w-96 max-w-full p-6 pt-28">
<div className="absolute left-0 -top-8 w-full text-center">
<div className="inline-flex h-20 w-20 items-center justify-center rounded-full border-8 border-white bg-gradient-to-b from-purple-400 to-indigo-500">
<div className="to-primary-500 inline-flex h-20 w-20 items-center justify-center rounded-full border-8 border-white bg-gradient-to-b from-purple-400">
<User className="h-7 text-white" />
</div>
<div className="">
@ -251,7 +251,7 @@ const StandardLayout: React.VoidFunctionComponent<{
<div className="mb-4">
<Link href="/new">
<a className="group mb-1 flex items-center space-x-3 whitespace-nowrap rounded-md px-3 py-1 font-medium text-slate-600 transition-colors hover:bg-slate-500/10 hover:text-slate-600 hover:no-underline active:bg-slate-500/20">
<Pencil className="h-5 opacity-75 group-hover:text-indigo-500 group-hover:opacity-100" />
<Pencil className="group-hover:text-primary-500 h-5 opacity-75 group-hover:opacity-100" />
<span className="grow text-left">New Poll</span>
</a>
</Link>
@ -261,14 +261,14 @@ const StandardLayout: React.VoidFunctionComponent<{
className="group mb-1 flex items-center space-x-3 whitespace-nowrap rounded-md px-3 py-1 font-medium text-slate-600 transition-colors hover:bg-slate-500/10 hover:text-slate-600 hover:no-underline active:bg-slate-500/20"
rel="noreferrer"
>
<Support className="h-5 opacity-75 group-hover:text-indigo-500 group-hover:opacity-100" />
<Support className="group-hover:text-primary-500 h-5 opacity-75 group-hover:opacity-100" />
<span className="grow text-left">Support</span>
</a>
<Popover
placement="right-start"
trigger={
<button className="group flex w-full items-center space-x-3 whitespace-nowrap rounded-md px-3 py-1 font-medium text-slate-600 transition-colors hover:bg-slate-500/10 hover:text-slate-600 hover:no-underline active:bg-slate-500/20">
<Adjustments className="h-5 opacity-75 group-hover:text-indigo-500 group-hover:opacity-100" />
<Adjustments className="group-hover:text-primary-500 h-5 opacity-75 group-hover:opacity-100" />
<span className="grow text-left">Preferences</span>
<DotsVertical className="h-4 text-slate-500 opacity-0 transition-opacity group-hover:opacity-100" />
</button>
@ -281,7 +281,7 @@ const StandardLayout: React.VoidFunctionComponent<{
onClick={openLoginModal}
className="group flex w-full items-center space-x-3 whitespace-nowrap rounded-md px-3 py-1 font-medium text-slate-600 transition-colors hover:bg-slate-500/10 hover:text-slate-600 hover:no-underline active:bg-slate-500/20"
>
<Login className="h-5 opacity-75 group-hover:text-indigo-500 group-hover:opacity-100" />
<Login className="group-hover:text-primary-500 h-5 opacity-75 group-hover:opacity-100" />
<span className="grow text-left">Login</span>
</button>
)}
@ -301,7 +301,7 @@ const StandardLayout: React.VoidFunctionComponent<{
>
<div className="flex w-full items-center space-x-3">
<div className="relative">
<UserCircle className="h-5 opacity-75 group-hover:text-indigo-500 group-hover:opacity-100" />
<UserCircle className="group-hover:text-primary-500 h-5 opacity-75 group-hover:opacity-100" />
</div>
<div className="grow overflow-hidden">
<div className="truncate font-medium leading-snug text-slate-600">
@ -327,7 +327,7 @@ const StandardLayout: React.VoidFunctionComponent<{
<div className="flex flex-col items-center space-y-4 px-6 pt-3 pb-6 text-slate-400 lg:h-16 lg:flex-row lg:space-y-0 lg:space-x-6 lg:py-0 lg:px-8 lg:pb-3">
<div>
<Link href="https://rallly.co">
<a className="text-sm text-slate-400 transition-colors hover:text-indigo-500 hover:no-underline">
<a className="hover:text-primary-500 text-sm text-slate-400 transition-colors hover:no-underline">
<Logo className="h-5" />
</a>
</Link>
@ -337,30 +337,30 @@ const StandardLayout: React.VoidFunctionComponent<{
<a
target="_blank"
href="https://support.rallly.co"
className="text-sm text-slate-400 transition-colors hover:text-indigo-500 hover:no-underline"
className="hover:text-primary-500 text-sm text-slate-400 transition-colors hover:no-underline"
rel="noreferrer"
>
Support
</a>
<Link href="https://github.com/lukevella/rallly/discussions">
<a className="text-sm text-slate-400 transition-colors hover:text-indigo-500 hover:no-underline">
<a className="hover:text-primary-500 text-sm text-slate-400 transition-colors hover:no-underline">
Discussions
</a>
</Link>
<Link href="https://blog.rallly.co">
<a className="text-sm text-slate-400 transition-colors hover:text-indigo-500 hover:no-underline">
<a className="hover:text-primary-500 text-sm text-slate-400 transition-colors hover:no-underline">
Blog
</a>
</Link>
<div className="hidden text-slate-300 lg:block">&bull;</div>
<div className="flex items-center space-x-6">
<Link href="https://twitter.com/ralllyco">
<a className="text-sm text-slate-400 transition-colors hover:text-indigo-500 hover:no-underline">
<a className="hover:text-primary-500 text-sm text-slate-400 transition-colors hover:no-underline">
<Twitter className="h-5 w-5" />
</a>
</Link>
<Link href="https://github.com/lukevella/rallly">
<a className="text-sm text-slate-400 transition-colors hover:text-indigo-500 hover:no-underline">
<a className="hover:text-primary-500 text-sm text-slate-400 transition-colors hover:no-underline">
<Github className="h-5 w-5" />
</a>
</Link>
@ -368,7 +368,7 @@ const StandardLayout: React.VoidFunctionComponent<{
</div>
<div className="hidden text-slate-300 lg:block">&bull;</div>
<Link href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E">
<a className="inline-flex h-8 items-center rounded-full bg-slate-100 pl-2 pr-3 text-sm text-slate-400 transition-colors hover:bg-indigo-500 hover:text-white hover:no-underline focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 active:bg-indigo-600">
<a className="hover:bg-primary-500 focus:ring-primary-500 active:bg-primary-600 inline-flex h-8 items-center rounded-full bg-slate-100 pl-2 pr-3 text-sm text-slate-400 transition-colors hover:text-white hover:no-underline focus:ring-2 focus:ring-offset-1">
<Cash className="mr-1 inline-block w-5" />
<span>Donate</span>
</a>

4
src/components/steps/steps.tsx
View file

@ -29,9 +29,9 @@ const Steps: React.VoidFunctionComponent<StepsProps> = ({
<span
key={i}
className={clsx("ml-3 h-2 w-2 rounded-full transition-all", {
"bg-indigo-400": i <= current,
"bg-primary-400": i <= current,
"bg-gray-300": i > current,
"animate-pulse ring-4 ring-indigo-200": i === current,
"ring-primary-200 animate-pulse ring-4": i === current,
})}
/>
);

20
style.css
View file

@ -32,13 +32,13 @@
@apply outline-none;
}
a {
@apply rounded-sm font-medium text-indigo-500 outline-none hover:text-indigo-400 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1;
@apply text-primary-500 hover:text-primary-400 focus-visible:ring-primary-500 rounded-sm font-medium outline-none hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1;
}
label {
@apply mb-1 block text-sm text-slate-800;
}
button {
@apply cursor-default outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1;
@apply focus-visible:ring-primary-500 cursor-default outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1;
}
#floating-ui-root {
@ -51,7 +51,7 @@
@apply mb-4;
}
.input {
@apply appearance-none rounded-md border border-gray-200 px-2 py-1 text-slate-700 shadow-sm placeholder:text-slate-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500;
@apply focus:border-primary-500 focus:ring-primary-500 appearance-none rounded-md border border-gray-200 px-2 py-1 text-slate-700 shadow-sm placeholder:text-slate-400 focus:ring-1;
}
input.input {
@apply h-9;
@ -63,7 +63,7 @@
@apply border-rose-500 ring-1 ring-rose-400 focus:border-rose-400 focus:ring-rose-500;
}
.checkbox {
@apply h-4 w-4 rounded border-slate-300 text-indigo-500 shadow-sm focus:ring-indigo-500;
@apply text-primary-500 focus:ring-primary-500 h-4 w-4 rounded border-slate-300 shadow-sm;
}
.btn {
@apply inline-flex h-9 cursor-default select-none items-center justify-center whitespace-nowrap rounded-md border px-3 font-medium shadow-sm transition-all sm:active:scale-95;
@ -73,17 +73,17 @@
}
.btn-default {
@apply btn bg-white text-slate-700 hover:bg-indigo-50/10 active:bg-slate-100;
@apply btn hover:bg-primary-50/10 bg-white text-slate-700 active:bg-slate-100;
}
a.btn-default {
@apply hover:text-indigo-500;
@apply hover:text-primary-500;
}
.btn-danger {
@apply btn border-rose-600 bg-rose-500 text-white hover:bg-rose-600 focus-visible:ring-rose-500;
}
.btn-link {
@apply inline-flex items-center text-indigo-500 underline;
@apply text-primary-500 inline-flex items-center underline;
}
.btn.btn-disabled {
text-shadow: none;
@ -91,7 +91,7 @@
}
.btn-primary {
text-shadow: rgb(0 0 0 / 20%) 0px 1px 1px;
@apply btn border-indigo-600 bg-indigo-500 text-white hover:bg-opacity-90 focus-visible:ring-indigo-500 active:bg-indigo-600;
@apply btn border-primary-600 bg-primary-500 focus-visible:ring-primary-500 active:bg-primary-600 text-white hover:bg-opacity-90;
}
a.btn-primary {
@ -107,7 +107,7 @@
}
.segment-button .segment-button-active {
@apply text-indigo-500;
@apply text-primary-500;
}
.menu {
@ -133,7 +133,7 @@
@layer components {
.heading {
@apply text-xl text-indigo-500;
@apply text-primary-500 text-xl;
}
.subheading {
@apply mb-16 text-4xl font-bold text-slate-800;

5
tailwind.config.js
View file

@ -5,11 +5,8 @@ module.exports = {
content: ["./src/pages/**/*.{ts,tsx}", "./src/components/**/*.{ts,tsx}"],
theme: {
extend: {
primary: colors.indigo,
colors: {
green: colors.emerald,
yellow: colors.amber,
purple: colors.violet,
primary: colors.indigo,
},
keyframes: {
wiggle: {