Skip to content

Commit 55b0a63

Browse files
Jeevansm25Jeevansm25
committed
feat: add hover effect to footer and navbar links, closes #307
Signed-off-by: Jeevan S M <jeevansm025@gmail.com>
1 parent 1544815 commit 55b0a63

File tree

2 files changed

+183
-66
lines changed

2 files changed

+183
-66
lines changed

‎src/components/Footer.tsx

+85-14
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const CustomFooter: React.FC = () => {
1919
const year = new Date().getFullYear();
2020
const screens = useBreakpoint();
2121
const [expanded, setExpanded] = useState(false);
22+
const [hoveredLink, setHoveredLink] = useState<string | null>(null);
2223

2324
return (
2425
<Footer
@@ -44,7 +45,15 @@ const CustomFooter: React.FC = () => {
4445
The open-source smart legal contract stack
4546
</Text>
4647
<Link href="mailto:admin@accordproject.org">
47-
<Text strong style={{ color: "rgba(255, 255, 255, 0.65)" }}>
48+
<Text
49+
strong
50+
style={{
51+
color: hoveredLink === "email" ? "#19c6c7" : "rgba(255, 255, 255, 0.65)",
52+
...(hoveredLink === "email" ? { transition: "color 0.3s ease" } : {}),
53+
}}
54+
onMouseEnter={() => setHoveredLink("email")}
55+
onMouseLeave={() => setHoveredLink(null)}
56+
>
4857
admin@accordproject.org
4958
</Text>
5059
</Link>
@@ -53,12 +62,15 @@ const CustomFooter: React.FC = () => {
5362
size="large"
5463
style={{
5564
padding: "5px 30px",
56-
backgroundColor: "#19c6c7",
65+
backgroundColor: hoveredLink === "join" ? "#17b0b1" : "#19c6c7",
5766
borderRadius: "5px",
58-
color: "#050c40",
67+
color: hoveredLink === "join" ? "#ffffff" : "#050c40",
5968
textAlign: "center",
6069
border: "none",
70+
...(hoveredLink === "join" ? { transition: "background-color 0.3s ease, color 0.3s ease" } : {}),
6171
}}
72+
onMouseEnter={() => setHoveredLink("join")}
73+
onMouseLeave={() => setHoveredLink(null)}
6274
>
6375
Join
6476
</Button>
@@ -71,7 +83,14 @@ const CustomFooter: React.FC = () => {
7183
<Button
7284
type="text"
7385
onClick={() => setExpanded(!expanded)}
74-
style={{ color: "white", fontSize: "16px", marginBottom: "10px" }}
86+
style={{
87+
color: hoveredLink === "expand" ? "#19c6c7" : "white",
88+
fontSize: "16px",
89+
marginBottom: "10px",
90+
...(hoveredLink === "expand" ? { transition: "color 0.3s ease" } : {}),
91+
}}
92+
onMouseEnter={() => setHoveredLink("expand")}
93+
onMouseLeave={() => setHoveredLink(null)}
7594
>
7695
{expanded ? <UpOutlined /> : <DownOutlined />} Other Links
7796
</Button>
@@ -96,7 +115,13 @@ const CustomFooter: React.FC = () => {
96115
<Link
97116
href={link.href}
98117
key={link.title}
99-
style={{ color: "white", fontSize: "15px" }}
118+
style={{
119+
color: hoveredLink === link.title ? "#19c6c7" : "white",
120+
fontSize: "15px",
121+
...(hoveredLink === link.title ? { transition: "color 0.3s ease" } : {}),
122+
}}
123+
onMouseEnter={() => setHoveredLink(link.title)}
124+
onMouseLeave={() => setHoveredLink(null)}
100125
>
101126
{link.title}
102127
</Link>
@@ -112,21 +137,31 @@ const CustomFooter: React.FC = () => {
112137
<Row justify="space-between" align="middle" style={{ marginTop: "40px" }}>
113138
<Col>
114139
<Text style={{ color: "rgba(255, 255, 255, 0.85)" }}>
115-
copyright © {year} accord project &bull;{" "}
140+
copyright © {year} accord project •{" "}
116141
<Link
117142
strong
118143
href="https://accordproject.org/privacy"
119144
target="_blank"
120-
style={{ color: "rgba(255, 255, 255, 0.85)" }}
145+
style={{
146+
color: hoveredLink === "trademark" ? "#19c6c7" : "rgba(255, 255, 255, 0.85)",
147+
...(hoveredLink === "trademark" ? { transition: "color 0.3s ease" } : {}),
148+
}}
149+
onMouseEnter={() => setHoveredLink("trademark")}
150+
onMouseLeave={() => setHoveredLink(null)}
121151
>
122152
trademark policy
123153
</Link>{" "}
124-
&bull;{" "}
154+
•{" "}
125155
<Link
126156
strong
127157
href="https://accordproject.org/brand-assets"
128158
target="_blank"
129-
style={{ color: "rgba(255, 255, 255, 0.85)" }}
159+
style={{
160+
color: hoveredLink === "brand-assets" ? "#19c6c7" : "rgba(255, 255, 255, 0.85)",
161+
...(hoveredLink === "brand-assets" ? { transition: "color 0.3s ease" } : {}),
162+
}}
163+
onMouseEnter={() => setHoveredLink("brand-assets")}
164+
onMouseLeave={() => setHoveredLink(null)}
130165
>
131166
brand assets
132167
</Link>
@@ -135,16 +170,52 @@ const CustomFooter: React.FC = () => {
135170

136171
<Col>
137172
<Space>
138-
<Link href="https://github.com/accordproject" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
173+
<Link
174+
href="https://github.com/accordproject"
175+
target="_blank"
176+
style={{
177+
color: hoveredLink === "github" ? "#19c6c7" : "rgba(255, 255, 255, 0.85)",
178+
...(hoveredLink === "github" ? { transition: "color 0.3s ease" } : {}),
179+
}}
180+
onMouseEnter={() => setHoveredLink("github")}
181+
onMouseLeave={() => setHoveredLink(null)}
182+
>
139183
<GithubOutlined style={{ fontSize: "17px" }} />
140184
</Link>
141-
<Link href="https://twitter.com/AccordHQ" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
185+
<Link
186+
href="https://twitter.com/AccordHQ"
187+
target="_blank"
188+
style={{
189+
color: hoveredLink === "twitter" ? "#19c6c7" : "rgba(255, 255, 255, 0.85)",
190+
...(hoveredLink === "twitter" ? { transition: "color 0.3s ease" } : {}),
191+
}}
192+
onMouseEnter={() => setHoveredLink("twitter")}
193+
onMouseLeave={() => setHoveredLink(null)}
194+
>
142195
<XOutlined style={{ fontSize: "17px" }} />
143196
</Link>
144-
<Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
197+
<Link
198+
href="https://discord.com/invite/Zm99SKhhtA"
199+
target="_blank"
200+
style={{
201+
color: hoveredLink === "discord" ? "#19c6c7" : "rgba(255, 255, 255, 0.85)",
202+
...(hoveredLink === "discord" ? { transition: "color 0.3s ease" } : {}),
203+
}}
204+
onMouseEnter={() => setHoveredLink("discord")}
205+
onMouseLeave={() => setHoveredLink(null)}
206+
>
145207
<DiscordFilled style={{ fontSize: "17px" }} />
146208
</Link>
147-
<Link href="https://www.linkedin.com/company/accordproject/" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
209+
<Link
210+
href="https://www.linkedin.com/company/accordproject/"
211+
target="_blank"
212+
style={{
213+
color: hoveredLink === "linkedin" ? "#19c6c7" : "rgba(255, 255, 255, 0.85)",
214+
...(hoveredLink === "linkedin" ? { transition: "color 0.3s ease" } : {}),
215+
}}
216+
onMouseEnter={() => setHoveredLink("linkedin")}
217+
onMouseLeave={() => setHoveredLink(null)}
218+
>
148219
<LinkedinFilled style={{ fontSize: "17px" }} />
149220
</Link>
150221
</Space>
@@ -154,4 +225,4 @@ const CustomFooter: React.FC = () => {
154225
);
155226
};
156227

157-
export default CustomFooter;
228+
export default CustomFooter;

0 commit comments

Comments
 (0)