From a657eb3152b00be1eabe68c00846f6380a0eb06b Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Thu, 23 May 2019 11:47:24 -0400
Subject: [PATCH] Logo (#782)

* logo, black

* fixes

* remove template, move header
---
 client/__tests__/e2e/data.js            |  2 +-
 client/src/components/framework/logo.js | 18 +++++++++++++
 client/src/components/leftsidebar.js    | 35 +++++++++++++++++++------
 client/src/globals.js                   |  1 +
 4 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 client/src/components/framework/logo.js

diff --git a/client/__tests__/e2e/data.js b/client/__tests__/e2e/data.js
index 4d63cfaa..743e2f70 100644
--- a/client/__tests__/e2e/data.js
+++ b/client/__tests__/e2e/data.js
@@ -1,6 +1,6 @@
 export const datasets = {
   pbmc3k: {
-    title: "cellxgene: pbmc3k",
+    title: "pbmc3k",
     dataframe: {
       nObs: "2638",
       nVar: "1838",
diff --git a/client/src/components/framework/logo.js b/client/src/components/framework/logo.js
new file mode 100644
index 00000000..2d2cbb84
--- /dev/null
+++ b/client/src/components/framework/logo.js
@@ -0,0 +1,18 @@
+import React from "react";
+import * as globals from "../../globals";
+
+const Logo = props => {
+  const { size } = props;
+  return (
+    <svg width={size} height={size} viewBox={`0 0 48 48`} fill="none">
+      <rect width="48" height="48" fill="white" />
+      <rect width="48" height="48" fill={globals.logoColor} />
+      <rect x="19" y="19" width="22" height="22" fill="white" />
+      <rect x="24" y="24" width="12" height="12" fill={globals.logoColor} />
+      <rect x="7" y="19" width="7" height="22" fill="white" />
+      <rect x="19" y="7" width="22" height="7" fill="white" />
+    </svg>
+  );
+};
+
+export default Logo;
diff --git a/client/src/components/leftsidebar.js b/client/src/components/leftsidebar.js
index 93263155..b785f89f 100644
--- a/client/src/components/leftsidebar.js
+++ b/client/src/components/leftsidebar.js
@@ -6,6 +6,7 @@ import Continuous from "./continuous/continuous";
 import GeneExpression from "./geneExpression";
 import * as globals from "../globals";
 import DynamicScatterplot from "./scatterplot/scatterplot";
+import Logo from "./framework/logo.js";
 
 @connect(state => ({
   responsive: state.responsive,
@@ -27,7 +28,6 @@ class LeftSideBar extends React.Component {
     if cellxgene logo or tabs change, this must as well
     */
     const metadataSectionPadding = 0;
-    // scatterplotXXaccessor && scatterplotYYaccessor ? 450 : 0;
 
     return (
       <div
@@ -39,20 +39,39 @@ class LeftSideBar extends React.Component {
         }}
       >
         <p
-          data-testid="header"
           style={{
             position: "fixed",
             top: globals.cellxgeneTitleTopPadding,
             left: globals.leftSidebarWidth + globals.cellxgeneTitleLeftPadding,
-            margin: 0,
-            fontSize: globals.largestFontSize,
-            color: globals.darkerGrey,
-            width: "100%"
+            margin: 0
           }}
         >
-          cellxgene: {datasetTitle}
+          <Logo size={32} />
+          <span
+            style={{
+              fontSize: 28,
+              position: "relative",
+              top: -4,
+              fontWeight: "bold",
+              marginLeft: 5,
+              color: globals.logoColor
+            }}
+          >
+            cellxgene
+          </span>
+          <span
+            data-testid="header"
+            style={{
+              fontSize: 16,
+              display: "block",
+              position: "relative",
+              marginTop: 10,
+              top: -4
+            }}
+          >
+            {datasetTitle}
+          </span>
         </p>
-
         <div
           style={{
             height: responsive.height - metadataSectionPadding,
diff --git a/client/src/globals.js b/client/src/globals.js
index 97ddc109..4fc893dd 100644
--- a/client/src/globals.js
+++ b/client/src/globals.js
@@ -31,6 +31,7 @@ export const darkGreen = "#448C4D";
 
 export const nonFiniteCellColor = lightGrey;
 export const defaultCellColor = "rgb(0,0,0,1)";
+export const logoColor = "black"; /* logo pink: "#E9429A" */
 
 /* typography constants */