Style: update group label submission success checkmarks

- vertically center - update animation timing
stride-nyc · Feb 8, 2020 · c9af1d4 · c9af1d4
1 parent 015260d
commit c9af1d4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/web/static/js/components/css_modules/group_label_input.css b/web/static/js/components/css_modules/group_label_input.css
@@ -36,12 +36,22 @@
 .update-succeeded-checkmark {
   animation: fadeOut ease 2s;
   position: absolute;
+  right: -1.75rem;
+
+  &:global(.ui.check) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
 }
 
 @keyframes fadeOut {
   0% {
     opacity:1;
   }
+  80% {
+    opacity:1;
+  }
   100% {
     opacity:0;
   }

diff --git a/web/static/js/components/group_label_input.jsx b/web/static/js/components/group_label_input.jsx
@@ -30,11 +30,11 @@ class GroupLabelInput extends Component {
   }
 
   labelUpdatedCheckmark = () => {
-    const classes = ["check", "icon", styles.updateSucceededCheckmark]
+    const classes = ["ui", "green", "check", "icon", styles.updateSucceededCheckmark]
     setTimeout(() => {
       this.setState({ showCheckmark: false })
     }, 2000)
-    return <div className="ui"><i className={classes.join(" ")} /></div>
+    return <div><i className={classes.join(" ")} /></div>
   }
 
   render() {