From 57bf32cad9062fcdf7e88f9bf1a0459c4ea0949a Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 22:59:48 +0300
Subject: [PATCH] use styled-jsx in HeaderBar

---
 src/components/HeaderBar.tsx | 117 +++++++++++++++++++----------------
 1 file changed, 65 insertions(+), 52 deletions(-)

diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index 202d479..e1f85a5 100644
--- a/src/components/HeaderBar.tsx
+++ b/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:
-        MancalaGame | undefined,
+    context: Context,
+    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={{
-            padding: "0px 4vw",
-            background: context.themeManager.theme.appBarBgColor,
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            alignSelf: "stretch",
-        }}>
-            <h1 style={{ color: textColor, margin: "10px 0px" }}>
+        <div style={{ background: context.themeManager.theme.appBarBgColor }} className="header-bar">
+            <h1 style={{ color: textColor }} className="header-bar-title">
                 {context.texts.Mancala}
             </h1>
-            <div style={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "space-between",
-            }} >
-                <div style={{
-                    marginRight: "1vw",
-                    display: "flex",
-                    alignItems: "center",
-                }}>
-                    <ThemeSwitchMenu context={context} textColor={textColor} />
-                </div>
+            <div className="header-bar-right-panel">
+                <ThemeSwitchMenu context={context} textColor={textColor} />
                 {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
-            key={index}
-            style={{ color: textColor }}
-            //@ts-ignore
-            onMouseOver={(event) => (event.target.style.background =
-                context.themeManager.theme.background)}
-            //@ts-ignore
-            onMouseOut={(event) => (event.target.style.background = "transparent")}
-            onClick={() => (context.themeManager.theme = theme)}>
-            <div style={{
-                borderRadius: "5vw",
-                background: theme.boardColor,
-                width: "1vw",
-                height: "1vw",
-                marginRight: "1vw",
-            }} />
-            {theme.name}
-        </MenuItem>);
+        const themeBackground = context.themeManager.theme.background;
+        return (
+            <MenuItem
+                key={index}
+                style={{ color: textColor }}
+                //@ts-ignore
+                onMouseOver={(event) => (event.target.style.background = themeBackground)}
+                //@ts-ignore
+                onMouseOut={(event) => (event.target.style.background = "transparent")}
+                onClick={() => (context.themeManager.theme = theme)}>
+                <div style={{ background: theme.boardColor }} className="theme-color-circle" />
+                {theme.name}
+                <style jsx>{`
+                .theme-color-circle {
+                    border-radius: 5vw;
+                    width: 1vw;
+                    height: 1vw;
+                    margin-right: 1vw;
+                }
+                `}</style>
+            </MenuItem>
+        );
     })
-    return (<Menu
-        menuStyle={{
-            background: context.themeManager.theme.appBarBgColor,
-        }}
-        menuButton={menuButton}
-        transition
-        align="end">
-        {menuItems}
-    </Menu>);
+    return (
+        <div className="menu-container">
+            <Menu
+                menuStyle={{ background: context.themeManager.theme.appBarBgColor }}
+                menuButton={menuButton}
+                transition
+                align="end">
+                {menuItems}
+            </Menu>
+            <style jsx>{`
+                .menu-container {
+                    margin: 0 1vh;
+                    display: flex;
+                    align-items: center;
+                }
+            `}</style>
+        </div>
+    );
 }