From 4cfc41374e81caf651664138200e4091b73de329 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Thu, 25 Aug 2022 12:09:42 -0500 Subject: [PATCH] css migrated to scss, beginning to refactor --- src/components/Card/Card.scss | 30 ++++++++++++++++++ src/components/Card/CardRow.tsx | 1 + src/components/Nobles/Nobles.css | 18 ----------- src/components/Nobles/Nobles.scss | 18 +++++++++++ src/components/Nobles/Nobles.tsx | 2 +- src/components/Player/AllPlayers.css | 9 ------ src/components/Player/AllPlayers.scss | 9 ++++++ src/components/Player/AllPlayers.tsx | 2 +- src/components/Player/Player.css | 0 src/components/Resources/AvailableChips.css | 10 ------ src/components/Resources/AvailableChips.scss | 10 ++++++ src/components/Resources/AvailableChips.tsx | 2 +- src/sass/App.scss | 32 -------------------- 13 files changed, 71 insertions(+), 72 deletions(-) delete mode 100644 src/components/Nobles/Nobles.css delete mode 100644 src/components/Player/AllPlayers.css delete mode 100644 src/components/Player/Player.css delete mode 100644 src/components/Resources/AvailableChips.css diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index e69de29..8176665 100644 --- a/src/components/Card/Card.scss +++ b/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; +} \ No newline at end of file diff --git a/src/components/Card/CardRow.tsx b/src/components/Card/CardRow.tsx index f998d0e..713975e 100644 --- a/src/components/Card/CardRow.tsx +++ b/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); diff --git a/src/components/Nobles/Nobles.css b/src/components/Nobles/Nobles.css deleted file mode 100644 index 3d36546..0000000 --- a/src/components/Nobles/Nobles.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/components/Nobles/Nobles.scss b/src/components/Nobles/Nobles.scss index e69de29..3d36546 100644 --- a/src/components/Nobles/Nobles.scss +++ b/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; +} \ No newline at end of file diff --git a/src/components/Nobles/Nobles.tsx b/src/components/Nobles/Nobles.tsx index 1184e53..49322c4 100644 --- a/src/components/Nobles/Nobles.tsx +++ b/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) { diff --git a/src/components/Player/AllPlayers.css b/src/components/Player/AllPlayers.css deleted file mode 100644 index 19579b1..0000000 --- a/src/components/Player/AllPlayers.css +++ /dev/null @@ -1,9 +0,0 @@ -.all-players { - display: flex; - background-color: rgb(237, 213, 156); - color: black; -} - -.all-players p { - margin: 1rem; -} \ No newline at end of file diff --git a/src/components/Player/AllPlayers.scss b/src/components/Player/AllPlayers.scss index e69de29..19579b1 100644 --- a/src/components/Player/AllPlayers.scss +++ b/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; +} \ No newline at end of file diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx index 6c61687..f5e6091 100644 --- a/src/components/Player/AllPlayers.tsx +++ b/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) => ); diff --git a/src/components/Player/Player.css b/src/components/Player/Player.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Resources/AvailableChips.css b/src/components/Resources/AvailableChips.css deleted file mode 100644 index 28281f0..0000000 --- a/src/components/Resources/AvailableChips.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/components/Resources/AvailableChips.scss b/src/components/Resources/AvailableChips.scss index e69de29..28281f0 100644 --- a/src/components/Resources/AvailableChips.scss +++ b/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; +} \ No newline at end of file diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx index 058f7a5..e0fd510 100644 --- a/src/components/Resources/AvailableChips.tsx +++ b/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 ( diff --git a/src/sass/App.scss b/src/sass/App.scss index 1f5868b..bdc90c8 100644 --- a/src/sass/App.scss +++ b/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; } \ No newline at end of file