diff --git a/src/components/telemetry-modal/telemetry-modal.css b/src/components/telemetry-modal/telemetry-modal.css index 2835c370a1b21de346f23cc92f088e7875cda22f..564b0bd2ff9ba55cea50c27736bc6999faba0023 100644 --- a/src/components/telemetry-modal/telemetry-modal.css +++ b/src/components/telemetry-modal/telemetry-modal.css @@ -116,7 +116,13 @@ $ui-gray: hsla(0, 0%, 95%, 1); font-weight: bolder; } +@keyframes fade-out { + 0% {opacity: 1} + 100% {opacity: 0} +} + .setting-was-updated { + animation: fade-out 3s ease-out; color: $extensions-primary; } diff --git a/src/components/telemetry-modal/telemetry-modal.jsx b/src/components/telemetry-modal/telemetry-modal.jsx index a918a8da3f51edc4ed7268bd5bf0d4585bc872a0..3f5c76b32d56aa410d02355a5bd9d0e7405307d3 100644 --- a/src/components/telemetry-modal/telemetry-modal.jsx +++ b/src/components/telemetry-modal/telemetry-modal.jsx @@ -80,6 +80,11 @@ class TelemetryModal extends React.PureComponent { settingWasUpdatedTimer: null }; } + componentWillUnmount () { + if (this.state.settingWasUpdatedTimer) { + clearTimeout(this.state.settingWasUpdatedTimer); + } + } handleCancel () { this.props.onRequestClose(); if (this.props.onCancel) { @@ -178,7 +183,10 @@ class TelemetryModal extends React.PureComponent { </label> </Box> <Box className={styles.buttonRow}> - <span className={styles.settingWasUpdated}>{settingWasUpdated}</span> + <span + className={styles.settingWasUpdated} + key={this.state.settingWasUpdatedTimer} // restart CSS fade when timer changes + >{settingWasUpdated}</span> <button className={styles.optIn} onClick={this.props.onRequestClose}