refactor HeaderBar

src/components/HeaderBar.tsx

@@ -7,8 +7,10 @@ import { getColorByBrightness } from "../util/ColorUtil";
 import Button from "./Button";
 import "@szhsin/react-menu/dist/index.css";
 import "@szhsin/react-menu/dist/transitions/slide.css";
-//@ts-ignore
-import MancalaIcon from "jsx:../mancala.svg";
+import HeaderbarIcon from "./headerbar/HeaderbarIcon";
+import HeaderbarTitle from "./headerbar/HeaderbarTitle";
+import Row from "./Row";
+import ThemeSwitchMenu from "./headerbar/ThemeSwitchMenu";
 
 function renderNewGameButton(
     context: Context,
@@ -54,15 +56,11 @@ const HeaderBar: FunctionComponent<{
     );
     return (
         <div style={{ background: context.themeManager.theme.appBarBgColor }} className="header-bar">
-            <div className="header-bar-left-panel">
-                <div className="header-bar-icon-wrapper">
-                    <MancalaIcon className="header-bar-icon" style={{ height: "30px", width: "30px" }} />
-                </div>
-                <h1 style={{ color: textColor }} className="header-bar-title">
-                    {context.texts.Mancala}
-                </h1>
-            </div>
-            <div className="header-bar-right-panel">
+            <Row>
+                <HeaderbarIcon />
+                <HeaderbarTitle title={context.texts.Mancala} color={textColor} />
+            </Row>
+            <Row>
                 <ThemeSwitchMenu context={context} textColor={textColor} />
                 {renderNewGameButton(context, game, onNewGameClick, userKeyWhoLeave, crashMessage)}
                 {game &&
@@ -75,7 +73,7 @@ const HeaderBar: FunctionComponent<{
                             text={context.texts.Leave}
                             onClick={onLeaveGameClick} />
                     )}
-            </div>
+            </Row>
             <style jsx>{`
             .header-bar {
                 padding: 0px 4vw;
@@ -85,80 +83,7 @@ const HeaderBar: FunctionComponent<{
                 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;
-            }
-            .header-bar-left-panel {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: flex-start;
-            }
-            .header-bar-icon-wrapper {
-                margin-right: 10px;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-            }
             `}</style>
         </div>)
 }
 export default HeaderBar;
-
-const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string }> = (props) => {
-    const { context, textColor } = props;
-    const menuButton = <span
-        style={{ color: textColor }}
-        className="material-symbols-outlined">
-        light_mode
-    </span>;
-    const menuItems = context.themeManager.themes.map((theme, index) => {
-        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 (
-        <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>
-    );
-}
-