Add fade out animation for copy container id feedback

Signed-off-by: Clement Ho <ClemMakesApps@gmail.com>

src/components/ContainerSettingsGeneral.react.js

@@ -72,7 +72,7 @@ var ContainerSettingsGeneral = React.createClass({
       _this.setState({ 
         copiedId: false
       });
-    }, 3000);
+    }, 5000);
   },
 
   handleSaveContainerName: function () {
@@ -189,7 +189,7 @@ var ContainerSettingsGeneral = React.createClass({
 
     if (this.state.copiedId) {
       clipboardStatus = (
-        <p><strong>Copied to Clipboard</strong></p>
+        <p className="fadeOut"><strong>Copied to Clipboard</strong></p>
       );
     }
 

styles/container-settings.less

@@ -83,6 +83,15 @@
       .disabled {
         border-bottom: none;
       }
+      .fadeOut {
+        animation: fade-out 5s ease-in-out forwards;
+      }
+      @keyframes fade-out {
+        0%  { opacity: 0; }
+        10% { opacity: 1; }
+        85% { opacity: 1; }
+        100% { opacity: 0; }
+      }
       p {
         font-weight: 300;
         margin-top: 5px;