Callout UI Improved (#984)

<!-- Explain the changes introduced in your PR -->

## Pull Request approval

You will need to get your PR approved by at least one member of the
Sourcegraph team. For reviews of docs formatting, styles, and component
usage, please tag the docs team via the #docs Slack channel.

src/components/mdx/Callout.tsx

@@ -5,26 +5,27 @@ import {
 	LightBulbIcon,
 	ExclamationTriangleIcon
 } from '@heroicons/react/24/outline';
+import { NotebookPen } from 'lucide-react';
 
 const styles = {
 	note: {
 		container:
-			'border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10',
+			'border-sky-500/20 bg-sky-50/50 dark:border-[#002533] dark:bg-[#001118]',
 		icon: 'text-sky-500',
 
-		body: 'text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300'
+		body: 'text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-[#85cfe9] dark:prose-code:text-[#85cfe9]'
 	},
 	info: {
 		container:
-			'dark:bg-slate-900 border-slate-300 dark:border-slate-200/20',
-		icon: 'text-inherit',
-		body: 'text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300'
+			'border-sky-500/20 bg-sky-50/50 dark:border-[#002533] dark:bg-[#001118]',
+		icon: 'text-sky-500',
+		body: 'text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-[#85cfe9] dark:prose-code:text-[#85cfe9]'
 	},
 	tip: {
 		container:
-			'border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10',
+			'border-sky-500/20 bg-sky-50/50 dark:border-[#002533] dark:bg-[#001118]',
 		icon: 'text-sky-500',
-		body: 'text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300'
+		body: 'text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-[#85cfe9] dark:prose-code:text-[#85cfe9]'
 	},
 	warning: {
 		container:
@@ -36,7 +37,7 @@ const styles = {
 
 const icons = {
 	note: (props: {className?: string}) => (
-		<InformationCircleIcon className={props.className} />
+		<NotebookPen className={props.className} />
 	),
 	info: (props: {className?: string}) => (
 		<InformationCircleIcon className={props.className} />

src/components/mdx/CustomLink.tsx

@@ -29,7 +29,7 @@ export const CustomLink: React.FC<CustomLinkProps> = ({
 	// Handling external links
 	if (href.startsWith('http')) {
 		return (
-			<a href={href} target="_blank" rel="noopener noreferrer" {...rest} className='no-underline hover-underline'> 
+			<a href={href} target="_blank" rel="noopener noreferrer" {...rest} className='no-underline text-vermilion-07'> 
 				{children}
 			</a>
 		);