Changed footer credits to 'Website Made By' and moved styling from FooterLinkElement to Footer SCSS. Fixed placeholder link width issue when initiative image is missing.

Author: daanniill

components/Footer.js

@@ -98,50 +98,36 @@ function Footer() {
             <a className={styles['link-footer']} href="mailto: [email protected]">
               <span className="footer-text">[email protected]</span>
             </a>
-            <h3 className={styles['footer-header']}>Made By</h3>
-            <ul
-              className={`list-unstyled text-left ${styles['footer-committee-sidebar-container']}`}
-            >
-              <li
-                key={footerInitiativeLinks[0].slug} style={{ textAlign: 'center', width: '100%' }}
-              >
-                <FooterLinkElement
-                  path={footerInitiativeLinks[0].path}
-                  title={
-                    footerInitiativeLinks[0].useImage ? (
-                      <div
-                        style={{
-                          textAlign: 'center',
-                          display: 'flex',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        <img
-                          className="committee-sidebar-image"
-                          src={footerInitiativeLinks[0].wordmark_dark}
-                          alt={`ACM ${footerInitiativeLinks[0].name}`}
-                          style={{
-                            margin: '0 auto',
-                            transform: 'translateX(-7px) scale(0.85)',
-                          }}
-                          onError={(e) => {
-                            e.target.onerror = null;
-                            e.target.style.display = 'none';
-                            const parentNode = e.target.parentNode;
-                            parentNode.textContent = `ACM ${footerInitiativeLinks[0].name}`;
-                            parentNode.style.textAlign = 'center';
-                            parentNode.style.display = 'block';
-                          }}
-                        />
-                      </div>
-                    ) : (
-                      <span style={{ display: 'block', textAlign: 'center' }}>ACM {footerInitiativeLinks[0].name}</span>
-                    )
-                  }
-                  ext={false}
-                />
-              </li>
-            </ul>
+            <h3 className={styles['footer-header']}>Website Made By</h3>
+            <FooterLinkElement
+              path={footerInitiativeLinks[0].path}
+              title={
+                footerInitiativeLinks[0].useImage ? (
+                  <div className={styles['footer-image-container']}>
+                    <img
+                      className="committee-sidebar-image"
+                      src={footerInitiativeLinks[0].wordmark_dark}
+                      alt={`ACM ${footerInitiativeLinks[0].name}`}
+                      style={{
+                        margin: '0 auto',
+                        transform: 'translateX(-3px) scale(0.85)',
+                      }}
+                      onError={(e) => {
+                        e.target.onerror = null;
+                        e.target.style.display = 'none';
+                        const parentNode = e.target.parentNode;
+                        parentNode.textContent = `ACM ${footerInitiativeLinks[0].name}`;
+                        parentNode.style.textAlign = 'center';
+                        parentNode.style.display = 'block';
+                      }}
+                    />
+                  </div>
+                ) : (
+                  <span className="footer-text">ACM {footerInitiativeLinks[0].name}</span>
+                )
+              }
+              ext={false}
+            />
           </div>
           <div>
             <h3 className={styles['footer-header']}>About ACM at UCLA</h3>
@@ -163,7 +149,7 @@ function Footer() {
                     path={initiative.path}
                     title={
                       initiative.useImage ? (
-                        <div style={{ textAlign: 'center', display: 'flex', justifyContent: 'center' }}>
+                        <div className={styles['footer-image-container']}>
                           <img
                             className="committee-sidebar-image"
                             src={initiative.wordmark_dark}
@@ -184,7 +170,7 @@ function Footer() {
                           />
                         </div>
                       ) : (
-                        <span style={{ display: 'block', textAlign: 'center' }}>ACM {initiative.name}</span>
+                        <span className="footer-text">ACM {initiative.name}</span>
                       )
                     }
                     ext={false}

styles/components/Footer.module.scss

@@ -41,3 +41,9 @@
 .display-inline {
   display: inline;
 }
+
+.footer-image-container {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}