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; isolation: isolate;
position: fixed; position: fixed;
z-index: 9; z-index: 9;
@ -7,12 +7,12 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
&.Job { &.job {
animation: none; animation: none;
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1); backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
} }
&.Visible { &.visible {
animation: 0.24s ease-in fadeInFilter; animation: 0.24s ease-in fadeInFilter;
animation-fill-mode: forwards; animation-fill-mode: forwards;
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0); 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 [visible, setVisible] = useState(open)
const classes = classNames({ const classes = classNames({
Overlay: true, [styles.overlay]: true,
Visible: displayed, [styles.visible]: displayed,
}) })
useEffect(() => { useEffect(() => {
@ -45,7 +45,9 @@ const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
event.stopPropagation() event.stopPropagation()
} }
return visible ? <div className={classes} onClick={handleClick} /> : null return visible ? (
<div className={classes} onClick={handleClick} ref={forwardedRef} />
) : null
}) })
Overlay.defaultProps = defaultProps Overlay.defaultProps = defaultProps