Make the Data Reference a little nicer (metabase#11262)

* font size, card around content * table detail page styling * clean up see-this-table button * field detail styling * improve field lists * tighten up spacing * fix up field list spacing * sidebar styling * field list spacing, page header icons * clean up segment detail pages * metric detail styling * clean up lists * list item sizing * more spacing * remove viewbox insanity * add field descriptions to metric group-bys * fix segments based-on link * fix item list icon spacing * fix edit header bg color * lint picking * prettier * update e2e test * try fixing e2e test again * fix up e2e test selectors * address kdoh's feedback
eduardops · Nov 11, 2019 · c306bee · c306bee
1 parent a96d81c
commit c306bee
Show file tree

Hide file tree

Showing 44 changed files with 767 additions and 847 deletions.
diff --git a/frontend/src/metabase/components/EmptyState.jsx b/frontend/src/metabase/components/EmptyState.jsx
@@ -19,7 +19,9 @@ type EmptyStateProps = {
 // Don't break existing empty states
 // TODO - remove these and update empty states with proper usage of illustrationElement
 const LegacyIcon = props =>
-  props.icon ? <Icon name={props.icon} size={40} /> : null;
+  props.icon ? (
+    <Icon name={props.icon} className="text-light" size={40} />
+  ) : null;
 const LegacyImage = props =>
   props.image ? (
     <img

diff --git a/frontend/src/metabase/components/List.css b/frontend/src/metabase/components/List.css
@@ -1,18 +1,14 @@
 :root {
-  --title-color: var(--color-text-medium);
+  --title-color: var(--color-text-dark);
   --subtitle-color: var(--color-text-medium);
   --muted-color: var(--color-text-light);
-  --blue-color: var(--color-brand);
 }
 
 :local(.list) {
-  max-width: var(--md-width);
   composes: ml-auto mr-auto from "style";
-  padding-bottom: 40px;
 }
 
 :local(.list-wrapper) {
-  max-width: var(--md-width);
   composes: ml-auto mr-auto from "style";
 }
 
@@ -29,10 +25,10 @@
 }
 
 :local(.headerBody) {
-  composes: flex flex-full pb2 border-bottom from "style";
+  composes: flex flex-full border-bottom from "style";
   align-items: center;
   height: 100%;
-  border-color: var(--color-border);
+  border-color: var(--color-brand);
 }
 
 :local(.headerLink) {
@@ -56,40 +52,30 @@
 }
 
 :local(.itemBody) {
-  composes: border-top from "style";
   composes: flex-full from "style";
-  max-width: 550px;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  border-color: var(--color-border);
+  max-width: 100%;
 }
 
 :local(.itemTitle) {
-  composes: text-bold inline-block from "style";
+  composes: text-bold from "style";
   max-width: 100%;
   overflow: hidden;
-  color: var(--title-color);
-  font-size: 18px;
 }
 
 :local(.itemName) {
-  composes: mr1 from "style";
-  composes: inline-block from "style";
+  composes: text-brand-hover mr1 from "style";
   max-width: 100%;
   overflow: hidden;
 }
 
-:local(.itemName):hover {
-  color: var(--blue-color);
-}
-
 :local(.itemSubtitle) {
   color: var(--subtitle-color);
+  max-width: 600px;
   font-size: 14px;
 }
 
 :local(.itemSubtitleLight) {
-  color: var(--subtitle-color);
+  composes: text-light from "style";
   font-size: 14px;
 }
 
@@ -101,13 +87,16 @@
   composes: flex flex-row align-center from "style";
 }
 :local(.leftIcons) {
-  composes: flex-no-shrink flex layout-centered mr2 from "style";
+  composes: flex-no-shrink flex align-self-start mr2 from "style";
   composes: icons;
-  width: 48px;
 }
 :local(.rightIcons) {
   composes: icons;
 }
+:local(.itemIcons) {
+  composes: leftIcons;
+  padding-top: 4px;
+}
 
 :local(.extraIcons) {
   composes: icons;
@@ -134,8 +123,7 @@
   visibility: visible;
 }
 :local(.icon):hover {
-  color: var(--blue-color);
-  transition: color 0.3s linear;
+  color: var(--color-brand);
 }
 
 /* ITEM CHECKBOX */
@@ -150,7 +138,7 @@
   display: inline;
 }
 :local(.item.selected) :local(.itemCheckbox) {
-  color: var(--blue-color);
+  color: var(--color-brand);
 }
 
 /* ITEM ICON */
@@ -179,23 +167,6 @@
   composes: mx1 from "style";
 }
 
-/* TAG */
-:local(.open) :local(.tagIcon) {
-  visibility: visible;
-  color: var(--blue-color);
-}
-
-/* FAVORITE */
-:local(.item.favorite) :local(.favoriteIcon) {
-  visibility: visible;
-  color: var(--blue-color);
-}
-
-/* ARCHIVE */
-:local(.item.archived) :local(.archiveIcon) {
-  color: var(--blue-color);
-}
-
 :local(.trigger) {
   line-height: 0;
 }
diff --git a/frontend/src/metabase/components/ListItem.jsx b/frontend/src/metabase/components/ListItem.jsx
@@ -3,41 +3,40 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router";
 import S from "./List.css";
-import { t } from "ttag";
 import Icon from "./Icon";
 import Ellipsified from "./Ellipsified";
 
 import cx from "classnames";
 import pure from "recompose/pure";
+import Card from "metabase/components/Card";
 
 //TODO: extend this to support functionality required for questions
 const ListItem = ({ index, name, description, placeholder, url, icon }) => (
-  <div className={cx(S.item)}>
-    <div className={S.leftIcons}>
-      {icon && <Icon className={S.chartIcon} name={icon} size={20} />}
-    </div>
-    <div
-      className={S.itemBody}
-      style={index === 0 ? { borderTop: "none" } : {}}
-    >
-      <div className={S.itemTitle}>
-        <Ellipsified
-          className={S.itemName}
-          tooltip={name}
-          tooltipMaxWidth="100%"
-        >
-          {url ? <Link to={url}>{name}</Link> : { name }}
-        </Ellipsified>
+  <Link to={url} className="text-brand-hover">
+    <Card hoverable className="mb2 p3 bg-white rounded bordered">
+      <div className={cx(S.item)}>
+        <div className={S.itemIcons}>
+          {icon && <Icon className={S.chartIcon} name={icon} size={16} />}
+        </div>
+        <div className={S.itemBody}>
+          <div className={S.itemTitle}>
+            <Ellipsified
+              className={S.itemName}
+              tooltip={name}
+              tooltipMaxWidth="100%"
+            >
+              <h3>{name}</h3>
+            </Ellipsified>
+          </div>
+          {(description || placeholder) && (
+            <div className={cx(S.itemSubtitle)}>
+              {description || placeholder}
+            </div>
+          )}
+        </div>
       </div>
-      <div
-        className={cx(description ? S.itemSubtitle : S.itemSubtitleLight, {
-          mt1: true,
-        })}
-      >
-        {description || placeholder || t`No description yet`}
-      </div>
-    </div>
-  </div>
+    </Card>
+  </Link>
 );
 
 ListItem.propTypes = {

diff --git a/frontend/src/metabase/components/QueryButton.css b/frontend/src/metabase/components/QueryButton.css
@@ -1,16 +1,8 @@
 :local(.queryButton) {
-  composes: flex align-center no-decoration text-medium py1 from "style";
+  composes: flex align-center no-decoration text-brand py1 from "style";
 }
 
 :local(.queryButtonText) {
-  composes: flex-full mx2 text-default from "style";
+  composes: flex-full ml2 from "style";
   max-width: 100%;
 }
-
-:local(.queryButtonCircle) {
-  composes: flex align-center justify-center text-brand from "style";
-  border: 1px solid currentColor;
-  border-radius: 99px;
-  width: 1.25rem;
-  height: 1.25rem;
-}
diff --git a/frontend/src/metabase/components/QueryButton.jsx b/frontend/src/metabase/components/QueryButton.jsx
@@ -10,16 +10,13 @@ import Icon from "metabase/components/Icon";
 
 const QueryButton = ({ className, text, icon, iconClass, onClick, link }) => (
   <div className={className}>
-    <Link className={S.queryButton} onClick={onClick} to={link}>
-      <Icon
-        className={iconClass}
-        size={14}
-        {...(typeof icon === "string" ? { name: icon } : icon)}
-      />
-      <span className={cx(S.queryButtonText, "text-brand-hover")}>{text}</span>
-      <span className={S.queryButtonCircle}>
-        <Icon size={8} name="chevronright" />
-      </span>
+    <Link
+      className={cx(S.queryButton, "bg-light-hover px1 rounded")}
+      onClick={onClick}
+      to={link}
+    >
+      <Icon name={icon} />
+      <span className={S.queryButtonText}>{text}</span>
     </Link>
   </div>
 );

diff --git a/frontend/src/metabase/components/Sidebar.css b/frontend/src/metabase/components/Sidebar.css
@@ -1,43 +1,23 @@
-:root {
-  --item-padding: 45px;
-}
-
-:local(.sidebar-padding) {
-  padding-left: var(--item-padding);
-  padding-right: var(--item-padding);
-}
-
-:local(.sidebar-margin) {
-  margin-left: var(--item-padding);
-  margin-right: var(--item-padding);
-}
-
 :local(.sidebar) {
   composes: py2 from "style";
-  width: 345px;
+  width: 30%;
+  max-width: 500px;
   background-color: var(--color-bg-light);
-  border-right: 1px solid var(--color-border);
   color: var(--color-text-medium);
 }
 
 :local(.sidebar) a {
   text-decoration: none;
 }
 
-:local(.breadcrumbs) {
-  composes: sidebar-padding;
-}
-
 :local(.item),
 :local(.sectionTitle) {
   composes: flex align-center from "style";
-  composes: py2 from "style";
-  composes: sidebar-padding;
+  composes: py1 mb1 from "style";
 }
 
 :local(.item) {
-  composes: transition-color from "style";
-  composes: transition-background from "style";
+  composes: rounded pl2 from "style";
   font-size: 1em;
   color: var(--color-text-light);
 }
@@ -52,19 +32,25 @@
   font-size: 16px;
 }
 
-:local(.item.selected),
-:local(.item.selected) :local(.icon),
-:local(.sectionTitle.selected),
 :local(.item):hover,
 :local(.sectionTitle):hover {
   background-color: var(--color-bg-medium);
   color: var(--color-brand);
 }
 
+:local(.item.selected),
+:local(.item.selected) :local(.icon),
+:local(.sectionTitle.selected) {
+  color: var(--color-brand);
+}
+:local(.item.selected),
+:local(.sectionTitle.selected) {
+  background-color: rgba(80, 158, 227, 0.15);
+}
+
 :local(.divider) {
   composes: my2 from "style";
   composes: border-bottom from "style";
-  composes: sidebar-margin;
 }
 
 :local(.name) {
@@ -89,5 +75,4 @@
   composes: text-centered from "style";
   composes: p2 my3 from "style";
   composes: text-brand-light from "style";
-  composes: sidebar-margin;
 }
diff --git a/frontend/src/metabase/css/core/flex.css b/frontend/src/metabase/css/core/flex.css
@@ -20,6 +20,16 @@
   flex: 0.5;
 }
 
+.flex-3-quarters,
+:local(.flex-3-quarters) {
+  flex: 0.75;
+}
+
+.flex-1-quarter,
+:local(.flex-1-quarter) {
+  flex: 0.25;
+}
+
 .flex-no-shrink,
 :local(.flex-no-shrink) {
   flex-shrink: 0;

diff --git a/frontend/src/metabase/reference/Reference.css b/frontend/src/metabase/reference/Reference.css
@@ -1,7 +1,7 @@
 :root {
   --title-color: var(--color-text-medium);
   --subtitle-color: var(--color-text-medium);
-  --icon-width: calc(48px + 1rem);
+  --icon-width: 60px;
 }
 
 :local(.guideEmpty) {
@@ -20,7 +20,6 @@
 
 :local(.columnHeader) {
   composes: flex flex-full from "style";
-  margin-left: var(--icon-width);
   padding-top: 20px;
   padding-bottom: 20px;
 }
@@ -37,7 +36,16 @@
 }
 
 :local(.tableActualName) {
-  color: var(--subtitle-color);
+  font-family: "Lucida Console", Monaco, monospace;
+  font-size: 13px;
+  line-height: 1.4em;
+  letter-spacing: 1px;
+  white-space: pre-wrap;
+  color: var(--color-text-medium);
+  background-color: var(--color-bg-light);
+  border: 1px solid var(--color-text-light);
+  border-radius: 4px;
+  padding: 0.2em 0.4em;
 }
 
 :local(.guideLeftPadded) {