Merge pull request #146 from KoopaCode/main

Refined Launch Styling

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;
 }

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,
         }}
       >

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);
+}

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}