This fixes #49 social links

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",

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 (
+interface Props {
-    <div
+  modifier?: "in-sidebar";
-      className={classNames("footer-end", {
+}
-        [`footer-end__${modifier}`]: modifier,
+
-      })}
+const FooterEnd: React.FC<Props> = (modifier) => (
-    >
+  <div
-      <div className="footer-social">
+    className={classNames("footer-end", {
-        <div className="footer-social__label">
+      [`footer-end__${modifier}`]: modifier,
-          <p>Follow us:</p>
+    })}
-        </div>
+  >
-        <div className="footer-social__links">
+    <div className="footer-social">
-          <a
+      <div className="footer-social__label">
-            className="social-links-icon"
+        <p>Follow us:</p>
-            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>
       </div>
-      <div className="footer-copyright">
+      <div className="footer-social__links">
-        <p>
+        <a
-          <a
+          href="https://www.facebook.com/aoepeople"
-            href="https://www.aoe.com/en/imprint.html"
+          target="_blank"
-            target="_blank"
+          rel="noopener noreferrer"
-            rel="noopener noreferrer"
+          className="social-icon-a"
-          >
+        >
-            Legal Information
+          <FaFacebookF className="social-icon" />
-          </a>
+        </a>
-        </p>
+
+        <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;

src/styles/components/social-icon.scss

@@ -1,27 +1,16 @@
-.social-icon {
+.social-icon-a {
-  font-weight: normal;
+  display: inline-flex;
-  font-style: normal;
+  justify-content: center;
-  font-size: 16px; /* Preferred icon size */
+  align-items: center;
-  display: inline-block;
+  box-sizing: border-box;
-  line-height: 1;
+  width: 30px;
-  text-transform: none;
+  height: 30px;
-  letter-spacing: normal;
+  margin: 0 5px;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
   background-color: var(--color-white);
   border-radius: 50%;
-  padding: 7px;
+}
-  margin: 0 5px 0 5px;
+
-
+.social-icon {
-  /* Support for all WebKit browsers. */
+  font-size: 16px; /* Preferred icon size */
-  -webkit-font-smoothing: antialiased;
+  color: var(--color-gray-dark);
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: "liga";
 }

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"