use styled-jsx in HeaderBar

src/components/HeaderBar.tsx

@@ -9,8 +9,8 @@ import "@szhsin/react-menu/dist/index.css";
 import "@szhsin/react-menu/dist/transitions/slide.css";
 
 function renderNewGameButton(
-    context: Context, game:
+    context: Context,
-        MancalaGame | undefined,
+    game: MancalaGame | undefined,
     onNewGameClick: () => void,
     userKeyWhoLeave: string | undefined,
     crashMessage: string | undefined): JSX.Element {
@@ -51,31 +51,12 @@ const HeaderBar: FunctionComponent<{
         context.themeManager.theme.textLightColor
     );
     return (
-        <div style={{
+        <div style={{ background: context.themeManager.theme.appBarBgColor }} className="header-bar">
-            padding: "0px 4vw",
+            <h1 style={{ color: textColor }} className="header-bar-title">
-            background: context.themeManager.theme.appBarBgColor,
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            alignSelf: "stretch",
-        }}>
-            <h1 style={{ color: textColor, margin: "10px 0px" }}>
                 {context.texts.Mancala}
             </h1>
-            <div style={{
+            <div className="header-bar-right-panel">
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "space-between",
-            }} >
-                <div style={{
-                    marginRight: "1vw",
-                    display: "flex",
-                    alignItems: "center",
-                }}>
                 <ThemeSwitchMenu context={context} textColor={textColor} />
-                </div>
                 {renderNewGameButton(context, game, onNewGameClick, userKeyWhoLeave, crashMessage)}
                 {game &&
                     !userKeyWhoLeave &&
@@ -88,6 +69,25 @@ const HeaderBar: FunctionComponent<{
                             onClick={onLeaveGameClick} />
                     )}
             </div>
+            <style jsx>{`
+            .header-bar {
+                padding: 0px 4vw;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                align-self: stretch;
+            }
+            .header-bar-title {
+                margin: 10px 0px;
+            }
+            .header-bar-right-panel {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+            }
+        `}</style>
         </div>)
 }
 export default HeaderBar;
@@ -100,33 +100,46 @@ const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string }
         light_mode
     </span>;
     const menuItems = context.themeManager.themes.map((theme, index) => {
-        return (<MenuItem
+        const themeBackground = context.themeManager.theme.background;
+        return (
+            <MenuItem
                 key={index}
                 style={{ color: textColor }}
                 //@ts-ignore
-            onMouseOver={(event) => (event.target.style.background =
+                onMouseOver={(event) => (event.target.style.background = themeBackground)}
-                context.themeManager.theme.background)}
                 //@ts-ignore
                 onMouseOut={(event) => (event.target.style.background = "transparent")}
                 onClick={() => (context.themeManager.theme = theme)}>
-            <div style={{
+                <div style={{ background: theme.boardColor }} className="theme-color-circle" />
-                borderRadius: "5vw",
-                background: theme.boardColor,
-                width: "1vw",
-                height: "1vw",
-                marginRight: "1vw",
-            }} />
                 {theme.name}
-        </MenuItem>);
+                <style jsx>{`
+                .theme-color-circle {
+                    border-radius: 5vw;
+                    width: 1vw;
+                    height: 1vw;
+                    margin-right: 1vw;
+                }
+                `}</style>
+            </MenuItem>
+        );
     })
-    return (<Menu
+    return (
-        menuStyle={{
+        <div className="menu-container">
-            background: context.themeManager.theme.appBarBgColor,
+            <Menu
-        }}
+                menuStyle={{ background: context.themeManager.theme.appBarBgColor }}
                 menuButton={menuButton}
                 transition
                 align="end">
                 {menuItems}
-    </Menu>);
+            </Menu>
+            <style jsx>{`
+                .menu-container {
+                    margin: 0 1vh;
+                    display: flex;
+                    align-items: center;
+                }
+            `}</style>
+        </div>
+    );
 }