From fdd4ee0de7b4c4e18a0a9b403abb7134b9bd1746 Mon Sep 17 00:00:00 2001
From: Kian <kian@kian.org.uk>
Date: Tue, 24 Sep 2024 17:56:41 +0100
Subject: [PATCH] [Docs Site] Overhaul social icons styling (#17066)

---
 astro.config.mjs                           |  2 +-
 src/components/overrides/SocialIcons.astro | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index e42e3b55e64186..1798fa8352bbaf 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -125,7 +125,7 @@ export default defineConfig({
 			],
 			social: {
 				github: "https://github.com/cloudflare/cloudflare-docs",
-				twitter: "https://twitter.com/cloudflare",
+				"x.com": "https://twitter.com/cloudflare",
 				youtube: "https://www.youtube.com/cloudflare",
 			},
 			editLink: {
diff --git a/src/components/overrides/SocialIcons.astro b/src/components/overrides/SocialIcons.astro
index 9b219ec76c6c2c..f604de7681be3f 100644
--- a/src/components/overrides/SocialIcons.astro
+++ b/src/components/overrides/SocialIcons.astro
@@ -3,21 +3,30 @@ import type { Props } from "@astrojs/starlight/props";
 import Default from "@astrojs/starlight/components/SocialIcons.astro";
 
 const links = Object.entries({
-	"Product directory": "/products/",
-	"Learning paths": "/learning-paths/",
+	Products: "/products/",
+	Learning: "/learning-paths/",
 	Status: "https://www.cloudflarestatus.com/",
 	Support: "/support/contacting-cloudflare-support/",
-	"Log in": "https://dash.cloudflare.com",
+	Login: "https://dash.cloudflare.com",
 });
 ---
 
 <div class="items-center hidden lg:flex mx-auto">
 	{
 		links.map(([text, href]) => (
-			<a href={href} class="px-4 no-underline text-black dark:text-white">
+			<a
+				href={href}
+				class="px-4 no-underline text-[--sl-color-text] font-medium"
+			>
 				<span>{text}</span>
 			</a>
 		))
 	}
 </div>
 <Default {...Astro.props}><slot /></Default>
+
+<style>
+	:root {
+		--sl-icon-color: var(--sl-color-text);
+	}
+</style>