From 25fda9c1fa66afd645842b780b8e4ef8f74902c7 Mon Sep 17 00:00:00 2001
From: thebigbillz <adenugbafavour@gmail.com>
Date: Sat, 4 Sep 2021 06:33:14 +0100
Subject: [PATCH 1/2] Revamped Homepage

---
 client/src/Pages/Homepage.js/Homepage.css     | 133 ++++++++++--------
 client/src/Pages/Homepage.js/Homepage.js      |  36 ++---
 client/src/components/MiniBoard/MiniBoard.css |  83 ++++++-----
 client/src/components/MiniBoard/MiniBoard.js  |   4 +-
 4 files changed, 131 insertions(+), 125 deletions(-)

diff --git a/client/src/Pages/Homepage.js/Homepage.css b/client/src/Pages/Homepage.js/Homepage.css
index 266d6c41..dc072a43 100644
--- a/client/src/Pages/Homepage.js/Homepage.css
+++ b/client/src/Pages/Homepage.js/Homepage.css
@@ -12,47 +12,47 @@ header {
   align-items: center;
   flex-wrap: wrap;
 }
-.color{
-  flex-basis: 33.33%;
-  padding-top: 3rem;
-  padding-bottom: 6rem;
-  height: 70%;
-}
-.one, .two{
-  border-right: 1px solid black;
-  border-bottom: 1px solid black;
-  border-top:none;
-  border-left:none;
-}
-.three{
-  border-right: none;
-  border-bottom: 1px solid black;
-  border-top:none;
-  border-left:none;
-}
-.four, .five{
-  border-right: 1px solid black;
-  border-bottom: none;
-  border-top:none;
-  border-left:none;
-  padding-top: 6rem;
-}
-.six{
-  padding-top: 6rem;
+
+.app__container {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 12rem;
+  padding-right: 12rem;
+  padding-top: 4rem;
+  padding-bottom: 4rem;
 }
-.box{
-  width:85%;
-  position: relative;
-  height: 90%;
-  margin: 0 auto 0 auto;
+
+.mini-one,
+.mini-two,
+.mini-three {
+  display: flex;
+  flex-basis: 33.33%;
+  padding-top: 2rem;
+  padding-bottom: 3rem;
+  justify-content: center;
 }
 
-.app__container{
+.mini-four,
+.mini-five,
+.mini-six {
   display: flex;
-  flex-wrap: wrap;
-  height: 100vh;
-  padding: 3rem 6rem;
+  flex-basis: 33.33%;
+  padding-top: 3rem;
+  padding-bottom: 2rem;
+  justify-content: center;
+}
 
+.mini-one,
+.mini-two {
+  border-right: 1px solid #5151512c;
+  border-bottom: 1px solid #5151512c;
+}
+.mini-three {
+  border-bottom: 1px solid #5151512c;
+}
+.mini-four,
+.mini-five {
+  border-right: 1px solid #5151512c;
 }
 
 @media screen and (max-width: 933px) {
@@ -65,46 +65,57 @@ header {
   }
 }
 
-@media (min-width:768px) and (max-width: 900px){
-  .color{
-    flex-basis: 50%;
+@media (max-width: 1024px) {
+  .app__container {
+    padding: 2rem 2rem;
   }
-  .two,.four{
+
+  .mini-one,
+  .mini-two {
     border-right: none;
+    border-bottom: none;
+    flex-basis: 50%;
   }
-  .three{
-    border-right: 1px solid black;
-    padding-top: 6rem;
+
+  .mini-three,
+  .mini-four,
+  .mini-five,
+  .mini-six {
+    border-top: 1px solid #5151512c;
+    border-right: none;
+    border-bottom: none;
+    border-left: none;
+    flex-basis: 50%;
   }
-  .six{
-    border-top: 1px solid black;
+  .mini-one,
+  .mini-three,
+  .mini-five {
+    border-right: 1px solid #5151512c;
   }
 }
 
-@media (max-width: 767px){
-  .app__container{
-    padding: 3rem 3rem;
-  }
-  .color{
-    flex-basis: 100%;
-  }
-  .box{
-    width: 50%;
+@media (max-width: 767px) {
+  .app__container {
+    padding: 2rem 2rem;
   }
-  .one{
+
+  .mini-one {
     border-right: none;
     border-bottom: none;
+    flex-basis: 100%;
   }
-  .two,.three,.four,.five, .six{
-    border-top: 1px solid black;
+  .mini-two,
+  .mini-three,
+  .mini-four,
+  .mini-five,
+  .mini-six {
+    border-top: 1px solid #5151512c;
     border-right: none;
     border-bottom: none;
     border-left: none;
+    flex-basis: 100%;
   }
 }
 
-@media (max-width: 500px){
-.box{
-  width: 70%;
-}
+@media (max-width: 500px) {
 }
diff --git a/client/src/Pages/Homepage.js/Homepage.js b/client/src/Pages/Homepage.js/Homepage.js
index 726cf1b3..eb18890d 100644
--- a/client/src/Pages/Homepage.js/Homepage.js
+++ b/client/src/Pages/Homepage.js/Homepage.js
@@ -12,35 +12,23 @@ function Homepage() {
         </nav>
       </header>
       <div className="app__container">
-        <div className="color one">
-          <div className="box">
-            <MiniBoard id="234" playerOne="Annietah" playerTwo="codeJonin" />
-          </div>
+        <div className="mini-one">
+          <MiniBoard id="234" playerOne="Annietah" playerTwo="codeJonin" />
         </div>
-        <div className="color two">
-          <div className="box">
-            <MiniBoard id="234" playerOne="" playerTwo="odiri" />
-          </div>
+        <div className="mini-two">
+          <MiniBoard id="234" playerOne="" playerTwo="odiri" />
         </div>
-        <div className="color three">
-          <div className="box">
-            <MiniBoard id="234" playerOne="Vermilion" playerTwo="" />
-          </div>
+        <div className="mini-three">
+          <MiniBoard id="234" playerOne="Vermilion" playerTwo="" />
         </div>
-        <div className="color four">
-          <div className="box">
-            <MiniBoard id="234" playerOne="" playerTwo="" />
-          </div>
+        <div className="mini-four">
+          <MiniBoard id="234" playerOne="" playerTwo="" />
         </div>
-        <div className="color five">
-          <div className="box">
-            <MiniBoard id="234" playerOne="SOI" playerTwo="Realice" />
-          </div>
+        <div className="mini-five">
+          <MiniBoard id="234" playerOne="SOI" playerTwo="Realice" />
         </div>
-        <div className="color six">
-          <div className="box">
-            <MiniBoard id="234" playerOne="DevPriest" playerTwo="bombos" />
-          </div>
+        <div className="mini-six">
+          <MiniBoard id="234" playerOne="DevPriest" playerTwo="bombos" />
         </div>
       </div>
     </div>
diff --git a/client/src/components/MiniBoard/MiniBoard.css b/client/src/components/MiniBoard/MiniBoard.css
index bb2ff156..d1c80edf 100644
--- a/client/src/components/MiniBoard/MiniBoard.css
+++ b/client/src/components/MiniBoard/MiniBoard.css
@@ -3,20 +3,24 @@
   padding: 0;
   box-sizing: border-box;
 }
-.mini-board{
- position: absolute;
- top: 0;
- width: 100%;
- bottom: 0;
+
+html {
+  font-size: 62.5%;
 }
 
-.board-image {
-  height: 100%;
-  width: 100%;
+.mini-board {
+  height: 34.8rem;
+  width: 26.4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 0px;
 }
-img{
-  width: 100%;
-  height: 100%;
+
+.board-image {
+  /* height: 26.14rem;
+  width: 26.04rem; */
+  border-radius: 0px;
 }
 
 .playerProfile {
@@ -28,8 +32,8 @@ img{
 
 .profile-image {
   background: url("../../assets/people.png");
-  height: 20.475000381469727px;
-  width: 20.475000381469727px;
+  height: 2.05rem;
+  width: 2.05rem;
 
   border-radius: 0px;
 }
@@ -38,63 +42,64 @@ img{
   background: #acffe6;
   position: absolute;
   z-index: -20;
-  height: 20.475000381469727px;
-  width: 20.475000381469727px;
+  height: 2.05rem;
+  width: 2.05rem;
 
-  border-radius: 50px;
+  border-radius: 50%;
 }
 
 .playerProfile p {
   font-family: Lato;
-  font-size: 16px;
+  font-size: 1.6rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 19px;
+  line-height: 1.9rem;
   letter-spacing: 0em;
   text-align: left;
 }
 
 .asideBar {
   display: flex;
-  height: 4rem;
+  height: 4.15rem;
 }
 
 .topBar {
   justify-content: flex-start;
-  padding-left: 3px;
 }
 
 .bottomBar {
   justify-content: flex-end;
-  padding-right: 3px;
 }
+
+.topBar .playerProfile {
+  padding-left: 0.3rem;
+}
+
+.bottomBar .playerProfile {
+  padding-right: 0.3rem;
+}
+
 .asideBar p {
-  padding-left: 4px;
+  padding-left: 0.4rem;
 }
 
-.join-button {
-  padding: 7px 0px !important;
-  height: 32px;
-  width: 128px;
+.mini-board .join-button {
+  padding: 0.7rem 0rem !important;
+  height: 3.2rem;
+  width: 12.8rem;
   background-color: #00b87c;
-  border-radius: 0px;
-
   font-family: Lato;
-  font-size: 12px;
+  font-size: 1.2rem;
   font-style: normal;
   font-weight: 500;
-  line-height: 14px;
+  line-height: 1.4rem;
   letter-spacing: 0em;
   text-align: center;
-
-  /* display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center; */
-
-  background: #00b87c;
+  border-radius: 0rem;
 }
 
-.bottomBar .join-button {
-  align-self: flex-end;
+.bottomBar a {
+  display: flex;
+  align-items: flex-end;
+  text-decoration: none;
 }
diff --git a/client/src/components/MiniBoard/MiniBoard.js b/client/src/components/MiniBoard/MiniBoard.js
index a1ac8c43..3959e5f0 100644
--- a/client/src/components/MiniBoard/MiniBoard.js
+++ b/client/src/components/MiniBoard/MiniBoard.js
@@ -35,7 +35,9 @@ function MiniBoard({ id, playerOne, playerTwo }) {
           </div>
         ) : (
           <Link to="/game">
-            <button className="join-button">Join as Player 2</button>
+            <button className="join-button bottom-button">
+              Join as Player 2
+            </button>
           </Link>
         )}
       </div>

From 4034a84281395c26fc0d8740bc8b85d5cddc3861 Mon Sep 17 00:00:00 2001
From: thebigbillz <adenugbafavour@gmail.com>
Date: Sat, 4 Sep 2021 08:52:46 +0100
Subject: [PATCH 2/2] Style Change Mini-Board

---
 client/src/components/MiniBoard/MiniBoard.css | 33 ++++++++-----------
 client/src/components/MiniBoard/MiniBoard.js  | 16 ++++-----
 2 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/client/src/components/MiniBoard/MiniBoard.css b/client/src/components/MiniBoard/MiniBoard.css
index d1c80edf..469c6914 100644
--- a/client/src/components/MiniBoard/MiniBoard.css
+++ b/client/src/components/MiniBoard/MiniBoard.css
@@ -1,10 +1,10 @@
-* {
+.mini-board {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-html {
+.mini-board {
   font-size: 62.5%;
 }
 
@@ -17,38 +17,33 @@ html {
   border-radius: 0px;
 }
 
-.board-image {
-  /* height: 26.14rem;
-  width: 26.04rem; */
+.mini-board .board-image {
   border-radius: 0px;
 }
 
-.playerProfile {
+.mini-playerProfile {
   display: flex;
-  /* height: 32px; */
   align-items: center;
   position: relative;
 }
 
-.profile-image {
+.mini-profile-image {
   background: url("../../assets/people.png");
   height: 2.05rem;
   width: 2.05rem;
-
   border-radius: 0px;
 }
 
-.profile-image-bg {
+.mini-profile-image-bg {
   background: #acffe6;
   position: absolute;
   z-index: -20;
   height: 2.05rem;
   width: 2.05rem;
-
   border-radius: 50%;
 }
 
-.playerProfile p {
+.mini-playerProfile p {
   font-family: Lato;
   font-size: 1.6rem;
   font-style: normal;
@@ -58,28 +53,28 @@ html {
   text-align: left;
 }
 
-.asideBar {
+.mini-asideBar {
   display: flex;
   height: 4.15rem;
 }
 
-.topBar {
+.mini-topBar {
   justify-content: flex-start;
 }
 
-.bottomBar {
+.mini-bottomBar {
   justify-content: flex-end;
 }
 
-.topBar .playerProfile {
+.mini-topBar .mini-playerProfile {
   padding-left: 0.3rem;
 }
 
-.bottomBar .playerProfile {
+.mini-bottomBar .mini-playerProfile {
   padding-right: 0.3rem;
 }
 
-.asideBar p {
+.mini-asideBar p {
   padding-left: 0.4rem;
 }
 
@@ -98,7 +93,7 @@ html {
   border-radius: 0rem;
 }
 
-.bottomBar a {
+.mini-bottomBar a {
   display: flex;
   align-items: flex-end;
   text-decoration: none;
diff --git a/client/src/components/MiniBoard/MiniBoard.js b/client/src/components/MiniBoard/MiniBoard.js
index 3959e5f0..012a6653 100644
--- a/client/src/components/MiniBoard/MiniBoard.js
+++ b/client/src/components/MiniBoard/MiniBoard.js
@@ -6,11 +6,11 @@ import boardImg from "../../assets/mini-board.png";
 function MiniBoard({ id, playerOne, playerTwo }) {
   return (
     <div className="mini-board">
-      <div className="asideBar topBar">
+      <div className="mini-asideBar mini-topBar">
         {playerOne ? (
-          <div className="playerProfile playerOne">
-            <div className="profile-image"></div>
-            <div className="profile-image-bg"></div>
+          <div className="mini-playerProfile">
+            <div className="mini-profile-image"></div>
+            <div className="mini-profile-image-bg"></div>
             <p>Player 1: @{playerOne}</p>
           </div>
         ) : (
@@ -26,11 +26,11 @@ function MiniBoard({ id, playerOne, playerTwo }) {
           <img src={boardImg} alt="" />{" "}
         </a>
       </div>
-      <div className="asideBar bottomBar">
+      <div className="mini-asideBar mini-bottomBar">
         {playerTwo ? (
-          <div className="playerProfile playerTwo">
-            <div className="profile-image"></div>
-            <div className="profile-image-bg"></div>
+          <div className="mini-playerProfile playerTwo">
+            <div className="mini-profile-image"></div>
+            <div className="mini-profile-image-bg"></div>
             <p>Player 2: @{playerTwo}</p>
           </div>
         ) : (