From e59c91f080ed6e1cc2a6f6a83b0f536b6530a35b Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 23:13:41 +0300
Subject: [PATCH] use styled-jsx in BoardView

---
 src/components/board/BoardView.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/board/BoardView.tsx b/src/components/board/BoardView.tsx
index 922ef91..5e2ebc2 100644
--- a/src/components/board/BoardView.tsx
+++ b/src/components/board/BoardView.tsx
@@ -39,18 +39,7 @@ const BoardView: FunctionComponent<{
     boardViewModel.pits[game.board.player2BankIndex()];
   const isPlayer2 = userKey === game?.player2Id;
   return (
-    <div
-      style={{
-        margin: "1vw",
-        padding: "2vw",
-        display: "grid",
-        gridTemplateColumns: "repeat(8, 11vw)",
-        gridTemplateRows: "repeat(2, 11vw)",
-        borderRadius: "3vw",
-        transition: "background-color 0.5s",
-        background: theme.boardColor,
-      }}
-    >
+    <div className="board" style={{ background: theme.boardColor }}>
       <StoreView
         context={context}
         pitViewModel={isPlayer2 ? player2BankViewModel : player1BankViewModel}
@@ -65,6 +54,17 @@ const BoardView: FunctionComponent<{
       />
       {isPlayer2 ? player1Pits?.reverse() : player2Pits?.reverse()}
       {isPlayer2 ? player2Pits : player1Pits}
+      <style jsx>{`
+        .board {
+          margin: 1vw;
+          padding: 2vw;
+          display: grid;
+          grid-template-columns: repeat(8, 11vw);
+          grid-template-rows: repeat(2, 11vw);
+          border-radius: 3vw;
+          transition: background-color 0.5s;
+        }
+      `}</style>
     </div>
   );
 };