studycardtool/app
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Small stylesheet simplification

Browse Source
This commit is contained in:
Thiago Chaves 2022-07-15 01:32:31 +03:00
parent 6f600cf411
commit 92f6efa772
3 changed files with 8 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/expression-sets/details.tsx
View File

@ -50,7 +50,7 @@ const ExpressionSetDetailsPage: NextPage = () => {
}}
passHref
>
<a className="navigation-item-bottom text-navigation grow">
<a className="navigation-item bottom text-navigation grow">
<span>Practice this set</span>
</a>
</Link>

6
src/pages/expression-sets/practice.tsx
View File

@ -59,19 +59,19 @@ function ExpressionCardPracticeView({
{revealed ? (
<>
<Link href={{ pathname, query }} passHref>
<a className="navigation-item-bottom text-navigation grow">
<a className="navigation-item bottom text-navigation grow">
<div>Wrong</div>
</a>
</Link>
<Link href={{ pathname, query }} passHref>
<a className="navigation-item-bottom text-navigation grow">
<a className="navigation-item bottom text-navigation grow">
<div>Right</div>
</a>
</Link>
</>
) : (
<button
className="navigation-item-bottom text-navigation grow"
className="navigation-item bottom text-navigation grow"
onClick={() => setRevealed(true)}
>
Reveal

24
src/styles/components.css
View File

@ -93,6 +93,10 @@
height: 64px;
}
.navigation-item.bottom {
height: 80px;
}
.navigation-item:hover {
background-color: antiquewhite;
}
@ -101,26 +105,6 @@
background-color: bisque;
}
.navigation-item-bottom {
display: flex;
flex-shrink: 0;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: lavenderblush;
border: 1px solid darkslategray;
height: 80px;
}
.navigation-item-bottom:hover {
background-color: antiquewhite;
}
.navigation-item-bottom.active {
background-color: bisque;
}
.icon-button {
display: flex;
align-items: center;