Update help modal style and added tooltips

andyplank · Apr 3, 2024 · c0d7416 · c0d7416
1 parent cf6f969
commit c0d7416
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 13 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -67,6 +67,10 @@ p {
     line-height: normal;
 }
 
+span {
+    font-family: Mochiy Pop One;
+}
+
 /* Reset some default styles */
 html, body {
     margin: 0;
@@ -125,6 +129,14 @@ html, body {
     background-color: var(--orange);
 }
 
+.tooltip {
+    @apply invisible absolute;
+}
+
+.has-tooltip:hover .tooltip {
+    @apply visible z-50;
+}
+
 @media only screen and (max-width: 640px) {
     h1 {
         font-size: 2.2rem;     

diff --git a/client/src/components/Answer.tsx b/client/src/components/Answer.tsx
@@ -20,7 +20,8 @@ const Answer = ({sendJsonMessage, prompt, players, playerId, isHost}: {sendJsonM
                     <h3 className='pb-20 flex'>
                         <span className='grow'>{prompt}</span>
                         {isHost && 
-                        <div className='pl-2 flex items-start'>
+                        <div className='has-tooltip pl-2 flex items-start'>
+                            <span className='tooltip rounded shadow-lg p-1 m-2 bg-lightPurple text-center text-xs -mt-12 mr-4'>Skip this prompt</span>
                             <button onClick={() => shuffle()}>
                                 <ForwardIcon className="h-9 w-9" aria-hidden="true" />
                             </button>

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -19,7 +19,8 @@ const Header = ({roomCode}: {roomCode:string}) => {
               </a>
           </div>
           {roomCode !== "" && 
-          <div className="flex justify-end cursor-pointer" onClick={() => copyRoomCode()}>
+          <div className="has-tooltip flex justify-end cursor-pointer" onClick={() => copyRoomCode()}>
+            <span className='tooltip rounded shadow-lg p-1 m-1 bg-lightPurple text-center text-xs'>Click here to copy <br /> the game link!</span>
             <p className='self-end pb-1 pr-2 md:pb-4 md:pr-3 text-center'>Room Code:<br/> {roomCode}</p>
           </div>}
         </div>

diff --git a/client/src/components/Help.tsx b/client/src/components/Help.tsx
@@ -21,12 +21,12 @@ export default function Help({open, setOpen, title, text}: {open: boolean, setOp
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
-                <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform rounded-lg bg-white text-left shadow-xl transition-all border-4 border-purple sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-900">
-                        {title}
+                      <Dialog.Title className="text-base font-semibold leading-6 text-gray-900">
+                        <h4>{title}</h4>
                       </Dialog.Title>
                       <XMarkIcon type="button" onClick={() => setOpen(false)} className="cursor-pointer h-7 w-7 absolute right-2 top-2" aria-hidden="true" />
                       <div className="mt-2">

diff --git a/client/src/components/Join.tsx b/client/src/components/Join.tsx
@@ -13,6 +13,7 @@ const Join = ({sendJsonMessage, roomCode, setRoomCode}: {sendJsonMessage: any, r
         const roomParam = queryParameters.get("room")
         if (roomParam === undefined || roomParam === null) return;
         roomCodeInput(roomParam);
+        setType("join_room");
     });
 
     const createRoom = () => {
@@ -30,6 +31,11 @@ const Join = ({sendJsonMessage, roomCode, setRoomCode}: {sendJsonMessage: any, r
         });
     };
 
+    const goBack = () => {
+        setType("");
+        setRoomCode("");
+    };
+
     const usernameInput = (inStr: string) => {
         if (!verifyInput(inStr, 10)) return;
         setUsername(inStr);
@@ -52,15 +58,33 @@ const Join = ({sendJsonMessage, roomCode, setRoomCode}: {sendJsonMessage: any, r
                         <div>
                             <div className="pb-10">
                                 <h4 className='text-left pb-2'>Enter your name:</h4>
-                                <input name="username" type="text" aria-label="Username"
-                                    value={username} onChange={(e) => usernameInput(e.target.value)} 
+                                <input 
+                                    name="username" 
+                                    type="text" 
+                                    aria-label="Username"
+                                    value={username} 
+                                    onChange={(e) => usernameInput(e.target.value)} 
+                                    onKeyDown={(e) => { 
+                                        if (e.key === "Enter") { 
+                                            enterRoom(); 
+                                        } 
+                                    }}
                                     className="orange-input" />
                             </div>
                             {type === "join_room" && 
                                 <div className="pb-10">
                                     <h4 className='text-left pb-2'>Enter room code:</h4>
-                                    <input name="roomCode" type="text" aria-label="Room code"
-                                        value={roomCode} onChange={(e) => roomCodeInput(e.target.value)} 
+                                    <input 
+                                        name="roomCode" 
+                                        type="text" 
+                                        aria-label="Room code"
+                                        value={roomCode} 
+                                        onChange={(e) => roomCodeInput(e.target.value)} 
+                                        onKeyDown={(e) => { 
+                                            if (e.key === "Enter") { 
+                                                enterRoom(); 
+                                            } 
+                                        }}
                                         className="orange-input" />
                                 </div>
                             }
@@ -73,7 +97,7 @@ const Join = ({sendJsonMessage, roomCode, setRoomCode}: {sendJsonMessage: any, r
                             </div>
                         </div>
                     </div>
-                    <button onClick={() => setType("")}>
+                    <button onClick={goBack}>
                             <div className="flex items-center">
                                 <ArrowLeftIcon className="h-9 w-9" aria-hidden="true" />
                                 <p>Go Back</p>

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -8,8 +8,8 @@ module.exports = {
       },
     },
     colors: {
-      main: '#93C5FD',  
-      mainlight: '#E3F0FF',
+      main: '#C5ADEB',  
+      mainlight: '#e2d6f5',
       purple: '#C5ADEB',
       lightPurple: '#e2d6f5',
       green: '#9AEDB6',