update style for Toast and add dismiss button

Author: viankakrisna

packages/react-scripts/template/src/Toast.css

@@ -3,17 +3,15 @@
 	bottom: 0;
 	left: 0;
 	right: 0;
-	max-width: 100%;
-	width: 240px;
 	padding: 16px;
 	margin: auto;
 	transition: 250ms;
 	background: #222;
 	color: white;
-	text-align: center;
 	line-height: 24px;
 	border-top-left-radius: 2px;
 	border-top-right-radius: 2px;
+	display: flex;
 }
 
 .Toast.active {
@@ -22,4 +20,20 @@
 
 .Toast.inactive {
 	transform: translateY(100%);
+}
+
+.Toast-button {
+	padding: 0;
+	background: transparent;
+	border: 0;
+	display: inline-block;
+	color: #61dafb;
+	font-size: inherit;
+	line-height: inherit;
+	text-transform: uppercase;
+	flex: 0 0 0;
+}
+
+.Toast-text {
+	flex: 1;
 }

packages/react-scripts/template/src/Toast.js

@@ -5,8 +5,15 @@ export default class Toast extends React.Component {
   state = {
     active: true,
   };
+
+  close = () => {
+    clearTimeout(this.timeout);
+    this.setState({
+      active: false,
+    });
+  };
   componentDidMount() {
-    setTimeout(
+    this.timeout = setTimeout(
       () => {
         this.setState({
           active: false,
@@ -15,10 +22,16 @@ export default class Toast extends React.Component {
       this.props.timeout
     );
   }
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
   render() {
     return (
       <div className={`Toast ${this.state.active ? 'active' : 'inactive'}`}>
-        {this.props.children}
+        <span className="Toast-text">
+          {this.props.children}
+        </span>
+        <button className="Toast-button" onClick={this.close}>Dismiss</button>
       </div>
     );
   }

packages/react-scripts/template/src/registerServiceWorker.js

@@ -24,7 +24,7 @@ if (!dom) {
 function showMessage(message) {
   if (useToast) {
     ReactDOM.render(
-      <Toast timeout={3000}>
+      <Toast>
         {message}
       </Toast>,
       dom