[Docs Site] Overhaul social icons styling (#17066)

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: {

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>