From a8b24ee19cab68777ff3dfe761f49276612f172c Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommmu <mahesh.svmr@gmail.com>
Date: Mon, 5 Jan 2026 22:03:14 -0800
Subject: [PATCH] added new changes of chrome extension of ui updates

---
 .../entrypoints/popup/App.tsx                 | 273 +++++++++++-------
 1 file changed, 168 insertions(+), 105 deletions(-)

diff --git a/apps/browser-extension/entrypoints/popup/App.tsx b/apps/browser-extension/entrypoints/popup/App.tsx
index a1a89176..3c16883a 100644
--- a/apps/browser-extension/entrypoints/popup/App.tsx
+++ b/apps/browser-extension/entrypoints/popup/App.tsx
@@ -41,7 +41,7 @@ const Tooltip = ({
 				type="button"
 				onMouseEnter={() => setIsVisible(true)}
 				onMouseLeave={() => setIsVisible(false)}
-				className="cursor-help bg-transparent border-none p-0 text-gray-400 hover:text-gray-600 transition-colors"
+				className="cursor-help bg-transparent border-none p-0 text-[#737373] transition-colors"
 			>
 				<svg
 					width="14"
@@ -306,50 +306,53 @@ function App() {
 			className="w-80 p-0 font-[Space_Grotesk,-apple-system,BlinkMacSystemFont,Segoe_UI,Roboto,sans-serif] bg-white rounded-lg relative overflow-hidden"
 			style={{
 				background: "linear-gradient(180deg, #0A0E14 0%, #05070A 100%)",
+				boxShadow:
+					"1.5px 1.5px 20px 0 rgba(0, 0, 0, 0.65), 1px 1.5px 2px 0 rgba(128, 189, 255, 0.07) inset, -0.5px -1.5px 4px 0 rgba(0, 35, 73, 0.40) inset",
 			}}
 		>
-			<div className="flex items-center justify-between gap-3 p-2.5 border-b border-gray-200 relative">
+			<div className="flex items-center justify-between gap-3 p-2.5 relative">
 				<img
 					alt="supermemory"
-					className="w-8 h-8 flex-shrink-0"
+					className="w-8 h-8 shrink-0"
 					src="./dark-transparent.svg"
 					style={{ width: "80%", height: "45px" }}
 				/>
 				{userSignedIn && (
 					<button
-						className="bg-none border-none text-base cursor-pointer text-gray-500 p-1 rounded transition-colors duration-200 hover:text-black hover:bg-gray-100"
+						className="bg-none border-none text-base cursor-pointer text-gray-500 p-1 rounded transition-colors duration-200"
 						onClick={handleSignOut}
 						title="Logout"
 						type="button"
 					>
 						<svg
+							width="19"
+							height="18"
+							viewBox="0 0 19 18"
 							fill="none"
-							height="16"
-							stroke="currentColor"
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							strokeWidth="2"
-							viewBox="0 0 24 24"
-							width="16"
+							xmlns="http://www.w3.org/2000/svg"
 						>
 							<title>Logout</title>
-							<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-							<polyline points="16,17 21,12 16,7" />
-							<line x1="21" x2="9" y1="12" y2="12" />
+							<path
+								d="M17 9H7.5M15 12L18 9L15 6M10 4V3C10 2.46957 9.78929 1.96086 9.41421 1.58579C9.03914 1.21071 8.53043 1 8 1H3C2.46957 1 1.96086 1.21071 1.58579 1.58579C1.21071 1.96086 1 2.46957 1 3V15C1 15.5304 1.21071 16.0391 1.58579 16.4142C1.96086 16.7893 2.46957 17 3 17H8C8.53043 17 9.03914 16.7893 9.41421 16.4142C9.78929 16.0391 10 15.5304 10 15V14"
+								stroke="#FAFAFA"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
 						</svg>
 					</button>
 				)}
 			</div>
-			<div className="p-4 min-h-[250px]">
+			<div className="p-4 min-h-[250px] pt-1">
 				{userSignedIn ? (
 					<div className="text-left">
 						{/* Tab Navigation */}
-						<div className="flex bg-gray-100 rounded-lg p-1 mb-4">
+						<div className="flex bg-[#000000] rounded-xl p-1 mb-4 border border-[#FFFFFF12]">
 							<button
-								className={`flex-1 py-2 px-3 bg-transparent border-none rounded-md text-sm font-medium cursor-pointer transition-all duration-200 outline-none appearance-none ${
+								className={`flex-1 py-2 px-3 bg-transparent border-none rounded-lg text-sm cursor-pointer transition-all duration-200 outline-none appearance-none ${
 									activeTab === "save"
-										? "bg-white text-black shadow-sm"
-										: "text-gray-500 hover:text-gray-700"
+										? "bg-linear-to-b from-[#0E141C] to-[#0F151F] text-white shadow-sm"
+										: "text-gray-500 hover:text-white"
 								}`}
 								onClick={() => setActiveTab("save")}
 								type="button"
@@ -357,10 +360,10 @@ function App() {
 								Save
 							</button>
 							<button
-								className={`flex-1 py-2 px-3 bg-transparent border-none rounded-md text-sm font-medium cursor-pointer transition-all duration-200 outline-none appearance-none ${
+								className={`flex-1 py-2 px-3 bg-transparent border-none rounded-lg text-sm cursor-pointer transition-all duration-200 outline-none appearance-none ${
 									activeTab === "imports"
-										? "bg-white text-black shadow-sm"
-										: "text-gray-500 hover:text-gray-700"
+										? "bg-linear-to-b from-[#0E141C] to-[#0F151F] text-white shadow-sm"
+										: "text-gray-500 hover:text-white"
 								}`}
 								onClick={() => setActiveTab("imports")}
 								type="button"
@@ -368,10 +371,10 @@ function App() {
 								Imports
 							</button>
 							<button
-								className={`flex-1 py-2 px-3 bg-transparent border-none rounded-md text-sm font-medium cursor-pointer transition-all duration-200 outline-none appearance-none ${
+								className={`flex-1 py-2 px-3 bg-transparent border-none rounded-lg text-sm cursor-pointer transition-all duration-200 outline-none appearance-none ${
 									activeTab === "settings"
-										? "bg-white text-black shadow-sm"
-										: "text-gray-500 hover:text-gray-700"
+										? "bg-linear-to-b from-[#0E141C] to-[#0F151F] text-white shadow-sm"
+										: "text-gray-500 hover:text-white"
 								}`}
 								onClick={() => setActiveTab("settings")}
 								type="button"
@@ -385,11 +388,26 @@ function App() {
 							<div className="flex flex-col gap-4 min-h-[200px]">
 								{/* Current Page Info */}
 								<div className="mb-0">
-									<div className="bg-gray-50 p-3 rounded-md border border-gray-200">
-										<h3 className="m-0 mb-1 text-sm font-semibold text-black overflow-hidden text-ellipsis whitespace-nowrap">
+									<div
+										className="bg-[#5B7EF50A] p-4 rounded-xl"
+										style={{
+											boxShadow:
+												"2px 2px 2px 0 rgba(0, 0, 0, 0.50) inset, -1px -1px 1px 0 rgba(82, 89, 102, 0.08) inset",
+										}}
+									>
+										<h3
+											className="m-0 mb-1 text-sm font-semibold text-white overflow-hidden text-ellipsis whitespace-nowrap"
+											style={{
+												background:
+													"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
+												backgroundClip: "text",
+												WebkitBackgroundClip: "text",
+												WebkitTextFillColor: "transparent",
+											}}
+										>
 											{currentTitle || "Current Page"}
 										</h3>
-										<p className="m-0 text-xs text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap">
+										<p className="m-0 text-xs text-[#737373] overflow-hidden text-ellipsis whitespace-nowrap">
 											{currentUrl}
 										</p>
 									</div>
@@ -398,36 +416,38 @@ function App() {
 								{/* Project Selection */}
 								<div className="mb-0">
 									<button
-										className="w-full bg-transparent border-none p-0 cursor-pointer text-left"
+										className="w-full bg-[#5B7EF50A] border-none p-4 cursor-pointer text-left rounded-xl flex justify-between items-center transition-colors duration-200 hover:bg-[#5B7EF520]"
 										onClick={handleShowProjectSelector}
 										type="button"
+										style={{
+											boxShadow:
+												"2px 2px 2px 0 rgba(0, 0, 0, 0.50) inset, -1px -1px 1px 0 rgba(82, 89, 102, 0.08) inset",
+										}}
 									>
-										<div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg border border-gray-200 transition-colors duration-200 hover:bg-gray-200 hover:border-gray-300">
-											<span className="text-sm font-medium text-gray-600">
-												Save to project:
+										<span className="text-sm font-medium text-[#737373]">
+											Save to project:
+										</span>
+										<div className="flex items-center gap-2">
+											<span className="text-sm font-medium text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-[120px]">
+												{defaultProject
+													? defaultProject.name
+													: "Default Project"}
 											</span>
-											<div className="flex items-center gap-2">
-												<span className="text-sm font-medium text-black overflow-hidden text-ellipsis whitespace-nowrap max-w-[120px]">
-													{defaultProject
-														? defaultProject.name
-														: "Default Project"}
-												</span>
-												<svg
-													aria-label="Select project"
-													className="text-gray-500 shrink-0 transition-transform duration-200 hover:text-gray-700 hover:translate-x-0.5"
-													fill="none"
-													height="16"
-													stroke="currentColor"
-													strokeLinecap="round"
-													strokeLinejoin="round"
-													strokeWidth="2"
-													viewBox="0 0 24 24"
-													width="16"
-												>
-													<title>Select project</title>
-													<path d="M9 18l6-6-6-6" />
-												</svg>
-											</div>
+											<svg
+												aria-label="Select project"
+												className="text-white shrink-0 transition-transform duration-200 hover:text-gray-700 transform rotate-90"
+												fill="none"
+												height="16"
+												stroke="currentColor"
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												strokeWidth="2"
+												viewBox="0 0 24 24"
+												width="16"
+											>
+												<title>Select project</title>
+												<path d="M9 18l6-6-6-6" />
+											</svg>
 										</div>
 									</button>
 								</div>
@@ -435,12 +455,43 @@ function App() {
 								{/* Save Button at Bottom */}
 								<div className="mt-auto pt-4">
 									<button
-										className="w-full py-3 px-6 bg-gray-700 text-white border-none rounded-3xl text-base font-medium cursor-pointer transition-colors duration-200 hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
+										className="w-full py-3 px-6 text-white border-none rounded-xl text-base font-medium cursor-pointer transition-colors duration-200 hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center justify-center gap-3"
 										disabled={saving}
 										onClick={handleSaveCurrentPage}
+										style={{
+											background:
+												"linear-gradient(182.37deg, #0ff0d2 -91.53%, #5bd3fb -67.8%, #1e0ff0 95.17%)",
+											boxShadow:
+												"1px 1px 2px 0px #1A88FF inset, 0 2px 10px 0 rgba(5, 1, 0, 0.20)",
+										}}
 										type="button"
 									>
-										{saving ? "Saving..." : "Save Current Page"}
+										<svg
+											width="20"
+											height="16"
+											viewBox="0 0 20 16"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<title>Add to Supermemory</title>
+											<g clip-path="url(#clip0_2_8851)">
+												<path
+													d="M19.4295 6.3108H12.1691V0H9.82324V6.84734C9.82324 7.57459 10.1103 8.27304 10.6206 8.78766L16.549 14.7664L18.2077 13.0936L13.8291 8.6779H19.4309V6.31219L19.4295 6.3108Z"
+													fill="#FAFAFA"
+												/>
+												<path
+													d="M1.08945 2.90808L5.46808 7.32387H-0.133789V9.68958H7.12669V16.0003H9.4725V9.15304C9.4725 8.42574 9.18541 7.72728 8.67512 7.21272L2.74809 1.23535L1.08945 2.90808Z"
+													fill="#FAFAFA"
+												/>
+											</g>
+											<defs>
+												<clipPath id="clip0_2_8851">
+													<rect width="19.7333" height="16" fill="white" />
+												</clipPath>
+											</defs>
+										</svg>
+
+										{saving ? "Saving..." : "Add to supermemory"}
 									</button>
 								</div>
 							</div>
@@ -450,7 +501,11 @@ function App() {
 								<div className="flex flex-col gap-4">
 									<div className="flex flex-col gap-2">
 										<button
-											className="w-full py-3 px-3 bg-white text-black border border-gray-200 rounded-md text-sm font-medium cursor-pointer flex items-center justify-start transition-colors duration-200 hover:bg-gray-50"
+											className="w-full p-4 bg-[#5B7EF50A] text-white border-none rounded-xl text-sm cursor-pointer flex items-center justify-start transition-colors duration-200 hover:bg-[#5B7EF520]"
+											style={{
+												boxShadow:
+													"2px 2px 2px 0 rgba(0, 0, 0, 0.50) inset, -1px -1px 1px 0 rgba(82, 89, 102, 0.08) inset",
+											}}
 											onClick={() => {
 												chrome.tabs.create({
 													url: "https://chatgpt.com/#settings/Personalization",
@@ -458,20 +513,22 @@ function App() {
 											}}
 											type="button"
 										>
-											<svg
-												aria-label="ChatGPT Logo"
-												className="w-4.5 h-4.5 shrink-0 mr-2"
-												fill="currentColor"
-												role="img"
-												viewBox="0 0 24 24"
-												xmlns="http://www.w3.org/2000/svg"
-											>
-												<title>OpenAI</title>
-												<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-											</svg>
 											<div className="text-left">
-												<p>Import ChatGPT Memories</p>
-												<p className="m-0 text-[10px] text-gray-500 leading-tight">
+												<p className="flex items-center gap-2 font-medium">
+													<svg
+														aria-label="ChatGPT Logo"
+														className="w-3 h-3.5 shrink-0"
+														fill="currentColor"
+														role="img"
+														viewBox="0 0 24 24"
+														xmlns="http://www.w3.org/2000/svg"
+													>
+														<title>OpenAI</title>
+														<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+													</svg>
+													Import ChatGPT Memories
+												</p>
+												<p className="m-0 text-[14px] text-[#737373] leading-tight">
 													open 'manage', save your memories to supermemory
 												</p>
 											</div>
@@ -480,7 +537,11 @@ function App() {
 
 									<div className="flex flex-col gap-2">
 										<button
-											className="w-full py-3 px-3 bg-white text-black border border-gray-200 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center transition-colors duration-200 outline-none appearance-none hover:bg-gray-50 focus:outline-none"
+											className="w-full p-4 bg-[#5B7EF50A] text-white border-none rounded-xl text-sm cursor-pointer flex items-center justify-center transition-colors duration-200 outline-none appearance-none hover:bg-[#5B7EF520] focus:outline-none"
+											style={{
+												boxShadow:
+													"2px 2px 2px 0 rgba(0, 0, 0, 0.50) inset, -1px -1px 1px 0 rgba(82, 89, 102, 0.08) inset",
+											}}
 											onClick={async () => {
 												const [activeTab] = await chrome.tabs.query({
 													active: true,
@@ -499,19 +560,21 @@ function App() {
 											}}
 											type="button"
 										>
-											<svg
-												aria-label="X Twitter Logo"
-												className="w-4.5 h-4.5 shrink-0 mr-2"
-												fill="currentColor"
-												viewBox="0 0 24 24"
-												xmlns="http://www.w3.org/2000/svg"
-											>
-												<title>X Twitter Logo</title>
-												<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-											</svg>
 											<div className="text-left">
-												<p>Import X/Twitter Bookmarks</p>
-												<p className="m-0 text-[10px] text-gray-500 leading-tight">
+												<p className="flex items-center gap-2 font-medium">
+													<svg
+														aria-label="X Twitter Logo"
+														className="w-3 h-3.5 shrink-0"
+														fill="currentColor"
+														viewBox="0 0 24 24"
+														xmlns="http://www.w3.org/2000/svg"
+													>
+														<title>X Twitter Logo</title>
+														<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+													</svg>
+													Import X/Twitter Bookmarks
+												</p>
+												<p className="m-0 text-[14px] text-[#737373] leading-tight">
 													Click on supermemory on top right to import bookmarks
 												</p>
 											</div>
@@ -520,28 +583,28 @@ function App() {
 								</div>
 							</div>
 						) : (
-							<div className="flex flex-col gap-4 min-h-[200px]">
+							<div className="flex flex-col gap-4 min-h-[200px] pl-1">
 								{/* Account Section */}
 								<div>
-									<h3 className="text-base font-semibold text-black mb-3">
-										Account
-									</h3>
-									<div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
+									<div className="flex flex-col gap-2">
 										{loadingUserData ? (
-											<div className="text-sm text-gray-500">
+											<div className="text-sm text-[#737373]">
 												Loading account data...
 											</div>
 										) : userData?.email ? (
-											<div className="flex justify-between items-center">
-												<span className="text-xs font-medium text-black">
-													Email
-												</span>
-												<span className="text-sm text-gray-600">
+											<>
+												<span className="font-medium text-base">Email</span>
+												<span
+													className="text-sm text-[#525966] p-3 rounded-xl bg-[#5B7EF50A]"
+													style={{
+														border: "1px solid rgba(255, 255, 255, 0.07)",
+													}}
+												>
 													{userData.email}
 												</span>
-											</div>
+											</>
 										) : (
-											<div className="text-sm text-gray-500">
+											<div className="text-sm text-[#737373]">
 												No email found
 											</div>
 										)}
@@ -550,13 +613,13 @@ function App() {
 
 								{/* Chat Integration Section */}
 								<div className="mb-4">
-									<h3 className="text-base font-semibold text-black mb-3">
+									<h3 className="text-base font-semibold mb-3">
 										Chat Integration
 									</h3>
-									<div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200 mb-3">
-										<div className="flex items-center">
+									<div className="flex items-center justify-between p-3 rounded-xl bg-[#5B7EF50A] mb-3">
+										<div className="flex items-center text-[#737373]">
 											<Tooltip content="Automatically search your memories while typing in chat apps">
-												<span className="text-sm font-medium text-black cursor-help">
+												<span className="text-sm font-medium cursor-help">
 													Auto Search Memories
 												</span>
 											</Tooltip>
@@ -570,13 +633,13 @@ function App() {
 												}
 												type="checkbox"
 											/>
-											<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-700" />
+											<div className="w-11 h-6 bg-[#21212180] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-[#262A30] after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#06080B] peer-checked:after:bg-[#15418A]" />
 										</label>
 									</div>
-									<div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
-										<div className="flex items-center">
+									<div className="flex items-center justify-between p-3 rounded-xl bg-[#5B7EF50A]">
+										<div className="flex items-center text-[#737373]">
 											<Tooltip content="Automatically save your prompts as memories in chat apps">
-												<span className="text-sm font-medium text-black cursor-help">
+												<span className="text-sm font-medium cursor-help">
 													Auto Capture Prompts
 												</span>
 											</Tooltip>
@@ -590,7 +653,7 @@ function App() {
 												}
 												type="checkbox"
 											/>
-											<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-700" />
+											<div className="w-11 h-6 bg-[#21212180] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-[#262A30] after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#06080B] peer-checked:after:bg-[#15418A]" />
 										</label>
 									</div>
 								</div>