From 2da9c929dd0daa769a69a1d64fe35821bdbfc9a9 Mon Sep 17 00:00:00 2001
From: zahidalidev <m.zahidalidev@gmail.com>
Date: Mon, 23 Jun 2025 23:09:38 +0500
Subject: [PATCH] Updated banner opacity

---
 src/components/Layout.tsx    |  6 ++++--
 src/components/TopBanner.tsx | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 15db2fdf1..d68ef84c6 100644
--- a/src/components/Layout.tsx
+++ b/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
diff --git a/src/components/TopBanner.tsx b/src/components/TopBanner.tsx
index 0190e1996..803a2580b 100644
--- a/src/components/TopBanner.tsx
+++ b/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,6 +27,7 @@ export function TopBanner({
   backgroundColor = "#F34E3F",
   textColor = "white",
   linkText = 'new docs',
+  opacity = '1'
 }: TopBannerProps) {
   const [isVisible, setIsVisible] = useState(true);
 
@@ -24,7 +35,7 @@ export function TopBanner({
 
   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">