Skip to content

Commit fba3413

Browse files
sstefdevsstefdev
authored
Updated navbar reflecting new design (#68)
1 parent 01e4475 commit fba3413

File tree

5 files changed

+112
-107
lines changed

5 files changed

+112
-107
lines changed

‎components/common/Button.tsx

+44-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from "react";
2-
31
interface ButtonProps {
42
text: string;
53
color?: string;
@@ -10,7 +8,20 @@ interface ButtonProps {
108
class: string;
119
style: React.CSSProperties;
1210
};
11+
element?: {
12+
content: React.ReactNode;
13+
position: "left" | "right";
14+
};
1315
type?: "button" | "submit" | "reset";
16+
href?: string;
17+
outlined?: boolean;
18+
anchorProps?: AnchorSpecificProps;
19+
ariaLabel?: string;
20+
}
21+
22+
interface AnchorSpecificProps {
23+
target?: "_blank" | "_self" | "_parent" | "_top";
24+
rel?: string;
1425
}
1526

1627
const Button = ({
@@ -20,17 +31,44 @@ const Button = ({
2031
disabled = false,
2132
className = "",
2233
icon,
34+
element,
2335
type = "button",
36+
href,
37+
outlined = false,
38+
anchorProps,
39+
ariaLabel,
2440
}: ButtonProps) => {
25-
return (
41+
const commonClassNames = `${className} w-fit flex items-center gap-[10px] ${element?.position === "right" ? "flex-row-reverse" : "flex-row"} disabled:cursor-not-allowed disabled:bg-grey disabled:text-dark-grey rounded-[8px] hover:bg-dark-green transition-all text-[14px] px-[12px] py-[8px] ${color} ${
42+
outlined
43+
? "border-[1px] border-green bg-transparent text-green hover:text-dark-green hover:border-dark-green hover:bg-transparent"
44+
: "text-white"
45+
}`;
46+
47+
const content = (
48+
<>
49+
{icon && <i className={icon.class} style={icon.style}></i>}
50+
{element?.content}
51+
{text}
52+
</>
53+
);
54+
55+
return href ? (
56+
<a
57+
href={href}
58+
className={commonClassNames}
59+
{...anchorProps}
60+
aria-label={ariaLabel || text}
61+
>
62+
{content}
63+
</a>
64+
) : (
2665
<button
2766
type={type}
2867
onClick={onClick}
2968
disabled={disabled}
30-
className={`flex items-center gap-[10px] disabled:cursor-not-allowed disabled:bg-grey disabled:text-dark-grey text-white rounded-[8px] hover:bg-dark-green transition-all text-[14px] px-[10px] tablet:px-[28px] py-[8px]" ${className} ${color}`}
69+
className={commonClassNames}
3170
>
32-
{icon && <i className={icon.class} style={icon.style}></i>}
33-
{text}
71+
{content}
3472
</button>
3573
);
3674
};

‎components/common/ConnectButton.tsx

+35-39
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { ConnectButton as RainbowKitButton } from "@rainbow-me/rainbowkit";
2-
import Image from "next/image";
3-
41
import React from "react";
2+
import Image from "next/image";
3+
import Button from "./Button";
4+
import { ConnectButton as RainbowKitButton } from "@rainbow-me/rainbowkit";
55

66
const ConnectButton = () => {
77
return (
@@ -35,53 +35,49 @@ const ConnectButton = () => {
3535
{(() => {
3636
if (!connected) {
3737
return (
38-
<button
38+
<Button
39+
outlined
40+
text="Connect Wallet"
41+
className="font-semibold"
3942
onClick={openConnectModal}
40-
type="button"
41-
className={`flex items-center gap-[10px] disabled:cursor-not-allowed disabled:bg-grey disabled:text-dark-grey text-white rounded-[8px] hover:bg-dark-green transition-all text-[14px] tablet:px-[28px] px-[14px] lg:px-[20px] text-14px lg:text-[16px] py-[8px] bg-green focus:outline-none`}
42-
>
43-
Connect Wallet
44-
</button>
43+
/>
4544
);
4645
}
4746
if (chain.unsupported) {
4847
return (
49-
<button onClick={openChainModal} type="button">
50-
Unsupported network
51-
</button>
48+
<Button onClick={openChainModal} text="Unsupported network" />
5249
);
5350
}
5451
return (
5552
<div style={{ display: "flex", gap: 12 }}>
56-
<button
53+
<Button
54+
className="font-medium"
55+
outlined
5756
onClick={openChainModal}
58-
className="flex items-center text-white tablet:px-[28px] px-[14px] lg:px-[20px] bg-green lg:text-[16px] py-[8px] rounded-[8px] gap-[10px]"
59-
type="button"
60-
>
61-
{chain.hasIcon && (
62-
<div>
63-
{chain.iconUrl && (
64-
<Image
65-
alt={chain.name ?? "Chain icon"}
66-
src={chain.iconUrl}
67-
width={12}
68-
height={12}
69-
className="w-[20px] h-[20px]"
70-
/>
71-
)}
72-
</div>
73-
)}
74-
<span>{chain.name}</span>
75-
</button>
76-
<button
57+
text={chain.name as string}
58+
element={{
59+
content: chain.hasIcon && (
60+
<div>
61+
{chain.iconUrl && (
62+
<Image
63+
alt={chain.name ?? "Chain icon"}
64+
src={chain.iconUrl}
65+
width={12}
66+
height={12}
67+
className="w-[20px] h-[20px]"
68+
/>
69+
)}
70+
</div>
71+
),
72+
position: "left",
73+
}}
74+
/>
75+
<Button
76+
outlined
77+
className="font-medium"
78+
text={account.displayName}
7779
onClick={openAccountModal}
78-
type="button"
79-
className="text-[14px] text-white flex gap-[10px]"
80-
>
81-
<span className="tablet:px-[28px] px-[14px] lg:px-[20px] bg-green lg:text-[16px] py-[8px] rounded-[8px]">
82-
{account.displayName}
83-
</span>
84-
</button>
80+
/>
8581
</div>
8682
);
8783
})()}

‎components/common/Dropdown.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ const Dropdown = ({ outlined = true, title, items }: DropdownProps) => {
3838
className={`${
3939
!outlined
4040
? "bg-green hover:bg-dark-green"
41-
: "bg-transparent text-dark-green border-dark-green border-[1px] hover:border-green hover:text-green"
42-
} focus:ring-transparent focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-[14px] lg:text-sm px-[12px] lg:px-[28px] py-[8px] text-center inline-flex items-center`}
41+
: "bg-transparent text-green hover:text-dark-green"
42+
} w-fit focus:ring-transparent focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-[14px] lg:text-sm text-center inline-flex items-center`}
4343
type="button"
4444
>
4545
{title}
@@ -76,7 +76,7 @@ const Dropdown = ({ outlined = true, title, items }: DropdownProps) => {
7676
target="_blank"
7777
href={item.href}
7878
rel="noreferrer noopener"
79-
className="px-3 py-2 hover:bg-gray-100 flex items-center gap-2"
79+
className="px-3 py-2 hover:bg-gray-100 flex items-center gap-[6px]"
8080
>
8181
{item.name}
8282
<ArrowUpRight />

‎components/common/Navbar.tsx

+27-58
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,13 @@ import {
88
import Link from "next/link";
99
import { useRouter } from "next/router";
1010
import React, { useState } from "react";
11+
import { Button, Dropdown } from "../common";
1112
import { ArrowUpRight, BurgerMenu, Close } from "@/icons";
12-
import { Dropdown } from "../common";
13-
import { useAccount, useConnect } from "wagmi";
13+
1414
import ConnectButton from "./ConnectButton";
1515

1616
const Navbar = () => {
1717
const router = useRouter();
18-
const { connect, connectors } = useConnect();
19-
const account = useAccount();
20-
const [isDocsHovered, setIsDocsHovered] = useState(false);
21-
const [isScheduleHovered, setIsScheduleHovered] = useState(false);
2218
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
2319

2420
const links = [
@@ -74,47 +70,23 @@ const Navbar = () => {
7470
</li>
7571
))}
7672
</ul>
77-
<div className="hidden tablet:flex items-center gap-[15px] lg:gap-[35px] ml-auto ">
78-
<div
79-
onMouseEnter={() => setIsScheduleHovered(true)}
80-
onMouseLeave={() => setIsScheduleHovered(false)}
81-
>
82-
<a
83-
target="_blank"
84-
rel="noreferrer noopener"
85-
href={process.env.NEXT_PUBLIC_DEMO_URL}
86-
className="flex items-center gap-[5px] bg-transparent text-green font-medium text-[14px] lg:text-[16px]"
87-
>
88-
Book a demo
89-
<ArrowUpRight />
90-
</a>
91-
<div
92-
className={`${
93-
isScheduleHovered ? "h-[1.5px]" : "h-[0px]"
94-
} w-100 bg-green`}
95-
></div>
96-
</div>
97-
<div
98-
onMouseEnter={() => setIsDocsHovered(true)}
99-
onMouseLeave={() => setIsDocsHovered(false)}
100-
>
101-
<a
102-
target="_blank"
103-
rel="noreferrer noopener"
104-
href="https://docs.request.network/building-blocks/templates"
105-
className="flex items-center gap-[5px] bg-transparent text-green font-medium text-[14px] lg:text-[16px]"
106-
>
107-
Integrate in your app
108-
<ArrowUpRight />
109-
</a>
110-
<div
111-
className={`${
112-
isDocsHovered ? "h-[1.5px]" : "h-[0px]"
113-
} w-100 bg-green`}
114-
></div>
115-
</div>
73+
<div className="hidden tablet:flex items-center gap-[16px] ml-auto ">
11674
<Dropdown title="Need help?" items={supportLinks} />
75+
<a
76+
target="_blank"
77+
rel="noreferrer noopener"
78+
href="https://docs.request.network/building-blocks/templates"
79+
className="flex items-center gap-[6px] bg-transparent text-green font-medium text-[14px] hover:text-dark-green"
80+
>
81+
Integrate in your app
82+
<ArrowUpRight />
83+
</a>
11784
<ConnectButton />
85+
<Button
86+
text="Book a demo"
87+
href={process.env.NEXT_PUBLIC_DEMO_URL}
88+
anchorProps={{ target: "_blank", rel: "noreferrer noopener" }}
89+
/>
11890
</div>
11991
<Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
12092
<SheetContent>
@@ -137,31 +109,28 @@ const Navbar = () => {
137109
</Link>
138110
</li>
139111
))}
140-
<li className="flex flex-col gap-7">
141-
<a
142-
target="_blank"
143-
rel="noreferrer noopener"
144-
href="https://docs.request.network/building-blocks/templates"
145-
className="flex items-center gap-[5px] bg-transparent text-green font-medium text-[16px] w-[100%] h-[30px]"
146-
>
147-
Book a demo
148-
<ArrowUpRight />
149-
</a>
112+
<li>
113+
<Dropdown title="Need help?" items={supportLinks} />
114+
</li>
115+
<li>
150116
<a
151117
target="_blank"
152118
rel="noreferrer noopener"
153119
href="https://docs.request.network/building-blocks/templates"
154-
className="flex items-center gap-[5px] bg-transparent text-green font-medium text-[16px] w-[100%] h-[30px]"
120+
className="flex items-center gap-[6px] bg-transparent text-green font-medium text-[14px] hover:text-dark-green"
155121
>
156122
Integrate in your app
157123
<ArrowUpRight />
158124
</a>
159125
</li>
160126
<li>
161-
<Dropdown title="Need help?" items={supportLinks} />
127+
<ConnectButton />
162128
</li>
163129
<li>
164-
<ConnectButton />
130+
<Button
131+
text="Book a demo"
132+
href={process.env.NEXT_PUBLIC_DEMO_URL}
133+
/>
165134
</li>
166135
</ul>
167136
</SheetContent>

‎icons/ArrowUpRight.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from "react";
22
import { SVGProps } from "react";
3+
34
const ArrowUpRight = (props: SVGProps<SVGSVGElement>) => (
45
<svg
56
xmlns="http://www.w3.org/2000/svg"
@@ -10,12 +11,13 @@ const ArrowUpRight = (props: SVGProps<SVGSVGElement>) => (
1011
{...props}
1112
>
1213
<path
13-
stroke="#0BB489"
14+
stroke="currentColor"
1415
strokeLinecap="round"
1516
strokeLinejoin="round"
1617
strokeWidth={2}
1718
d="M7 17 17 7m0 0H8m9 0v9"
1819
/>
1920
</svg>
2021
);
22+
2123
export default ArrowUpRight;

0 commit comments

Comments
 (0)