3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-16 16:05:33 +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>
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
<Link href="/privacy-policy"> <Link href="/privacy-policy">
<a className="text-slate-400 hover:text-indigo-500"> <a className="hover:text-primary-500 text-slate-400">
Privacy Policy Privacy Policy
</a> </a>
</Link> </Link>
@ -48,7 +48,7 @@ const CookieConsentPopover: React.VoidFunctionComponent = () => {
Cookies.set("rallly_cookie_consent", "1", { expires: 365 }); Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
setVisible(false); 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 OK
</button> </button>

4
src/components/dropdown.tsx
View file

@ -120,7 +120,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
className={clsx( className={clsx(
"group flex w-full items-center rounded py-2 pl-2 pr-4", "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, "text-gray-700": !active,
"opacity-50": disabled, "opacity-50": disabled,
}, },
@ -130,7 +130,7 @@ export const DropdownItem: React.VoidFunctionComponent<{
<Icon <Icon
className={clsx("mr-2 h-5 w-5", { className={clsx("mr-2 h-5 w-5", {
"text-white": active, "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="flex items-start">
<div className="text-center"> <div className="text-center">
<Icon className="mb-4 inline-block w-24 text-slate-400" /> <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} {title}
</div> </div>
<p>{description}</p> <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, "bg-slate-50 text-slate-400": day.outOfMonth,
"font-bold": day.today, "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-r": (i + 1) % 7 !== 0,
"border-b": i < datepicker.days.length - 7, "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-['']": "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 <div
className={clsx(" flex h-full items-center justify-center", className)} 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" /> <Spinner className="mr-3 h-5 animate-spin" />
{children} {children}
</div> </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"> <h1 className="text-4xl font-bold sm:text-5xl">
Schedule Schedule
<br /> <br />
<span className="text-indigo-500">group&nbsp;meetings</span> <span className="text-primary-500">group&nbsp;meetings</span>
<br /> <br />
with ease with ease
</h1> </h1>
@ -26,13 +26,13 @@ const Hero: React.VoidFunctionComponent = () => {
</div> </div>
<div className="space-x-3"> <div className="space-x-3">
<Link href="/new"> <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")} {t("getStarted")}
</a> </a>
</Link> </Link>
<Link href="/demo"> <Link href="/demo">
<a <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" rel="nofollow"
> >
{t("viewDemo")} {t("viewDemo")}
@ -44,13 +44,13 @@ const Hero: React.VoidFunctionComponent = () => {
<UserAvatarProvider seed="mock" names={names}> <UserAvatarProvider seed="mock" names={names}>
<div className="relative inline-block"> <div className="relative inline-block">
<motion.div <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 }} initial={{ opacity: 0, width: 100, scale: 1.2, translateX: 384 }}
animate={{ opacity: 1, scale: 1.1 }} animate={{ opacity: 1, scale: 1.1 }}
transition={{ type: "spring", delay: 1 }} transition={{ type: "spring", delay: 1 }}
/> />
<motion.div <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={{ initial={{
opacity: 0, opacity: 0,
right: 190, right: 190,

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

@ -20,7 +20,7 @@ const participants = [
}, },
{ {
name: "Johnny", name: "Johnny",
color: "bg-indigo-400", color: "bg-primary-400",
votes: [2, 3], 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> <p className="subheading text-center">100,000+ polls created</p>
<div className="flex justify-center space-x-3"> <div className="flex justify-center space-x-3">
<Link href="/new"> <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")} {t("getStarted")}
</a> </a>
</Link> </Link>
<Link href="/demo"> <Link href="/demo">
<a <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" rel="nofollow"
> >
{t("viewDemo")} {t("viewDemo")}

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

@ -65,7 +65,7 @@ const LoginForm: React.VoidFunctionComponent = () => {
) : ( ) : (
<div> <div>
<div className="text-slate-500">A magic link has been sent to:</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")} {getValues("email")}
</div> </div>
<div className="mt-2 text-slate-500">Please check you inbox.</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> </Head>
<div className="w-96 rounded-lg border bg-white p-8 text-center shadow-sm"> <div className="w-96 rounded-lg border bg-white p-8 text-center shadow-sm">
<div className="mb-4"> <div className="mb-4">
<Clock className="inline-block h-20 text-indigo-500" /> <Clock className="text-primary-500 inline-block h-20" />
</div> </div>
<div className=""> <div className="">
The site is currently down for some maintenance and will be back 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="/"> <Link href="/">
<a <a
className={clsx( 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": "pointer-events-none font-bold text-gray-600":
pathname === "/home", pathname === "/home",
@ -41,7 +41,7 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
<Link href="https://blog.rallly.co"> <Link href="https://blog.rallly.co">
<a <a
className={clsx( 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 Blog
@ -49,12 +49,12 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
</Link> </Link>
<a <a
href="https://support.rallly.co" 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 Support
</a> </a>
<Link href="https://github.com/lukevella/rallly"> <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" /> <Github className="w-6" />
</a> </a>
</Link> </Link>
@ -76,7 +76,7 @@ const PageLayout: React.VoidFunctionComponent<PageLayoutProps> = ({
<div className="relative inline-block"> <div className="relative inline-block">
<Link href="/"> <Link href="/">
<a> <a>
<Logo className="w-40 text-indigo-500" alt="Rallly" /> <Logo className="text-primary-500 w-40" alt="Rallly" />
</a> </a>
</Link> </Link>
<span className="absolute -bottom-6 right-0 text-sm text-slate-400 transition-colors"> <span className="absolute -bottom-6 right-0 text-sm text-slate-400 transition-colors">
@ -89,7 +89,7 @@ const PageLayout: React.VoidFunctionComponent<PageLayoutProps> = ({
<Popover <Popover
placement="left-start" placement="left-start"
trigger={ 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" /> <DotsVertical className="w-5" />
</button> </button>
} }

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

@ -25,7 +25,7 @@ const NotificationsToggle: React.VoidFunctionComponent = () => {
poll.verified ? ( poll.verified ? (
poll.notifications ? ( poll.notifications ? (
<div> <div>
<div className="font-medium text-indigo-300"> <div className="text-primary-300 font-medium">
Notifications are on Notifications are on
</div> </div>
<div className="max-w-sm"> <div className="max-w-sm">
@ -37,7 +37,7 @@ const NotificationsToggle: React.VoidFunctionComponent = () => {
}} }}
components={{ components={{
b: ( 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, name: poll.authorName,
}} }}
components={{ components={{
b: <span className="font-medium text-indigo-500" />, b: <span className="text-primary-500 font-medium" />,
}} }}
/> />
&nbsp; &nbsp;
@ -52,7 +52,7 @@ const PollSubheader: React.VoidFunctionComponent = () => {
values={{ email: poll.user.email }} values={{ email: poll.user.email }}
components={{ components={{
b: ( 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 = [ const colors = [
"bg-fuchsia-300", "bg-fuchsia-300",
"bg-purple-400", "bg-purple-400",
"bg-indigo-400", "bg-primary-400",
"bg-blue-400", "bg-blue-400",
"bg-sky-400", "bg-sky-400",
"bg-cyan-400", "bg-cyan-400",
"bg-sky-400", "bg-sky-400",
"bg-blue-400", "bg-blue-400",
"bg-indigo-400", "bg-primary-400",
"bg-purple-400", "bg-purple-400",
"bg-fuchsia-400", "bg-fuchsia-400",
"bg-pink-400", "bg-pink-400",

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

@ -31,7 +31,7 @@ export const VoteSelector = React.forwardRef<
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} onBlur={onBlur}
onKeyDown={onKeyDown} 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={() => { onClick={() => {
onChange?.(value ? getNext(value) : orderedVoteTypes[0]); onChange?.(value ? getNext(value) : orderedVoteTypes[0]);
}} }}

8
src/components/profile.tsx
View file

@ -35,8 +35,8 @@ export const Profile: React.VoidFunctionComponent = () => {
return ( return (
<div className="mx-auto max-w-3xl py-4 lg:mx-0"> <div className="mx-auto max-w-3xl py-4 lg:mx-0">
<div className="mb-4 flex items-center px-4"> <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"> <div className="bg-primary-50 mr-4 inline-flex h-14 w-14 items-center justify-center rounded-lg">
<User className="h-7 text-indigo-500" /> <User className="text-primary-500 h-7" />
</div> </div>
<div> <div>
<div <div
@ -71,9 +71,9 @@ export const Profile: React.VoidFunctionComponent = () => {
<div className="sm:table-cell sm:p-4"> <div className="sm:table-cell sm:p-4">
<div> <div>
<div className="flex"> <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}`}> <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> <div>{poll.title}</div>
</a> </a>
</Link> </Link>

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

@ -30,7 +30,7 @@ const HomeLink = () => {
return ( return (
<Link href="/"> <Link href="/">
<a> <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> </a>
</Link> </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" 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"> <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>
<div className="hidden max-w-[120px] truncate font-medium xs:block"> <div className="hidden max-w-[120px] truncate font-medium xs:block">
{user.shortName} {user.shortName}
@ -89,7 +89,7 @@ const MobileNavigation: React.VoidFunctionComponent<{
type="button" 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" 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> <span className="ml-2 hidden sm:block">Preferences</span>
</button> </button>
} }
@ -103,7 +103,7 @@ const MobileNavigation: React.VoidFunctionComponent<{
type="button" 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" 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> <span className="ml-2 hidden sm:block">Menu</span>
</button> </button>
} }
@ -160,7 +160,7 @@ const UserDropdown: React.VoidFunctionComponent<
content: ( content: (
<div className="w-96 max-w-full p-6 pt-28"> <div className="w-96 max-w-full p-6 pt-28">
<div className="absolute left-0 -top-8 w-full text-center"> <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" /> <User className="h-7 text-white" />
</div> </div>
<div className=""> <div className="">
@ -251,7 +251,7 @@ const StandardLayout: React.VoidFunctionComponent<{
<div className="mb-4"> <div className="mb-4">
<Link href="/new"> <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"> <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> <span className="grow text-left">New Poll</span>
</a> </a>
</Link> </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" 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" 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> <span className="grow text-left">Support</span>
</a> </a>
<Popover <Popover
placement="right-start" placement="right-start"
trigger={ 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"> <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> <span className="grow text-left">Preferences</span>
<DotsVertical className="h-4 text-slate-500 opacity-0 transition-opacity group-hover:opacity-100" /> <DotsVertical className="h-4 text-slate-500 opacity-0 transition-opacity group-hover:opacity-100" />
</button> </button>
@ -281,7 +281,7 @@ const StandardLayout: React.VoidFunctionComponent<{
onClick={openLoginModal} 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" 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> <span className="grow text-left">Login</span>
</button> </button>
)} )}
@ -301,7 +301,7 @@ const StandardLayout: React.VoidFunctionComponent<{
> >
<div className="flex w-full items-center space-x-3"> <div className="flex w-full items-center space-x-3">
<div className="relative"> <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>
<div className="grow overflow-hidden"> <div className="grow overflow-hidden">
<div className="truncate font-medium leading-snug text-slate-600"> <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 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> <div>
<Link href="https://rallly.co"> <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" /> <Logo className="h-5" />
</a> </a>
</Link> </Link>
@ -337,30 +337,30 @@ const StandardLayout: React.VoidFunctionComponent<{
<a <a
target="_blank" target="_blank"
href="https://support.rallly.co" 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" rel="noreferrer"
> >
Support Support
</a> </a>
<Link href="https://github.com/lukevella/rallly/discussions"> <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 Discussions
</a> </a>
</Link> </Link>
<Link href="https://blog.rallly.co"> <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 Blog
</a> </a>
</Link> </Link>
<div className="hidden text-slate-300 lg:block">&bull;</div> <div className="hidden text-slate-300 lg:block">&bull;</div>
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
<Link href="https://twitter.com/ralllyco"> <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" /> <Twitter className="h-5 w-5" />
</a> </a>
</Link> </Link>
<Link href="https://github.com/lukevella/rallly"> <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" /> <Github className="h-5 w-5" />
</a> </a>
</Link> </Link>
@ -368,7 +368,7 @@ const StandardLayout: React.VoidFunctionComponent<{
</div> </div>
<div className="hidden text-slate-300 lg:block">&bull;</div> <div className="hidden text-slate-300 lg:block">&bull;</div>
<Link href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"> <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" /> <Cash className="mr-1 inline-block w-5" />
<span>Donate</span> <span>Donate</span>
</a> </a>

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

@ -29,9 +29,9 @@ const Steps: React.VoidFunctionComponent<StepsProps> = ({
<span <span
key={i} key={i}
className={clsx("ml-3 h-2 w-2 rounded-full transition-all", { 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, "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; @apply outline-none;
} }
a { 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 { label {
@apply mb-1 block text-sm text-slate-800; @apply mb-1 block text-sm text-slate-800;
} }
button { 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 { #floating-ui-root {
@ -51,7 +51,7 @@
@apply mb-4; @apply mb-4;
} }
.input { .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 { input.input {
@apply h-9; @apply h-9;
@ -63,7 +63,7 @@
@apply border-rose-500 ring-1 ring-rose-400 focus:border-rose-400 focus:ring-rose-500; @apply border-rose-500 ring-1 ring-rose-400 focus:border-rose-400 focus:ring-rose-500;
} }
.checkbox { .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 { .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; @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 { .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 { a.btn-default {
@apply hover:text-indigo-500; @apply hover:text-primary-500;
} }
.btn-danger { .btn-danger {
@apply btn border-rose-600 bg-rose-500 text-white hover:bg-rose-600 focus-visible:ring-rose-500; @apply btn border-rose-600 bg-rose-500 text-white hover:bg-rose-600 focus-visible:ring-rose-500;
} }
.btn-link { .btn-link {
@apply inline-flex items-center text-indigo-500 underline; @apply text-primary-500 inline-flex items-center underline;
} }
.btn.btn-disabled { .btn.btn-disabled {
text-shadow: none; text-shadow: none;
@ -91,7 +91,7 @@
} }
.btn-primary { .btn-primary {
text-shadow: rgb(0 0 0 / 20%) 0px 1px 1px; 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 { a.btn-primary {
@ -107,7 +107,7 @@
} }
.segment-button .segment-button-active { .segment-button .segment-button-active {
@apply text-indigo-500; @apply text-primary-500;
} }
.menu { .menu {
@ -133,7 +133,7 @@
@layer components { @layer components {
.heading { .heading {
@apply text-xl text-indigo-500; @apply text-primary-500 text-xl;
} }
.subheading { .subheading {
@apply mb-16 text-4xl font-bold text-slate-800; @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}"], content: ["./src/pages/**/*.{ts,tsx}", "./src/components/**/*.{ts,tsx}"],
theme: { theme: {
extend: { extend: {
primary: colors.indigo,
colors: { colors: {
green: colors.emerald, primary: colors.indigo,
yellow: colors.amber,
purple: colors.violet,
}, },
keyframes: { keyframes: {
wiggle: { wiggle: {