Modernize UI design with updated colors, typography, and components

Co-authored-by: ArnavSingh76533 <160649079+ArnavSingh76533@users.noreply.github.com>

components/Footer.tsx

@@ -9,16 +9,16 @@ interface Props {
 
 const Footer: FC<Props> = ({ error }) => {
   return (
-    <footer className={"flex flex-col bg-dark-900 py-1 px-4"}>
-      {error && <div>Error {error}</div>}
-      <div className={"text-sm flex flex-col gap-1 sm:flex-row sm:items-center"}>
-        <div className={"flex flex-row items-center"}>
+    <footer className={"flex flex-col bg-gradient-to-r from-dark-900 to-dark-800 py-3 px-6 border-t border-dark-700/50 mt-auto"}>
+      {error && <div className="text-red-400 font-medium mb-2">Error {error}</div>}
+      <div className={"text-sm flex flex-col gap-2 sm:flex-row sm:items-center text-dark-400"}>
+        <div className={"flex flex-row items-center gap-1"}>
           <IconCopyright sizeClassName={"h-3 w-3"}/>
           <NewTabLink href={"t.me/yucant"}>Charlie</NewTabLink>
-          2022,
+          2022
         </div>
 
-        <div>
+        <div className="flex flex-row items-center gap-1">
           Icons by
           <NewTabLink href={"https://heroicons.com"}>Heroicons</NewTabLink>
           and
@@ -26,10 +26,10 @@ const Footer: FC<Props> = ({ error }) => {
         </div>
 
         <NewTabLink
-          className={"ml-auto flex items-center"}
+          className={"ml-auto flex items-center gap-1 hover:text-primary-500 transition-colors"}
           href={"shivam413-Streamer.hf.space"}
         >
-          <IconGithub className={"mr-1"} /> Github
+          <IconGithub className={"w-4 h-4"} /> Github
         </NewTabLink>
       </div>
     </footer>

components/Navbar.tsx

@@ -12,11 +12,11 @@ const Navbar = ({ roomId }: { roomId?: string }) => {
   const [showShare, setShowShare] = useState(false)
 
   return (
-    <div className={"py-1 px-2 flex flex-row gap-1 items-stretch bg-dark-900"}>
+    <div className={"py-2 px-4 flex flex-row gap-2 items-stretch bg-gradient-to-r from-dark-900 to-dark-800 border-b border-dark-700/50 shadow-lg"}>
       <Link
         href={"/"}
         className={
-          "flex p-1 shrink-0 flex-row gap-1 items-center rounded action"
+          "flex p-2 shrink-0 flex-row gap-2 items-center rounded-lg action"
         }
       >
         <Image
@@ -24,8 +24,9 @@ const Navbar = ({ roomId }: { roomId?: string }) => {
           alt={"Web-SyncPlay logo"}
           width={36}
           height={36}
+          className="rounded-lg"
         />
-        <span className={"hide-below-sm"}>{getSiteName()}</span>
+        <span className={"hide-below-sm font-semibold text-lg"}>{getSiteName()}</span>
       </Link>
       {roomId && (
         <>
@@ -34,21 +35,21 @@ const Navbar = ({ roomId }: { roomId?: string }) => {
             show={showShare}
             close={() => setShowShare(false)}
           >
-            <div>Share this link to let more people join in on the fun</div>
+            <div className="text-dark-300 mb-3">Share this link to let more people join in on the fun</div>
             <InputClipboardCopy
-              className={"bg-dark-1000"}
+              className={"bg-dark-1000 rounded-lg"}
               value={getSiteDomain() + "/room/" + roomId}
             />
           </Modal>
           <Button
             tooltip={"Share the room link"}
             id={"navbar"}
-            actionClasses={"hover:bg-primary-800 active:bg-primary-700"}
-            className={"ml-auto p-2 bg-primary-900"}
+            actionClasses={"hover:bg-primary-700 active:bg-primary-800 shadow-md hover:shadow-glow"}
+            className={"ml-auto px-4 py-2 bg-primary-600 font-medium"}
             onClick={() => setShowShare(true)}
           >
             <div className={"flex items-center mx-1"}>
-              <IconShare className={"mr-1"} />
+              <IconShare className={"mr-2"} />
               Share
             </div>
           </Button>
@@ -60,6 +61,9 @@ const Navbar = ({ roomId }: { roomId?: string }) => {
         place={"bottom"}
         style={{
           backgroundColor: "var(--dark-700)",
+          borderRadius: "0.5rem",
+          padding: "0.5rem 0.75rem",
+          fontSize: "0.875rem",
         }}
       />
     </div>

components/Room.tsx

@@ -72,14 +72,15 @@ const Room: FC<Props> = ({ id }) => {
   }
 
   return (
-    <div className={"flex flex-col sm:flex-row gap-1"}>
+    <div className={"flex flex-col sm:flex-row gap-2"}>
       <div className={"grow"}>
         <Player roomId={id} socket={socket} />
 
-        <div className={"flex flex-row gap-1 p-1"}>
+        <div className={"flex flex-row gap-2 p-2 bg-dark-900/50 rounded-lg border border-dark-700/50 mt-2"}>
           <Button
             tooltip={"Do a forced manual sync"}
-            className={"p-2 flex flex-row gap-1 items-center"}
+            className={"px-3 py-2 flex flex-row gap-2 items-center"}
+            actionClasses={"bg-dark-800 hover:bg-dark-700 active:bg-dark-600 border border-dark-700/50"}
             onClick={() => {
               console.log("Fetching update", socket?.id)
               socket?.emit("fetch")
@@ -105,7 +106,7 @@ const Room: FC<Props> = ({ id }) => {
         </div>
 
         {/* Chat + YouTube Search */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 p-1">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-2 mt-2">
           <ChatPanel socket={socket} />
           <YoutubeSearch socket={socket} />
         </div>

components/action/Button.tsx

@@ -30,7 +30,7 @@ const Button: FC<Props> = ({
       onClick={onClick}
       type={type}
       disabled={disabled}
-      className={classNames("p-2 rounded", actionClasses, className)}
+      className={classNames("px-3 py-2 rounded-lg font-medium transition-all duration-200", actionClasses, className)}
     >
       {children}
     </button>

components/chat/ChatPanel.tsx

@@ -49,20 +49,27 @@ const ChatPanel: FC<Props> = ({ socket, className }) => {
   }
 
   return (
-    <div className={className ?? "flex flex-col h-64 border rounded-md"}>
-      <div className="flex-1 overflow-y-auto p-2 space-y-2 bg-neutral-900/30">
+    <div className={className ?? "flex flex-col h-64 border border-dark-700/50 rounded-xl overflow-hidden shadow-lg bg-dark-900"}>
+      <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-dark-900/50">
         {messages.map((m) => (
-          <div key={m.id} className="text-sm">
-            <span className="font-semibold">{m.name}</span>
-            <span className="opacity-60"> • {new Date(m.ts).toLocaleTimeString()}</span>
-            <div className="break-words">{m.text}</div>
+          <div key={m.id} className="text-sm bg-dark-800/50 rounded-lg p-3 border border-dark-700/30">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="font-semibold text-primary-400">{m.name}</span>
+              <span className="text-dark-500 text-xs">•</span>
+              <span className="text-dark-500 text-xs">{new Date(m.ts).toLocaleTimeString()}</span>
+            </div>
+            <div className="break-words text-dark-200">{m.text}</div>
           </div>
         ))}
-        {messages.length === 0 && <div className="opacity-60 text-sm">No messages yet</div>}
+        {messages.length === 0 && (
+          <div className="text-dark-500 text-sm text-center py-8">
+            No messages yet. Be the first to say hello! 👋
+          </div>
+        )}
       </div>
-      <div className="p-2 flex gap-2">
+      <div className="p-3 flex gap-2 bg-dark-800/50 border-t border-dark-700/50">
         <input
-          className="input flex-1 bg-neutral-800 p-2 rounded-md outline-none"
+          className="input flex-1 bg-dark-800 border border-dark-700/50 focus:border-primary-500/50 p-2.5 rounded-lg outline-none transition-all duration-200"
           placeholder="Type a message…"
           value={text}
           onChange={(e) => setText(e.target.value)}
@@ -70,7 +77,10 @@ const ChatPanel: FC<Props> = ({ socket, className }) => {
             if (e.key === "Enter") send()
           }}
         />
-        <button className="btn bg-primary-700 hover:bg-primary-600 px-3 rounded-md" onClick={send}>
+        <button 
+          className="btn bg-primary-600 hover:bg-primary-700 active:bg-primary-800 px-4 rounded-lg font-medium transition-all duration-200 shadow-md hover:shadow-glow" 
+          onClick={send}
+        >
           Send
         </button>
       </div>

components/input/InputSlider.module.css

@@ -5,12 +5,12 @@
 /* input range slider */
 .slider input[type="range"] {
   --value: 0%;
-  --lower: var(--primary);
-  --upper: rgba(255, 255, 255, 0.5);
-  --size: 5px;
-  --active-size: 8px;
-  --thumb-size: 7px;
-  --thumb-active-size: 10px;
+  --lower: #10b981;
+  --upper: rgba(255, 255, 255, 0.3);
+  --size: 6px;
+  --active-size: 10px;
+  --thumb-size: 12px;
+  --thumb-active-size: 16px;
   --thumb-color: #fff;
 
   cursor: pointer;
@@ -28,7 +28,7 @@
   touch-action: manipulation;
   -webkit-appearance: none;
   -moz-appearance: none;
-  transition: height ease-in-out 0.1s;
+  transition: height ease-in-out 0.2s;
 }
 .slider input[type="range"]:hover,
 .slider input[type="range"]:active {
@@ -43,12 +43,14 @@
   background-color: var(--thumb-color);
   border-radius: 100%;
   cursor: pointer;
-  transition: width ease-in-out 0.1s, height ease-in-out 0.1s;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
+  transition: width ease-in-out 0.2s, height ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
 }
 .slider input[type="range"]:hover::-moz-range-thumb,
 .slider input[type="range"]:active::-moz-range-thumb {
   width: var(--thumb-active-size);
   height: var(--thumb-active-size);
+  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6);
 }
 
 .slider input[type="range"]::-webkit-slider-thumb {
@@ -57,13 +59,15 @@
   background-color: var(--thumb-color);
   border-radius: 100%;
   cursor: pointer;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
   -webkit-appearance: none;
-  transition: width ease-in-out 0.1s, height ease-in-out 0.1s;
+  transition: width ease-in-out 0.2s, height ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
 }
 .slider input[type="range"]:hover::-webkit-slider-thumb,
 .slider input[type="range"]:active::-webkit-slider-thumb {
   width: var(--thumb-active-size);
   height: var(--thumb-active-size);
+  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6);
 }
 
 .slider input[type="range"]::-ms-thumb {
@@ -72,12 +76,14 @@
   background-color: var(--thumb-color);
   border-radius: 100%;
   cursor: pointer;
-  transition: width ease-in-out 0.1s, height ease-in-out 0.1s;
+  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
+  transition: width ease-in-out 0.2s, height ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
 }
 .slider input[type="range"]:hover::-ms-thumb,
 .slider input[type="range"]:active::-ms-thumb {
   width: var(--thumb-active-size);
   height: var(--thumb-active-size);
+  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6);
 }
 
 /* edge */
@@ -89,7 +95,7 @@
   width: 100%;
   height: var(--size);
   cursor: pointer;
-  transition: width ease-in-out 0.1s, height ease-in-out 0.1s;
+  transition: width ease-in-out 0.2s, height ease-in-out 0.2s;
 }
 
 .slider input[type="range"]::-ms-fill-lower,

components/input/InputText.tsx

@@ -23,15 +23,15 @@ const InputText: FC<Props> = ({
   return (
     <div
       className={classNames(
-        "rounded grow flex flex-row items-center bg-dark-800 action",
+        "rounded-lg grow flex flex-row items-center bg-dark-800 border border-dark-700/50 focus-within:border-primary-500/50 transition-all duration-200",
         className
       )}
     >
-      {icon && <div className={"ml-1"}>{icon}</div>}
+      {icon && <div className={"ml-2"}>{icon}</div>}
       <input
         ref={inputRef}
         size={1}
-        className={"grow rounded bg-dark-800 px-2 py-1.5" + className}
+        className={"grow rounded-lg bg-transparent px-3 py-2.5 outline-none " + className}
         placeholder={placeholder}
         value={value}
         onChange={(event) => onChange(event.target.value)}
@@ -39,9 +39,11 @@ const InputText: FC<Props> = ({
         required={required}
         onFocus={() => inputRef.current?.select()}
       />
-      <div className={"p-1 cursor-pointer"} onClick={() => onChange("")}>
-        <IconClose />
-      </div>
+      {value && (
+        <div className={"p-2 cursor-pointer hover:text-red-400 transition-colors"} onClick={() => onChange("")}>
+          <IconClose />
+        </div>
+      )}
     </div>
   )
 }

components/input/InputUrl.tsx

@@ -40,12 +40,12 @@ const InputUrl: FC<Props> = ({
       className={classNames("flex flex-col", className)}
     >
       <div
-        className={"rounded grow flex flex-row items-center bg-dark-800 action"}
+        className={"rounded-lg grow flex flex-row items-center bg-dark-800 border border-dark-700/50 focus-within:border-primary-500/50 transition-all duration-200 overflow-hidden"}
       >
         <input
           ref={inputRef}
           size={1}
-          className={classNames("grow rounded bg-dark-800 p-2")}
+          className={classNames("grow bg-transparent p-2.5 outline-none")}
           placeholder={placeholder}
           value={url}
           onChange={(event) => {
@@ -54,25 +54,27 @@ const InputUrl: FC<Props> = ({
           type={"text"}
           onFocus={() => inputRef.current?.select()}
         />
-        <div className={"p-1 cursor-pointer"} onClick={() => onChange("")}>
-          <IconClose />
-        </div>
+        {url && (
+          <div className={"p-2 cursor-pointer hover:text-red-400 transition-colors"} onClick={() => onChange("")}>
+            <IconClose />
+          </div>
+        )}
         <div>
           <button
             type={"submit"}
             data-tooltip-content={tooltip}
             className={classNames(
-              "p-2 rounded-r",
+              "px-4 py-2.5 font-medium transition-all duration-200",
               valid
-                ? "bg-primary-900 hover:bg-primary-800"
-                : "bg-red-600 hover:bg-red-500"
+                ? "bg-primary-600 hover:bg-primary-700 active:bg-primary-800"
+                : "bg-red-600 hover:bg-red-700 active:bg-red-800"
             )}
           >
             {children}
           </button>
         </div>
       </div>
-      {!valid && <div className={"text-red-600"}>Invalid url</div>}
+      {!valid && <div className={"text-red-400 text-sm mt-1"}>Invalid url</div>}
     </form>
   )
 }

components/modal/Modal.tsx

@@ -28,32 +28,38 @@ const Modal: FC<Props> = ({ title, show, close, children }) => {
           e.stopPropagation()
           close()
         }}
-        className={"absolute top-0 left-0 h-full w-full bg-black/50"}
+        className={"absolute top-0 left-0 h-full w-full bg-black/60 backdrop-blur-sm"}
       />
-      <div className={"flex justify-center h-full items-center"}>
-        <div className={"relative bg-dark-800 shadow rounded z-50 min-w-[30%]"}>
+      <div className={"flex justify-center h-full items-center p-4"}>
+        <div className={"relative bg-dark-800 shadow-2xl rounded-xl z-50 min-w-[30%] max-w-2xl w-full border border-dark-700/50"}>
           <div
             className={
-              "flex justify-between items-center p-2 border-b-2 border-b-dark-1000"
+              "flex justify-between items-center p-4 border-b border-dark-700/50"
             }
           >
-            <div className={"p-2 mr-2"}>
-              <h2 className={"text-xl"}>{title}</h2>
+            <div className={"px-2"}>
+              <h2 className={"text-xl font-semibold text-primary-400"}>{title}</h2>
             </div>
-            <Button tooltip={"Close modal"} id={"closeModal1"} onClick={close}>
+            <Button 
+              tooltip={"Close modal"} 
+              id={"closeModal1"} 
+              onClick={close}
+              actionClasses={"hover:bg-dark-700 active:bg-dark-600"}
+            >
               <IconClose />
             </Button>
           </div>
-          <div className={"p-4"}>{children}</div>
+          <div className={"p-6"}>{children}</div>
           <div
             className={
-              "flex justify-end items-center p-2 border-t-2 border-t-dark-1000"
+              "flex justify-end items-center p-4 border-t border-dark-700/50"
             }
           >
             <Button
               tooltip={"Close modal"}
               id={"closeModal2"}
-              className={"p-2 bg-dark-600"}
+              className={"px-4 py-2"}
+              actionClasses={"bg-dark-700 hover:bg-dark-600 active:bg-dark-500"}
               onClick={close}
             >
               Close
@@ -62,8 +68,24 @@ const Modal: FC<Props> = ({ title, show, close, children }) => {
         </div>
       </div>
 
-      <Tooltip anchorId={"closeModal1"} />
-      <Tooltip anchorId={"closeModal2"} />
+      <Tooltip 
+        anchorId={"closeModal1"} 
+        style={{
+          backgroundColor: "var(--dark-700)",
+          borderRadius: "0.5rem",
+          padding: "0.5rem 0.75rem",
+          fontSize: "0.875rem",
+        }}
+      />
+      <Tooltip 
+        anchorId={"closeModal2"}
+        style={{
+          backgroundColor: "var(--dark-700)",
+          borderRadius: "0.5rem",
+          padding: "0.5rem 0.75rem",
+          fontSize: "0.875rem",
+        }}
+      />
     </div>
   )
 }

components/playlist/PlaylistItem.tsx

@@ -71,15 +71,19 @@ const PlaylistItem: FC<Props> = ({
           {...provided.draggableProps}
           style={provided.draggableProps.style}
           className={classNames(
-            "p-1 rounded flex flex-col",
-            snapshot.isDragging ? "bg-dark-700" : "bg-dark-900"
+            "p-3 rounded-lg flex flex-col border transition-all duration-200",
+            snapshot.isDragging 
+              ? "bg-dark-700 border-primary-500/50 shadow-glow" 
+              : playing 
+                ? "bg-dark-800 border-primary-600/50" 
+                : "bg-dark-800/50 border-dark-700/50 hover:bg-dark-800"
           )}
         >
-          <div className={"flex flex-row gap-1 items-center"}>
+          <div className={"flex flex-row gap-2 items-center mb-2"}>
             <div
               className={classNames(
-                "p-1 transition-colors hover:text-primary-900",
-                snapshot.isDragging && "text-primary-800"
+                "p-1 transition-colors hover:text-primary-500 cursor-grab active:cursor-grabbing",
+                snapshot.isDragging && "text-primary-500"
               )}
               {...provided.dragHandleProps}
             >
@@ -96,16 +100,18 @@ const PlaylistItem: FC<Props> = ({
                   placeholder={"Set a title"}
                   value={title}
                 />
-              ) :
-                titleGen(item, index)
-              }
+              ) : (
+                <span className={classNames("text-sm font-medium", playing && "text-primary-400")}>
+                  {titleGen(item, index)}
+                </span>
+              )}
             </div>
             <DeleteButton
               tooltip={"Delete " + title}
               onClick={() => deleteItem(index)}
             />
           </div>
-          <div className={"flex flex-row items-center"}>
+          <div className={"flex flex-row items-center gap-2"}>
             <ControlButton
               tooltip={playing ? "Currently playing" : "Play item now"}
               onClick={() => {
@@ -117,17 +123,17 @@ const PlaylistItem: FC<Props> = ({
             >
               {playing ? (
                 <IconDisk
-                  className={"animate-spin animate-pulse text-purple-700"}
+                  className={"animate-spin animate-pulse text-purple-500"}
                 />
               ) : (
                 <IconPlay
-                  className={"text-primary-900 hover:text-primary-900"}
+                  className={"text-primary-500 hover:text-primary-400"}
                 />
               )}
             </ControlButton>
             <NewTabLink
               href={item.src[0].src}
-              className={"flex flex-row gap-1"}
+              className={"flex flex-row gap-1 items-center text-xs text-dark-400 hover:text-primary-500 transition-colors"}
             >
               <div className={"line-clamp-2"}>{getDomain(item.src[0].src)}</div>
               <IconNewTab className={"shrink-0"} />

components/playlist/PlaylistMenu.tsx

@@ -67,12 +67,12 @@ const PlaylistMenu: FC<Props> = ({ socket }) => {
   }
 
   return (
-    <div className={classNames("flex flex-col", expanded && "sm:w-[300px]")}>
+    <div className={classNames("flex flex-col bg-dark-900/50 rounded-xl border border-dark-700/50 overflow-hidden", expanded && "sm:w-[320px]")}>
       <ControlButton
         tooltip={expanded ? "Hide playlist" : "Show playlist"}
         onClick={() => setExpanded(!expanded)}
         interaction={() => {}}
-        className={"flex flex-row gap-1"}
+        className={"flex flex-row gap-2 items-center justify-center bg-dark-800 hover:bg-dark-700 p-3 font-medium"}
       >
         <IconChevron
           direction={expanded ? "up" : "down"}
@@ -83,13 +83,13 @@ const PlaylistMenu: FC<Props> = ({ socket }) => {
         </div>
       </ControlButton>
       {expanded && (
-        <>
+        <div className="p-2">
           <InputUrl
             url={url}
             placeholder={"Add url..."}
             tooltip={"Add url to the playlist"}
             onChange={setUrl}
-            className={"my-1"}
+            className={"mb-2"}
             onSubmit={() => addItem(url)}
           >
             Add
@@ -132,7 +132,7 @@ const PlaylistMenu: FC<Props> = ({ socket }) => {
                   {...provided.droppableProps}
                   ref={provided.innerRef}
                   className={classNames(
-                    "flex flex-col rounded gap-1",
+                    "flex flex-col rounded-lg gap-2 min-h-[100px] p-2",
                     snapshot.isDraggingOver && "bg-dark-800"
                   )}
                 >
@@ -177,7 +177,7 @@ const PlaylistMenu: FC<Props> = ({ socket }) => {
               )}
             </Droppable>
           </DragDropContext>
-        </>
+        </div>
       )}
     </div>
   )

components/search/YoutubeSearch.tsx

@@ -106,11 +106,13 @@ const YoutubeSearch: FC<Props> = ({ socket }) => {
   const addToPlaylist = (url: string) => socket?.emit("addToPlaylist", url)
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-3 bg-dark-900 border border-dark-700/50 rounded-xl p-4 shadow-lg">
+      <h3 className="text-lg font-semibold text-primary-400 mb-1">YouTube Search</h3>
+      
       {/* Search row: input + Search button with fixed width so actions align below */}
       <div className="grid grid-cols-[1fr_auto] gap-2">
         <input
-          className="input bg-neutral-800 p-2 rounded-md outline-none"
+          className="input bg-dark-800 border border-dark-700/50 focus:border-primary-500/50 p-2.5 rounded-lg outline-none transition-all duration-200"
           placeholder="Search YouTube (e.g., Sira)"
           value={q}
           onChange={(e) => setQ(e.target.value)}
@@ -120,37 +122,37 @@ const YoutubeSearch: FC<Props> = ({ socket }) => {
         />
         <button
           onClick={search}
-          className={`btn bg-primary-700 hover:bg-primary-600 px-3 rounded-md justify-center ${ACTION_BTN_WIDTH}`}
+          className={`btn bg-primary-600 hover:bg-primary-700 active:bg-primary-800 px-4 rounded-lg justify-center font-medium transition-all duration-200 shadow-md hover:shadow-glow ${ACTION_BTN_WIDTH}`}
         >
           {loading ? "Searching…" : "Search"}
         </button>
       </div>
 
-      {error && <div className="text-red-400 text-sm">{error}</div>}
+      {error && <div className="text-red-400 text-sm bg-red-900/20 border border-red-700/30 rounded-lg p-2">{error}</div>}
 
-      <div className="grid gap-2">
+      <div className="grid gap-2 max-h-96 overflow-y-auto">
         {results.map((r) => (
           <div
             key={r.id}
-            className="grid grid-cols-[auto_1fr_auto_auto] items-center gap-3 p-2 rounded-md border"
+            className="grid grid-cols-[auto_1fr_auto_auto] items-center gap-3 p-3 rounded-lg border border-dark-700/50 bg-dark-800/50 hover:bg-dark-800 transition-all duration-200"
           >
             {/* Thumb */}
             {r.thumbnails?.[0]?.url ? (
               // eslint-disable-next-line @next/next/no-img-element
-              <img src={r.thumbnails[0].url} alt="" className="w-16 h-9 object-cover rounded-sm" />
+              <img src={r.thumbnails[0].url} alt="" className="w-20 h-12 object-cover rounded-md border border-dark-700/30" />
             ) : (
-              <div className="w-16 h-9 bg-neutral-800 rounded-sm" />
+              <div className="w-20 h-12 bg-dark-700 rounded-md border border-dark-700/30" />
             )}
 
             {/* Info */}
             <div className="min-w-0">
-              <div className="truncate">{r.title}</div>
-              <div className="opacity-60 text-xs truncate">{r.url}</div>
+              <div className="truncate font-medium text-dark-200">{r.title}</div>
+              <div className="text-dark-500 text-xs truncate">{r.url}</div>
             </div>
 
             {/* Add (small) */}
             <button
-              className={`btn bg-blue-700 hover:bg-blue-600 px-2 py-1 rounded-md text-xs justify-center ${ADD_BTN_WIDTH}`}
+              className={`btn bg-accent-600 hover:bg-accent-700 active:bg-accent-800 px-3 py-1.5 rounded-lg text-xs justify-center font-medium transition-all duration-200 ${ADD_BTN_WIDTH}`}
               onClick={() => addToPlaylist(r.url)}
               title="Add to playlist"
             >
@@ -159,7 +161,7 @@ const YoutubeSearch: FC<Props> = ({ socket }) => {
 
             {/* Play (aligned under Search button) */}
             <button
-              className={`btn bg-green-700 hover:bg-green-600 px-3 py-1 rounded-md justify-center ${ACTION_BTN_WIDTH}`}
+              className={`btn bg-primary-600 hover:bg-primary-700 active:bg-primary-800 px-3 py-1.5 rounded-lg justify-center font-medium transition-all duration-200 shadow-md hover:shadow-glow ${ACTION_BTN_WIDTH}`}
               onClick={() => playNow(r.url)}
               title="Play now"
             >

pages/global.css

@@ -3,9 +3,14 @@
 @tailwind utilities;
 
 :root {
-  --primary: #2ca73c;
-  --accent: #4d7ea8;
-  --dark-700: #313131;
+  --primary: #10b981;
+  --primary-hover: #059669;
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --dark-700: #1f2937;
+  --dark-800: #111827;
+  --dark-900: #0f172a;
+  --dark-1000: #020617;
 }
 
 html,
@@ -14,6 +19,10 @@ body {
   padding: 0;
   min-height: 100vh;
   color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   @apply stroke-white fill-white bg-dark-1000;
 }
 
@@ -21,6 +30,7 @@ body {
   @apply outline-none;
   @apply hover:bg-dark-700 hover:drop-shadow-lg;
   @apply active:bg-dark-600;
+  @apply transition-all duration-200 ease-in-out;
 }
 
 .action > * {
@@ -38,3 +48,27 @@ body {
 .hide-below-sm {
   @apply hidden sm:inline-block;
 }
+
+/* Modern button styles */
+button, .btn {
+  @apply transition-all duration-200 ease-in-out;
+  @apply font-medium;
+}
+
+button:focus-visible, .btn:focus-visible {
+  @apply ring-2 ring-primary-500 ring-offset-2 ring-offset-dark-1000;
+}
+
+/* Modern input styles */
+input, textarea {
+  @apply transition-all duration-200 ease-in-out;
+}
+
+input:focus, textarea:focus {
+  @apply ring-2 ring-primary-500 ring-opacity-50;
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}

pages/index.tsx

@@ -15,10 +15,10 @@ export default function Index() {
 
   return (
     <Layout meta={{ robots: "index, archive, follow" }} showNavbar={false}>
-      <div className={"self-center flex justify-center"}>
+      <div className={"self-center flex justify-center items-center min-h-[70vh]"}>
         <form
           className={
-            "flex flex-col gap-4 justify-center rounded shadow p-3 bg-dark-900 m-8"
+            "flex flex-col gap-6 justify-center rounded-xl shadow-2xl p-8 bg-gradient-to-br from-dark-800 to-dark-900 m-8 max-w-md w-full border border-dark-700/50"
           }
           onSubmit={async (e) => {
             e.preventDefault()
@@ -28,7 +28,13 @@ export default function Index() {
             }
           }}
         >
-          <h1 className={"text-2xl"}>Got invited?</h1>
+          <div className="text-center">
+            <h1 className={"text-3xl font-bold bg-gradient-to-r from-primary-500 to-accent-500 bg-clip-text text-transparent mb-2"}>
+              Welcome to Streamer
+            </h1>
+            <p className="text-dark-400 text-sm">Join or create a room to watch together</p>
+          </div>
+          
           <InputText
             value={room}
             placeholder={"Enter a room ID"}
@@ -36,12 +42,13 @@ export default function Index() {
               setRoom(value.toLowerCase().replace(/[^a-z]/g, ""))
             }
           />
-          <div className={"flex gap-2 justify-end"}>
+          
+          <div className={"flex gap-3 justify-end"}>
             <Button
               tooltip={"Create a new personal room"}
-              className={"p-2"}
+              className={"px-4 py-2.5 font-medium"}
               actionClasses={
-                "bg-primary-900 hover:bg-primary-800 active:bg-primary-700"
+                "bg-accent-600 hover:bg-accent-700 active:bg-accent-800 shadow-lg hover:shadow-xl"
               }
               onClick={() => {
                 fetch("/api/generate")
@@ -67,11 +74,11 @@ export default function Index() {
             </Button>
             <Button
               tooltip={room.length < 4 ? "Invalid room id" : "Join room"}
-              className={"p-2"}
+              className={"px-4 py-2.5 font-medium"}
               actionClasses={
                 room.length >= 4
-                  ? "bg-primary-900 hover:bg-primary-800 active:bg-primary-700"
-                  : "bg-dark-700 hover:bg-dark-600 active:bg-red-700 cursor-not-allowed"
+                  ? "bg-primary-600 hover:bg-primary-700 active:bg-primary-800 shadow-lg hover:shadow-xl hover:shadow-glow"
+                  : "bg-dark-700 hover:bg-dark-600 active:bg-red-700 cursor-not-allowed opacity-50"
               }
               disabled={room.length < 4}
               type={"submit"}
@@ -79,19 +86,31 @@ export default function Index() {
               Join room
             </Button>
           </div>
-          <small className={"text-neutral-600"}>
-            <div>Currently connected:</div>
-            <div className={"flex flex-row gap-2"}>
-              <div>Rooms: {data?.rooms || 0}</div>
-              <div>Users: {data?.users || 0}</div>
-            </div>
-          </small>
+          
+          <div className={"mt-2 pt-4 border-t border-dark-700/50"}>
+            <small className={"text-dark-400"}>
+              <div className="font-medium text-dark-300 mb-1">Currently active:</div>
+              <div className={"flex flex-row gap-4 text-sm"}>
+                <div className="flex items-center gap-1">
+                  <span className="inline-block w-2 h-2 bg-primary-500 rounded-full"></span>
+                  <span>{data?.rooms || 0} Rooms</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span className="inline-block w-2 h-2 bg-accent-500 rounded-full"></span>
+                  <span>{data?.users || 0} Users</span>
+                </div>
+              </div>
+            </small>
+          </div>
         </form>
       </div>
 
       <Tooltip
         style={{
           backgroundColor: "var(--dark-700)",
+          borderRadius: "0.5rem",
+          padding: "0.5rem 0.75rem",
+          fontSize: "0.875rem",
         }}
       />
     </Layout>

tailwind.config.js

@@ -7,23 +7,36 @@ module.exports = {
     extend: {
       colors: {
         dark: {
-          400: "#666666",
-          500: "#505050",
-          600: "#414141",
-          700: "#313131",
-          800: "#212121",
-          900: "#121212",
-          1000: "#060606",
+          400: "#64748b",
+          500: "#475569",
+          600: "#334155",
+          700: "#1f2937",
+          800: "#111827",
+          900: "#0f172a",
+          1000: "#020617",
         },
         primary: {
-          700: "#33c146",
-          800: "#2CA73C",
-          900: "#2ba13b",
+          500: "#10b981",
+          600: "#059669",
+          700: "#047857",
+          800: "#065f46",
+          900: "#064e3b",
         },
         accent: {
-          900: "#4D7EA8",
+          500: "#3b82f6",
+          600: "#2563eb",
+          700: "#1d4ed8",
+          800: "#1e40af",
+          900: "#1e3a8a",
         },
       },
+      fontFamily: {
+        sans: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', '"Fira Sans"', '"Droid Sans"', '"Helvetica Neue"', 'sans-serif'],
+      },
+      boxShadow: {
+        'glow': '0 0 20px rgba(16, 185, 129, 0.3)',
+        'glow-lg': '0 0 30px rgba(16, 185, 129, 0.4)',
+      },
     },
   },
 }