JA-52: Add branding elements into the UI.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "j-assistant",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "private": true,
     "dependencies": {
         "axios": "^0.19.0",
@@ -25,7 +25,7 @@
         "test": "react-scripts test",
         "eject": "react-scripts eject"
     },
-    "homepage": "https://j-assistant.wangjin.me/",
+    "homepage": "https://jassistant.xyz/",
     "eslintConfig": {
         "extends": "react-app"
     },

src/components/Navigation.js

@@ -3,6 +3,9 @@ import PropTypes from "prop-types";
 import { NavLink, Redirect, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 
+// Bootstrap
+import Image from "react-bootstrap/Image";
+
 class Navigation extends React.Component {
     render () {
         if (!this.props.loginStatus
@@ -13,7 +16,14 @@ class Navigation extends React.Component {
 
         return (
             <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
-                <NavLink className="navbar-brand header" to="/">{ this.props.appName }</NavLink>
+                <NavLink className="navbar-brand header" to="/">
+                    { this.props.appName === "jAssistant"
+                        ? <Image src={ require("../images/logo_right_120.png") }
+                            alt="jAssistant"
+                            fluid />
+                        : this.props.appName
+                    }
+                </NavLink>
                 <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                     aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                     <span className="navbar-toggler-icon" />

src/components/Settings.js

@@ -42,6 +42,15 @@ class Settings extends React.Component {
                 });
             });
 
+    resetAppName = () => {
+        this.setState({
+            generalSettings: {
+                ...this.state.generalSettings,
+                appName: "jAssistant"
+            }
+        });
+    }
+
     updateAppName = e => {
         this.setState({
             generalSettings: {
@@ -106,7 +115,8 @@ class Settings extends React.Component {
                                             value={ this.state.generalSettings.appName }
                                             onChange={ this.updateAppName } />
                                         <Form.Text>
-                                            The App Name will be displayed at the top-left corner of every page, as well as in the title bar of your browser.
+                                            The App Name will be displayed at the top-left corner of every page, as well as in the title bar of your browser.<br />
+                                            If you leave it as <span className="text-success clickable" onClick={ this.resetAppName }>jAssistant</span>, the jAssistant logo will be displayed. :)
                                         </Form.Text>
                                     </Form.Group>
                                     <StateButton buttonType="primary"