Adjust border styles

jumpalottahigh · Mar 14, 2020 · ecc4c55 · ecc4c55
1 parent 80ba319
commit ecc4c55
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 31 deletions.
diff --git a/src/components/AskAQuestion.js b/src/components/AskAQuestion.js
@@ -8,7 +8,6 @@ const FormContainer = styled.div`
   align-items: center;
   padding: 1rem 0;
   border-top: 1px solid #cecece;
-  border-bottom: 1px solid #cecece;
 
   h4,
   p {

diff --git a/src/components/RelatedArticles.js b/src/components/RelatedArticles.js
@@ -1,6 +1,21 @@
 import React from 'react'
+import styled from 'styled-components'
 import { Link, graphql, useStaticQuery } from 'gatsby'
 
+const StyledRelatedArticles = styled.div`
+  border-top: 1px solid #cecece;
+  padding: 1rem 0;
+
+  & a {
+    display: inline-block;
+    padding: 6px 0;
+  }
+
+  & a:hover {
+    box-shadow: inset 0 -34px 0px 0px #0175d8;
+  }
+`
+
 const RelatedArticles = ({ relatedArticles, currentPagePath }) => {
   const { allMarkdownRemark } = useStaticQuery(graphql`
     query relatedArticlesQuery {
@@ -51,22 +66,19 @@ const RelatedArticles = ({ relatedArticles, currentPagePath }) => {
     return result.score > 0 ? result : null
   })
 
-  return (
-    <React.Fragment>
-      {relatedPages.length !== 0 ? (
-        <div className="related-articles">
-          <h4 style={{ margin: 0 }}>Related articles:</h4>
-          {relatedPages.map(page => (
-            <div key={page.node.id}>
-              <Link to={page.node.frontmatter.path + '/'}>
-                {page.node.frontmatter.title}
-              </Link>
-            </div>
-          ))}
+  return relatedPages.length !== 0 ? (
+    <StyledRelatedArticles>
+      <h4 style={{ margin: 0 }}>Related articles:</h4>
+      {relatedPages.map(page => (
+        <div key={page.node.id}>
+          <Link to={page.node.frontmatter.path + '/'}>
+            {page.node.frontmatter.title}
+            {page.score}
+          </Link>
         </div>
-      ) : null}
-    </React.Fragment>
-  )
+      ))}
+    </StyledRelatedArticles>
+  ) : null
 }
 
 export default RelatedArticles
diff --git a/src/components/Share.js b/src/components/Share.js
@@ -4,6 +4,7 @@ import { FaFacebookSquare, FaTwitterSquare } from 'react-icons/fa'
 
 const StyledShare = styled.section`
   padding: 1rem 0;
+  border-top: 1px solid #cecece;
 
   h4 {
     margin: 0;

diff --git a/src/components/structure/index.css b/src/components/structure/index.css
@@ -1248,21 +1248,6 @@ button {
   box-shadow: inset 0 -28px 0px 0px #0175d8;
 }
 
-.related-articles {
-  border-top: 1px solid #cecece;
-  border-bottom: 1px solid #cecece;
-  padding: 1rem 0;
-}
-
-.related-articles a {
-  display: inline-block;
-  padding: 6px 0;
-}
-
-.related-articles a:hover {
-  box-shadow: inset 0 -34px 0px 0px #0175d8;
-}
-
 .support-section {
   padding: 1rem 0;
   border-top: 1px solid #cecece;