Add song form overlay styles and integrate into song submission screen for improved UX

client/src/common/styles/components/song-form-overlay.sass

@@ -0,0 +1,54 @@
+// Song Form Overlay styles
+@import '../colors'
+
+.song-form-overlay
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  background-color: rgba(0, 0, 0, 0.75)
+  z-index: 1000
+  display: flex
+  align-items: center
+  justify-content: center
+  padding: 2rem
+  backdrop-filter: blur(5px)
+
+  .song-form
+    background-color: $card-bg
+    border: 4px solid #000
+    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5)
+    padding: 2rem
+    width: 100%
+    max-width: 600px
+    max-height: 90vh
+    overflow-y: auto
+    position: relative
+    image-rendering: pixelated
+    
+    h3
+      margin-top: 0
+      color: $primary
+      font-family: 'Press Start 2P', monospace
+      text-transform: uppercase
+      letter-spacing: 1px
+      text-shadow: 2px 2px 0 #000
+      margin-bottom: 1.5rem
+      position: relative
+      
+      &:after
+        content: ''
+        display: block
+        width: 100%
+        height: 4px
+        background-color: $primary
+        margin-top: 0.75rem
+        box-shadow: 2px 2px 0 #000
+        image-rendering: pixelated
+    
+    .form-actions
+      display: flex
+      justify-content: flex-end
+      gap: 1rem
+      margin-top: 2rem

client/src/common/styles/components/song-submission-screen.sass

@@ -64,6 +64,7 @@
         font-size: 1.2rem
         text-transform: uppercase
         margin-bottom: 1.5rem
+        text-shadow: 2px 2px 0 #000
         
         &:after
           content: ''
@@ -72,43 +73,59 @@
           height: 4px
           background-color: $secondary
           margin-top: 0.5rem
+          box-shadow: 2px 2px 0 #000
+          image-rendering: pixelated
           
     .song-item
-      margin-bottom: 1rem
+      margin-bottom: 1.5rem
-      padding: 0.75rem
+      padding: 1rem
       background-color: rgba(0, 0, 0, 0.3)
       border: 3px solid #000
       position: relative
+      box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5)
+      transition: transform 0.2s ease
+      
+      &:hover
+        transform: translateX(2px) translateY(-2px)
+        box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5)
       
       .song-title
         font-weight: bold
         font-family: 'Press Start 2P', monospace
         font-size: 0.9rem
         color: $text
-        margin-bottom: 0.5rem
+        margin-bottom: 0.75rem
+        text-shadow: 1px 1px 0 #000
+        letter-spacing: 0.5px
         
       .song-channel
         font-size: 0.8rem
         color: $text-muted
+        font-family: 'Press Start 2P', monospace
+        letter-spacing: 0.5px
+        text-shadow: 1px 1px 0 rgba(0,0,0,0.5)
         
       .remove-song
         position: absolute
-        top: 0.5rem
+        top: 0.75rem
-        right: 0.5rem
+        right: 0.75rem
         background: $danger
-        color: #000
+        color: #fff
         border: 2px solid #000
-        width: 24px
+        width: 28px
-        height: 24px
+        height: 28px
         font-family: 'Press Start 2P', monospace
         font-size: 0.7rem
         display: flex
         align-items: center
         justify-content: center
         cursor: pointer
+        box-shadow: 2px 2px 0 #000
+        image-rendering: pixelated
         
         &:hover
-          transform: scale(1.1)
+          transform: translateY(-2px)
+          box-shadow: 2px 4px 0 #000
         display: flex
         align-items: center
         gap: 0.5rem
@@ -122,6 +139,7 @@
         .song-card
           background-color: rgba(255, 255, 255, 0.05)
           border-radius: 0.5rem
+          box-sizing: border-box
           padding: 1rem
           position: relative
           transition: transform 0.2s, box-shadow 0.2s
@@ -172,7 +190,9 @@
         cursor: pointer
         gap: 0.5rem
         transition: all 0.2s
-        margin-top: 1rem
+        margin-top: 1.5rem
+        margin-bottom: 1rem
+        clear: both
         
         &:hover
           background-color: rgba($primary, 0.1)

client/src/common/styles/components/voting-screen.sass

@@ -65,6 +65,7 @@
   perspective: 1000px
 
 .song-card
+  box-sizing: border-box
   width: 100%
   max-width: 600px
   background-color: $card-bg

client/src/common/styles/components/youtube-search.sass

@@ -14,7 +14,6 @@
       background: rgba(0, 0, 0, 0.3)
       border: 3px solid #000
       color: $text
-      font-size: 1rem
       font-family: 'Press Start 2P', monospace
       font-size: 0.8rem
       box-shadow: 4px 4px 0 #000
@@ -46,52 +45,6 @@
     box-shadow: 4px 4px 0 #000
     padding: 1rem
     margin-bottom: 1.5rem
-
-    .video-details
-      h3
-        margin-top: 0.5rem
-        margin-bottom: 0.5rem
-        color: $secondary
-        font-family: 'Press Start 2P', monospace
-        font-size: 0.9rem
-
-      p
-        color: $text-muted
-        margin: 0 0 0.5rem
-        font-family: 'Press Start 2P', monospace
-        font-size: 0.7rem
-
-    .btn
-      margin-top: 1rem
-
-  .search-results
-    .result-item
-      background: rgba($card-bg, 0.7)
-      border: 2px solid #000
-      margin-bottom: 0.5rem
-      padding: 0.75rem
-      cursor: pointer
-      transition: all 0.2s ease
-
-      &:hover
-        border-color: $primary
-        background: rgba($card-bg, 0.9)
-        transform: translateX(4px)
-
-      &.selected
-        border-color: $secondary
-        border-width: 3px
-        box-shadow: 0 0 8px rgba($secondary, 0.5)
-
-      .result-title
-        font-family: 'Press Start 2P', monospace
-        font-size: 0.8rem
-        margin: 0 0 0.25rem
-        color: $text
-
-      .result-channel
-        font-size: 0.7rem
-        color: $text-muted
     border: 1px solid rgba($primary, 0.3)
 
     .preview-header
@@ -104,14 +57,12 @@
         margin: 0
         color: $primary
 
-      .preview-toggle
+      .external-link
-        background: transparent
-        border: none
         color: $secondary
-        cursor: pointer
+        text-decoration: none
+        font-size: 0.85rem
         padding: 0.25rem 0.5rem
         border-radius: 0.25rem
-        font-size: 0.85rem
 
         &:hover
           background: rgba($secondary, 0.15)
@@ -121,11 +72,31 @@
       gap: 1rem
       margin-bottom: 1rem
 
-      .selected-thumbnail
+      .thumbnail-container
+        position: relative
         width: 120px
-        height: 90px
+        flex-shrink: 0
-        object-fit: cover
+
-        border-radius: 0.25rem
+        .selected-thumbnail
+          width: 120px
+          height: 90px
+          object-fit: cover
+          border-radius: 0.25rem
+        
+        .play-overlay
+          position: absolute
+          top: 50%
+          left: 50%
+          transform: translate(-50%, -50%)
+          color: white
+          background: rgba(0, 0, 0, 0.6)
+          width: 36px
+          height: 36px
+          border-radius: 50%
+          display: flex
+          align-items: center
+          justify-content: center
+          opacity: 0.7
 
       .selected-info
         display: flex
@@ -140,7 +111,6 @@
           margin: 0
           color: $text-muted
           font-size: 0.9rem
-
     .video-preview
       position: relative
       padding-bottom: 56.25%
@@ -159,11 +129,16 @@
         border-radius: 0.5rem
 
   .search-results
-    background: rgba($card-bg, 0.6)
+    background: rgba($card-bg, 0.8)
     border-radius: 0.75rem
     padding: 1rem
-    max-height: 400px
+    max-height: 300px
     overflow-y: auto
+    margin-bottom: 1.5rem
+    border: 2px solid #000
+    box-shadow: 4px 4px 0 #000
+    position: relative
+    z-index: 10
 
     h4
       margin-top: 0

client/src/common/styles/main.sass

@@ -11,6 +11,7 @@
 @import './components/results-screen'
 @import './components/youtube-embed'
 @import './components/youtube-search'
+@import './components/song-form-overlay'
 
 // Global styles
 html, body
@@ -362,6 +363,7 @@ h1, h2, h3
     margin-bottom: 2rem
     
     .song-card
+      box-sizing: border-box
       background-color: rgba($card-bg, 0.8)
       backdrop-filter: blur(10px)
       border-radius: 0.75rem

client/src/components/SongSubmissionScreen.jsx

@@ -321,10 +321,11 @@ const SongSubmissionScreen = () => {
       </div>
       
       {isFormVisible && (
-        <form className="song-form" onSubmit={handleAddSong}>
+        <div className="song-form-overlay">
-          <h3>Add a Song</h3>
+          <form className="song-form" onSubmit={handleAddSong}>
-          
+            <h3>Add a Song</h3>
-          <div className="form-group search-group">
+            
+            <div className="form-group search-group">
             <label>Find a song</label>
             <div className="search-container">
               <input 
@@ -434,6 +435,7 @@ const SongSubmissionScreen = () => {
             </button>
           </div>
         </form>
+        </div>
       )}
       
       <div className="action-buttons">

client/src/main.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
-import "@fontsource/bangers";
+import "@fontsource/press-start-2p";
 import "./common/styles/main.sass";
 import { SocketProvider, GameProvider } from "./context/GameContext.jsx";