made app responsive

ekmas · Jul 9, 2023 · 586c73a · 586c73a
1 parent b23df94
commit 586c73a
Show file tree

Hide file tree

Showing 15 changed files with 257 additions and 83 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -22,34 +22,36 @@ export default function Card({ name, avatar_url, stargazers_count, showButtonsPr
   }
 
   return (
-    <div className="flex flex-col justify-center items-center text-center">
-      <img width={100} src={avatar_url} alt={name} />
+    <div className="card-wrapper">
+      <img className="img-repo" src={avatar_url} alt={name} />
 
-      <h1 className="text-[35px] font-bold mt-6">{name}</h1>
+      <h1 className="repo-name-heading">{name}</h1>
 
-      <p className="my-2">has</p>
+      <p className="has-word">has</p>
 
       {showButtons ?
         <div>
           <div className="flex flex-col w-min mx-auto">
             <IconButton 
-              icon={<AiOutlineCaretUp className="w-6 h-6 ml-3" />}
+              icon={<AiOutlineCaretUp className="w-6 h-6 ml-3 m700:w-4 m700:h-4" />}
               onClick={() => handleButtonClick((stargazers_count > prevRepo?.stargazers_count))}
               text="Higher"
+              classNames="card-button m700:mb-2"
             />
 
             <IconButton 
-              icon={<AiOutlineCaretDown className="w-6 h-6 ml-4" />}
+              icon={<AiOutlineCaretDown className="w-6 h-6 ml-4 m700:w-4 m700:h-4" />}
               onClick={() => handleButtonClick(stargazers_count < prevRepo?.stargazers_count)}
               text="Lower"
+              classNames="card-button m700:mb-1"
             />
           </div>
 
-          <p className="mt-2">stars than {prevRepo?.name}</p>
+          <p className="stars-than">stars than {prevRepo?.name}</p>
         </div>
         :
         <div>
-          <h2 className="text-[30px] font-bold">
+          <h2 className="stars-count">
             {showButtonsProp ?
               <CountUp
                 isCounting={true}
@@ -62,7 +64,7 @@ export default function Card({ name, avatar_url, stargazers_count, showButtonsPr
             }
           </h2>
 
-          <p className="my-2">stars on github</p>
+          <p className="stars-on-github">stars on github</p>
         </div>
       }
     </div>

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -1,12 +1,13 @@
 type ButtonProps = {
   onClick: any
   icon: JSX.Element,
-  text: string
+  text: string,
+  classNames: string
 }
 
-export default function IconButton({ onClick, icon, text }: ButtonProps) {
+export default function IconButton({ onClick, icon, text, classNames }: ButtonProps) {
   return (
-    <button onClick={onClick} className="button flex items-center px-14 py-3.5 my-2">
+    <button onClick={onClick} className={classNames}>
       {text}
       {icon}
     </button>

diff --git a/src/components/LeaderboardMain.tsx b/src/components/LeaderboardMain.tsx
@@ -36,26 +36,27 @@ export default function LeaderboardMain() {
 
   return (
     <main className="main">
-      <div>
-        <h1 className="text-white font-bold mx-auto text-[40px]">
+      <div className="w-[600px] mx-5 m500:mx-0">
+        <h1 className="leaderboard-heading">
           Leaderboard
         </h1>
 
-        <div className="w-[600px] mt-[50px] border border-white/30 rounded-xl">
-          <table className="w-full text-white rounded-xl">
+        <div className="w-full mt-[50px] border border-white/30 rounded-xl">
+          <table className="w-full text-white rounded-xl m600:text-sm">
             <thead>
               <tr className="bg-primaryBlack hover:bg-secondaryBlack transition">
-                <td className="w-[50px] py-2">#</td>
+                <td className="w-[50px] m550:w-10 py-2">#</td>
                 <td className="text-left pl-4 py-2">Username</td>
-                <td className="w-[120px] py-2">High score</td>
+                <td className="w-[120px] hidden leaderboardDesktop:table-cell py-2">High score</td>
+                <td className="w-[50px] hidden leaderboardMobile:table-cell py-2">HS</td>
               </tr>
             </thead>
             <tbody>
               {leaderboard.map((player: LeaderboardType, index) => {
                 return(
                   <tr className="bg-primaryBlack hover:bg-secondaryBlack transition" key={index}>
                     <td className="py-2">{index + 1}</td>
-                    <td className="py-2 pl-4 text-left">{player.username}</td>
+                    <td className="username-table-cell">{player.username}</td>
                     <td className="py-2">{player.high_score}</td>
                   </tr>
                 )

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -11,17 +11,18 @@ export default function Navbar() {
     <nav>
       <div className="navbar justify-between">
         <Link to={"/"}>
-          <h1 className="font-bold text-2xl hover:text-white/80">Higher Lower</h1>
+          <h1 className="font-bold hidden desktop:block text-2xl hover:text-white/80">Higher Lower</h1>
+          <h1 className="font-bold hidden mobile:block text-2xl hover:text-white/80">HL</h1>
         </Link>
 
         <div className="flex items-center">
-          <Link className="hover:text-white/80" to={"/leaderboard"}>Leaderboard</Link>
+          <Link className="hover:text-white/80 m600:text-[13px]" to={"/leaderboard"}>Leaderboard</Link>
 
           {signedIn ?
             <ProfileButton />
             :
             <Button 
-              classNames={"px-5 py-3 ml-8 button"}
+              classNames={"navbar-sign-in-button"}
               onClick={() => {navigate('/sign-in')}}
               text={"Sign In"}
             />

diff --git a/src/components/ProfileDropdown.tsx b/src/components/ProfileDropdown.tsx
@@ -18,7 +18,7 @@ export default function ProfileDropdown({ active }: { active: boolean } ) {
   return (
     <div className={active ? "profile-dropdown-active" : "hidden"}>
       <div className='px-5 py-2'>
-        <h4 className='font-medium text-center'>{username}</h4>
+        <h4 className='profile-dropdown-username'>{username}</h4>
       </div>
 
       <ProfileDropdownButton 

diff --git a/src/components/ProfileDropdownButton.tsx b/src/components/ProfileDropdownButton.tsx
@@ -7,7 +7,7 @@ type ButtonProps = {
 export default function ProfileDropdownButton({ onClick, icon, text }: ButtonProps) {
   return (
     <button onClick={onClick} className="profile-dropdown-button">
-      <span className="mr-5">
+      <span className="mr-5 m600:mr-3">
         {icon}
       </span>
       {text}

diff --git a/src/components/Score.tsx b/src/components/Score.tsx
@@ -6,7 +6,7 @@ export default function Score() {
   const { score, highScore } = useScoreStore()
 
   return (
-    <div className={signedIn ? "score justify-between" : "score justify-center"}>
+    <div className={signedIn ? "score justify-between" : "score justify-center portrait:justify-between"}>
       <p>Score: {score}</p>
       {signedIn && <p>High score: {highScore}</p>}
     </div>

diff --git a/src/components/SignInMain.tsx b/src/components/SignInMain.tsx
@@ -19,7 +19,7 @@ export default function SignInMain() {
 
   return (
     <div className="main items-center flex-col">
-      <h1 className="text-white font-bold w-[80%] mb-8 mx-auto text-[40px]">
+      <h1 className="sign-in-heading">
         Sign in
       </h1>
 
@@ -28,6 +28,7 @@ export default function SignInMain() {
           onClick={() => signIn("github")}
           icon={<AiFillGithub className="w-6 h-6 ml-3" />}
           text="Sign in with"
+          classNames="icon-button"
         />
       </div>
     </div>

diff --git a/src/components/TryAgainModal.tsx b/src/components/TryAgainModal.tsx
@@ -14,19 +14,19 @@ export default function TryAgainModal({ active }: Props) {
   return (
     <div className={active ? "active-modal" : "not-active-modal"}>
       <div className="modal-main">
-        <h2 className="font-bold text-[30px]">You scored</h2>
+        <h2 className="font-bold text-[30px] m700:text-[25px]">You scored</h2>
 
-        <h3 className="font-bold text-[35px] my-5">{score}</h3>
+        <h3 className="font-bold text-[35px] m700:text-[28px] m700:my-4 my-5">{score}</h3>
 
         <div className="flex flex-col w-max">
           <Button
-            classNames="button px-8 py-2.5 mb-4 text-[18px]"
+            classNames="button px-8 py-2.5 mb-4 text-[18px] m700:text-base"
             onClick={() => navigate("/")}
             text="Back to home"
           />
 
           <Button
-            classNames="button px-8 py-2.5 text-[18px]"
+            classNames="button px-8 py-2.5 text-[18px] m700:text-base"
             onClick={() => navigate(0)}
             text="Play again"
           />

diff --git a/src/components/VSComponent.tsx b/src/components/VSComponent.tsx
@@ -15,10 +15,9 @@ export default function VSComponent({ active, correct }: Props) {
         vs
 
         <div
-          style={{ top: correct ? '0' : '65px'  }}
-          className="vs-component-icon-wrapper"
+          className={correct ? "vs-component-icon-wrapper top-0" : "vs-component-icon-wrapper-hidden"}
         >
-          <IoMdCheckmark className="w-8 h-8 fill-[#111111]" />
+          <IoMdCheckmark className="vs-component-checkmark" />
         </div>
 
         <div className="vs-component-hiding-layer"></div>