mirror of
https://github.com/lukevella/rallly.git
synced 2025-05-19 20:06:19 +02:00
Use color variable for theme
This commit is contained in:
Luke Vella
parent
f666702527
commit
32f7bb60fa
20 changed files with 64 additions and 67 deletions
|
|
@ -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">•</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">•</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue