granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix overlay styles

Browse source
This commit is contained in:
Justin Edmund 2023-06-23 19:14:16 -07:00
parent 9cbb34d281
commit 6051a814fa
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/common/Overlay/index.module.scss
View file

@ -1,4 +1,4 @@
.Overlay {
.overlay {
isolation: isolate;
position: fixed;
z-index: 9;
@ -7,12 +7,12 @@
bottom: 0;
left: 0;
&.Job {
&.job {
animation: none;
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
}
&.Visible {
&.visible {
animation: 0.24s ease-in fadeInFilter;
animation-fill-mode: forwards;
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);

8
components/common/Overlay/index.tsx
View file

@ -24,8 +24,8 @@ const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
const [visible, setVisible] = useState(open)
const classes = classNames({
Overlay: true,
Visible: displayed,
[styles.overlay]: true,
[styles.visible]: displayed,
})
useEffect(() => {
@ -45,7 +45,9 @@ const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
event.stopPropagation()
}
return visible ? <div className={classes} onClick={handleClick} /> : null
return visible ? (
<div className={classes} onClick={handleClick} ref={forwardedRef} />
) : null
})
Overlay.defaultProps = defaultProps