From 8884ee3931cf7245fc45a2a222bd326934d79fc6 Mon Sep 17 00:00:00 2001
From: "dennis.ludwig" <dennis.ludwig@aoe.com>
Date: Tue, 29 Jun 2021 14:17:48 +0200
Subject: [PATCH] This fixes #49 social links

---
 package.json                           |   1 +
 src/components/FooterEnd/FooterEnd.tsx | 174 ++++++++++++++-----------
 src/styles/components/social-icon.scss |  37 ++----
 yarn.lock                              |   5 +
 4 files changed, 120 insertions(+), 97 deletions(-)

diff --git a/package.json b/package.json
index af67d61..09e4009 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "query-string": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "sass": "^1.34.0",
diff --git a/src/components/FooterEnd/FooterEnd.tsx b/src/components/FooterEnd/FooterEnd.tsx
index 8026c27..1b7bbe8 100644
--- a/src/components/FooterEnd/FooterEnd.tsx
+++ b/src/components/FooterEnd/FooterEnd.tsx
@@ -1,79 +1,107 @@
 import React from "react";
 import classNames from "classnames";
+import {
+  FaFacebookF,
+  FaTwitter,
+  FaLinkedinIn,
+  FaXing,
+  FaYoutube,
+  FaGithub,
+  FaInstagram,
+} from "react-icons/fa";
 import "./footerend.scss";
-export default function FooterEnd({ modifier }: { modifier?: "in-sidebar" }) {
-  return (
-    <div
-      className={classNames("footer-end", {
-        [`footer-end__${modifier}`]: modifier,
-      })}
-    >
-      <div className="footer-social">
-        <div className="footer-social__label">
-          <p>Follow us:</p>
-        </div>
-        <div className="footer-social__links">
-          <a
-            className="social-links-icon"
-            href="https://www.facebook.com/aoepeople"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-facebook social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://twitter.com/aoepeople"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-twitter social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://www.linkedin.com/company/aoe"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-linkedin social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://www.xing.com/company/aoe"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-xing social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://www.youtube.com/user/aoepeople"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-youtube social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://github.com/aoepeople"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-github social-icon"></i>
-          </a>
-        </div>
+
+interface Props {
+  modifier?: "in-sidebar";
+}
+
+const FooterEnd: React.FC<Props> = (modifier) => (
+  <div
+    className={classNames("footer-end", {
+      [`footer-end__${modifier}`]: modifier,
+    })}
+  >
+    <div className="footer-social">
+      <div className="footer-social__label">
+        <p>Follow us:</p>
       </div>
-      <div className="footer-copyright">
-        <p>
-          <a
-            href="https://www.aoe.com/en/imprint.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Legal Information
-          </a>
-        </p>
+      <div className="footer-social__links">
+        <a
+          href="https://www.facebook.com/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaFacebookF className="social-icon" />
+        </a>
+
+        <a
+          href="https://twitter.com/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaTwitter className="social-icon" />
+        </a>
+
+        <a
+          href="https://www.linkedin.com/company/aoe"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaLinkedinIn className="social-icon" />
+        </a>
+
+        <a
+          href="https://www.xing.com/company/aoe"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaXing className="social-icon" />
+        </a>
+
+        <a
+          href="https://www.instagram.com/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaInstagram className="social-icon" />
+        </a>
+
+        <a
+          href="https://www.youtube.com/user/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaYoutube className="social-icon" />
+        </a>
+
+        <a
+          href="https://github.com/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaGithub className="social-icon" />
+        </a>
       </div>
     </div>
-  );
-}
+    <div className="footer-copyright">
+      <p>
+        <a
+          href="https://www.aoe.com/en/imprint.html"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Legal Information
+        </a>
+      </p>
+    </div>
+  </div>
+);
+
+export default FooterEnd;
diff --git a/src/styles/components/social-icon.scss b/src/styles/components/social-icon.scss
index 90b3b55..ab186fe 100644
--- a/src/styles/components/social-icon.scss
+++ b/src/styles/components/social-icon.scss
@@ -1,27 +1,16 @@
-.social-icon {
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px; /* Preferred icon size */
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
+.social-icon-a {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  margin: 0 5px;
   background-color: var(--color-white);
   border-radius: 50%;
-  padding: 7px;
-  margin: 0 5px 0 5px;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: "liga";
+}
+
+.social-icon {
+  font-size: 16px; /* Preferred icon size */
+  color: var(--color-gray-dark);
 }
diff --git a/yarn.lock b/yarn.lock
index 7b226c3..0d08f11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9270,6 +9270,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"