expression layout and buttons vs tabs

src/components/expression/diffExpHeatmap.js

@@ -100,6 +100,32 @@ class HeatmapRow extends React.Component {
         }}
       >
         <div style={{ width: 150, flexShrink: 0 }}>
+          <span
+            style={{
+              fontSize: 14
+            }}
+          >
+            {this.props.gene}
+          </span>
+        </div>
+        <HeatmapSquare
+          backgroundColor={this.props.greyColorScale(this.props.set1exp)}
+          text={this.props.set1exp}
+        />
+        <HeatmapSquare
+          backgroundColor={this.props.greyColorScale(this.props.set2exp)}
+          text={this.props.set2exp}
+        />
+        <span
+          title={this.props.aveDiff}
+          style={{
+            fontSize: 12,
+            marginLeft: 10,
+            marginRight: 10,
+          }}
+        >
+          {this.props.aveDiff.toFixed(2)}
+        </span>
         <span
           onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(
             this
@@ -171,31 +197,6 @@ class HeatmapRow extends React.Component {
         >
           <FaPaintBrush style={{ display: "inline-block" }} />
         </span>
-          <span
-            style={{
-              fontSize: 14
-            }}
-          >
-            {this.props.gene}
-          </span>
-        </div>
-        <HeatmapSquare
-          backgroundColor={this.props.greyColorScale(this.props.set1exp)}
-          text={this.props.set1exp}
-        />
-        <HeatmapSquare
-          backgroundColor={this.props.greyColorScale(this.props.set2exp)}
-          text={this.props.set2exp}
-        />
-        <span
-          title={this.props.aveDiff}
-          style={{
-            fontSize: 14,
-            paddingLeft: 10
-          }}
-        >
-          {this.props.aveDiff.toFixed(2)}
-        </span>
       </div>
     );
   }

src/components/leftsidebar.js

@@ -36,30 +36,20 @@ class LeftSideBar extends React.Component {
         <div style={{ padding: 10 }}>
           <button
             style={{
-              padding: "10px 30px",
+              padding: "none",
               outline: 0,
-              fontSize: 18,
+              fontSize: 14,
+              fontWeight:
+                this.state.currentTab === "metadata" ? 700 : 400,
               fontStyle:
                 this.state.currentTab === "metadata" ? "inherit" : "italic",
               cursor: "pointer",
               border: "none",
               backgroundColor: "#FFF",
-              borderTop:
+              borderTop: "none",
-                this.state.currentTab === "metadata"
+              borderBottom: "none",
-                  ? "4px solid " + globals.brightBlue
+              borderRight: "none",
-                  : "none",
+              borderLeft: "none",
-              borderBottom:
-                this.state.currentTab === "metadata"
-                  ? "none"
-                  : "1px solid " + globals.lightGrey,
-              borderRight:
-                this.state.currentTab === "metadata"
-                  ? "1px solid " + globals.lightGrey
-                  : "none",
-              borderLeft:
-                this.state.currentTab === "metadata"
-                  ? "1px solid " + globals.lightGrey
-                  : "none"
             }}
             onClick={() => {
               this.setState({ currentTab: "metadata" });
@@ -69,30 +59,20 @@ class LeftSideBar extends React.Component {
           </button>
           <button
             style={{
-              padding: "10px 30px",
+              padding: "none",
               outline: 0,
-              fontSize: 18,
+              fontSize: 14,
+              fontWeight:
+                this.state.currentTab === "expression" ? 700 : 400,
               fontStyle:
                 this.state.currentTab === "expression" ? "inherit" : "italic",
               cursor: "pointer",
               border: "none",
               backgroundColor: "#FFF",
-              borderTop:
+              borderTop: "none",
-                this.state.currentTab === "expression"
+              borderBottom: "none",
-                  ? "4px solid " + globals.brightBlue
+              borderRight: "none",
-                  : "none",
+              borderLeft: "none",
-              borderBottom:
-                this.state.currentTab === "expression"
-                  ? "none"
-                  : "1px solid " + globals.lightGrey,
-              borderRight:
-                this.state.currentTab === "expression"
-                  ? "1px solid " + globals.lightGrey
-                  : "none",
-              borderLeft:
-                this.state.currentTab === "expression"
-                  ? "1px solid " + globals.lightGrey
-                  : "none"
             }}
             onClick={() => {
               this.setState({ currentTab: "expression" });
@@ -103,8 +83,8 @@ class LeftSideBar extends React.Component {
         </div>
         <div
           style={{
-            height: 500,
+            height: 350,
-            width: 350,
+            width: 400,
             padding: 10,
             overflowY: "auto",
             overflowX: "hidden"