Edit font colors

src/newsreader/js/pages/homepage/components/PostModal.js

@@ -47,14 +47,14 @@ class PostModal extends React.Component {
     return (
       <div className="modal post-modal">
         <div className="post">
-          <button
+          <span
             className="button post__close-button"
             onClick={() => this.props.unSelectPost()}
           >
             Close <i className="gg-close"></i>
-          </button>
+          </span>
           <div className="post__header">
-            <h1 className={titleClassName}>{`${post.title} `}</h1>
+            <h2 className={titleClassName}>{`${post.title} `}</h2>
             <div className="post__meta-info">
               <span className="post__date">{publicationDate}</span>
               <a

src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js

@@ -40,7 +40,7 @@ class CategoryItem extends React.Component {
           </div>
 
           <div className="category__info" onClick={() => this.handleSelect()}>
-            <h4>{this.props.category.name}</h4>
+            <span>{this.props.category.name}</span>
             <span className="badge">{this.props.category.unread}</span>
           </div>
         </div>

src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js

@@ -31,9 +31,9 @@ class RuleItem extends React.Component {
       <li className={className} onClick={() => this.handleSelect()}>
         <div className="rules__info">
           {favicon}
-          <h5 className="rules__title" title={this.props.rule.name}>
+          <span className="rules__title" title={this.props.rule.name}>
             {this.props.rule.name}
-          </h5>
+          </span>
         </div>
         <span className="badge">{this.props.rule.unread}</span>
       </li>

src/newsreader/scss/components/body/_body.scss

@@ -3,7 +3,7 @@
   padding: 0;
 
   font-family: Rubik, sans-serif;
-  color: $default-font-color;
+  color: $font-color;
 }
 
 body {

src/newsreader/scss/components/category/_category.scss

@@ -4,8 +4,6 @@
 
   padding: 5px;
 
-  border-radius: 5px;
-
   &__info {
     display: flex;
     justify-content: space-between;

src/newsreader/scss/components/navbar/_navbar.scss

@@ -6,8 +6,6 @@
   padding: 10px 0;
   width: 100%;
 
-  background-color: $white;
-
   ol {
     display: flex;
     justify-content: flex-start;
@@ -19,10 +17,11 @@
   &__item {
     margin: 0px 10px;
 
-    border: none;
-
     & a {
       @extend .button;
+
+      font-size: 18px !important;
+      font-weight: 600;
     }
   }
 

src/newsreader/scss/components/post/_post.scss

@@ -25,8 +25,6 @@
   }
 
   &__title {
-    line-height: 1;
-
     &--read {
       color: $gainsboro;
     }
@@ -42,7 +40,6 @@
   }
 
   &__date {
-    align-self: center;
     font-size: small;
   }
 
@@ -53,9 +50,6 @@
     padding: 10px 0 30px 0;
     width: 75%;
 
-    line-height: 1.5;
-    font-size: 18px;
-
     & p {
       padding: 10px 0;
     }
@@ -79,6 +73,7 @@
     position: relative;
     margin: 1% 2% 0 0;
     align-self: flex-end;
+    background-color: $gainsboro;
 
     &:hover {
       background-color: lighten($gainsboro, +1%);
@@ -102,7 +97,7 @@
     top: 25%;
     width: 10%;
 
-    color: lighten($default-font-color, +10%);
+    color: lighten($font-color, +10%);
 
     & h5 {
       margin: 10px 0 0 0;

src/newsreader/scss/components/rules/_rules.scss

@@ -8,8 +8,6 @@
 
     padding: 5px 5px 5px 20px;
 
-    border-radius: 5px;
-
     & * {
       padding: 0 2px 0 2px;
     }

src/newsreader/scss/elements/badge/_badge.scss

@@ -6,7 +6,7 @@
 
   text-align: center;
 
-  background-color: lighten($pewter-blue, +20%);
+  background-color: $gainsboro;
 
   font-size: small;
 }

src/newsreader/scss/elements/button/_button.scss

@@ -37,10 +37,10 @@
 
   &--primary {
     color: $white !important;
-    background-color: darken($azureish-white, +20%);
+    background-color: $button-blue;
 
     &:hover {
-      background-color: $azureish-white;
+      background-color: lighten($button-blue, 5%);
     }
   }
 }

src/newsreader/scss/elements/h1/_h1.scss

@@ -1,3 +1,8 @@
 .h1 {
+  color: $header-color;
   font-size: 20px;
 }
+
+h1 {
+  @extend .h1;
+}

src/newsreader/scss/elements/h2/_h2.scss

@@ -1,2 +1,7 @@
 .h2 {
+  color: $header-color;
+}
+
+h2 {
+  @extend .h2;
 }

src/newsreader/scss/elements/h3/_h3.scss

@@ -1,2 +1,7 @@
 .h3 {
+  color: $header-color;
+}
+
+h3 {
+  @extend .h3;
 }

src/newsreader/scss/elements/h4/_h4.scss

@@ -0,0 +1,7 @@
+.h4 {
+  color: $header-color;
+}
+
+h4 {
+  @extend .h4;
+}

src/newsreader/scss/elements/h4/index.scss

@@ -0,0 +1 @@
+@import './h4';

src/newsreader/scss/elements/h5/_h5.scss

@@ -0,0 +1,7 @@
+.h5 {
+  color: $header-color;
+}
+
+h5 {
+  @extend .h5;
+}

src/newsreader/scss/elements/h5/index.scss

@@ -0,0 +1 @@
+@import "./h5";

src/newsreader/scss/elements/index.scss

@@ -1,11 +1,13 @@
-@import "badge/index";
+@import './badge/index';
-@import "button/index";
+@import './button/index';
-@import "help-text/index";
+@import './help-text/index';
-@import "input/index";
+@import './input/index';
-@import "label/index";
+@import './label/index';
-@import "link/index";
+@import './link/index';
-@import "h1/index";
+@import './h1/index';
-@import "h2/index";
+@import './h2/index';
-@import "h3/index";
+@import './h3/index';
-@import "small/index";
+@import './h4/index';
-@import "select/index";
+@import './h5/index';
+@import './small/index';
+@import './select/index';

src/newsreader/scss/partials/_colors.scss

@@ -22,7 +22,7 @@ $light-green: rgba(230, 247, 185, 1);
 $light-orange: rgba(237, 212, 178, 1);
 $light-red: rgba(255, 118, 117, 1);
 
-$success-green: rgba(46,204,113, 1);
+$success-green: rgba(89, 181, 128, 1);
 $error-red: lighten(rgba(231, 76, 60, 1), 10%);
 
 $confirm-green: $success-green;
@@ -30,8 +30,10 @@ $cancel-red: $error-red;
 
 $border-gray: rgba(227, 227, 227, 1);
 
+$button-blue: rgba(111, 164, 196, 1);
 $focus-blue: darken($azureish-white, +10%);
-$default-font-color: rgba(48, 51, 53, 1);
+$font-color: rgba(48, 51, 53, 1);
+$header-color: rgba(100, 101, 102, 1);
 
 $white: rgba(255, 255, 255, 1);
 $black: rgba(0, 0, 0, 1);