Skip to content

Commit e5ccd89

Browse files
daanniilldaanniill
committed
Fix: added dev team credits and dev team logo to footer under REACH US AT
1 parent 714bf8d commit e5ccd89

File tree

1 file changed

+74
-96
lines changed

1 file changed

+74
-96
lines changed

‎components/Footer.js‎

Lines changed: 74 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,141 @@
1-
import Link from "next/link";
1+
import Link from 'next/link';
22

3-
import SocialMedia from "./SocialMedia";
4-
import committees from "../data/committees";
5-
import styles from "../styles/components/Footer.module.scss";
3+
import SocialMedia from './SocialMedia';
4+
import committees from '../data/committees';
5+
import styles from '../styles/components/Footer.module.scss';
66

77
const footerACMLinks = [
8-
{ title: "About", path: "/about" },
9-
{ title: "Events", path: "/events" },
10-
{ title: "General Meeting", path: "/gm" },
11-
{ title: "CS Town Hall", path: "/town-hall" },
12-
{ title: "Internship Program", path: "/internship" },
8+
{ title: 'About', path: '/about' },
9+
{ title: 'Events', path: '/events' },
10+
{ title: 'General Meeting', path: '/gm' },
11+
{ title: 'CS Town Hall', path: '/town-hall' },
12+
{ title: 'Internship Program', path: '/internship' },
1313
//{ title: 'Dev Team', path: '/dev' },
14-
{ title: "Sponsors", path: "/sponsors" },
15-
{ title: "Our Team", path: "/officers" },
14+
{ title: 'Sponsors', path: '/sponsors' },
15+
{ title: 'Our Team', path: '/officers' },
1616
{
17-
title: "Membership Portal",
18-
path: "https://members.uclaacm.com",
17+
title: 'Membership Portal',
18+
path: 'https://members.uclaacm.com',
1919
ext: true,
2020
},
2121
];
2222

2323
const footerInitiativeLinks = [
2424
{
25-
name: "Dev Team",
26-
slug: "dev",
27-
path: "/dev",
28-
wordmark_dark: "/images/dev/dev-team-footer.png",
25+
name: 'Dev Team',
26+
slug: 'dev',
27+
path: '/dev',
28+
wordmark_dark: '/images/dev/dev-team-footer.png',
2929
useImage: true,
3030
},
3131
{
32-
name: "Impact",
33-
slug: "impact",
34-
path: "/impact",
35-
wordmark_dark: "/images/impact/impact-footer.png",
32+
name: 'Impact',
33+
slug: 'impact',
34+
path: '/impact',
35+
wordmark_dark: '/images/impact/impact-footer.png',
3636
useImage: true,
3737
},
3838
{
39-
name: "JEDI",
40-
slug: "jedi",
41-
path: "/jedi",
42-
wordmark_dark: "/images/jedi/jedi-footer.png",
39+
name: 'JEDI',
40+
slug: 'jedi',
41+
path: '/jedi',
42+
wordmark_dark: '/images/jedi/jedi-footer.png',
4343
useImage: true,
4444
},
4545
];
4646

4747
function FooterLinkElement({ title, path, ext }) {
4848
return (
49-
<Link
49+
(<Link
5050
href={path}
51-
className={styles["link-footer"]}
52-
target={ext ? "_blank" : ""}
53-
rel={ext ? "noopener noreferrer" : ""}
54-
>
51+
className={styles['link-footer']}
52+
target={ext ? '_blank' : ''}
53+
rel={ext ? 'noopener noreferrer' : ''}>
54+
5555
{title}
56-
</Link>
56+
57+
</Link>)
5758
);
5859
}
5960

6061
function Footer() {
6162
return (
62-
<footer className={styles.footer}>
63+
(<footer className={styles.footer}>
6364
<nav
64-
className={styles["footer-inner"]}
65+
className={styles['footer-inner']}
6566
aria-labelledby="footer-navigation"
6667
>
6768
<h2 className="sr-only" id="footer-navigation">
6869
Footer Navigation
6970
</h2>
7071
<div className="grid-desktop-3">
7172
<div>
72-
<h3 className={styles["footer-header"]}>Find us on social media</h3>
73+
<h3 className={styles['footer-header']}>Find us on social media</h3>
7374
<SocialMedia type="light" />
7475
<div className="mt-1">
7576
<Link
7677
href="http://eepurl.com/hdEvNP"
7778
className="button tight"
7879
target="_blank"
79-
rel="noreferrer noopener"
80-
>
80+
rel="noreferrer noopener">
81+
8182
Join our Mailing List
83+
8284
</Link>
8385
</div>
8486
<div className="mt-1">
8587
<Link
8688
href="https://linktr.ee/acmucla"
8789
className="button tight"
8890
target="_blank"
89-
rel="noreferrer noopener"
90-
>
91+
rel="noreferrer noopener">
92+
9193
Linktree
94+
9295
</Link>
9396
</div>
94-
<p className={styles["footer-header"]}>Reach us at</p>
95-
<a className={styles["link-footer"]} href="mailto: [email protected]">
97+
<p className={styles['footer-header']}>Reach us at</p>
98+
<a className={styles['link-footer']} href="mailto: [email protected]">
9699
<span className="footer-text">[email protected]</span>
97100
</a>
98-
<h3 className={styles["footer-header"]}>Made By</h3>
101+
<h3 className={styles['footer-header']}>Made By</h3>
99102
<ul
100-
className={`list-unstyled text-left ${styles["footer-committee-sidebar-container"]}`}
103+
className={`list-unstyled text-left ${styles['footer-committee-sidebar-container']}`}
101104
>
102105
<li
103-
key={footerInitiativeLinks[0].slug}
104-
style={{ textAlign: "center", width: "100%" }}
106+
key={footerInitiativeLinks[0].slug} style={{ textAlign: 'center', width: '100%' }}
105107
>
106108
<FooterLinkElement
107109
path={footerInitiativeLinks[0].path}
108110
title={
109111
footerInitiativeLinks[0].useImage ? (
110112
<div
111113
style={{
112-
textAlign: "center",
113-
display: "flex",
114-
justifyContent: "center",
114+
textAlign: 'center',
115+
display: 'flex',
116+
justifyContent: 'center',
115117
}}
116118
>
117119
<img
118120
className="committee-sidebar-image"
119121
src={footerInitiativeLinks[0].wordmark_dark}
120122
alt={`ACM ${footerInitiativeLinks[0].name}`}
121123
style={{
122-
margin: "0 auto",
123-
transform: "translateX(-7px) scale(0.85)",
124+
margin: '0 auto',
125+
transform: 'translateX(-7px) scale(0.85)',
124126
}}
125127
onError={(e) => {
126128
e.target.onerror = null;
127-
e.target.style.display = "none";
129+
e.target.style.display = 'none';
128130
const parentNode = e.target.parentNode;
129131
parentNode.textContent = `ACM ${footerInitiativeLinks[0].name}`;
130-
parentNode.style.textAlign = "center";
131-
parentNode.style.display = "block";
132+
parentNode.style.textAlign = 'center';
133+
parentNode.style.display = 'block';
132134
}}
133135
/>
134136
</div>
135137
) : (
136-
<span style={{ display: "block", textAlign: "center" }}>
137-
ACM {footerInitiativeLinks[0].name}
138-
</span>
138+
<span style={{ display: 'block', textAlign: 'center' }}>ACM {footerInitiativeLinks[0].name}</span>
139139
)
140140
}
141141
ext={false}
@@ -144,69 +144,47 @@ function Footer() {
144144
</ul>
145145
</div>
146146
<div>
147-
<h3 className={styles["footer-header"]}>About ACM at UCLA</h3>
147+
<h3 className={styles['footer-header']}>About ACM at UCLA</h3>
148148
<ul className="list-unstyled">
149149
{footerACMLinks.map((link) => (
150150
<li key={link.path}>
151151
<FooterLinkElement {...link} />
152152
</li>
153153
))}
154154
</ul>
155-
<h3
156-
className={styles["footer-header"]}
157-
style={{ textAlign: "center" }}
158-
>
159-
ACM Initiatives
160-
</h3>
155+
<h3 className={styles['footer-header']} style={{ textAlign: 'center' }}>ACM Initiatives</h3>
161156
<ul
162-
className={`list-unstyled text-left ${styles["footer-committee-sidebar-container"]}`}
157+
className={`list-unstyled text-left ${styles['footer-committee-sidebar-container']}`}
163158
//style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}
164159
>
165160
{footerInitiativeLinks.map((initiative) => (
166-
<li
167-
key={initiative.slug}
168-
style={{ textAlign: "center", width: "100%" }}
169-
>
161+
<li key={initiative.slug} style={{ textAlign: 'center', width: '100%' }}>
170162
<FooterLinkElement
171163
path={initiative.path}
172164
title={
173165
initiative.useImage ? (
174-
<div
175-
style={{
176-
textAlign: "center",
177-
display: "flex",
178-
justifyContent: "center",
179-
}}
180-
>
166+
<div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center' }}>
181167
<img
182168
className="committee-sidebar-image"
183169
src={initiative.wordmark_dark}
184170
alt={`ACM ${initiative.name}`}
185171
style={{
186-
margin: "0 auto",
172+
margin: '0 auto',
187173
transform:
188-
initiative.name === "Impact"
189-
? "translateX(-8.5px)"
190-
: initiative.name === "Dev Team"
191-
? "translateX(-23px) scale(0.85)"
192-
: initiative.name === "JEDI"
193-
? "translateX(-18px) scale(0.94)"
194-
: "none",
174+
initiative.name === 'Impact' ? 'translateX(-8.5px)' : initiative.name === 'Dev Team' ? 'translateX(-23px) scale(0.85)' : initiative.name === 'JEDI' ? 'translateX(-18px) scale(0.94)' : 'none',
195175
}}
196176
onError={(e) => {
197177
e.target.onerror = null;
198-
e.target.style.display = "none";
178+
e.target.style.display = 'none';
199179
const parentNode = e.target.parentNode;
200180
parentNode.textContent = `ACM ${initiative.name}`;
201-
parentNode.style.textAlign = "center";
202-
parentNode.style.display = "block";
181+
parentNode.style.textAlign = 'center';
182+
parentNode.style.display = 'block';
203183
}}
204184
/>
205185
</div>
206186
) : (
207-
<span style={{ display: "block", textAlign: "center" }}>
208-
ACM {initiative.name}
209-
</span>
187+
<span style={{ display: 'block', textAlign: 'center' }}>ACM {initiative.name}</span>
210188
)
211189
}
212190
ext={false}
@@ -217,9 +195,9 @@ function Footer() {
217195
{/* TODO: consider where to put impact/jedi! events & initiatives? */}
218196
</div>
219197
<div>
220-
<h3 className={styles["footer-header"]}>Committees</h3>
198+
<h3 className={styles['footer-header']}>Committees</h3>
221199
<ul
222-
className={`list-unstyled text-left ${styles["footer-committee-sidebar-container"]}`}
200+
className={`list-unstyled text-left ${styles['footer-committee-sidebar-container']}`}
223201
>
224202
{committees.map(
225203
({ name, slug, external_link, wordmark_dark }) => {
@@ -239,19 +217,19 @@ function Footer() {
239217
alt={`ACM ${name}`}
240218
onError={(e) => {
241219
e.target.onerror = null;
242-
e.target.style.display = "none";
220+
e.target.style.display = 'none';
243221
const parentNode = e.target.parentNode;
244222
parentNode.textContent = `ACM ${name}`;
245-
parentNode.style.textAlign = "center";
246-
parentNode.style.display = "block";
223+
parentNode.style.textAlign = 'center';
224+
parentNode.style.display = 'block';
247225
}}
248226
/>
249227
}
250228
ext={external_link}
251229
/>
252230
</li>
253231
);
254-
}
232+
},
255233
)}
256234
</ul>
257235
</div>
@@ -271,12 +249,12 @@ function Footer() {
271249
</a>
272250
</div>
273251
<div>
274-
<span className={styles["footer-text-thin"]}>
252+
<span className={styles['footer-text-thin']}>
275253
&copy; ACM at UCLA 2025.
276254
</span>
277255
</div>
278256
</nav>
279-
</footer>
257+
</footer>)
280258
);
281259
}
282260

0 commit comments

Comments
 (0)