Remove the need for nested child selectors to workaround emotional (sic) issues

This workaround was added in https://github.com/ente-io/photos-web/pull/1027,
but it has stopped working again, likely due to the update to Next 14. We're
only using nested child selectors in one place (not 100% sure of this, but I did
try to poke around and verify that statement a bit).

This was causing an error in dev mode, and silent failure in production mode.

- Hover state is restored
- dev mode seems to work fine
- yarn build also works
This commit is contained in:
Manav Rathi 2024-02-22 09:42:44 +05:30
parent 6dd6af3eb1
commit b3ad2dc9ed
2 changed files with 14 additions and 22 deletions

View file

@ -205,12 +205,16 @@ const Cont = styled('div')<{ disabled: boolean }>`
pointer-events: none;
}
&:hover ${Check} {
opacity: 0.5;
}
&:hover ${HoverOverlay} {
opacity: 1;
&:hover {
input[type='checkbox'] {
opacity: 0.5;
}
.preview-card-hover-overlay {
opacity: 1;
}
}
border-radius: 4px;
`;
@ -342,7 +346,10 @@ export default function PreviewCard(props: IProps) {
</AvatarOverlay>
)}
<HoverOverlay checked={selected} />
<HoverOverlay
className="preview-card-hover-overlay"
checked={selected}
/>
<InSelectRangeOverLay
$active={isRangeSelectActive && isInsSelectRange}
/>

View file

@ -25,22 +25,7 @@ const nextConfig = {
/* generate a static export when we run `next build` */
output: 'export',
compiler: {
emotion: {
importMap: {
'@mui/material': {
styled: {
canonicalImport: ['@emotion/styled', 'default'],
styledBaseImport: ['@mui/material', 'styled'],
},
},
'@mui/material/styles': {
styled: {
canonicalImport: ['@emotion/styled', 'default'],
styledBaseImport: ['@mui/material/styles', 'styled'],
},
},
},
},
emotion: true,
},
transpilePackages: [
'@/utils',