jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use styled-jsx in HeaderBar

Browse Source
This commit is contained in:
Halit Aksoy 2022-07-14 22:59:48 +03:00
parent 0b308e570e
commit 57bf32cad9
1 changed files with 65 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/HeaderBar.tsx
View File

@ -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>
);
}