GW-3620 Finished all implementation

src/client/js/components/SlackLogo.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const SlackLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 448 448"
+    height="20"
+    width="20"
+    fill="purple"
+  >
+    <path d="M94.12,283.1A47.06,47.06,0,1,1,47.06,236H94.12Zm23.72,0a47.06,47.06,0,1,1,94.12,0V400.94a47.06,47.06,0,1,1-94.12,0Zm47.06-189A47.06,47.06,0,1,1,212,47.06V94.12Zm0,23.72a47.06,47.06,0,0,1,0,94.12H47.06a47.06,47.06,0,0,1,0-94.12Zm189,47.06A47.06,47.06,0,1,1,400.94,212H353.88V164.9Zm-23.72,0a47.06,47.06,0,1,1-94.12,0V47.06a47.06,47.06,0,1,1,94.12,0V164.9Zm-47.06,189A47.06,47.06,0,1,1,236,400.94V353.88Zm0-23.72a47.06,47.06,0,0,1,0-94.12H400.94a47.06,47.06,0,0,1,0,94.12Z" />
+  </svg>
+);
+
+export default SlackLogo;

src/client/js/components/SlackNotification.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
-
+import { Button } from 'reactstrap';
+import SlackLogo from './SlackLogo';
 /**
  *
  * @author Yuki Takei <yuki@weseek.co.jp>
@@ -81,16 +82,14 @@ affect the rendering of the banner itself.
 */
   getSlackButton() {
     return (
-      <div className="grw-slack-notification">
-        <button
-          // className="grw-slack-notification-button"
-          type="button"
-          onClick={this.props.click}
-        >
-          slacks
-          <i className="icon-arrow-up"></i>
-        </button>
-      </div>
+      <Button
+        color="white"
+        className="border"
+        onClick={this.props.click}
+      >
+        <SlackLogo />
+        <span className="fa fa-caret-up ml-2" aria-aria-hidden="true"></span>
+      </Button>
     );
   }