Merge branch 'master' of github.com:metabase/metabase into pulse-cond…

…itional-formatting

frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx

@@ -158,7 +158,7 @@ export default class DatabaseList extends Component {
                 })}
               >
                 <a
-                  className="text-grey-2 text-brand-hover no-decoration"
+                  className="text-light text-brand-hover no-decoration"
                   onClick={() => this.props.addSampleDataset()}
                 >{t`Bring the sample dataset back`}</a>
               </span>

frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx

@@ -29,7 +29,7 @@ export default class ObjectActionsSelect extends Component {
         <PopoverWithTrigger
           ref="popover"
           triggerElement={
-            <span className="text-grey-1 text-grey-4-hover">
+            <span className="text-light text-medium-hover">
               <Icon name={"ellipsis"} />
             </span>
           }

frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx

@@ -15,7 +15,7 @@ export default class ColumnsList extends Component {
     return (
       <div id="ColumnsList" className="my3">
         <h2 className="px1 text-orange">{t`Columns`}</h2>
-        <div className="text-uppercase text-grey-3 py1">
+        <div className="text-uppercase text-medium py1">
           <div
             style={{ minWidth: 420 }}
             className="float-left px1"

frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx

@@ -84,7 +84,7 @@ export default class MetadataHeader extends Component {
     return (
       <div className="MetadataEditor-header flex align-center flex-no-shrink">
         <div className="MetadataEditor-headerSection py2 h2">
-          <span className="text-grey-4">{t`Current database:`}</span>{" "}
+          <span className="text-medium">{t`Current database:`}</span>{" "}
           {this.renderDbSelector()}
         </div>
         <div className="MetadataEditor-headerSection flex flex-align-right align-center flex-no-shrink">

frontend/src/metabase/admin/datamodel/components/database/MetadataSchema.jsx

@@ -39,7 +39,7 @@ export default class MetadataSchema extends Component {
           </div>
         </div>
         <table className="mt2 full">
-          <thead className="text-uppercase text-grey-3 py1">
+          <thead className="text-uppercase text-medium py1">
             <tr>
               <th className={tdClassName}>{t`Column`}</th>
               <th className={tdClassName}>{t`Data Type`}</th>

frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx

@@ -79,7 +79,7 @@ export default class MetadataTable extends Component {
     if (this.props.tableMetadata.visibility_type) {
       subTypes = (
         <span id="VisibilitySubTypes" className="border-left mx2">
-          <span className="mx2 text-uppercase text-grey-3">{t`Why Hide?`}</span>
+          <span className="mx2 text-uppercase text-medium">{t`Why Hide?`}</span>
           {this.renderVisibilityType(t`Technical Data`, "technical")}
           {this.renderVisibilityType(t`Irrelevant/Cruft`, "cruft")}
         </span>
@@ -117,7 +117,7 @@ export default class MetadataTable extends Component {
             placeholder={t`No table description yet`}
           />
         </div>
-        <div className="MetadataTable-header flex align-center py2 text-grey-3">
+        <div className="MetadataTable-header flex align-center py2 text-medium">
           <span className="mx1 text-uppercase">{t`Visibility`}</span>
           {this.renderVisibilityWidget()}
           <span className="flex-align-right flex align-center">

frontend/src/metabase/admin/datamodel/components/database/MetricsList.jsx

@@ -50,7 +50,7 @@ export default class MetricsList extends Component {
           </tbody>
         </table>
         {tableMetadata.metrics.length === 0 && (
-          <div className="flex layout-centered m4 text-grey-3">
+          <div className="flex layout-centered m4 text-medium">
             {t`Create metrics to add them to the View dropdown in the query builder`}
           </div>
         )}

frontend/src/metabase/admin/datamodel/components/database/SegmentsList.jsx

@@ -50,7 +50,7 @@ export default class SegmentsList extends Component {
           </tbody>
         </table>
         {tableMetadata.segments.length === 0 && (
-          <div className="flex layout-centered m4 text-grey-3">
+          <div className="flex layout-centered m4 text-medium">
             {t`Create segments to add them to the Filter dropdown in the query builder`}
           </div>
         )}

frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx

@@ -72,7 +72,7 @@ export default class Revision extends Component {
           />
         </div>
         <div className="flex-full mt1 mb4">
-          <div className="flex mb1 text-grey-4">
+          <div className="flex mb1 text-medium">
             <span className="">
               <strong>{this.getName()}</strong> {this.getAction()}
             </span>

frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx

@@ -284,7 +284,7 @@ export const BackButton = ({ databaseId, tableId }) => (
 );
 
 const SelectSeparator = () => (
-  <Icon name="chevronright" size={12} className="mx2 text-grey-3" />
+  <Icon name="chevronright" size={12} className="mx2 text-medium" />
 );
 
 export class FieldHeader extends Component {
@@ -469,7 +469,7 @@ export const SectionHeader = ({ title, description }) => (
   <div className="border-bottom py2 mb2">
     <h2 className="text-italic">{title}</h2>
     {description && (
-      <p className="mb0 text-grey-4 mt1 text-paragraph text-measure">
+      <p className="mb0 text-medium mt1 text-paragraph text-measure">
         {description}
       </p>
     )}
@@ -727,7 +727,7 @@ export class FieldRemapping extends Component {
                 {fkMappingField ? (
                   fkMappingField.display_name
                 ) : (
-                  <span className="text-grey-1">{t`Choose a field`}</span>
+                  <span className="text-light">{t`Choose a field`}</span>
                 )}
               </SelectButton>
             }

frontend/src/metabase/admin/people/components/GroupDetail.jsx

@@ -118,7 +118,7 @@ const AddUserRow = ({
           <div className="bg-medium p1 px2 mr1 rounded flex align-center">
             {user.common_name}
             <Icon
-              className="pl1 cursor-pointer text-slate text-grey-4-hover"
+              className="pl1 cursor-pointer text-slate text-medium-hover"
               name="close"
               onClick={() => onRemoveUserFromSelection(user)}
             />
@@ -147,7 +147,7 @@ const UserRow = ({ user, showRemoveButton, onRemoveUserClicked }) => (
         className="text-right cursor-pointer"
         onClick={onRemoveUserClicked.bind(null, user)}
       >
-        <Icon name="close" className="text-grey-1" size={16} />
+        <Icon name="close" className="text-light" size={16} />
       </td>
     ) : null}
   </tr>

frontend/src/metabase/admin/people/components/GroupsListing.jsx

@@ -79,7 +79,7 @@ function ActionsPopover({ group, onEditGroupClicked, onDeleteGroupClicked }) {
   return (
     <PopoverWithTrigger
       className="block"
-      triggerElement={<Icon className="text-grey-1" name="ellipsis" />}
+      triggerElement={<Icon className="text-light" name="ellipsis" />}
     >
       <ul className="UserActionsSelect">
         <li

frontend/src/metabase/admin/people/components/UserActionsSelect.jsx

@@ -67,7 +67,7 @@ export default class UserActionsSelect extends Component {
         ref="popover"
         className="block"
         triggerElement={
-          <span className="text-grey-1">
+          <span className="text-light">
             <Icon name={"ellipsis"} />
           </span>
         }

frontend/src/metabase/admin/people/components/UserGroupSelect.jsx

@@ -69,10 +69,10 @@ export default class UserGroupSelect extends Component {
         ref="popover"
         triggerElement={
           <div className="flex align-center">
-            <span className="mr1 text-grey-4">
+            <span className="mr1 text-medium">
               <GroupSummary groups={groups} selectedGroups={user.memberships} />
             </span>
-            <Icon className="text-grey-2" name="chevrondown" size={10} />
+            <Icon className="text-light" name="chevrondown" size={10} />
           </div>
         }
         triggerClasses="AdminSelectBorderless py1"

frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx

@@ -514,7 +514,7 @@ export default class PeopleListingApp extends Component {
                               <Tooltip tooltip={t`Reactivate this account`}>
                                 <Icon
                                   name="refresh"
-                                  className="text-grey-1 text-brand-hover cursor-pointer"
+                                  className="text-light text-brand-hover cursor-pointer"
                                   size={20}
                                   onClick={() =>
                                     this.props.showModal({

frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx

@@ -71,7 +71,7 @@ const PermissionsHeader = ({ permissions, isFirst, isLast }) => (
         }}
       >
         {permission.header && (
-          <h5 className="my1 text-centered text-grey-3 text-uppercase text-light">
+          <h5 className="my1 text-centered text-medium text-uppercase text-light">
             {permission.header}
           </h5>
         )}
@@ -117,12 +117,17 @@ const EntityHeader = ({
   isLast,
 }) => (
   <div className="flex flex-column">
-    <div className={cx("relative flex", { "align-self-center mb1": isColumn })}>
+    <div
+      className={cx("relative flex", {
+        "align-self-center mb1": isColumn,
+        "align-center": !isColumn,
+      })}
+    >
       <Icon name={icon} className="mr1" />
-      <div className="flex-full">
+      <div>
         <h4>{entity.name}</h4>
         {entity.subtitle && (
-          <div className="mt1 h5 text-monospace text-normal text-grey-2 text-uppercase">
+          <div className="mt1 h5 text-monospace text-normal text-light text-uppercase">
             {entity.subtitle}
           </div>
         )}

frontend/src/metabase/admin/settings/components/SettingHeader.jsx

@@ -2,10 +2,10 @@ import React from "react";
 
 const SettingHeader = ({ setting }) => (
   <div>
-    <div className="text-grey-4 text-bold text-uppercase">
+    <div className="text-medium text-bold text-uppercase">
       {setting.display_name}
     </div>
-    <div className="text-grey-4 text-measure my1">
+    <div className="text-medium text-measure my1">
       {setting.description}
       {setting.note && <div>{setting.note}</div>}
     </div>

frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx

@@ -17,7 +17,7 @@ const TaskList = ({ tasks }) => (
 );
 
 const TaskSectionHeader = ({ name }) => (
-  <h4 className="text-grey-4 text-bold text-uppercase pb2">{name}</h4>
+  <h4 className="text-medium text-bold text-uppercase pb2">{name}</h4>
 );
 
 const TaskSection = ({ name, tasks }) => (

frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx

@@ -116,10 +116,10 @@ export default class SettingsSingleSignOnForm extends Component {
             className="mb2"
           />
           <h2>{t`Sign in with Google`}</h2>
-          <p className="text-grey-4">
+          <p className="text-medium">
             {t`Allows users with existing Metabase accounts to login with a Google account that matches their email address in addition to their Metabase username and password.`}
           </p>
-          <p className="text-grey-4">
+          <p className="text-medium">
             {jt`To allow users to sign in with Google you'll need to give Metabase a Google Developers console application client ID. It only takes a few steps and instructions on how to create a key can be found ${(
               <a
                 className="link"
@@ -139,7 +139,7 @@ export default class SettingsSingleSignOnForm extends Component {
           />
           <div className="py3">
             <div className="flex align-center">
-              <p className="text-grey-4">{t`Allow users to sign up on their own if their Google account email address is from:`}</p>
+              <p className="text-medium">{t`Allow users to sign up on their own if their Google account email address is from:`}</p>
             </div>
             <div className="mt1 bordered rounded inline-block">
               <div className="inline-block px2 h2">@</div>

frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx

@@ -239,7 +239,7 @@ export default class SettingsSlackForm extends Component {
             />
             Slack
           </h1>
-          <h3 className="text-grey-1">{t`Answers sent right to your Slack #channels`}</h3>
+          <h3 className="text-light">{t`Answers sent right to your Slack #channels`}</h3>
 
           <div className="pt3">
             <a

frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx

@@ -21,7 +21,7 @@ export default class SettingsUpdatesForm extends Component {
   renderVersion(version) {
     return (
       <div className="pb3">
-        <h3 className="text-grey-4">
+        <h3 className="text-medium">
           {this.removeVersionPrefixIfNeeded(version.version)}{" "}
           {version.patch ? "(patch release)" : null}
         </h3>
@@ -112,7 +112,7 @@ export default class SettingsUpdatesForm extends Component {
             >{t`Update`}</a>
           </div>
 
-          <div className="text-grey-3">
+          <div className="text-medium">
             <h3 className="py3 text-uppercase">{t`What's Changed:`}</h3>
 
             {this.renderVersion(versionInfo.latest)}

frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx

@@ -255,9 +255,9 @@ const SettingContainer = ({
 }) => (
   <div className={className}>
     {name && (
-      <div className="text-grey-4 text-bold text-uppercase my1">{name}</div>
+      <div className="text-medium text-bold text-uppercase my1">{name}</div>
     )}
-    {description && <div className="text-grey-4 my1">{description}</div>}
+    {description && <div className="text-medium my1">{description}</div>}
     {children}
   </div>
 );
@@ -341,7 +341,7 @@ const EditMap = ({
             )}
           </LoadingAndErrorWrapper>
         ) : (
-          <div className="flex-full flex layout-centered text-bold text-grey-1 text-centered">
+          <div className="flex-full flex layout-centered text-bold text-light text-centered">
             {t`Load a GeoJSON file to see a preview`}
           </div>
         )}

frontend/src/metabase/admin/settings/components/widgets/EmbeddingLegalese.jsx

@@ -5,7 +5,7 @@ import { t } from "c-3po";
 const EmbeddingLegalese = ({ onChange }) => (
   <div className="bordered rounded text-measure p4">
     <h3 className="text-brand">{t`Using embedding`}</h3>
-    <p className="text-grey-4" style={{ lineHeight: 1.48 }}>
+    <p className="text-medium" style={{ lineHeight: 1.48 }}>
       {t`By enabling embedding you're agreeing to the embedding license located at`}{" "}
       <a
         className="link"
@@ -15,7 +15,7 @@ const EmbeddingLegalese = ({ onChange }) => (
         metabase.com/license/embedding
       </a>.
     </p>
-    <p className="text-grey-4" style={{ lineHeight: 1.48 }}>
+    <p className="text-medium" style={{ lineHeight: 1.48 }}>
       {t`In plain English, when you embed charts or dashboards from Metabase in your own application, that application isn't subject to the Affero General Public License that covers the rest of Metabase, provided you keep the Metabase logo and the "Powered by Metabase" visible on those embeds. You should, however, read the license text linked above as that is the actual license that you will be agreeing to by enabling this feature.`}
     </p>
     <div className="flex layout-centered mt4">

frontend/src/metabase/admin/settings/components/widgets/LdapGroupMappingsWidget.jsx

@@ -278,10 +278,10 @@ class MappingGroupSelect extends React.Component {
         ref="popover"
         triggerElement={
           <div className="flex align-center">
-            <span className="mr1 text-grey-4">
+            <span className="mr1 text-medium">
               <GroupSummary groups={groups} selectedGroups={selected} />
             </span>
-            <Icon className="text-grey-2" name="chevrondown" size={10} />
+            <Icon className="text-light" name="chevrondown" size={10} />
           </div>
         }
         triggerClasses="AdminSelectBorderless py1"

frontend/src/metabase/admin/settings/components/widgets/PublicLinksListing.jsx

@@ -127,7 +127,7 @@ export default class PublicLinksListing extends Component {
                         >
                           <Icon
                             name="close"
-                            className="text-grey-2 text-grey-4-hover cursor-pointer"
+                            className="text-light text-medium-hover cursor-pointer"
                           />
                         </Confirm>
                       </td>

frontend/src/metabase/auth/containers/LoginApp.jsx

@@ -133,7 +133,7 @@ export default class LoginApp extends Component {
                     className="mx1 absolute text-centered left right"
                     style={{ bottom: -8 }}
                   >
-                    <span className="text-bold px3 py2 text-grey-3 bg-white">{t`OR`}</span>
+                    <span className="text-bold px3 py2 text-medium bg-white">{t`OR`}</span>
                   </div>
                 </div>
               )}
@@ -220,7 +220,7 @@ export default class LoginApp extends Component {
                       ? "?email=" + this.state.credentials.username
                       : "")
                   }
-                  className="Grid-cell py2 sm-py0 text-grey-3 md-text-right text-centered flex-full link"
+                  className="Grid-cell py2 sm-py0 text-medium md-text-right text-centered flex-full link"
                   onClick={e => {
                     window.OSX ? window.OSX.resetPassword() : null;
                   }}

frontend/src/metabase/auth/containers/PasswordResetApp.jsx

@@ -146,7 +146,7 @@ export default class PasswordResetApp extends Component {
                 >
                   <h3 className="Login-header Form-offset">{t`New password`}</h3>
 
-                  <p className="Form-offset text-grey-3 mb4">{t`To keep your data secure, passwords ${passwordComplexity}`}</p>
+                  <p className="Form-offset text-medium mb4">{t`To keep your data secure, passwords ${passwordComplexity}`}</p>
 
                   <FormMessage
                     formError={