🎨 Themed header components.

This commit is contained in:
sid
2024-10-26 17:38:49 +01:00
parent 9ce3d76092
commit deb52f36b1
2 changed files with 14 additions and 6 deletions

View File

@@ -36,14 +36,16 @@ const Header = () => {
></div>
<div className="container mx-auto px-6 py-4 flex justify-between items-center">
<Link href="/" legacyBehavior>
<a className="text-2xl font-semibold text-white">TicketChain</a>
<a className="text-2xl font-semibold text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300">
TicketChain
</a>
</Link>
<nav className="nav">
<ul className="flex space-x-6">
<li>
<Link href="/" legacyBehavior>
<a
className="text-white hover:text-blue-500 transition-colors duration-300"
className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
>
Home
@@ -53,7 +55,7 @@ const Header = () => {
<li>
<Link href="/events" legacyBehavior>
<a
className="text-white hover:text-blue-500 transition-colors duration-300"
className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
>
Events
@@ -63,7 +65,7 @@ const Header = () => {
<li>
<Link href="/contact" legacyBehavior>
<a
className="text-white hover:text-blue-500 transition-colors duration-300"
className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
>
Contact

View File

@@ -64,7 +64,9 @@ function MetaMaskConnect() {
{isConnected ? (
<Popover>
<PopoverTrigger asChild>
<Button>{formatAddress(account)}</Button>
<Button variant="link" className="text-white">
{formatAddress(account)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-44">
<Button
@@ -77,7 +79,11 @@ function MetaMaskConnect() {
</PopoverContent>
</Popover>
) : (
<Button disabled={connecting} onClick={connect}>
<Button
disabled={connecting}
onClick={connect}
className="bg-light-purple bg-opacity-75 hover:bg-purple border-0 hover:border-0"
>
<WalletIcon className="mr-2 h-4 w-4" /> Connect Wallet
</Button>
)}