UI improvements

Author: zahidalidev

src/components/Hero.tsx

@@ -22,15 +22,15 @@ export function Hero() {
 						<div className="relative">
 							<h1
 								className={clsx(
-									'inline bg-gradient-to-l from-[#FF5543] to-[#A112FF] bg-clip-text font-display text-4xl tracking-tight text-black dark:text-transparent sm:text-5xl'
+									'inline dark:text-white bg-clip-text font-display text-4xl tracking-tight text-black dark:text-transparent sm:text-5xl'
 								)}
 							>
 								Documentation
 							</h1>
 
 							<p
 								className={clsx(
-									'mt-3 text-xl tracking-tight text-slate-700 dark:text-dark-text-primary sm:text-2xl'
+									'mt-3 text-xl tracking-tight text-slate-700 dark:text-[#A9A9A9] sm:text-2xl'
 								)}
 							>
 								Sourcegraph allows developers to rapidly search, write, and understand code by bringing insights from their entire codebase right into the editor.

src/components/ThemeSelector.tsx

@@ -75,7 +75,7 @@ export function ThemeSelector(
 										active && !selected,
 									'text-slate-700 dark:text-dark-text-secondary':
 										!active && !selected,
-									'bg-light-bg-2/80 dark:bg-dark-bg-3': active
+									'bg-vermilion-08 text-vermilion-11': active
 								},
 								'hover:bg-vermilion-08 hover:text-vermilion-11'
 							)

src/components/VersionSelector.tsx

@@ -39,7 +39,7 @@ export default function VersionSelector() {
 			<div>
 				<Menu.Button
 					className="inline-flex w-full items-center justify-center gap-x-1.5
-				rounded-md px-2 py-2 text-xs font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-light-border-2 hover:bg-slate-100 dark:bg-dark-bg-2 dark:text-dark-text-secondary dark:ring-inset dark:ring-dark-border"
+				rounded-md px-2 py-2 text-xs font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-light-border-2 hover:bg-vermilion-08 hover:text-vermilion-11 dark:bg-dark-bg-2 dark:text-dark-text-secondary dark:ring-inset dark:ring-dark-border"
 				>
 					{selectedVersion.name}
 					<ChevronDownIcon
@@ -71,8 +71,9 @@ export default function VersionSelector() {
 											setSelectedVersion(version)
 										}
 										className={clsx(
+											'hover:bg-vermilion-08 hover:text-vermilion-11',
 											active &&
-											'bg-light-bg-2 text-slate-900 dark:bg-dark-bg-3 dark:text-white',
+											'bg-vermilion-08 text-vermilion-11',
 											count === 0 && 'rounded-t-md',
 											'flex w-full items-center justify-between px-3 py-2'
 										)}
@@ -94,7 +95,7 @@ export default function VersionSelector() {
 								href="/legacy"
 								className={clsx(
 									active &&
-									'bg-light-bg-2 text-slate-900 dark:bg-dark-bg-3 dark:text-white',
+									'bg-vermilion-08 text-vermilion-11',
 									'flex items-center justify-between rounded-b-md px-3 py-2'
 								)}
 							>

src/components/mdx/CustomLink.tsx

@@ -75,7 +75,7 @@ export const CustomLink: React.FC<CustomLinkProps> = ({
 
 	// Internal links handled by Next.js Link component
 	return (
-		<Link href={cleanedHref} {...rest}>
+		<Link href={cleanedHref} {...rest} className='no-underline hover-underline'>
 			{children}
 			{/* Ensuring <a> is used inside <Link> for custom attributes like 'className' */}
 		</Link>

src/styles/tailwind.css

@@ -405,6 +405,14 @@
 		z-index: 0;
 	}
 
+	.no-underline {
+		text-decoration: none !important;
+	}
+	
+	.hover-underline:hover {
+		text-decoration: underline !important;
+	}
+
 	.sg-hero-bg-gradient {
 		background: radial-gradient(
 			116.94% 133.26% at 52.08% 100%,