From e0b8293ee1276ef6598c393bae2f41b2d8b09997 Mon Sep 17 00:00:00 2001
From: sonny <sonnyba871@gmail.com>
Date: Sun, 24 May 2020 21:36:45 +0200
Subject: [PATCH] Edit font colors

---
 .../js/pages/homepage/components/PostModal.js |  6 ++---
 .../components/sidebar/CategoryItem.js        |  2 +-
 .../homepage/components/sidebar/RuleItem.js   |  4 ++--
 .../scss/components/body/_body.scss           |  2 +-
 .../scss/components/category/_category.scss   |  2 --
 .../scss/components/navbar/_navbar.scss       |  7 +++---
 .../scss/components/post/_post.scss           |  9 ++-----
 .../scss/components/rules/_rules.scss         |  2 --
 .../scss/elements/badge/_badge.scss           |  2 +-
 .../scss/elements/button/_button.scss         |  4 ++--
 src/newsreader/scss/elements/h1/_h1.scss      |  5 ++++
 src/newsreader/scss/elements/h2/_h2.scss      |  5 ++++
 src/newsreader/scss/elements/h3/_h3.scss      |  5 ++++
 src/newsreader/scss/elements/h4/_h4.scss      |  7 ++++++
 src/newsreader/scss/elements/h4/index.scss    |  1 +
 src/newsreader/scss/elements/h5/_h5.scss      |  7 ++++++
 src/newsreader/scss/elements/h5/index.scss    |  1 +
 src/newsreader/scss/elements/index.scss       | 24 ++++++++++---------
 src/newsreader/scss/partials/_colors.scss     |  6 +++--
 19 files changed, 63 insertions(+), 38 deletions(-)
 create mode 100644 src/newsreader/scss/elements/h4/_h4.scss
 create mode 100644 src/newsreader/scss/elements/h4/index.scss
 create mode 100644 src/newsreader/scss/elements/h5/_h5.scss
 create mode 100644 src/newsreader/scss/elements/h5/index.scss

diff --git a/src/newsreader/js/pages/homepage/components/PostModal.js b/src/newsreader/js/pages/homepage/components/PostModal.js
index 4abf710..ee4a817 100644
--- a/src/newsreader/js/pages/homepage/components/PostModal.js
+++ b/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
diff --git a/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js b/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js
index d1a0c94..7c0268c 100644
--- a/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js
+++ b/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>
diff --git a/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js b/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js
index 879745f..df8da94 100644
--- a/src/newsreader/js/pages/homepage/components/sidebar/RuleItem.js
+++ b/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>
diff --git a/src/newsreader/scss/components/body/_body.scss b/src/newsreader/scss/components/body/_body.scss
index 266d82b..fed260b 100644
--- a/src/newsreader/scss/components/body/_body.scss
+++ b/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 {
diff --git a/src/newsreader/scss/components/category/_category.scss b/src/newsreader/scss/components/category/_category.scss
index 9d8451f..cbea865 100644
--- a/src/newsreader/scss/components/category/_category.scss
+++ b/src/newsreader/scss/components/category/_category.scss
@@ -4,8 +4,6 @@
 
   padding: 5px;
 
-  border-radius: 5px;
-
   &__info {
     display: flex;
     justify-content: space-between;
diff --git a/src/newsreader/scss/components/navbar/_navbar.scss b/src/newsreader/scss/components/navbar/_navbar.scss
index c3584f1..60c9f48 100644
--- a/src/newsreader/scss/components/navbar/_navbar.scss
+++ b/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;
     }
   }
 
diff --git a/src/newsreader/scss/components/post/_post.scss b/src/newsreader/scss/components/post/_post.scss
index 7a7fe67..e803b1b 100644
--- a/src/newsreader/scss/components/post/_post.scss
+++ b/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;
diff --git a/src/newsreader/scss/components/rules/_rules.scss b/src/newsreader/scss/components/rules/_rules.scss
index 92427da..73f54da 100644
--- a/src/newsreader/scss/components/rules/_rules.scss
+++ b/src/newsreader/scss/components/rules/_rules.scss
@@ -8,8 +8,6 @@
 
     padding: 5px 5px 5px 20px;
 
-    border-radius: 5px;
-
     & * {
       padding: 0 2px 0 2px;
     }
diff --git a/src/newsreader/scss/elements/badge/_badge.scss b/src/newsreader/scss/elements/badge/_badge.scss
index 8dd5d99..efdd1b7 100644
--- a/src/newsreader/scss/elements/badge/_badge.scss
+++ b/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;
 }
diff --git a/src/newsreader/scss/elements/button/_button.scss b/src/newsreader/scss/elements/button/_button.scss
index 691fa91..2e97d6b 100644
--- a/src/newsreader/scss/elements/button/_button.scss
+++ b/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%);
     }
   }
 }
diff --git a/src/newsreader/scss/elements/h1/_h1.scss b/src/newsreader/scss/elements/h1/_h1.scss
index 0e5632e..6ddee05 100644
--- a/src/newsreader/scss/elements/h1/_h1.scss
+++ b/src/newsreader/scss/elements/h1/_h1.scss
@@ -1,3 +1,8 @@
 .h1 {
+  color: $header-color;
   font-size: 20px;
 }
+
+h1 {
+  @extend .h1;
+}
diff --git a/src/newsreader/scss/elements/h2/_h2.scss b/src/newsreader/scss/elements/h2/_h2.scss
index 4d7d5a2..9f77ad8 100644
--- a/src/newsreader/scss/elements/h2/_h2.scss
+++ b/src/newsreader/scss/elements/h2/_h2.scss
@@ -1,2 +1,7 @@
 .h2 {
+  color: $header-color;
+}
+
+h2 {
+  @extend .h2;
 }
diff --git a/src/newsreader/scss/elements/h3/_h3.scss b/src/newsreader/scss/elements/h3/_h3.scss
index 8b5653e..7394bd7 100644
--- a/src/newsreader/scss/elements/h3/_h3.scss
+++ b/src/newsreader/scss/elements/h3/_h3.scss
@@ -1,2 +1,7 @@
 .h3 {
+  color: $header-color;
+}
+
+h3 {
+  @extend .h3;
 }
diff --git a/src/newsreader/scss/elements/h4/_h4.scss b/src/newsreader/scss/elements/h4/_h4.scss
new file mode 100644
index 0000000..ab24888
--- /dev/null
+++ b/src/newsreader/scss/elements/h4/_h4.scss
@@ -0,0 +1,7 @@
+.h4 {
+  color: $header-color;
+}
+
+h4 {
+  @extend .h4;
+}
diff --git a/src/newsreader/scss/elements/h4/index.scss b/src/newsreader/scss/elements/h4/index.scss
new file mode 100644
index 0000000..4c735ff
--- /dev/null
+++ b/src/newsreader/scss/elements/h4/index.scss
@@ -0,0 +1 @@
+@import './h4';
diff --git a/src/newsreader/scss/elements/h5/_h5.scss b/src/newsreader/scss/elements/h5/_h5.scss
new file mode 100644
index 0000000..5efa58e
--- /dev/null
+++ b/src/newsreader/scss/elements/h5/_h5.scss
@@ -0,0 +1,7 @@
+.h5 {
+  color: $header-color;
+}
+
+h5 {
+  @extend .h5;
+}
diff --git a/src/newsreader/scss/elements/h5/index.scss b/src/newsreader/scss/elements/h5/index.scss
new file mode 100644
index 0000000..70e496a
--- /dev/null
+++ b/src/newsreader/scss/elements/h5/index.scss
@@ -0,0 +1 @@
+@import "./h5";
diff --git a/src/newsreader/scss/elements/index.scss b/src/newsreader/scss/elements/index.scss
index 3e2a01c..d3e8fe0 100644
--- a/src/newsreader/scss/elements/index.scss
+++ b/src/newsreader/scss/elements/index.scss
@@ -1,11 +1,13 @@
-@import "badge/index";
-@import "button/index";
-@import "help-text/index";
-@import "input/index";
-@import "label/index";
-@import "link/index";
-@import "h1/index";
-@import "h2/index";
-@import "h3/index";
-@import "small/index";
-@import "select/index";
+@import './badge/index';
+@import './button/index';
+@import './help-text/index';
+@import './input/index';
+@import './label/index';
+@import './link/index';
+@import './h1/index';
+@import './h2/index';
+@import './h3/index';
+@import './h4/index';
+@import './h5/index';
+@import './small/index';
+@import './select/index';
diff --git a/src/newsreader/scss/partials/_colors.scss b/src/newsreader/scss/partials/_colors.scss
index 8e776a2..524880e 100644
--- a/src/newsreader/scss/partials/_colors.scss
+++ b/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);