From 7a31729ebb7803599b9c4f4fcace29ab0045edb1 Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Mon, 8 Oct 2018 00:07:44 +0800
Subject: [PATCH] Introduce logo to <Welcome />

---
 .../examples/welcome.js                         | 13 +++++++++++--
 .../public/images/logo-color-square.svg         |  1 +
 .../stories/stylesheet/welcome/_index.scss      | 17 +++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-example/public/images/logo-color-square.svg

diff --git a/packages/react-bootstrap-table2-example/examples/welcome.js b/packages/react-bootstrap-table2-example/examples/welcome.js
index 41f3547..18a643e 100644
--- a/packages/react-bootstrap-table2-example/examples/welcome.js
+++ b/packages/react-bootstrap-table2-example/examples/welcome.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import Typed from 'typed.js';
 
+const PROJECT_NAME = 'react-bootstrap-table2';
+
 export default class Welcome extends React.Component {
   componentDidMount() {
     // type.js config
@@ -21,13 +23,20 @@ export default class Welcome extends React.Component {
     return (
       <div>
         <div className="welcome">
-          <h1 className="welcome-title">react-bootstrap-table2</h1>
+          <div className="welcome-title">
+            <span className="welcome-title-logo">
+              <img src="images/logo-color-square.svg" alt={ `${PROJECT_NAME}-logo` } />
+            </span>
+            <h1>
+              {PROJECT_NAME}
+            </h1>
+          </div>
           <span
             className="welcome-sub-title"
             ref={ (el) => { this.el = el; } }
           />
         </div>
-        <a href="https://github.com/react-bootstrap-table/react-bootstrap-table2" className="github-corner" aria-label="View source on Github">
+        <a href={ `https://github.com/react-bootstrap-table/${PROJECT_NAME}` } className="github-corner" aria-label="View source on Github">
           <svg width="80" height="80" viewBox="0 0 250 250" style={ { fill: '#009688', color: '#fff', position: 'absolute', top: '0', border: '0', right: '0' } } aria-hidden="true">
             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
             <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={ { transformOrigin: '130px 106px' } } className="octo-arm" />
diff --git a/packages/react-bootstrap-table2-example/public/images/logo-color-square.svg b/packages/react-bootstrap-table2-example/public/images/logo-color-square.svg
new file mode 100644
index 0000000..bc897b9
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/public/images/logo-color-square.svg
@@ -0,0 +1 @@
+<svg id="layer_1" data-name="layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><defs><style>.cls-1{fill:#059ae6;}.cls-2{fill:#0058b7;}</style></defs><title>logo square</title><polygon class="cls-1" points="22.76 59 22.76 64.35 49.24 51.13 49.24 43.88 44.45 41.5 44.45 48.17 22.76 59"/><polygon class="cls-2" points="22.76 20.87 22.76 47.98 27.55 45.59 27.55 23.83 44.45 15.39 44.45 23.02 33.06 28.71 33.06 31.9 49.24 39.97 49.24 34.62 40.58 30.3 49.24 25.98 49.24 7.65 22.76 20.87"/></svg>
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss b/packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss
index 1d7949c..360ded8 100644
--- a/packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss
+++ b/packages/react-bootstrap-table2-example/stories/stylesheet/welcome/_index.scss
@@ -1,3 +1,5 @@
+$logo-size: 96px;
+
 .welcome {
   margin-top: 70px;
   text-align: center;
@@ -5,7 +7,22 @@
 
   &-title {
     color: $grey-900;
+    width: 100%;
+
+    display: inline-flex;
+    justify-content: center;
+    align-content: center;
+
+    &-logo {
+      position: relative;
+      top: -8px;
+      right: -12px;
+
+      width: $logo-size;
+      height: $logo-size;
+    }
   }
+
   &-sub-title {
     font-size: 30px;
     color: $grey-500;