Update alert, user, and input components with modern styling

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

components/alert/Alert.tsx

@@ -22,13 +22,17 @@ const Alert: FC<AlertProps> = ({
   return (
     <div
       className={classNames(
-        "rounded bg-dark-800 p-2 flex gap-1 items-center flex-row justify-between",
+        "rounded-lg bg-dark-800/90 backdrop-blur-sm border border-dark-700/50 p-3 flex gap-2 items-center flex-row justify-between shadow-lg",
         className
       )}
     >
-      <div className={"flex flex-row gap-1 items-center"}>{children}</div>
+      <div className={"flex flex-row gap-2 items-center"}>{children}</div>
       {canClose && (
-        <Button tooltip={"Dismiss"} onClick={() => setClosed(true)}>
+        <Button 
+          tooltip={"Dismiss"} 
+          onClick={() => setClosed(true)}
+          actionClasses="hover:bg-dark-700 active:bg-dark-600"
+        >
           <IconClose />
         </Button>
       )}

components/input/ControlButton.tsx

@@ -21,7 +21,7 @@ const ControlButton: FC<Props> = ({
     <InteractionHandler
       tooltip={tooltip}
       className={classNames(
-        "action cursor-pointer rounded p-2 select-none",
+        "action cursor-pointer rounded-lg p-2.5 select-none transition-all duration-200",
         className
       )}
       onClick={(e, touch) => {

components/input/InputClipboardCopy.tsx

@@ -9,10 +9,10 @@ interface Props {
 const InputClipboardCopy: FC<Props> = ({ value, className }) => {
   return (
     <div
-      className={"rounded flex flex-row items-center bg-dark-900 " + className}
+      className={"rounded-lg flex flex-row items-center bg-dark-900 border border-dark-700/50 overflow-hidden " + className}
     >
       <input
-        className={"rounded grow bg-dark-900 p-2 " + className}
+        className={"rounded-l-lg grow bg-transparent p-3 outline-none " + className}
         value={value}
         type={"text"}
         readOnly={true}
@@ -23,7 +23,7 @@ const InputClipboardCopy: FC<Props> = ({ value, className }) => {
       />
       <button
         className={
-          "p-2 bg-primary-900 hover:bg-primary-800 active:bg-primary-700 flex flex-row items-center rounded-r cursor-copy"
+          "px-4 py-3 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 flex flex-row items-center gap-2 cursor-copy font-medium transition-all duration-200"
         }
         data-tooltip-content={"Click to copy"}
         type={"button"}

components/user/UserItem.tsx

@@ -31,11 +31,11 @@ const UserItem: FC<Props> = ({ user, ownerId, socketId, updateName }) => {
   return (
     <div
       className={classNames(
-        "rounded border-l-4",
-        "flex flex-row bg-dark-900 hover:bg-dark-800",
+        "rounded-lg border-l-4 overflow-hidden transition-all duration-200",
+        "flex flex-row bg-dark-800/50 hover:bg-dark-800 shadow-md",
         socketId == user.uid
-          ? "border-primary-900 hover:border-primary-800"
-          : "border-dark-900 hover:border-dark-600"
+          ? "border-primary-600 hover:border-primary-500"
+          : "border-dark-700 hover:border-dark-600"
       )}
     >
       {ownerId == user.uid && (
@@ -43,7 +43,7 @@ const UserItem: FC<Props> = ({ user, ownerId, socketId, updateName }) => {
           className={"absolute inline-flex -ml-4 -mt-4 p-2 cursor-help"}
           data-tooltip-content={"Owner of the lobby"}
         >
-          <IconOwner className={"text-primary-700"} sizeClassName={"w-5 h-5"} />
+          <IconOwner className={"text-primary-500"} sizeClassName={"w-5 h-5"} />
         </div>
       )}
       <div className={"aspect-square shrink-0"}>
@@ -57,7 +57,7 @@ const UserItem: FC<Props> = ({ user, ownerId, socketId, updateName }) => {
         />
       </div>
       <div
-        className={"p-2 pl-1 grow"}
+        className={"p-2 pl-2 grow"}
         onMouseEnter={() => {
           if (user.uid === socketId) {
             setEdit(true)
@@ -78,12 +78,12 @@ const UserItem: FC<Props> = ({ user, ownerId, socketId, updateName }) => {
           />
         ) : (
           <>
-            <div className={"flex flex-row gap-1 truncate"}>{user.name}</div>
-            <div className={"flex flex-row gap-1 items-center"}>
+            <div className={"flex flex-row gap-1 truncate font-medium text-dark-200"}>{user.name}</div>
+            <div className={"flex flex-row gap-1.5 items-center text-dark-400 text-sm"}>
               {user.player.paused ? (
                 <IconPause sizeClassName={"w-3 h-3"} />
               ) : (
-                <IconPlay sizeClassName={"w-3 h-3"} />
+                <IconPlay sizeClassName={"w-3 h-3 text-primary-500"} />
               )}
               {secondsToTime(user.player.progress)}
             </div>

components/user/UserList.tsx

@@ -36,7 +36,7 @@ const UserList: FC<Props> = ({ socket }) => {
   return (
     <div
       className={
-        "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-1"
+        "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-2 p-2"
       }
     >
       {users.map((user) => (

pages/404.tsx

@@ -1,4 +1,5 @@
 import Layout from "../components/Layout"
+import Link from "next/link"
 
 export default function Error404() {
   return (
@@ -9,7 +10,20 @@ export default function Error404() {
       }}
       error={404}
     >
-      There is nothing to be found here :/
+      <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
+        <h1 className="text-6xl font-bold bg-gradient-to-r from-primary-500 to-accent-500 bg-clip-text text-transparent mb-4">
+          404
+        </h1>
+        <p className="text-xl text-dark-400 mb-6">
+          There is nothing to be found here :/
+        </p>
+        <Link 
+          href="/" 
+          className="px-6 py-3 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 rounded-lg font-medium transition-all duration-200 shadow-lg hover:shadow-glow"
+        >
+          Go Back Home
+        </Link>
+      </div>
     </Layout>
   )
 }