From 59d786bfda50f16db44e8dc587b323ccc7287b4a Mon Sep 17 00:00:00 2001
From: "Andrew P. Harper" <115321970+KoopaCode@users.noreply.github.com>
Date: Mon, 16 Feb 2026 00:11:04 -0500
Subject: [PATCH] Refined launch style

Added .hudBar style & tweaked background gradient, reduce blur/saturation, Added scrollbar style.
---
 src/components/launch/LaunchWindow.module.css |  5 ++++
 src/components/launch/LaunchWindow.tsx        | 11 ++++---
 .../launch/SourceSelector.module.css          | 29 +++++++++++++++++++
 src/components/launch/SourceSelector.tsx      |  4 +--
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/components/launch/LaunchWindow.module.css b/src/components/launch/LaunchWindow.module.css
index 12d33b5..93ffa9b 100644
--- a/src/components/launch/LaunchWindow.module.css
+++ b/src/components/launch/LaunchWindow.module.css
@@ -2,6 +2,11 @@
   -webkit-app-region: drag;
 }
 
+.hudBar {
+  isolation: isolate;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+}
+
 .electronNoDrag {
   -webkit-app-region: no-drag;
 }
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index f82ae6c..322e17b 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -96,14 +96,13 @@ export function LaunchWindow() {
   return (
     <div className="w-full h-full flex items-center bg-transparent">
       <div
-        className={`w-full max-w-[500px] mx-auto flex items-center justify-between px-4 py-2 ${styles.electronDrag}`}
+        className={`w-full max-w-[500px] mx-auto flex items-center justify-between px-4 py-2 ${styles.electronDrag} ${styles.hudBar}`}
         style={{
           borderRadius: 16,
-          background: 'linear-gradient(135deg, rgba(30,30,40,0.92) 0%, rgba(20,20,30,0.85) 100%)',
-          backdropFilter: 'blur(32px) saturate(180%)',
-          WebkitBackdropFilter: 'blur(32px) saturate(180%)',
-          boxShadow: '0 4px 24px 0 rgba(0,0,0,0.28), 0 1px 3px 0 rgba(0,0,0,0.14) inset',
-          border: '1px solid rgba(80,80,120,0.22)',
+          background: 'linear-gradient(135deg, rgba(28,28,36,0.97) 0%, rgba(18,18,26,0.96) 100%)',
+          backdropFilter: 'blur(16px) saturate(140%)',
+          WebkitBackdropFilter: 'blur(16px) saturate(140%)',
+          border: '1px solid rgba(80,80,120,0.25)',
           minHeight: 44,
         }}
       >
diff --git a/src/components/launch/SourceSelector.module.css b/src/components/launch/SourceSelector.module.css
index e1aabf1..9430b99 100644
--- a/src/components/launch/SourceSelector.module.css
+++ b/src/components/launch/SourceSelector.module.css
@@ -39,3 +39,32 @@
   color: #a1a1aa;
   font-size: 0.75rem;
 }
+
+/* scrollbar */
+.sourceGridScroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(52, 178, 123, 0.5) rgba(40, 40, 50, 0.6);
+}
+
+.sourceGridScroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.sourceGridScroll::-webkit-scrollbar-track {
+  background: rgba(30, 30, 38, 0.5);
+  border-radius: 4px;
+  margin: 4px 0;
+}
+
+.sourceGridScroll::-webkit-scrollbar-thumb {
+  background: rgba(80, 80, 100, 0.6);
+  border-radius: 4px;
+}
+
+.sourceGridScroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(52, 178, 123, 0.6);
+}
+
+.sourceGridScroll::-webkit-scrollbar-thumb:active {
+  background: rgba(52, 178, 123, 0.8);
+}
diff --git a/src/components/launch/SourceSelector.tsx b/src/components/launch/SourceSelector.tsx
index 9ef7732..33c67c1 100644
--- a/src/components/launch/SourceSelector.tsx
+++ b/src/components/launch/SourceSelector.tsx
@@ -77,7 +77,7 @@ export function SourceSelector() {
           </TabsList>
             <div className="h-72 flex flex-col justify-stretch">
             <TabsContent value="screens" className="h-full">
-              <div className="grid grid-cols-2 gap-2 h-full overflow-y-auto pr-1 relative">
+              <div className={`grid grid-cols-2 gap-2 h-full overflow-y-auto pr-1 relative ${styles.sourceGridScroll}`}>
                 {screenSources.map(source => (
                   <Card
                     key={source.id}
@@ -107,7 +107,7 @@ export function SourceSelector() {
               </div>
             </TabsContent>
             <TabsContent value="windows" className="h-full">
-              <div className="grid grid-cols-2 gap-2 h-full overflow-y-auto pr-1 relative">
+              <div className={`grid grid-cols-2 gap-2 h-full overflow-y-auto pr-1 relative ${styles.sourceGridScroll}`}>
                 {windowSources.map(source => (
                   <Card
                     key={source.id}