Update Manager/Color/Logo

src/components/game/GameWrapper.jsx

@@ -29,7 +29,7 @@ export default function GameWrapper({ children, textNext, onNext, manager }) {
 
       <div className="p-4 w-full flex justify-between">
         {questionState && (
-          <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex items-center text-lg">
+          <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex items-center text-lg p-2">
             {`${questionState.current} / ${questionState.total}`}
           </div>
         )}

src/components/game/states/Answers.jsx

@@ -69,7 +69,7 @@ export default function Answers({
   return (
     <div className="flex h-full flex-col justify-between flex-1">
       <div className="h-full max-w-7xl mx-auto w-full inline-flex flex-col items-center justify-center gap-5 flex-1">
-        <h2 className="text-white text-2xl md:text-4xl font-bold drop-shadow-lg text-center">
+        <h2 className="text-white text-2xl md:text-4xl lg:text-5xl font-bold drop-shadow-lg text-center">
           {question}
         </h2>
 
@@ -101,12 +101,12 @@ export default function Answers({
         {!responses && (
           <div className="max-w-7xl mx-auto mb-4 w-full flex justify-between gap-1 font-bold text-white text-lg md:text-xl px-2">
             <div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
-              <span className="text-sm">Time</span>
-              <span className="-translate-y-1">{cooldown}</span>
+              <span className="text-sm translate-y-1">Time</span>
+              <span>{cooldown}</span>
             </div>
             <div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
-              <span className="text-sm">Answers</span>
-              <span className="-translate-y-1">{totalAnswer}</span>
+              <span className="text-sm translate-y-1">Answers</span>
+              <span>{totalAnswer}</span>
             </div>
           </div>
         )}

src/components/game/states/Leaderboard.jsx

@@ -6,7 +6,7 @@ export default function Leaderboard({ data: { leaderboard } }) {
       </h2>
       <div className="w-full flex-col flex gap-2">
         {leaderboard.map(({ username, points }) => (
-          <div className="bg-primary rounded-md p-3 flex justify-between w-full text-white font-bold text-2xl">
+          <div className="bg-primary rounded-md p-3 flex justify-between w-full font-bold text-white text-2xl">
             <span className="drop-shadow-md">{username}</span>
             <span className="drop-shadow-md">{points}</span>
           </div>

src/components/game/states/Question.jsx

@@ -7,13 +7,13 @@ export default function Question({ data: { question } }) {
   return (
     <section className="max-w-7xl mx-auto w-full flex-1 relative items-center flex flex-col px-4 h-full">
       <div className="flex items-center flex-1">
-        <h2 className="text-white text-2xl md:text-4xl font-bold drop-shadow-lg text-center">
+        <h2 className="text-white text-2xl md:text-4xl lg:text-5xl anim-show font-bold drop-shadow-lg text-center">
           {question}
         </h2>
       </div>
       <div
         ref={barRef}
-        className="h-6 bg-primary mb-32 rounded-full self-start justify-self-end"
+        className="h-4 bg-primary mb-20 rounded-full self-start justify-self-end"
         style={{ animation: `progressBar ${6}s linear forwards` }}
       ></div>
     </section>

src/components/game/states/Start.jsx

@@ -1,8 +1,7 @@
-import Loader from "@/components/Loader"
 import { useSocketContext } from "@/context/socket"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 
-export default function Start({ data: { text } }) {
+export default function Start({ data: { text, inviteCode } }) {
   const { socket } = useSocketContext()
   const [playerList, setPlayerList] = useState([])
 
@@ -10,12 +9,12 @@ export default function Start({ data: { text } }) {
     setPlayerList([...playerList, player])
   })
 
-  useEffect(() => {
-    socket.emit("manager:createRoom")
-  }, [])
-
   return (
     <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col px-2">
+      <div className="py-4 px-6 mb-10 rotate-3 bg-white rounded-md text-6xl font-extrabold">
+        {inviteCode}
+      </div>
+
       <h2 className="text-white font-bold text-4xl drop-shadow-lg mb-4">
         {text}
       </h2>

src/components/icons/CricleCheck.jsx

@@ -1,12 +1,12 @@
 export default function CricleCheck({ className }) {
   return (
     <svg
-      fill="#28d524"
+      fill="#22c55e"
       width="800px"
       height="800px"
       viewBox="0 0 56.00 56.00"
       xmlns="http://www.w3.org/2000/svg"
-      stroke="#28d524"
+      stroke="#22c55e"
       strokeWidth="0.00056"
       className={className}
     >

src/components/icons/CricleXmark.jsx

@@ -1,12 +1,12 @@
 export default function CricleXmark({ className }) {
   return (
     <svg
-      fill="#fb1e1e"
+      fill="#ef4444"
       width="800px"
       height="800px"
       viewBox="0 0 56.00 56.00"
       xmlns="http://www.w3.org/2000/svg"
-      stroke="#fb1e1e"
+      stroke="#ef4444"
       className={className}
     >
       <g strokeWidth="0" transform="translate(12.4,12.4), scale(0.6)">