From d81965cae32848dba4a249629b252362d228b9c1 Mon Sep 17 00:00:00 2001
From: samanthathompson52 <sthompsonsoftware@gmail.com>
Date: Wed, 3 Jan 2024 22:39:49 -0500
Subject: [PATCH] UI tweaks

---
 client/src/components/EndGame.tsx |  4 ++--
 client/src/components/Lobby.tsx   | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/EndGame.tsx b/client/src/components/EndGame.tsx
index 0f4ceba..2664340 100644
--- a/client/src/components/EndGame.tsx
+++ b/client/src/components/EndGame.tsx
@@ -13,13 +13,13 @@ const EndGame = ({sendJsonMessage, players, isHost}: {sendJsonMessage: any, play
     const newGameBtn = () => {
         if (isHost) {
             return (
-                <div className='text-center pt-20'>
+                <div className='text-center pt-10'>
                     <button className='button-orange hover:scale-110 duration-500 p-2 pr-8 pl-8' onClick={playAgain}><h3>Play again?</h3></button>
                 </div>
             )
         } else {
             return (
-                <div className='text-center pt-20'>
+                <div className='text-center pt-10'>
                     <h4>Waiting for host to start a new game...</h4>
                 </div>
             )
diff --git a/client/src/components/Lobby.tsx b/client/src/components/Lobby.tsx
index 1d392ef..cece917 100644
--- a/client/src/components/Lobby.tsx
+++ b/client/src/components/Lobby.tsx
@@ -17,20 +17,20 @@ function Lobby({sendJsonMessage, isHost, remainingIcons}: {sendJsonMessage: any,
 
     return (
         <div>
-            <div className="container mx-auto px-5 py-2 md:p-10 shadow-xl rounded-2xl w-full">
+            <div className="container px-5 py-2 md:p-10 shadow-xl rounded-2xl w-full">
                 <div className='pb-2'>
                     <h3 className='pb-4 md:pb-10'>Select your icon:</h3>
                     <div className='grid grid-cols-3 gap-2 md:grid-cols-7'>
                     {Object.keys(iconMap).map((iconName: string, idx:number) => {
                         if (remainingIcons.includes(iconName)) {
                             return (
-                                <div key={iconName+idx} className='hover:scale-110 duration-500 p-2 md:p-4' onClick={() => selectIcon(iconName)}> 
+                                <div key={iconName+idx} className='hover:scale-110 duration-500 p-2 lg:p-4' onClick={() => selectIcon(iconName)}> 
                                     <PlayerIcon iconName={iconName}/>
                                 </div>
                             ) 
                         } else {
                         return  (
-                            <div key={iconName+idx} className='filter grayscale p-2 md:p-4 brightness-75'> 
+                            <div key={iconName+idx} className='filter grayscale p-2 lg:p-4 brightness-75'> 
                                 <PlayerIcon iconName={iconName}/>
                             </div>
                         )}
@@ -39,13 +39,13 @@ function Lobby({sendJsonMessage, isHost, remainingIcons}: {sendJsonMessage: any,
                 </div>
             </div>
             {isHost && 
-            <div className='text-center pt-10 md:pt-20'>
+            <div className='text-center pb-4 pt-8 md:pt-15'>
                 <button className='button-orange hover:scale-110 duration-500 p-2 pr-8 pl-8' onClick={startGame}><h3>Start Game!</h3></button>
             </div>
             }
 
             {!isHost &&
-            <div className='text-center pt-10 md:pt-20'>
+            <div className='text-center pb-4 pt-8 md:pt-15'>
                 <h4>Waiting for host to start the game...</h4>
             </div>
             }