Updated banner opacity (#1195)

<!-- 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.

Author: zahidalidev

src/components/Layout.tsx

@@ -12,6 +12,7 @@ import {useEffect, useState} from 'react';
 import {LogoMark} from './LogoMark';
 import VersionSelector from './VersionSelector';
 import {Search} from './search/Search';
+import {TopBanner} from './TopBanner'
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	return (
@@ -110,13 +111,14 @@ export function Layout({children}: {children: React.ReactNode}) {
 			<Header />
 
 			{/* Cody docs banner */}
-			{/* {isCodyDocs && !isopenCtxDocs && <TopBanner
+			{isCodyDocs && !isopenCtxDocs && <TopBanner
 				text="NEW: Introducing chat and search in a single input with Sourcegraph 6.0."
 				link="https://sourcegraph.com/blog/combining-chat-and-search"
 				linkText="Read here"
 				textColor="#ffffff"
 				backgroundColor="#F34E3F"
-			/>} */}
+				opacity='0.75'
+			/>}
 
 			{/* Openctx docs banner */}
 			{/* {isopenCtxDocs && <TopBanner

src/components/TopBanner.tsx

@@ -9,6 +9,16 @@ interface TopBannerProps {
   backgroundColor?: string;
   textColor?: string;
   linkText?: string;
+  opacity?: string;
+}
+
+const hexToRgb = (hex: string) => {
+  hex = hex.replace(/^#/, '');
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+
+  return `${r}, ${g}, ${b}`;
 }
 
 export function TopBanner({
@@ -17,14 +27,15 @@ export function TopBanner({
   backgroundColor = "#F34E3F",
   textColor = "white",
   linkText = 'new docs',
+  opacity = '1'
 }: TopBannerProps) {
   const [isVisible, setIsVisible] = useState(true);
 
   if (!isVisible) return null;
 
   return (
     <div
-      style={{ backgroundColor, color: textColor }}
+      style={{ backgroundColor: `rgba(${hexToRgb(backgroundColor)}, ${opacity})`, color: textColor }}
       className="fixed top-0 z-[100] min-h-[42px] w-full flex items-center justify-center px-4 py-2 md:py-0 md:h-[42px]"
     >
       <div className="flex items-center gap-2 text-xs sm:text-sm max-w-[90%] md:max-w-none text-center">