Replace remaining icons

src/newsreader/js/components/Messages.js

@@ -17,7 +17,7 @@ class Messages extends React.Component {
     const messages = this.state.messages.map((message, index) => {
       return (
         <li key={index} className={`messages__item messages__item--${message.type}`}>
-          {message.text} <i className="gg-close" onClick={() => this.close(index)} />
+          {message.text} <i className="fas fa-times" onClick={() => this.close(index)} />
         </li>
       );
     });

src/newsreader/js/pages/categories/components/CategoryCard.js

@@ -11,7 +11,7 @@ const CategoryCard = props => {
     if (rule.favicon) {
       favicon = <img className="favicon" src={rule.favicon} />;
     } else {
-      favicon = <i className="gg-image" />;
+      favicon = <i className="fas fa-image" />;
     }
 
     return (

src/newsreader/js/pages/homepage/components/postlist/PostList.js

@@ -55,7 +55,7 @@ class PostList extends React.Component {
       return (
         <div className="post-message">
           <div className="post-message__block">
-            <i className="gg-arrow-left" />
+            <i class="fas fa-arrow-left" />
             <p className="post-message__text">Select an item to show its unread posts</p>
           </div>
         </div>

src/newsreader/news/collection/templates/news/collection/views/rules.html

@@ -58,16 +58,16 @@
                 </td>
                 <td class="table__item rules-table__item">
                   {% if rule.failed %}
-                    <i class="gg-danger"></i>
+                    <i class="fas fa-exclamation-triangle"></i>
                   {% else %}
-                    <i class="gg-check"></i>
+                    <i class="fas fa-check"></i>
                   {% endif %}
                 </td>
                 <td class="table__item rules-table__item">
                   {% if rule.enabled %}
-                    <i class="gg-check"></i>
+                    <i class="fas fa-check"></i>
                   {% else %}
-                    <i class="gg-play-pause"></i>
+                    <i class="fas fa-pause"></i>
                   {% endif %}
                 </td>
               </tr>

src/newsreader/news/core/templates/news/core/widgets/rule.html

@@ -7,7 +7,7 @@
 {% if option.instance.favicon %}
   <img class="favicon" src="{{ option.instance.favicon }}" />
 {% else %}
-  <i class="gg-image"></i>
+  <i class="fas fa-image"></i>
 {% endif %}
 
 <span>{{ option.label }}</span>

src/newsreader/scss/components/messages/_messages.scss

@@ -29,11 +29,10 @@
       background-color: $transparant-green;
     }
 
-    & .gg-close {
+    & i {
       position: absolute;
       top: 15px;
       right: 15px;
-      --ggs: 2;
     }
   }
 

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

@@ -17,5 +17,9 @@
     align-items: center;
 
     margin: 5px;
+
+    & i {
+      padding: 0 7px 0 0;
+    }
   }
 }

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

@@ -27,8 +27,7 @@
     align-items: center;
     width: 80%;
 
-    & .gg-image {
-      --ggs: 80%;
+    & i {
       margin: 0 5px 0 0;
       min-width: 20px;
     }

src/newsreader/templates/base.html

@@ -28,7 +28,7 @@
         {% endif %}
       </ol>
 
-      <i class="theme-switcher gg-dark-mode"></i>
+      <i class="theme-switcher fas fa-adjust"></i>
     </nav>
 
     {% if messages %}

todo.txt

@@ -1,16 +0,0 @@
-# font awesome refactor
-
-To be refactored:
-	- src/newsreader/js/pages/categories/components/CategoryCard.js:14:      favicon = <i className="gg-image" />;
-	- src/newsreader/js/pages/homepage/components/postlist/PostList.js:58:            <i className="gg-arrow-left" />
-	- src/newsreader/js/components/Messages.js:20:          {message.text} <i className="gg-close" onClick={() => this.close(index)} />
-	- src/newsreader/templates/base.html:31:      <i class="theme-switcher gg-dark-mode"></i>
-	- src/newsreader/news/core/templates/news/core/widgets/rule.html:10:  <i class="gg-image"></i>
-	- src/newsreader/news/collection/templates/news/collection/views/rules.html:61:                    <i class="gg-danger"></i>
-	- src/newsreader/news/collection/templates/news/collection/views/rules.html:63:                    <i class="gg-check"></i>
-	- src/newsreader/news/collection/templates/news/collection/views/rules.html:68:                    <i class="gg-check"></i>
-	- src/newsreader/news/collection/templates/news/collection/views/rules.html:70:                    <i class="gg-play-pause"></i>
-	- src/newsreader/scss/components/messages/_messages.scss:32:    & .gg-close {
-	- src/newsreader/scss/components/rules/_rules.scss:30:    & .gg-image {
-
-	- New dark colors for buttons