small adjustments and whatsapp support

weisser-dev · Jan 23, 2024 · 442d380 · 442d380
1 parent 96c80c1
commit 442d380
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/src/App.css b/src/App.css
@@ -2,4 +2,8 @@
     max-width: 600px;
     margin: 0 auto;
     box-sizing: border-box;
+}
+
+.icon-element {
+    text-align: center;
 }
diff --git a/src/components/SocialMedia/Element/SocialMediaElement.tsx b/src/components/SocialMedia/Element/SocialMediaElement.tsx
@@ -16,6 +16,8 @@ const SocialMediaElement: React.FC<SocialMediaElementProps> = ({href}) => {
       'youtube.com': {platform: 'YouTube', icon: 'fab fa-youtube'},
       'pinterest.com': {platform: 'Pinterest', icon: 'fab fa-pinterest'},
       'snapchat.com': {platform: 'SnapChat', icon: 'fab fa-snapchat'},
+      'github.com': {platform: 'GitHub', icon: 'fab fa-github'},
+      'wa.me': {platform: 'WhatsApp', icon: 'fab fa-whatsapp'},
     };
 
     for (const [platformURL, info] of Object.entries(platformMappings)) {
@@ -31,14 +33,14 @@ const SocialMediaElement: React.FC<SocialMediaElementProps> = ({href}) => {
   const title = `Visit ${platform}`;
 
   return (<a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label={title}
-      className={`${styles.socialMediaLink} ${platform.toLowerCase()}`}
-    >
-      <i className={`${styles.socialMediaIcon} ${platformIcon}`}></i>
-    </a>);
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label={title}
+    className={`${styles.socialMediaLink} ${platform.toLowerCase()}`}
+  >
+    <i className={`${styles.socialMediaIcon} ${platformIcon}`}></i>
+  </a>);
 };
 
 export default SocialMediaElement;
diff --git a/src/components/SocialMedia/Element/SocialMediaIcons.css b/src/components/SocialMedia/Element/SocialMediaIcons.css
@@ -13,7 +13,7 @@
 .fa-google-plus,.fa-google-plus-square{background-color:#CF3D2E;}
 .fa-html5{background-color:#E54D26;}
 .fa-instagram{background-color:#A1755C;}
-.fa-linkedin,.fa-linkedin-square{background-color:#0085AE;}
+.fa-linkedin,.fa-linkedin-square{background-color:#0077B5;}
 .fa-linux{background-color:#FBC002;color:#333;}
 .fa-maxcdn{background-color:#F6AE1C;}
 .fa-pagelines{background-color:#241E20;color:#3984EA;}
@@ -29,5 +29,6 @@
 .fa-vk{background-color:#375474;}
 .fa-weibo{background-color:#D72B2B;}
 .fa-windows{background-color:#12B6F3;}
+.fa-whatsapp{background-color:#25D366;}
 .fa-xing,.fa-xing-square{background-color:#00555C;}
 .fa-youtube,.fa-youtube-play,.fa-youtube-square{background-color:#C52F30;}