css migrated to scss, beginning to refactor

src/components/Card/Card.scss

@@ -0,0 +1,30 @@
+.card-row {
+    display: flex;
+    flex-flow: column nowrap;
+    margin: 2rem;
+    width: 80vw;
+}
+  
+.card-row-cards-visible {
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    justify-content: space-around;
+}
+  
+.card {
+    width: 25%;
+}
+  
+.tier-1 {
+    background-color: green;
+}
+  
+.tier-2 {
+    background-color: yellow;
+    color: black;
+}
+  
+.tier-3 {
+    background-color: blue;
+}

src/components/Card/CardRow.tsx

@@ -3,6 +3,7 @@ import { CardData } from "../../util/types"
 import Card from "../Card/Card"
 import { v4 } from 'uuid';
 import cardTierToKey from '../../util/cardTierToKey';
+import "./Card.scss";
 
 export default function CardRow({tier, state, setState}: CardRowProps) {
     const typedTier = cardTierToKey(tier);

src/components/Nobles/Nobles.css

@@ -1,18 +0,0 @@
-.nobles-panel {
-    display: flex;
-    flex-flow: column nowrap;
-    background-color: rgb(240, 236, 225);
-    padding: 1.5rem;
-    color: black;
-}
-
-.all-nobles {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-around;
-}
-
-.noble-card {
-    display: inline-flex;
-    flex-flow: column nowrap;
-}

src/components/Nobles/Nobles.scss

@@ -0,0 +1,18 @@
+.nobles-panel {
+    display: flex;
+    flex-flow: column nowrap;
+    background-color: rgb(240, 236, 225);
+    padding: 1.5rem;
+    color: black;
+}
+
+.all-nobles {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+}
+
+.noble-card {
+    display: inline-flex;
+    flex-flow: column nowrap;
+}

src/components/Nobles/Nobles.tsx

@@ -1,7 +1,7 @@
 import { v4 } from "uuid";
 import { NobleData, ResourceCost } from "../../util/types";
 import { StateProps } from "../../util/propTypes";
-import "../Nobles/Nobles.css"
+import "../Nobles/Nobles.scss"
 
 export default function Nobles({ state }: StateProps) {
     if (!state.gameboard.nobles.length) {

src/components/Player/AllPlayers.css

@@ -1,9 +0,0 @@
-.all-players {
-    display: flex;
-    background-color: rgb(237, 213, 156);
-    color: black;
-}
-
-.all-players p {
-    margin: 1rem;
-}

src/components/Player/AllPlayers.scss

@@ -0,0 +1,9 @@
+.all-players {
+    display: flex;
+    background-color: rgb(237, 213, 156);
+    color: black;
+}
+
+.all-players p {
+    margin: 1rem;
+}

src/components/Player/AllPlayers.tsx

@@ -2,7 +2,7 @@ import { v4 } from "uuid";
 import Player from "./Player";
 import { PlayerData } from "../../util/types";
 import { StateProps } from "../../util/propTypes";
-import "./AllPlayers.css"
+import "./AllPlayers.scss"
 
 export default function AllPlayers({ state, setState }: StateProps) {
     const playerPool = state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} />);

src/components/Resources/AvailableChips.css

@@ -1,10 +0,0 @@
-.available-chips {
-    display: flex;
-    flex-flow: row nowrap;
-    background-color: rgb(236, 238, 186);
-    color: black;
-}
-
-.available-chips p {
-    margin: 1rem;
-}

src/components/Resources/AvailableChips.scss

@@ -0,0 +1,10 @@
+.available-chips {
+    display: flex;
+    flex-flow: row nowrap;
+    background-color: rgb(236, 238, 186);
+    color: black;
+}
+
+.available-chips p {
+    margin: 1rem;
+}

src/components/Resources/AvailableChips.tsx

@@ -1,7 +1,7 @@
 import { ResourceProps } from "../../util/propTypes";
 import { ResourceCost } from "../../util/types";
 import { v4 } from "uuid";
-import "./AvailableChips.css"
+import "./AvailableChips.scss"
 
 export default function AvailableChips({ state, liftSelection }: ResourceProps) {
     return (

src/sass/App.scss

@@ -6,36 +6,4 @@
     margin: 0 auto;
     padding: 2rem;
     text-align: center;
-}
-  
-.card-row {
-    display: flex;
-    flex-flow: column nowrap;
-    margin: 2rem;
-    width: 80vw;
-}
-  
-.card-row-cards-visible {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    justify-content: space-around;
-}
-  
-.card {
-    width: 25%;
-}
-  
-  
-.tier-1 {
-    background-color: green;
-}
-  
-.tier-2 {
-    background-color: yellow;
-    color: black;
-}
-  
-.tier-3 {
-    background-color: blue;
 }