Merge pull request #392 from thebigbillz/dev

Revamped Homepage and Personalized Styles
zurichat · Sep 4, 2021 · e4fe772 · e4fe772
2 parents 9b77c92 + 4034a84
commit e4fe772
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 145 deletions.
diff --git 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
@@ -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
@@ -1,100 +1,100 @@
-* {
+.mini-board {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
-.mini-board{
- position: absolute;
- top: 0;
- width: 100%;
- bottom: 0;
+
+.mini-board {
+  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%;
+
+.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: 20.475000381469727px;
-  width: 20.475000381469727px;
-
+  height: 2.05rem;
+  width: 2.05rem;
   border-radius: 0px;
 }
 
-.profile-image-bg {
+.mini-profile-image-bg {
   background: #acffe6;
   position: absolute;
   z-index: -20;
-  height: 20.475000381469727px;
-  width: 20.475000381469727px;
-
-  border-radius: 50px;
+  height: 2.05rem;
+  width: 2.05rem;
+  border-radius: 50%;
 }
 
-.playerProfile p {
+.mini-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 {
+.mini-asideBar {
   display: flex;
-  height: 4rem;
+  height: 4.15rem;
 }
 
-.topBar {
+.mini-topBar {
   justify-content: flex-start;
-  padding-left: 3px;
 }
 
-.bottomBar {
+.mini-bottomBar {
   justify-content: flex-end;
-  padding-right: 3px;
 }
-.asideBar p {
-  padding-left: 4px;
+
+.mini-topBar .mini-playerProfile {
+  padding-left: 0.3rem;
 }
 
-.join-button {
-  padding: 7px 0px !important;
-  height: 32px;
-  width: 128px;
-  background-color: #00b87c;
-  border-radius: 0px;
+.mini-bottomBar .mini-playerProfile {
+  padding-right: 0.3rem;
+}
+
+.mini-asideBar p {
+  padding-left: 0.4rem;
+}
 
+.mini-board .join-button {
+  padding: 0.7rem 0rem !important;
+  height: 3.2rem;
+  width: 12.8rem;
+  background-color: #00b87c;
   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;
+.mini-bottomBar a {
+  display: flex;
+  align-items: flex-end;
+  text-decoration: none;
 }