feat: color to social media icons (#106)

* feat: add color to social media icons

* fix: updates usage of socialIcon function

* fix: remove wrapper functions on socialIcons

* fix: shows relevant socialIcons color in profile and platform page

* refactor: removes template literals

Author: SuperGrut

src/components/Header.js

@@ -74,7 +74,7 @@ export default function Header({ session, user }) {
                   <span className="absolute -inset-1.5" />
                   <span className="sr-only">GitHub Repo</span>
                   <FontAwesomeIcon
-                    icon={socialIcon("github")}
+                    icon={socialIcon("github").icon}
                     className="h-6 w-6"
                     style={{ height: 25, width: 25 }}
                   />

src/components/list/Item.js

@@ -22,9 +22,13 @@ export default function Item({ data }) {
           )}
           {data.icon && (
             <FontAwesomeIcon
-              icon={socialIcon(data.icon)}
+              icon={socialIcon(data.icon).icon}
               className="h-12 w-12 flex-none rounded-full bg-gray-50 p-2"
-              style={{ height: 50, width: 50 }}
+              style={{
+                height: 50,
+                width: 50,
+                color: socialIcon(data.icon).color,
+              }}
             />
           )}
           <div className="min-w-0 flex-auto">
@@ -43,16 +47,19 @@ export default function Item({ data }) {
           <div className="flex -space-x-0.5">
             <dt className="sr-only">Social platforms</dt>
             {data.socials &&
-              data.socials.map((badge, key) => (
-                <dd key={key}>
-                  <FontAwesomeIcon
-                    icon={socialIcon(badge.icon)}
-                    label={badge.icon}
-                    className="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white"
-                    style={{ height: 25, width: 25 }}
-                  />
-                </dd>
-              ))}
+              data.socials.map((badge, key) => {
+                const { icon, color } = socialIcon(badge.icon);
+                return (
+                  <dd key={key}>
+                    <FontAwesomeIcon
+                      icon={icon}
+                      label={badge.icon}
+                      className="h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white"
+                      style={{ height: 25, width: 25, color: color }}
+                    />
+                  </dd>
+                );
+              })}
             <ChevronRightIcon
               className="h-5 w-5 flex-none text-gray-400 hidden sm:block"
               aria-hidden="true"

src/config/socialIcon.js

@@ -11,28 +11,35 @@ import { faThumbsUp } from "@fortawesome/free-regular-svg-icons";
 
 export default function socialIcon(name) {
   let icon = faThumbsUp;
+  let color = "#000000";
   switch (name) {
     case "twitter":
       icon = faTwitter;
+      color = "#1DA1F2";
       break;
     case "youtube":
       icon = faYoutube;
+      color = "#FF0000";
       break;
     case "twitch":
       icon = faTwitch;
+      color = " #6441A5";
       break;
     case "hashnode":
       icon = faHashnode;
+      color = "#1DA1F2";
       break;
     case "devto":
       icon = faDev;
+      color = "#0A0A0A";
       break;
     case "github":
       icon = faGithub;
+      color = "#DAD7CB";
       break;
     case "medium":
       icon = faMedium;
       break;
   }
-  return icon;
+  return { icon, color };
 }