Update: New settings close button

This commit is contained in:
nizune 2021-07-06 00:20:55 +02:00
parent 862bce7967
commit de05fad9f4
2 changed files with 25 additions and 10 deletions

View file

@ -1,4 +1,4 @@
import { ArrowBack, X, XCircle } from "@styled-icons/boxicons-regular";
import { ArrowBack, X } from "@styled-icons/boxicons-regular";
import { Helmet } from "react-helmet";
import { Switch, useHistory, useParams } from "react-router-dom";
@ -148,9 +148,9 @@ export function GenericSettings({
)}
{!isTouchscreenDevice && (
<div className={styles.action}>
<IconButton onClick={exitSettings}>
<XCircle size={48} />
</IconButton>
<div onClick={exitSettings} className={styles.closeButton}>
<X size={28} />
</div>
</div>
)}
</div>

View file

@ -168,24 +168,39 @@
&:after {
content: "ESC";
margin-top: 4px;
display: flex;
text-align: center;
align-content: center;
justify-content: center;
position: relative;
color: var(--foreground);
width: 48px;
width: 40px;
opacity: .5;
font-size: .75em;
}
.closeButton {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
height: 40px;
width: 40px;
border: 3px solid var(--tertiary-background);
cursor: pointer;
svg {
color: var(--secondary-foreground);
}
&:active {
transform: translateY(2px);
}
}
> div {
display: inline;
> svg {
&:active {
transform: translateY(2px);
}
}
}
}
}