Icon refactor

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

@@ -51,10 +51,7 @@ class PostModal extends React.Component {
             className="button post__close-button"
             onClick={() => this.props.unSelectPost()}
           >
-            Close{' '}
-            <span>
-              <img src="/static/icons/cross.svg" width="20" />
-            </span>
+            Close <i class="gg-close"></i>
           </button>
           <div className="post__header">
             <h1 className={titleClassName}>{`${post.title} `}</h1>
@@ -66,7 +63,7 @@ class PostModal extends React.Component {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <img src="/static/icons/link.svg" />
+                <i className="gg-link" />
               </a>
             </div>
           </div>

src/newsreader/js/pages/homepage/components/feedlist/FeedList.js

@@ -52,10 +52,8 @@ class FeedList extends React.Component {
       return (
         <div className="post-message">
           <div className="post-message__block">
-            <img src="/static/icons/arrow-left.svg" height="28" width="28" />
-            <p className="post-message__text">
-              Select a category or rule to show its unread posts
-            </p>
+            <i class="gg-arrow-left" />
+            <p className="post-message__text">Select an item to show its unread posts</p>
           </div>
         </div>
       );

src/newsreader/js/pages/homepage/components/feedlist/PostItem.js

@@ -34,7 +34,7 @@ class PostItem extends React.Component {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <img src="/static/icons/link.svg" />
+            <i className="gg-link" />
           </a>
         </div>
       </li>

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

@@ -24,9 +24,7 @@ class CategoryItem extends React.Component {
   }
 
   render() {
-    const imageSrc = this.state.open
-      ? '/static/icons/chevron-down.svg'
-      : '/static/icons/chevron-right.svg';
+    const chevronClass = this.state.open ? 'gg-chevron-down' : 'gg-chevron-right';
     const selected = isSelected(this.props.category, this.props.selected, CATEGORY_TYPE);
     const className = selected ? 'category category--selected' : 'category';
 
@@ -38,7 +36,7 @@ class CategoryItem extends React.Component {
       <li className="sidebar__item">
         <div className={className}>
           <div className="category__menu" onClick={() => this.toggleRules()}>
-            <img src={imageSrc} width="20" heigth="20" />
+            <i className={chevronClass} />
           </div>
 
           <div className="category__info" onClick={() => this.handleSelect()}>

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

@@ -5,7 +5,7 @@
   align-items: center;
 
   width: 60%;
-  height: max-content;
+  height: 80vh;
   border-radius: 2px;
 
   font-family: $article-font;

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

@@ -36,7 +36,7 @@
 
   &__link {
     display: inline-flex;
-    padding: 0 10px;
+    padding: 0 15px;
 
     & img {
       width: 30px;
@@ -79,19 +79,10 @@
   }
 
   &__close-button {
+    position: relative;
     margin: 1% 2% 0 0;
     align-self: flex-end;
 
-    & span {
-      display: inline-flex;
-      align-items: center;
-      margin: 0 0 0 5px;
-
-      & img {
-        width: 20px;
-      }
-    }
-
     &:hover {
       background-color: lighten($gainsboro, +1%);
     }
@@ -100,6 +91,7 @@
   &__meta-info {
     display: flex;
     flex-direction: row;
+    align-items: center;
 
     margin: 15px 0;
   }

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

@@ -1,6 +1,7 @@
 .posts-info {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
+  align-items: center;
 
   width: 20%;
 

src/newsreader/scss/elements/link/_link.scss

@@ -10,3 +10,7 @@
 a {
   @extend .link;
 }
+
+.gg-link {
+  color: initial;
+}

src/newsreader/scss/index.scss

@@ -1,3 +1,4 @@
+@import "lib/index";
 @import "partials/index";
 @import "components/index";
 @import "elements/index";

src/newsreader/scss/lib/_css.gg.scss

@@ -0,0 +1 @@
+@import url("https://css.gg/c");

src/newsreader/scss/lib/index.scss

@@ -0,0 +1 @@
+@import "css.gg";