Define the logos and colors only in one place, remove color duplication from from the css

Author: onnimonni

components/Footer.tsx

@@ -4,7 +4,7 @@ import { IoMoonSharp, IoSunnyOutline } from 'react-icons/io5'
 
 import * as config from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
-import { socialLinks } from './PageSocial'
+import { PageSocialButtons } from './PageSocial'
 
 import styles from './styles.module.css'
 
@@ -48,20 +48,7 @@ export function FooterImpl() {
       </div>
 
       <div className={styles.social}>
-        {socialLinks.map((action) => (
-          <a
-            key={action.name}
-            style={{ '--hover-color': action.color } as React.CSSProperties}
-            className={styles[action.name]}
-            href={action.href}
-            title={action.title}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            {action.icon({ size: 16 })}
-          </a>
-        ))}
-
+        <PageSocialButtons />
       </div>
     </footer>
   )

components/PageSocial.module.css

@@ -6,6 +6,19 @@
   color: var(--fg-color);
 }
 
+.socialLink:hover {
+  color: var(--hover-color);
+}
+
+.pageSocial .actionBgPane {
+  background: var(--hover-color);
+}
+
+.pageSocial .socialLink:hover {
+  color: var(--fg-color);
+  border-color: var(--hover-color);;
+}
+
 .action {
   position: relative;
   border-radius: 50%;
@@ -72,62 +85,6 @@
   fill: var(--fg-color);
 }
 
-.facebook .actionBgPane {
-  background: #3b5998;
-}
-.facebook:hover {
-  border-color: #3b5998;
-}
-
-.twitter .actionBgPane {
-  background: #2795e9;
-}
-.twitter:hover {
-  border-color: #2795e9;
-}
-
-.linkedin .actionBgPane {
-  background: #0077b5;
-}
-.linkedin:hover {
-  border-color: #0077b5;
-}
-
-.github .actionBgPane {
-  background: #c9510c;
-}
-.github:hover {
-  border-color: #c9510c;
-}
-
-.youtube .actionBgPane {
-  background: #ff0000;
-}
-.youtube:hover {
-  border-color: #ff0000;
-}
-
-.medium .actionBgPane {
-  background: #00ab6c;
-}
-.medium:hover {
-  border-color: #00ab6c;
-}
-
-.newsletter .actionBgPane {
-  background: #777777;
-}
-.newsletter:hover {
-  border-color: #777777;
-}
-
-.email .actionBgPane {
-  background: #777;
-}
-.email:hover {
-  border-color: #777;
-}
-
 @media only screen and (max-width: 768px) {
   .links {
     position: relative;

components/PageSocial.tsx

@@ -76,36 +76,23 @@ export const socialLinks: SocialLink[] = [
   config.bugtracker && {
     name: 'bugtracker',
     href: `${config.bugtracker}`,
-    title: `Bugtracker`,
+    title: 'Bugtracker',
     color: "#e24329",
     icon: IoIosBug
   }
 ].filter(Boolean)
 
-function generateCssFrag(prefix: string) {
-  return socialLinks.map((action) => (
-    `.social-link-${prefix}-${action.name} {}
-    .social-link-${prefix}-${action.name}:hover {
-      background: ${action.color};
-      color: white;
-    }
-    `
-  )).join('\n');
-}
-
 export function PageSocial(prefix: string) {
   return (
     <>
-      <style
-        dangerouslySetInnerHTML={{ __html: generateCssFrag("side") }}
-      />
       <div className={styles.pageSocial}>
         {socialLinks.map((action) => (
           <>
             <a
-              className={cs(styles.action, styles[action.name], `social-link-side-${action.name}`)}
-              href={action.href}
               key={action.name}
+              style={{ '--hover-color': action.color } as React.CSSProperties}
+              className={cs(styles.action, styles[action.name], styles.socialLink)}
+              href={action.href}
               title={action.title}
               target='_blank'
               rel='noopener noreferrer'
@@ -122,3 +109,23 @@ export function PageSocial(prefix: string) {
     </>
   )
 }
+
+export function PageSocialButtons() {
+  return (
+    <>
+      {socialLinks.map((action) => (
+        <a
+          key={action.name}
+          style={{ '--hover-color': action.color } as React.CSSProperties}
+          className={cs(styles[action.name], styles.socialLink)}
+          href={action.href}
+          title={action.title}
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          {action.icon({ size: 32 })}
+        </a>
+      ))}
+    </>
+  )
+}

components/styles.module.css

@@ -85,9 +85,6 @@
 .social a:hover {
   transition: color 50ms ease-out;
 }
-.social a:hover {
-  color: var(--hover-color);
-}
 
 .toggleDarkMode:hover {
   color: #2795e9;