Add more icons

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

@@ -74,13 +74,13 @@ class PostModal extends React.Component {
               className={`button read-button ${readButtonDisabled && 'button--disabled'}`}
               onClick={() => !readButtonDisabled && this.props.markPostRead(post, token)}
             >
-              Mark as read
+              <i className="fas fa-check" /> Mark as read
             </button>
             <button
               className="button post__close-button"
               onClick={() => this.props.unSelectPost()}
             >
-              Close <i className="gg-close"></i>
+              <i className="fas fa-times"></i> Close
             </button>
           </div>
           <div className="post__header">
@@ -112,7 +112,7 @@ class PostModal extends React.Component {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <i className="gg-link" />
+                <i className="fas fa-external-link-alt" />
               </a>
             </div>
           </div>

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

@@ -24,7 +24,7 @@ class CategoryItem extends React.Component {
   }
 
   render() {
-    const chevronClass = this.state.open ? 'gg-chevron-down' : 'gg-chevron-right';
+    const chevronClass = this.state.open ? 'fas fa-chevron-down' : 'fas fa-chevron-right';
     const selected = isSelected(this.props.category, this.props.selected, CATEGORY_TYPE);
     const className = selected ? 'category category--selected' : 'category';
 

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

@@ -18,7 +18,7 @@ class ReadButton extends React.Component {
   render() {
     return (
       <button className="button read-button" onClick={this.markSelectedRead}>
-        Mark selected read
+        <i className="fas fa-check" /> Mark selected read
       </button>
     );
   }

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

@@ -24,7 +24,7 @@ class RuleItem extends React.Component {
     if (this.props.rule.favicon) {
       favicon = <img className="favicon" width="20" src={this.props.rule.favicon} />;
     } else {
-      favicon = <i className="gg-image" />;
+      favicon = <i className="fas fa-image" />;
     }
 
     return (

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

@@ -38,11 +38,8 @@
   }
 
   &__link {
-    display: inline-flex;
-    padding: 0 15px;
-
-    & img {
-      width: 30px;
+    & i {
+      padding: 0 0 0 7px;
     }
   }
 
@@ -91,7 +88,12 @@
 
   &__close-button {
     background-color: $blue;
-    color: $white;
+    color: var(--font-color);
+
+    // TODO add mixin for default font awesome padding
+    & i {
+      padding: 0 7px 0 0;
+    }
 
     &:hover {
       background-color: lighten($blue, +1%);

src/newsreader/scss/components/posts-info/_posts-info.scss

@@ -9,10 +9,6 @@
     align-self: center;
   }
 
-  &__link {
-    display: inline-flex;
-  }
-
   & .badge {
     & a {
       color: $black;

src/newsreader/scss/elements/button/_read-button.scss

@@ -1,9 +1,14 @@
 .read-button {
   @extend .button;
 
-  color: $white;
+  color: var(--font-color);
   background-color: $green;
 
+  // TODO add mixin for default font awesome padding
+  & i {
+    padding: 0 7px 0 0;
+  }
+
   &:hover {
     background-color: darken($green, 10%);
   }