From 2fb57934d4d51922ab0f727fdbaa7b27229625d4 Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kdoh@users.noreply.github.com>
Date: Thu, 31 May 2018 13:04:46 -0700
Subject: [PATCH] CSS based colors for the nav (#7768)

* use css colors for the nav for now

* type color defs

* use brand for button

* use brand hover for see more items
---
 .../src/metabase/containers/Overworld.jsx     |  2 +-
 frontend/src/metabase/css/core/colors.css     | 52 +++++++++++++++++++
 frontend/src/metabase/css/home.css            | 22 ++++++++
 .../src/metabase/nav/containers/Navbar.jsx    | 20 +++----
 4 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/frontend/src/metabase/containers/Overworld.jsx b/frontend/src/metabase/containers/Overworld.jsx
index 2724c28ea87..c13b85e6ab1 100644
--- a/frontend/src/metabase/containers/Overworld.jsx
+++ b/frontend/src/metabase/containers/Overworld.jsx
@@ -67,7 +67,7 @@ class Overworld extends React.Component {
                   <Link
                     to="/collection/root"
                     color={normal.grey2}
-                    hover={{ color: normal.blue }}
+                    className="text-brand-hover"
                   >
                     <Flex p={4} align="center">
                       <h3>See more items</h3>
diff --git a/frontend/src/metabase/css/core/colors.css b/frontend/src/metabase/css/core/colors.css
index 66e780d10c8..2054c00ef74 100644
--- a/frontend/src/metabase/css/core/colors.css
+++ b/frontend/src/metabase/css/core/colors.css
@@ -30,6 +30,14 @@
   --slate-extra-light-color: #f9fbfc;
 
   --error-color: #e35050;
+
+  /* type colors */
+  --metric-color: #9cc177;
+  --segment-color: #7172ad;
+  --pulse-color: #f9d45c;
+  --dashboard-color: #509ee3;
+  --data-color: "#9cc177";
+  --question-color: #93b3c9;
 }
 
 .text-default,
@@ -276,3 +284,47 @@
 .bg-transparent {
   background-color: transparent;
 }
+
+/* entity colors */
+
+.bg-metric {
+  background-color: var(--metric-color);
+}
+.text-metric {
+  color: var(--metric-color);
+}
+
+.bg-data {
+  background-color: var(--data-color);
+}
+.text-data {
+  color: var(--data-color);
+}
+
+.bg-segment {
+  background-color: var(--segment-color);
+}
+.text-segment {
+  color: var(--segment-color);
+}
+
+.bg-dashboard {
+  background-color: var(--dashboard-color);
+}
+.text-dashboard {
+  color: var(--dashboard-color);
+}
+
+.bg-pulse {
+  background-color: var(--pulse-color);
+}
+.text-pulse {
+  color: var(--pulse-color);
+}
+
+.bg-question {
+  background-color: var(--question-color);
+}
+.text-question {
+  color: var(--question-color);
+}
diff --git a/frontend/src/metabase/css/home.css b/frontend/src/metabase/css/home.css
index 5ad6267f9e3..fde098b191d 100644
--- a/frontend/src/metabase/css/home.css
+++ b/frontend/src/metabase/css/home.css
@@ -1,7 +1,29 @@
+:root {
+  --search-bar-color: #60a6e4;
+  --search-bar-active-color: #7bb7ec;
+  --search-bar-active-border-color: #4894d8;
+}
+
 .Nav {
   z-index: 4;
 }
 
+/* temporary css for the navbar and search */
+.search-bar {
+  background-color: var(--search-bar-color);
+  border-color: transparent;
+  color: white;
+}
+
+.nav-light {
+  background-color: var(--search-bar-color);
+}
+
+.search-bar--active {
+  background-color: var(--search-bar-active-color);
+  border-color: var(--search-bar-active-border-color);
+}
+
 .NavItem.NavItem--selected {
   background-color: rgba(0, 0, 0, 0.2);
 }
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index bfdfc4d9942..f5d50f21393 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/frontend/src/metabase/nav/containers/Navbar.jsx
@@ -55,20 +55,11 @@ const AdminNavItem = ({ name, path, currentPath }) => (
   </li>
 );
 
-const DefaultSearchColor = "#60A6E4";
-const ActiveSearchColor = "#7bb7ec";
-
 const SearchWrapper = Flex.extend`
-  ${width} background-color: ${props =>
-      props.active ? ActiveSearchColor : DefaultSearchColor};
-  border-radius: 6px;
+  ${width} border-radius: 6px;
   align-items: center;
-  color: white;
-  border: 1px solid ${props => (props.active ? "#4894d8" : "transparent")};
+  border: 1px solid transparent;
   transition: background 300ms ease-in;
-  &:hover {
-    background-color: ${ActiveSearchColor};
-  }
 `;
 
 const SearchInput = styled.input`
@@ -114,6 +105,9 @@ class SearchBar extends React.Component {
         handleDismissal={() => this.setState({ active: false })}
       >
         <SearchWrapper
+          className={cx("search-bar", {
+            "search-bar--active": this.state.active,
+          })}
           onClick={() => this.setState({ active: true })}
           active={this.state.active}
         >
@@ -266,7 +260,7 @@ export default class Navbar extends Component {
           <PopoverWithTrigger
             ref={e => (this._newPopover = e)}
             triggerElement={
-              <Button medium mr={3} color="#509ee3">
+              <Button medium mr={3} className="text-brand">
                 New
               </Button>
             }
@@ -314,7 +308,7 @@ export default class Navbar extends Component {
           </PopoverWithTrigger>
           <Box>
             <Link to="collection/root">
-              <Box p={1} bg="#69ABE6" className="text-bold rounded">
+              <Box p={1} className="nav-light text-bold rounded">
                 Saved items
               </Box>
             </Link>
-- 
GitLab