From 9dc12f46192f322764810e7c016e15a5a7d9c580 Mon Sep 17 00:00:00 2001 From: Zerebos Date: Mon, 26 Feb 2024 19:31:06 -0500 Subject: [PATCH] Fix addon cards and reduced motion --- renderer/src/styles/ui/addonlist.css | 2 +- renderer/src/ui/modals/root.jsx | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/renderer/src/styles/ui/addonlist.css b/renderer/src/styles/ui/addonlist.css index a1b7638f..77a548e9 100644 --- a/renderer/src/styles/ui/addonlist.css +++ b/renderer/src/styles/ui/addonlist.css @@ -28,7 +28,7 @@ .bd-addon-list.bd-grid-view { display: grid; - grid-template-columns: auto auto; + grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 10px; } diff --git a/renderer/src/ui/modals/root.jsx b/renderer/src/ui/modals/root.jsx index 0191a5b9..837dcefd 100644 --- a/renderer/src/ui/modals/root.jsx +++ b/renderer/src/ui/modals/root.jsx @@ -19,14 +19,18 @@ export const Styles = Object.freeze({ }); +const AccessibilityContext = WebpackModules.getModule(m => m?._currentValue?.reducedMotion, {searchExports: true}); const FocusLock = WebpackModules.getModule(m => m?.render?.toString().includes("impressionProperties") && m?.render?.toString().includes(".Provider"), {searchExports: true}) ?? React.Fragment; export default function ModalRoot({className, transitionState, children, size = Sizes.DYNAMIC, style = Styles.CUSTOM}) { const visible = transitionState == 0 || transitionState == 1; // 300 ms - // const visible = transitionState; + + const preferences = React.useContext(AccessibilityContext ?? {}); + const reducedMotion = preferences?.reducedMotion?.enabled ?? document.documentElement?.classList.contains("reduce-motion"); + const springStyles = Spring.useSpring({ opacity: visible ? 1 : 0, - transform: visible ? "scale(1)" : "scale(0.7)", + transform: visible || reducedMotion ? "scale(1)" : "scale(0.7)", config: { duration: visible ? 300 : 100, easing: visible ? Anims.Easing.inOut(Anims.Easing.back()) : Anims.Easing.quad,