🎨 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>
<div className="container mx-auto px-6 py-4 flex justify-between items-center"> <div className="container mx-auto px-6 py-4 flex justify-between items-center">
<Link href="/" legacyBehavior> <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> </Link>
<nav className="nav"> <nav className="nav">
<ul className="flex space-x-6"> <ul className="flex space-x-6">
<li> <li>
<Link href="/" legacyBehavior> <Link href="/" legacyBehavior>
<a <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)' }} style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
> >
Home Home
@@ -53,7 +55,7 @@ const Header = () => {
<li> <li>
<Link href="/events" legacyBehavior> <Link href="/events" legacyBehavior>
<a <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)' }} style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
> >
Events Events
@@ -63,7 +65,7 @@ const Header = () => {
<li> <li>
<Link href="/contact" legacyBehavior> <Link href="/contact" legacyBehavior>
<a <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)' }} style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
> >
Contact Contact

View File

@@ -64,7 +64,9 @@ function MetaMaskConnect() {
{isConnected ? ( {isConnected ? (
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button>{formatAddress(account)}</Button> <Button variant="link" className="text-white">
{formatAddress(account)}
</Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-44"> <PopoverContent className="w-44">
<Button <Button
@@ -77,7 +79,11 @@ function MetaMaskConnect() {
</PopoverContent> </PopoverContent>
</Popover> </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 <WalletIcon className="mr-2 h-4 w-4" /> Connect Wallet
</Button> </Button>
)} )}