CSS fix/cleanup

frontend/src/metabase/css/core/bordered.css

@@ -83,7 +83,7 @@
     border-color: var(--success-color) !important;
 }
 
-.border-brand :local(.border-brand) {
+.border-brand, :local(.border-brand) {
     border-color: var(--brand-color) !important;
 }
 

frontend/src/metabase/css/core/colors.css

@@ -151,7 +151,9 @@
 .bg-grey-3 { background-color: var(--grey-3) }
 .bg-grey-4 { background-color: var(--grey-4) }
 
-.text-dark, :local(.text-dark) { color: var(--dark-color); }
+.text-dark, :local(.text-dark) {
+    color: var(--dark-color);
+}
 
 /* white  - move to bottom for specificity since its often used on hovers, etc */
 .text-white, :local(.text-white),

frontend/src/metabase/css/core/cursor.css

-:local .cursor-pointer {
+.cursor-pointer, :local(.cursor-pointer) {
     cursor: pointer;
 }
 
-:local .cursor-default {
+.cursor-default, :local(.cursor-default) {
     cursor: default;
-}
\ No newline at end of file
+}

frontend/src/metabase/css/core/text.css

@@ -91,11 +91,11 @@
 }
 
 .text-underline {
-    text-decoration: underline;;
+    text-decoration: underline;
 }
 
 .text-underline-hover:hover {
-    text-decoration: underline;;
+    text-decoration: underline;
 }
 
 .text-ellipsis {
@@ -112,8 +112,6 @@
     white-space: pre;
 }
 
-.text-measure { max-width: 620px; }
-
-.text-dark { color: #333333; }
-
-.text-no-underline { text-decoration: none; }
+.text-measure {
+    max-width: 620px;
+}

frontend/src/metabase/css/home.css

@@ -168,14 +168,6 @@
     word-wrap: break-word;
 }
 
-.cursor-pointer {
-    cursor: pointer;
-}
-
-.cursor-default {
-    cursor: default;
-}
-
 .tooltip {
     position: absolute;
     background-color: #fff;

frontend/src/metabase/reference/components/GuideDetail.jsx

@@ -74,7 +74,7 @@ const GuideDetail = ({
 
             <div className="mt2">
                 <ContextHeading>
-                    {`Things to be aware of about this ${type}`} 
+                    {`Things to be aware of about this ${type}`}
                 </ContextHeading>
 
                 <ContextContent empty={!caveats}>
@@ -87,10 +87,10 @@ const GuideDetail = ({
                     <ContextHeading key="detailLabel">Explore this metric</ContextHeading>,
                     <div key="detailLinks">
                         <Link className="text-brand inline-block mr2 link text-bold" to={link}>View this metric</Link>
-                        { exploreLinks.map(link => 
+                        { exploreLinks.map(link =>
                             <Link
                                 className="inline-block text-bold text-brand mr2 link"
-                                key={link.url} 
+                                key={link.url}
                                 to={link.url}
                             >
                                 {`By ${link.name}`}
@@ -100,8 +100,8 @@ const GuideDetail = ({
                 </div>
             ]}
             { hasLearnMore &&
-                <Link 
-                    className={cx('block mt3 text-no-underline text-underline-hover text-bold', linkClass)}
+                <Link
+                    className={cx('block mt3 no-decoration text-underline-hover text-bold', linkClass)}
                     to={learnMoreLink}
                 >
                     Learn more
@@ -119,8 +119,8 @@ GuideDetail.propTypes = {
 
 const ItemTitle = ({ title, link, linkColorClass, linkHoverClass }) =>
     <h2>
-        <Link 
-            className={ cx(linkColorClass, linkHoverClass) } 
+        <Link
+            className={ cx(linkColorClass, linkHoverClass) }
             style={{ textDecoration: 'none' }}
             to={ link }
         >