Bug 1522233 - Add styling for HorizonalRule and Hero borders

mozilla · Jan 23, 2019 · c90f668 · c90f668
1 parent 0b4afff
commit c90f668
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss b/content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss
@@ -28,8 +28,8 @@
     color: $grey-50;
     margin: 18px 0;
     padding: 20px 0;
-    border-top: 1px solid transparentize($grey-40, 0.64);
-    border-bottom: 1px solid transparentize($grey-40, 0.64);
+    border-top: $border-secondary;
+    border-bottom: $border-secondary;
 
     &:hover .meta header {
       color: $blue-60;

diff --git a/content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule.jsx b/content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule.jsx
@@ -3,7 +3,7 @@ import React from "react";
 export class HorizontalRule extends React.PureComponent {
   render() {
     return (
-      <hr />
+      <hr className="ds-hr" />
     );
   }
 }
diff --git a/content-src/components/DiscoveryStreamComponents/HorizontalRule/_HorizontalRule.scss b/content-src/components/DiscoveryStreamComponents/HorizontalRule/_HorizontalRule.scss
@@ -0,0 +1,5 @@
+.ds-hr {
+  border: 0;
+  height: 0;
+  border-top: $border-secondary;
+}