0.3.8

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.3.8
+
+- Update light / dark theme
+- Replace css.gg with fontawesome
+- Update deploy job
+
 ## 0.3.7
 
 - Add a dark theme

gitlab-ci/deploy.yml

@@ -10,14 +10,13 @@ deploy:
     - pip install ansible --quiet
     - git clone https://git.fudiggity.nl/ansible/newsreader.git deployment --branch master
     - cd deployment
-    - ansible-galaxy install -r roles/requirements.yml
+    - ansible-galaxy install -r requirements.yml
     - mkdir /root/.ssh && echo "$DEPLOY_HOST_KEY" > /root/.ssh/known_hosts
     - echo "$DEPLOY_KEY" > deploy_key && chmod 0600 deploy_key
     - echo "$VAULT_PASSWORD" > vault
   script:
     - >
       ansible-playbook playbook.yml
-      --inventory inventory.yml
       --private-key deploy_key
       --vault-password-file vault
       --extra-vars "app_branch=$CI_COMMIT_TAG"

package.json

@@ -19,45 +19,45 @@
   "author": "Sonny",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "css.gg": "^1.0.6",
+    "@fortawesome/fontawesome-free": "^5.15.2",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.20",
     "object-assign": "^4.1.1",
-    "react-redux": "^7.1.3",
+    "react-redux": "^7.2.2",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/plugin-proposal-function-bind": "^7.7.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-syntax-function-bind": "^7.7.4",
-    "@babel/plugin-transform-react-jsx": "^7.7.7",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "^7.7.7",
-    "@babel/register": "^7.7.7",
-    "@babel/runtime": "^7.7.7",
+    "@babel/core": "^7.12.13",
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/plugin-proposal-function-bind": "^7.12.13",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-function-bind": "^7.12.13",
+    "@babel/plugin-transform-react-jsx": "^7.12.13",
+    "@babel/plugin-transform-runtime": "^7.12.15",
+    "@babel/preset-env": "^7.12.13",
+    "@babel/register": "^7.12.13",
+    "@babel/runtime": "^7.12.13",
     "babel-jest": "^24.9.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.4.2",
-    "fetch-mock": "^8.3.1",
-    "file-loader": "^6.0.0",
+    "css-loader": "^3.6.0",
+    "fetch-mock": "^8.3.2",
+    "file-loader": "^6.2.0",
     "jest": "^24.9.0",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-fetch": "^2.6.0",
+    "node-fetch": "^2.6.1",
     "node-sass": "^4.14.1",
     "prettier": "^1.19.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "redux-mock-store": "^1.5.4",
     "sass-loader": "^8.0.2",
-    "style-loader": "^1.1.3",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
+    "style-loader": "^1.3.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
     "webpack-merge": "^4.2.2"
   }
 }

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/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/postlist/PostItem.js

@@ -56,7 +56,7 @@ class PostItem extends React.Component {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <i className="gg-link" />
+            <i className="fas fa-external-link-alt"></i>
           </a>
         </div>
       </li>

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/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/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 $fa-padding 0 0;
+    }
   }
 }

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;
     }
   }
 
@@ -90,11 +87,11 @@
   }
 
   &__close-button {
-    background-color: $blue;
-    color: $white;
+    background-color: var(--info-color);
+    color: var(--font-color);
 
-    &:hover {
-      background-color: lighten($blue, +1%);
+    & i {
+      padding: 0 $fa-padding 0 0;
     }
   }
 

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/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/scss/elements/button/_button.scss

@@ -16,30 +16,17 @@
 
   &--success, &--confirm {
     color: $white !important;
-    background-color: $green;
-
-    &:hover {
-      background-color: lighten($green, +5%);
-    }
+    background-color: var(--confirm-color);
   }
 
   &--error, &--cancel {
     color: $white !important;
-    background-color: $red;
-
-    &:hover {
-      background-color: lighten($red, +5%);
-    }
-
+    background-color: var(--danger-color);
   }
 
   &--primary {
     color: $white !important;
-    background-color: $blue;
-
-    &:hover {
-      background-color: lighten($blue, 5%);
-    }
+    background-color: var(--info-color);
   }
 
   &--reddit {
@@ -61,7 +48,7 @@
   }
 
   &--disabled {
-    color: $font-color !important;
+    color: var(--font-color) !important;
     background-color: $gray !important;
   }
 }

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

@@ -1,10 +1,11 @@
 .read-button {
   @extend .button;
 
-  color: $white;
-  background-color: $green;
+  color: var(--font-color);
 
-  &:hover {
-    background-color: darken($green, 10%);
+  background-color: var(--confirm-color);
+
+  & i {
+    padding: 0 $fa-padding 0 0;
   }
 }

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

@@ -1,10 +0,0 @@
-@import '~css.gg/icons-scss/icons';
-
-.gg-link {
-  color: var(--font-color);
-}
-
-.gg-pen {
-  color: var(--font-color);
-  transform: rotate(-45deg) scale(var(--ggs, 0.8));
-}

src/newsreader/scss/lib/_font-awesome.scss

@@ -0,0 +1,5 @@
+$fa-font-path: '/static/fonts';
+
+@import '@fortawesome/fontawesome-free/scss/fontawesome';
+@import '@fortawesome/fontawesome-free/scss/solid';
+@import '@fortawesome/fontawesome-free/scss/regular';

src/newsreader/scss/lib/_mixins.scss

@@ -7,5 +7,5 @@
 }
 
 @mixin button-padding {
-  padding: 7px 40px;
+  padding: 5px 20px;
 }

src/newsreader/scss/lib/index.scss

@@ -1,2 +1,2 @@
-@import 'css.gg';
+@import 'font-awesome';
 @import 'mixins';

src/newsreader/scss/partials/_colors.scss

@@ -27,7 +27,7 @@ $checkbox-blue: rgba(34, 170, 253, 1);
 // White theme
 $background-color: $white;
 
-$font-color: rgba(48, 51, 53, 1);
+$font-color: rgba(83, 87, 91, 1);
 $link-color: darken($azureish-white, 30%);
 $read-color: darken($gainsboro, 10%);
 
@@ -35,6 +35,11 @@ $accent-color: $gainsboro;
 $lighter-accent-color: $gainsboro;
 $lightest-accent-color: $orange;
 
+$confirm-color: rgba(89, 181, 128, 1);
+$danger-color: rgba(237, 118, 105, 1);
+$warning-color: rgba(255, 218, 119, 1);
+$info-color: rgba(162, 213, 242, 1);
+
 // Dark theme
 $dark-background-color: rgba(29, 45, 80, 1);
 
@@ -45,3 +50,8 @@ $dark-read-color: darken($dark-font-color, 20%);
 $dark-accent-color: rgba(19, 59, 92, 1);
 $dark-lighter-accent-color: rgba(30, 95, 116, 1);
 $dark-lightest-accent-color: rgba(252, 218, 183, 1);
+
+$dark-confirm-color: rgba(0, 121, 101, 1);
+$dark-danger-color: rgba(175, 45, 45, 1);
+$dark-warning-color: rgba(238, 187, 77, 1);
+$dark-info-color: rgba(31, 111, 139, 1);

src/newsreader/scss/partials/_fonts.scss

@@ -8,3 +8,36 @@
   src: url('../assets/fonts/Rubik-Bold.ttf');
   font-weight: bold;
 }
+
+@font-face {
+  font-family: "Font Awesome 5 Free";
+  src: url('~@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf'),
+       url('~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff'),
+       url('~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2');
+  font-weight: bold;
+  style: normal;
+  weight: 900;
+  stretch: 100;
+}
+
+@font-face {
+  font-family: "Font Awesome 5 Free";
+  src: url('~@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf'),
+       url('~@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff'),
+       url('~@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2');
+  font-weight: bold;
+  style: normal;
+  weight: 900;
+  stretch: 100;
+}
+
+@font-face {
+  font-family: "Font Awesome 5 Free";
+  src: url('~@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf'),
+       url('~@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff'),
+       url('~@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2');
+  font-weight: bold;
+  style: normal;
+  weight: 900;
+  stretch: 100;
+}

src/newsreader/scss/partials/_root.scss

@@ -9,6 +9,11 @@
   --lighter-accent-color: #{$lighter-accent-color};
   --lightest-accent-color: #{$lightest-accent-color};
 
+  --confirm-color: #{$confirm-color};
+  --danger-color: #{$danger-color};
+  --warning-color: #{$warning-color};
+  --info-color: #{$info-color};
+
   &.dark-theme {
     --background-color: #{$dark-background-color};
 
@@ -19,6 +24,11 @@
     --accent-color: #{$dark-accent-color};
     --lighter-accent-color: #{$dark-lighter-accent-color};
     --lightest-accent-color: #{$dark-lightest-accent-color};
+
+    --confirm-color: #{$dark-confirm-color};
+    --danger-color: #{$dark-danger-color};
+    --warning-color: #{$dark-warning-color};
+    --info-color: #{$dark-info-color};
   }
 
   color: var(--font-color);

src/newsreader/scss/partials/_variables.scss

@@ -0,0 +1 @@
+$fa-padding: 7px;

src/newsreader/scss/partials/index.scss

@@ -1,3 +1,4 @@
 @import './colors';
 @import './fonts';
 @import './root';
+@import './variables';

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 %}

webpack.common.babel.js

@@ -3,6 +3,7 @@ import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 export default {
+  resolve: { extensions: ['.js', '.scss'] },
   entry: {
     main: ['./src/newsreader/js/index.js', './src/newsreader/scss/index.scss'],
   },