Henry-Hiles/MentalMath
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve styling

Browse source
This commit is contained in:
Henry Hiles 2023-01-17 11:28:25 -05:00
parent 8d4d27eaf4
commit bf24b8e1ad
3 changed files with 69 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/App.jsx
View file

@ -103,11 +103,12 @@ export const App = () => {
setIndex((index) => ++index) setIndex((index) => ++index)
event.target.value = "" event.target.value = ""
setAnswerTimeout( if (index === numbers?.length)
setTimeout(() => { setAnswerTimeout(
setCorrectAnswer(true) setTimeout(() => {
}, 15000) setCorrectAnswer(true)
) }, 15000)
)
} }
}} }}
/> />

71
src/components/Nav.jsx
View file

@ -7,41 +7,46 @@ export const Nav = ({ mode, setMode, modeNumbers, setModeNumbers }) => {
<nav className={styles.nav}> <nav className={styles.nav}>
<ul> <ul>
<li> <li>
<h1>Mental Math</h1> <h1 id={styles.header}> Mental Math</h1>
</li> </li>
<li> <li>
<button <div id={styles.modeNumbers}>
onClick={() => <button
setModeNumbers((numbers) => onClick={() =>
numbers > 2 ? --numbers : numbers setModeNumbers((numbers) =>
) numbers > 2 ? --numbers : numbers
} )
> }
<FaMinus /> >
</button> <FaMinus />
<span>{modeNumbers}</span> </button>
<button <span>{modeNumbers}</span>
onClick={() => setModeNumbers((numbers) => ++numbers)} <button
> onClick={() =>
<FaPlus /> setModeNumbers((numbers) => ++numbers)
</button> }
<br /> >
<button <FaPlus />
className={`${ </button>
mode == Modes.Addition ? styles.active : "" </div>
} ${styles.modeButton}`} <div>
onClick={() => setMode(Modes.Addition)} <button
> className={`${
Addition mode == Modes.Addition ? styles.active : ""
</button> } ${styles.modeButton}`}
<button onClick={() => setMode(Modes.Addition)}
className={`${ >
mode == Modes.Subtraction ? styles.active : "" Addition
} ${styles.modeButton}`} </button>
onClick={() => setMode(Modes.Subtraction)} <button
> className={`${
Subtraction mode == Modes.Subtraction ? styles.active : ""
</button> } ${styles.modeButton}`}
onClick={() => setMode(Modes.Subtraction)}
>
Subtraction
</button>
</div>
</li> </li>
</ul> </ul>
</nav> </nav>

32
src/styles/Nav.module.css
View file

@ -20,37 +20,55 @@
justify-content: space-between; justify-content: space-between;
} }
.nav ul li { .nav li {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
.nav ul li * { .nav div {
display: flex;
}
.nav li * {
font-size: 1.25em; font-size: 1.25em;
} }
.nav ul li span { .nav span {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-end; align-items: flex-end;
} }
.nav ul li button { .nav button {
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
} }
.nav ul li .modeButton:not(.active) { .nav .modeButton:not(.active) {
text-decoration: underline; text-decoration: underline;
} }
.active {
font-weight: bold;
}
#modeNumbers {
gap: 5px;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.nav ul { .nav ul {
background-color: #161f27; background-color: #161f27;
} }
} }
.active { @media (max-width: 600px) {
font-weight: bold; #header {
display: none;
}
.nav ul {
justify-content: center;
}
} }