Merge pull request #9025 from sm1990/3rd-party-footer

Update 3rd party logos in the footer
ballerina-platform · May 13, 2024 · 248c84f · 248c84f
2 parents 2c1ac07 + 1fd2d16
commit 248c84f
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 19 deletions.
diff --git a/components/common/footer/Footer.js b/components/common/footer/Footer.js
@@ -18,10 +18,8 @@
 
 import * as React from 'react';
 import { Container, Row, Stack, Col } from 'react-bootstrap';
-import Image from 'next-image-export-optimizer';
 import Link from 'next/link';
 
-import { prefix } from '../../../utils/prefix';
 import styles from './Footer.module.css';
 
 export default function Footer() {
@@ -38,32 +36,32 @@ export default function Footer() {
                     <ul>
                       <li>
                         <a className={styles.footerLinkSM} href="https://github.com/ballerina-platform" target="_blank" rel="noreferrer" title="GitHub">
-                          <Image src={`${prefix}/images/sm-icons/github-white.svg`} width={18} height={18} alt="GitHub" />
+                          <i className="bi bi-github"></i>
                         </a>
                       </li>
                       <li>
                         <a className={styles.footerLinkSM} href="https://twitter.com/ballerinalang" target="_blank" rel="noreferrer" title="X">
-                          <Image src={`${prefix}/images/sm-icons/twitter-x-white.svg`} width={16} height={16} alt="X" />
+                          <i className="bi bi-twitter-x"></i>
                         </a>
                       </li>
                       <li>
                         <a className={styles.footerLinkSM} href="https://discord.gg/ballerinalang" target="_blank" rel="noreferrer" title="Discord">
-                          <Image src={`${prefix}/images/sm-icons/discord-white.svg`} width={17} height={17} alt="Discord" />
+                          <i className="bi bi-discord"></i>
                         </a>
                       </li>
                       <li>
                         <a className={styles.footerLinkSM} href="https://stackoverflow.com/questions/tagged/ballerina" target="_blank" rel="noreferrer" title="Stackoverflow">
-                          <Image src={`${prefix}/images/sm-icons/stackoverflow-white.svg`} width={15} height={18} alt="Stackoverflow" />
+                          <i className="bi bi-stack-overflow"></i>
                         </a>
                       </li>
                       <li>
                         <a className={styles.footerLinkSM} href="https://www.youtube.com/c/Ballerinalang" target="_blank" rel="noreferrer" title="YouTube">
-                          <Image src={`${prefix}/images/sm-icons/youtube-white.svg`} width={15} height={18} alt="YouTube" />
+                          <i className="bi bi-youtube"></i>
                         </a>
                       </li>
                       <li>
                         <a className={styles.footerLinkSM} href="https://www.linkedin.com/showcase/ballerinalang/" target="_blank" rel="noreferrer" title="LinkedIn">
-                          <Image src={`${prefix}/images/sm-icons/linkedin-white.svg`} width={16} height={16} alt="LinkedIn" />
+                          <i className="bi bi-linkedin"></i>
                         </a>
                       </li>
                     </ul>

diff --git a/components/common/footer/Footer.module.css b/components/common/footer/Footer.module.css
@@ -164,4 +164,13 @@
 
 .policyLinks ul {
     flex-wrap: wrap;
+}
+
+.footerLinkSM {
+    color: #ffffff;
+    font-size: 16px;
+}
+
+.footerLinkSM:hover {
+    color: #ffffff;
 }
diff --git a/components/home-page/intro/Intro.js b/components/home-page/intro/Intro.js
@@ -18,7 +18,6 @@
 
 import * as React from 'react';
 import { Row, Col, Container } from 'react-bootstrap';
-import Image from 'next-image-export-optimizer';
 import { BsCheck } from 'react-icons/bs';
 
 import { prefix } from '../../../utils/prefix';
@@ -93,24 +92,24 @@ export default function Intro() {
 
 
             <div className={styles.socialMediaPanel} >
-              <a className={styles.socialMediaIcons} href="https://github.com/ballerina-platform/ballerina-lang" target="_blank" rel="noreferrer"  title="GitHub">
-                <Image src={`${prefix}/images/sm-icons/github-white.svg`} width={25} height={25} alt="GitHub" />
+              <a className={styles.socialMediaIcons} href="https://github.com/ballerina-platform/ballerina-lang" target="_blank" rel="noreferrer" title="GitHub">
+                <i className="bi bi-github"></i>
               </a>
 
-              <a className={styles.socialMediaIcons} href="https://twitter.com/ballerinalang" target="_blank" rel="noreferrer"  title="X">
-                <Image src={`${prefix}/images/sm-icons/twitter-x-white.svg`} width={24} height={24} alt="X" />
+              <a className={styles.socialMediaIcons} href="https://twitter.com/ballerinalang" target="_blank" rel="noreferrer" title="X">
+                <i className="bi bi-twitter-x"></i>
               </a>
 
-              <a className={styles.socialMediaIcons} href="https://discord.gg/ballerinalang" target="_blank" rel="noreferrer"  title="Discord">
-                <Image src={`${prefix}/images/sm-icons/discord-white.svg`} width={25} height={25} alt="Discord" />
+              <a className={styles.socialMediaIcons} href="https://discord.gg/ballerinalang" target="_blank" rel="noreferrer" title="Discord">
+                <i className="bi bi-discord"></i>
               </a>
 
-              <a className={styles.socialMediaIcons} href="https://stackoverflow.com/questions/tagged/ballerina" target="_blank" rel="noreferrer"  title="Stackoverflow">
-                <Image src={`${prefix}/images/sm-icons/stackoverflow-white.svg`} width={25} height={25} alt="Stackoverflow" />
+              <a className={styles.socialMediaIcons} href="https://stackoverflow.com/questions/tagged/ballerina" target="_blank" rel="noreferrer" title="Stackoverflow">
+                <i className="bi bi-stack-overflow"></i>
               </a>
 
-              <a className={styles.socialMediaIcons} href="https://www.youtube.com/c/Ballerinalang" target="_blank" rel="noreferrer"  title="YouTube">
-                <Image src={`${prefix}/images/sm-icons/youtube-white.svg`} width={25} height={25} alt="YouTube" />
+              <a className={styles.socialMediaIcons} href="https://www.youtube.com/c/Ballerinalang" target="_blank" rel="noreferrer" title="YouTube">
+                <i className="bi bi-youtube"></i>
               </a>
 
               {/* <a className={styles.socialMediaIcons} href="https://www.linkedin.com/company/79080790" target="_blank" rel="noreferrer"  title="LinkedIn">

diff --git a/components/home-page/intro/Intro.module.css b/components/home-page/intro/Intro.module.css
@@ -84,6 +84,12 @@ a.homeIntroButton:hover {
     margin-top: 10px;
     margin-left: 10px;
     margin-right: 10px;
+    color: #ffffff;
+    font-size: 25px;
+}
+
+.socialMediaIcons:hover {
+    color:#ffffff;
 }
 
 .socialMediaPanel {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "algoliasearch": "^4.13.1",
     "arraybuffer-loader": "^1.0.8",
     "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.11.3",
     "dompurify": "^2.3.8",
     "dotenv": "^16.0.1",
     "fs": "^0.0.1-security",

diff --git a/pages/_app.js b/pages/_app.js
@@ -18,6 +18,7 @@
 
 import '../styles/globals.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-icons/font/bootstrap-icons.css';
 import {SSRProvider} from '@react-aria/ssr';
 
 function MyApp({ Component, pageProps }) {