JA-52: Add branding elements into the UI.

yokeholy · Aug 6, 2019 · e7618b6 · e7618b6
1 parent ca08aef
commit e7618b6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/src/components/Navigation.js b/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" />

diff --git a/src/components/Settings.js b/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"

diff --git a/src/images/logo_right_120.png b/src/images/logo_right_120.png