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 passHref
> >
<a className="navigation-item-bottom text-navigation grow"> <a className="navigation-item bottom text-navigation grow">
<span>Practice this set</span> <span>Practice this set</span>
</a> </a>
</Link> </Link>

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

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

24
src/styles/components.css
View File

@ -93,6 +93,10 @@
height: 64px; height: 64px;
} }
.navigation-item.bottom {
height: 80px;
}
.navigation-item:hover { .navigation-item:hover {
background-color: antiquewhite; background-color: antiquewhite;
} }
@ -101,26 +105,6 @@
background-color: bisque; 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 { .icon-button {
display: flex; display: flex;
align-items: center; align-items: center;