From 01efb73560abade537a7ecbbab0631334572aa18 Mon Sep 17 00:00:00 2001
From: Maanvi Chetwani <maanvichetwani21@gmail.com>
Date: Thu, 21 May 2026 20:59:26 +0100
Subject: [PATCH 1/4] add tooltips to icons in footer

Signed-off-by: Maanvi Chetwani <maanvichetwani21@gmail.com>
---
 src/components/SocialLinks-Color/index.js | 28 +++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/SocialLinks-Color/index.js b/src/components/SocialLinks-Color/index.js
index eaf460030bf18..8642e78941833 100644
--- a/src/components/SocialLinks-Color/index.js
+++ b/src/components/SocialLinks-Color/index.js
@@ -9,6 +9,7 @@ import youtube_icon from "../../assets/images/socialIcons/youtube.svg";
 import docker_icon from "../../assets/images/socialIcons/docker.svg";
 import linkedin_icon from "../../assets/images/socialIcons/linkedin-light.svg";
 import bluesky_icon from "../../assets/images/socialIcons/bluesky.svg";
+import { Tooltip } from "react-tooltip";
 import SocialLinksWrapper from "./sociallinkscolor.style";
 
 const SocialLinksColor = () => {
@@ -16,33 +17,43 @@ const SocialLinksColor = () => {
     <SocialLinksWrapper>
       <Col $xs={12}>
         <Row className="social_icons">
-          <a href="https://discuss.layer5.io" target="_blank" rel="noreferrer">
+          <a href="https://discuss.layer5.io" target="_blank" rel="noreferrer" data-tooltip-id="forum" data-tooltip-content="Layer5 Discussion Forum">
             <img height="30px" src={forum_icon} alt="forum" />
           </a>
+          <Tooltip id="forum" place="top" variant="dark" />
           <a
             className="mail_icon"
             href="mailto:community@layer5.io"
             target="_blank"
             rel="noreferrer"
+            data-tooltip-id="mail"
+            data-tooltip-content="Email Layer5 Community"
           >
             <img height="30px" src={mail_icon} alt="mail" />
           </a>
-          <a href="https://slack.layer5.io/" target="_blank" rel="noreferrer">
+          <Tooltip id="mail" place="top" variant="dark" />
+          <a href="https://slack.layer5.io/" target="_blank" rel="noreferrer" data-tooltip-id="slack" data-tooltip-content="Layer5 Slack">
             <img className="slack" height="30px" src={slack_icon} alt="slack" />
           </a>
+          <Tooltip id="slack" place="top" variant="dark" />
           <a
             href="https://x.com/layer5"
             target="_blank"
             rel="noreferrer"
+            data-tooltip-id="twitter"
+            data-tooltip-content="Layer5 Twitter"
             className="footer_twitter"
           >
             <TwitterIcon />
           </a>
+          <Tooltip id="twitter" place="top" variant="dark" />
           <a
             className="bluesky_icon"
             href="https://bsky.app/profile/layer5.bsky.social"
             target="_blank"
             rel="noreferrer"
+            data-tooltip-id="bluesky"
+            data-tooltip-content="Layer5 Bluesky"
           >
             <img
               className="bluesky"
@@ -51,18 +62,24 @@ const SocialLinksColor = () => {
               alt="bluesky"
             />
           </a>
+          <Tooltip id="bluesky" place="top" variant="dark" />
           <a
             href="https://github.com/layer5io"
             target="_blank"
             rel="noreferrer"
+            data-tooltip-id="github"
+            data-tooltip-content="Layer5 GitHub"
             className="github"
           >
             <img height="30px" src={github_icon} alt="github" />
           </a>
+          <Tooltip id="github" place="top" variant="dark" />
           <a
             href="https://www.linkedin.com/company/layer5"
             target="_blank"
             rel="noreferrer"
+            data-tooltip-id="linkedin"
+            data-tooltip-content="Layer5 LinkedIn"
           >
             <img
               className="linkedin"
@@ -71,11 +88,14 @@ const SocialLinksColor = () => {
               alt="linkedin"
             />
           </a>
+          <Tooltip id="linkedin" place="top" variant="dark" />
           <a
             className="youtube_icon"
             href="https://youtube.com/Layer5io?sub_confirmation=1"
             target="_blank"
             rel="noreferrer"
+            data-tooltip-id="youtube"
+            data-tooltip-content="Layer5 YouTube"
           >
             <img
               className="youtube"
@@ -84,11 +104,14 @@ const SocialLinksColor = () => {
               alt="youtube"
             />
           </a>
+          <Tooltip id="youtube" place="top" variant="dark" />
           <a
             className="docker_icon"
             href="https://hub.docker.com/u/layer5/"
             target="_blank"
             rel="noreferrer"
+            data-tooltip-id="docker"
+            data-tooltip-content="Layer5 Docker"
           >
             <img
               className="docker"
@@ -97,6 +120,7 @@ const SocialLinksColor = () => {
               alt="docker"
             />
           </a>
+          <Tooltip id="docker" place="top" variant="dark" />
         </Row>
       </Col>
     </SocialLinksWrapper>

From 5bbce5d749c61743acd01cf69d682ea543d8f29f Mon Sep 17 00:00:00 2001
From: Maanvi Chetwani <maanvichetwani21@gmail.com>
Date: Sat, 23 May 2026 13:38:08 +0100
Subject: [PATCH 2/4] using CustomTooltip from @sistent/sistent

Signed-off-by: Maanvi Chetwani <maanvichetwani21@gmail.com>
---
 src/components/SocialLinks-Color/index.js | 204 +++++++++++-----------
 1 file changed, 99 insertions(+), 105 deletions(-)

diff --git a/src/components/SocialLinks-Color/index.js b/src/components/SocialLinks-Color/index.js
index 8642e78941833..3e3e44b5937ac 100644
--- a/src/components/SocialLinks-Color/index.js
+++ b/src/components/SocialLinks-Color/index.js
@@ -9,7 +9,7 @@ import youtube_icon from "../../assets/images/socialIcons/youtube.svg";
 import docker_icon from "../../assets/images/socialIcons/docker.svg";
 import linkedin_icon from "../../assets/images/socialIcons/linkedin-light.svg";
 import bluesky_icon from "../../assets/images/socialIcons/bluesky.svg";
-import { Tooltip } from "react-tooltip";
+import { CustomTooltip } from "@sistent/sistent";
 import SocialLinksWrapper from "./sociallinkscolor.style";
 
 const SocialLinksColor = () => {
@@ -17,110 +17,104 @@ const SocialLinksColor = () => {
     <SocialLinksWrapper>
       <Col $xs={12}>
         <Row className="social_icons">
-          <a href="https://discuss.layer5.io" target="_blank" rel="noreferrer" data-tooltip-id="forum" data-tooltip-content="Layer5 Discussion Forum">
-            <img height="30px" src={forum_icon} alt="forum" />
-          </a>
-          <Tooltip id="forum" place="top" variant="dark" />
-          <a
-            className="mail_icon"
-            href="mailto:community@layer5.io"
-            target="_blank"
-            rel="noreferrer"
-            data-tooltip-id="mail"
-            data-tooltip-content="Email Layer5 Community"
-          >
-            <img height="30px" src={mail_icon} alt="mail" />
-          </a>
-          <Tooltip id="mail" place="top" variant="dark" />
-          <a href="https://slack.layer5.io/" target="_blank" rel="noreferrer" data-tooltip-id="slack" data-tooltip-content="Layer5 Slack">
-            <img className="slack" height="30px" src={slack_icon} alt="slack" />
-          </a>
-          <Tooltip id="slack" place="top" variant="dark" />
-          <a
-            href="https://x.com/layer5"
-            target="_blank"
-            rel="noreferrer"
-            data-tooltip-id="twitter"
-            data-tooltip-content="Layer5 Twitter"
-            className="footer_twitter"
-          >
-            <TwitterIcon />
-          </a>
-          <Tooltip id="twitter" place="top" variant="dark" />
-          <a
-            className="bluesky_icon"
-            href="https://bsky.app/profile/layer5.bsky.social"
-            target="_blank"
-            rel="noreferrer"
-            data-tooltip-id="bluesky"
-            data-tooltip-content="Layer5 Bluesky"
-          >
-            <img
-              className="bluesky"
-              height="30px"
-              src={bluesky_icon}
-              alt="bluesky"
-            />
-          </a>
-          <Tooltip id="bluesky" place="top" variant="dark" />
-          <a
-            href="https://github.com/layer5io"
-            target="_blank"
-            rel="noreferrer"
-            data-tooltip-id="github"
-            data-tooltip-content="Layer5 GitHub"
-            className="github"
-          >
-            <img height="30px" src={github_icon} alt="github" />
-          </a>
-          <Tooltip id="github" place="top" variant="dark" />
-          <a
-            href="https://www.linkedin.com/company/layer5"
-            target="_blank"
-            rel="noreferrer"
-            data-tooltip-id="linkedin"
-            data-tooltip-content="Layer5 LinkedIn"
-          >
-            <img
-              className="linkedin"
-              height="30px"
-              src={linkedin_icon}
-              alt="linkedin"
-            />
-          </a>
-          <Tooltip id="linkedin" place="top" variant="dark" />
-          <a
-            className="youtube_icon"
-            href="https://youtube.com/Layer5io?sub_confirmation=1"
-            target="_blank"
-            rel="noreferrer"
-            data-tooltip-id="youtube"
-            data-tooltip-content="Layer5 YouTube"
-          >
-            <img
-              className="youtube"
-              height="30px"
-              src={youtube_icon}
-              alt="youtube"
-            />
-          </a>
-          <Tooltip id="youtube" place="top" variant="dark" />
-          <a
-            className="docker_icon"
-            href="https://hub.docker.com/u/layer5/"
-            target="_blank"
-            rel="noreferrer"
-            data-tooltip-id="docker"
-            data-tooltip-content="Layer5 Docker"
-          >
-            <img
-              className="docker"
-              height="30px"
-              src={docker_icon}
-              alt="docker"
-            />
-          </a>
-          <Tooltip id="docker" place="top" variant="dark" />
+          <CustomTooltip title="Layer5 Discussion Forum" placement="top">
+            <a href="https://discuss.layer5.io" target="_blank" rel="noreferrer">
+              <img height="30px" src={forum_icon} alt="forum" />
+            </a>
+          </CustomTooltip>
+          <CustomTooltip title="Email Layer5 Community" placement="top">
+            <a className="mail_icon"
+              href="mailto:community@layer5.io"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img height="30px" src={mail_icon} alt="mail" />
+            </a>
+          </CustomTooltip>
+          <CustomTooltip title="Join Layer5 on Slack" placement="top">
+            <a href="https://slack.layer5.io/" target="_blank" rel="noreferrer">
+              <img className="slack" height="30px" src={slack_icon} alt="slack" />
+            </a>
+          </CustomTooltip>
+          <CustomTooltip title="Follow Layer5 on X (Twitter)" placement="top">
+            <a
+              href="https://x.com/layer5"
+              target="_blank"
+              rel="noreferrer"
+              className="footer_twitter"
+            >
+              <TwitterIcon />
+            </a>
+          </CustomTooltip>
+          <CustomTooltip title="Follow Layer5 on Bluesky" placement="top">
+            <a
+              className="bluesky_icon"
+              href="https://bsky.app/profile/layer5.bsky.social"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                className="bluesky"
+                height="30px"
+                src={bluesky_icon}
+                alt="bluesky"
+              />
+            </a>
+          </CustomTooltip>
+          <CustomTooltip title="Layer5 on GitHub" placement="top">
+            <a
+              href="https://github.com/layer5io"
+              target="_blank"
+              rel="noreferrer"
+              className="github"
+            >
+              <img height="30px" src={github_icon} alt="github" />
+            </a>
+          </CustomTooltip>
+          <CustomTooltip title="Layer5 on LinkedIn" placement="top">
+            <a
+              href="https://www.linkedin.com/company/layer5"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                className="linkedin"
+                height="30px"
+                src={linkedin_icon}
+                alt="linkedin"
+              />
+            </a>
+          </CustomTooltip>
+          <CustomTooltip title="Layer5 on YouTube" placement="top">
+            <a
+              className="youtube_icon"
+              href="https://youtube.com/Layer5io?sub_confirmation=1"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                className="youtube"
+                height="30px"
+                src={youtube_icon}
+                alt="youtube"
+              />
+            </a>
+          </CustomTooltip>
+          <CustomTooltip title="Layer5 on Docker Hub" placement="top">
+            <a
+              className="docker_icon"
+              href="https://hub.docker.com/u/layer5/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                className="docker"
+                height="30px"
+                src={docker_icon}
+                alt="docker"
+              />
+            </a>
+          </CustomTooltip>
         </Row>
       </Col>
     </SocialLinksWrapper>

From 429071701ca8d1204617f541904b2c6d3675223d Mon Sep 17 00:00:00 2001
From: Maanvi Chetwani <maanvichetwani21@gmail.com>
Date: Mon, 25 May 2026 21:23:32 +0100
Subject: [PATCH 3/4] reduce tooltip size on footer social media icons

Signed-off-by: Maanvi Chetwani <maanvichetwani21@gmail.com>
---
 src/components/SocialLinks-Color/index.js | 27 +++++++++++++++--------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/SocialLinks-Color/index.js b/src/components/SocialLinks-Color/index.js
index 3e3e44b5937ac..6a9da8e1ba8d4 100644
--- a/src/components/SocialLinks-Color/index.js
+++ b/src/components/SocialLinks-Color/index.js
@@ -12,17 +12,26 @@ import bluesky_icon from "../../assets/images/socialIcons/bluesky.svg";
 import { CustomTooltip } from "@sistent/sistent";
 import SocialLinksWrapper from "./sociallinkscolor.style";
 
+const tooltipStyles = {
+  tooltip: {
+    sx: {
+      fontSize: "0.65rem",
+      padding: "3px 6px",
+    },
+  },
+};
+
 const SocialLinksColor = () => {
   return (
     <SocialLinksWrapper>
       <Col $xs={12}>
         <Row className="social_icons">
-          <CustomTooltip title="Layer5 Discussion Forum" placement="top">
+          <CustomTooltip title="Layer5 Discussion Forum" placement="top" componentsProps={tooltipStyles}>
             <a href="https://discuss.layer5.io" target="_blank" rel="noreferrer">
               <img height="30px" src={forum_icon} alt="forum" />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Email Layer5 Community" placement="top">
+          <CustomTooltip title="Email Layer5 Community" placement="top" componentsProps={tooltipStyles}>
             <a className="mail_icon"
               href="mailto:community@layer5.io"
               target="_blank"
@@ -31,12 +40,12 @@ const SocialLinksColor = () => {
               <img height="30px" src={mail_icon} alt="mail" />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Join Layer5 on Slack" placement="top">
+          <CustomTooltip title="Join Layer5 on Slack" placement="top" componentsProps={tooltipStyles}>
             <a href="https://slack.layer5.io/" target="_blank" rel="noreferrer">
               <img className="slack" height="30px" src={slack_icon} alt="slack" />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Follow Layer5 on X (Twitter)" placement="top">
+          <CustomTooltip title="Follow Layer5 on X (Twitter)" placement="top" componentsProps={tooltipStyles}>
             <a
               href="https://x.com/layer5"
               target="_blank"
@@ -46,7 +55,7 @@ const SocialLinksColor = () => {
               <TwitterIcon />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Follow Layer5 on Bluesky" placement="top">
+          <CustomTooltip title="Follow Layer5 on Bluesky" placement="top" componentsProps={tooltipStyles}>
             <a
               className="bluesky_icon"
               href="https://bsky.app/profile/layer5.bsky.social"
@@ -61,7 +70,7 @@ const SocialLinksColor = () => {
               />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Layer5 on GitHub" placement="top">
+          <CustomTooltip title="Layer5 on GitHub" placement="top" componentsProps={tooltipStyles}>
             <a
               href="https://github.com/layer5io"
               target="_blank"
@@ -71,7 +80,7 @@ const SocialLinksColor = () => {
               <img height="30px" src={github_icon} alt="github" />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Layer5 on LinkedIn" placement="top">
+          <CustomTooltip title="Layer5 on LinkedIn" placement="top" componentsProps={tooltipStyles}>
             <a
               href="https://www.linkedin.com/company/layer5"
               target="_blank"
@@ -85,7 +94,7 @@ const SocialLinksColor = () => {
               />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Layer5 on YouTube" placement="top">
+          <CustomTooltip title="Layer5 on YouTube" placement="top" componentsProps={tooltipStyles}>
             <a
               className="youtube_icon"
               href="https://youtube.com/Layer5io?sub_confirmation=1"
@@ -100,7 +109,7 @@ const SocialLinksColor = () => {
               />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Layer5 on Docker Hub" placement="top">
+          <CustomTooltip title="Layer5 on Docker Hub" placement="top" componentsProps={tooltipStyles}>
             <a
               className="docker_icon"
               href="https://hub.docker.com/u/layer5/"

From c5a51c42141385212644685097e7d384e74ef35e Mon Sep 17 00:00:00 2001
From: Maanvi Chetwani <maanvichetwani21@gmail.com>
Date: Mon, 25 May 2026 21:57:57 +0100
Subject: [PATCH 4/4] reduce tooltip size

Signed-off-by: Maanvi Chetwani <maanvichetwani21@gmail.com>
---
 src/components/SocialLinks-Color/index.js | 27 ++++++++---------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/components/SocialLinks-Color/index.js b/src/components/SocialLinks-Color/index.js
index 6a9da8e1ba8d4..f353c8b05bce1 100644
--- a/src/components/SocialLinks-Color/index.js
+++ b/src/components/SocialLinks-Color/index.js
@@ -12,26 +12,17 @@ import bluesky_icon from "../../assets/images/socialIcons/bluesky.svg";
 import { CustomTooltip } from "@sistent/sistent";
 import SocialLinksWrapper from "./sociallinkscolor.style";
 
-const tooltipStyles = {
-  tooltip: {
-    sx: {
-      fontSize: "0.65rem",
-      padding: "3px 6px",
-    },
-  },
-};
-
 const SocialLinksColor = () => {
   return (
     <SocialLinksWrapper>
       <Col $xs={12}>
         <Row className="social_icons">
-          <CustomTooltip title="Layer5 Discussion Forum" placement="top" componentsProps={tooltipStyles}>
+          <CustomTooltip title="Layer5 Discussion Forum" placement="top" variant="small">
             <a href="https://discuss.layer5.io" target="_blank" rel="noreferrer">
               <img height="30px" src={forum_icon} alt="forum" />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Email Layer5 Community" placement="top" componentsProps={tooltipStyles}>
+          <CustomTooltip title="Email Layer5 Community" placement="top" variant="small">
             <a className="mail_icon"
               href="mailto:community@layer5.io"
               target="_blank"
@@ -40,12 +31,12 @@ const SocialLinksColor = () => {
               <img height="30px" src={mail_icon} alt="mail" />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Join Layer5 on Slack" placement="top" componentsProps={tooltipStyles}>
+          <CustomTooltip title="Join Layer5 on Slack" placement="top" variant="small">
             <a href="https://slack.layer5.io/" target="_blank" rel="noreferrer">
               <img className="slack" height="30px" src={slack_icon} alt="slack" />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Follow Layer5 on X (Twitter)" placement="top" componentsProps={tooltipStyles}>
+          <CustomTooltip title="Follow Layer5 on X (Twitter)" placement="top" variant="small">
             <a
               href="https://x.com/layer5"
               target="_blank"
@@ -55,7 +46,7 @@ const SocialLinksColor = () => {
               <TwitterIcon />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Follow Layer5 on Bluesky" placement="top" componentsProps={tooltipStyles}>
+          <CustomTooltip title="Follow Layer5 on Bluesky" placement="top" variant="small">
             <a
               className="bluesky_icon"
               href="https://bsky.app/profile/layer5.bsky.social"
@@ -70,7 +61,7 @@ const SocialLinksColor = () => {
               />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Layer5 on GitHub" placement="top" componentsProps={tooltipStyles}>
+          <CustomTooltip title="Layer5 on GitHub" placement="top" variant="small">
             <a
               href="https://github.com/layer5io"
               target="_blank"
@@ -80,7 +71,7 @@ const SocialLinksColor = () => {
               <img height="30px" src={github_icon} alt="github" />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Layer5 on LinkedIn" placement="top" componentsProps={tooltipStyles}>
+          <CustomTooltip title="Layer5 on LinkedIn" placement="top" variant="small">
             <a
               href="https://www.linkedin.com/company/layer5"
               target="_blank"
@@ -94,7 +85,7 @@ const SocialLinksColor = () => {
               />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Layer5 on YouTube" placement="top" componentsProps={tooltipStyles}>
+          <CustomTooltip title="Layer5 on YouTube" placement="top" variant="small">
             <a
               className="youtube_icon"
               href="https://youtube.com/Layer5io?sub_confirmation=1"
@@ -109,7 +100,7 @@ const SocialLinksColor = () => {
               />
             </a>
           </CustomTooltip>
-          <CustomTooltip title="Layer5 on Docker Hub" placement="top" componentsProps={tooltipStyles}>
+          <CustomTooltip title="Layer5 on Docker Hub" placement="top" variant="small">
             <a
               className="docker_icon"
               href="https://hub.docker.com/u/layer5/"