streamlined gameboard view, proportion adjustments

src/components/Card/CardRow.scss

@@ -64,6 +64,18 @@
             color: white;
             width: 25%;
         }
+
+        .cc-tier {
+            &-1 {
+                background-color: rgb(3, 30, 3);
+            }
+            &-2 {
+                background-color: rgb(80, 80, 7);
+            }
+            &-3 {
+                background-color: rgb(9, 9, 77);
+            }
+        }
     }
 }
   

src/components/Card/CardRow.tsx

@@ -33,7 +33,7 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
                 <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>
             </div>
             <div className={`card-row-cards-visible ${collapsed && 'hidden'}`}>
-                <div className="card-count">
+                <div className={`card-count cc-tier-${tier}`}>
                     <p>Remaining: {state.gameboard.deck[typedTier].length}</p>
                 </div>
                 { cards && cards.map((cardData: CardData) => {

src/components/Gameboard/Gameboard.scss

@@ -0,0 +1,13 @@
+.gameboard-rows {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+
+    background-color: rgb(57, 57, 65);
+    width: 90vw;
+    padding: 1rem 1rem 4rem;
+
+    .round-marker {
+        font-size: 1.5rem;
+    }
+}

src/components/Gameboard/Gameboard.tsx

@@ -87,7 +87,7 @@ export default function Gameboard({ state, setState }: StateProps) {
         } else {
             setView(
                 <div className="gameboard-rows">
-                    <strong>Round: {state.round}</strong>
+                    <h1 className="round-marker">Round: {state.round}</h1>
                     <Nobles state={state} setState={setState} />
                     <CardRow tier={3} state={state} setState={setState} />
                     <CardRow tier={2} state={state} setState={setState} />

src/components/Nobles/Nobles.scss

@@ -3,10 +3,16 @@
 .nobles-panel {
     display: flex;
     flex-flow: column nowrap;
-    background-color: rgb(240, 236, 225);
+    background-color: rgb(212, 196, 152);
     color: black;
-    padding: 1.5rem;
+    padding: 1.5rem 0;
+    width: 65vw;
 
+    .noble-header {
+        position: relative;
+        bottom: 1rem;
+    }
+    
     .all-nobles {
         display: flex;
         flex-flow: row nowrap;
@@ -15,6 +21,13 @@
         .noble-card {
             display: inline-flex;
             flex-flow: column nowrap;
+            align-items: center;
+            height: 100%;
+            min-width: 25%;
+            border-right: 1px solid black;
+            &:last-child {
+                border-right: none;
+            }
 
             .mapped-noble-costs {
                 display: flex;

src/components/Nobles/Nobles.tsx

@@ -15,13 +15,12 @@ export default function Nobles({ state }: StateProps) {
 
     return (
         <div className="nobles-panel">
-            <strong>NOBLES</strong>
+            <strong className="noble-header">NOBLES: 3 points each</strong>
             <div className="all-nobles">
                 {
                 state && state.gameboard.nobles.map((noble: NobleData) => {
                     return (
                         <div className="noble-card" key={v4()}>
-                            <p>{noble.points} points</p>
                             <p>Cost:</p>
                             <div className="mapped-noble-costs">
                             {

src/components/Player/AllPlayers.scss

@@ -3,8 +3,11 @@
 
 .all-players {
     display: flex;
+    justify-content: space-around;
+    min-width: 80vw;
     background-color: rgb(237, 213, 156);
     color: black;
+
     .player-ui {
         p {
             margin: 1rem;