diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css index a8d668ae71bc9fe032bc942155e0ba1bf5bfb4a7..c6200c14e76233018b40c8c61bd163ec7860e5af 100644 --- a/src/components/camera-modal/camera-modal.css +++ b/src/components/camera-modal/camera-modal.css @@ -121,7 +121,7 @@ $main-button-size: 2.75rem; .button-row button { padding: 0.75rem 1rem; border-radius: 0.25rem; - background: white; + background: $ui-white; border: 1px solid $ui-black-transparent; font-weight: 600; font-size: 0.85rem; @@ -131,5 +131,22 @@ $main-button-size: 2.75rem; .button-row button.ok-button { background: $motion-primary; border: $motion-primary; - color: white; + color: $ui-white; +} + +@keyframes flash { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +.flash-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: $ui-white; + animation-name: flash; + animation-duration: 0.5s; + animation-fill-mode: forwards; /* Leave at 0 opacity after animation */ } diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx index f9411be11db8754b5c3b9c1c276e3d6d2c4cefac..f115a6f8a75f1c77286f15365137509313a8783f 100644 --- a/src/components/camera-modal/camera-modal.jsx +++ b/src/components/camera-modal/camera-modal.jsx @@ -72,6 +72,9 @@ const CameraModal = ({intl, ...props}) => ( ref={props.canvasRef} width="960" /> + {props.capture ? ( + <div className={styles.flashOverlay} /> + ) : null} </Box> {props.capture ? <Box className={styles.buttonRow}>