From 4ba1a065c745e446cb5c41708efae42421b5fb4e Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <7019101+cwillisf@users.noreply.github.com>
Date: Tue, 12 Jan 2021 13:35:06 -0800
Subject: [PATCH] add CSS fade to settingWasUpdated message
---
src/components/telemetry-modal/telemetry-modal.css | 6 ++++++
src/components/telemetry-modal/telemetry-modal.jsx | 10 +++++++++-
2 files changed, 15 insertions(+), 1 deletion(-)
diff --git a/src/components/telemetry-modal/telemetry-modal.css b/src/components/telemetry-modal/telemetry-modal.css
index 2835c370a..564b0bd2f 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 a918a8da3..3f5c76b32 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}
--
GitLab