Merge pull request #13 from blue-core-lod/t1-bc-branding

Blue Core Colors and Logo

Author: jermnelson

src/components/Header.jsx

@@ -12,6 +12,8 @@ import { selectCurrentResourceKey } from "selectors/resources"
 import usePermissions from "hooks/usePermissions"
 import HeaderSearch from "./search/HeaderSearch"
 
+const bcLogo = require("../styles/bluecore-small.png")
+
 const Header = (props) => {
   const { canCreate } = usePermissions()
   const location = useLocation()
@@ -26,7 +28,14 @@ const Header = (props) => {
         <div className="row">
           <div className="col-6">
             <a href="/">
-              <h1 className="editor-logo">Sinopia{`${Config.sinopiaEnv}`}</h1>
+              <h1 className="editor-logo">
+                <img
+                  src={bcLogo}
+                  alt="Blue Core Logo"
+                  style={{ paddingBottom: "8px" }}
+                ></img>{" "}
+                | Sinopia{`${Config.sinopiaEnv}`}
+              </h1>
             </a>
           </div>
           <div className="col-6">

src/components/home/Header.jsx

@@ -7,13 +7,23 @@ import Config from "Config"
 import { connect } from "react-redux"
 import { selectUser } from "selectors/authenticate"
 import { signOut } from "actionCreators/authenticate"
+
+const bcLogo = require("../../styles/bluecore-small.png")
+
 import { bindActionCreators } from "redux"
 
 const Header = (props) => (
   <div className="navbar homepage-navbar">
     <div className="navbar-header">
       <a className="navbar-brand" href={`${Config.sinopiaUrl}`}>
-        <h1 className="editor-logo"> Sinopia{`${Config.sinopiaEnv}`}</h1>
+        <h1 className="editor-logo">
+          <img
+            src={bcLogo}
+            alt="Blue Core Logo"
+            style={{ paddingBottom: "8px" }}
+          ></img>{" "}
+          | Sinopia{`${Config.sinopiaEnv}`}
+        </h1>
       </a>
     </div>
     <ul className="nav">

src/styles/bluecore-small.png

@@ -15,7 +15,7 @@ $enable-shadows: true;
 $enable-validation-icons: false;
 
 // Body
-$body-bg: $white-linen;
+$body-bg: $bluecore-bkgrd;
 
 // Links
 $link-color: $orient;

src/styles/bootstrap-variables.scss

@@ -12,3 +12,5 @@ $swirl: #d7cec4;
 $double-spanish-white: #cfc2a8;
 $nobel: #989898;
 $greyblue: #e8ecf4;
+$bluecore-header: #b9c8e8;
+$bluecore-bkgrd: #ebeefa;

src/styles/colors.scss

@@ -1,5 +1,5 @@
 .editor-navbar {
-  background-image: url("./editorheaderbg.png");
+  background-color: $bluecore-header;
 }
 
 /** For header tabs **/

src/styles/header.scss

@@ -21,7 +21,7 @@
 
 .banner {
   background-size: cover;
-  background-image: url("home-background.png");
+  background-color: $bluecore-header;
 }
 
 .editor-save {

src/styles/main.scss

@@ -3,7 +3,7 @@
     padding: 0;
 
     .card {
-      background: $spring-wood;
+      background: $bluecore-bkgrd;
       border-color: $nobel;
       border-radius: 2px;
     }