Merge branch 'development' into 'master'

0.2.3.1

package-lock.json

@@ -2315,9 +2315,9 @@
       "dev": true
     },
     "camelcase": {
-      "version": "3.0.0",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-      "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
       "dev": true
     },
     "camelcase-keys": {
@@ -2328,14 +2328,6 @@
       "requires": {
         "camelcase": "^2.0.0",
         "map-obj": "^1.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
-          "dev": true
-        }
       }
     },
     "caniuse-lite": {
@@ -2525,14 +2517,42 @@
       }
     },
     "cliui": {
-      "version": "3.2.0",
+      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-      "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
       "dev": true,
       "requires": {
-        "string-width": "^1.0.1",
+        "string-width": "^3.1.0",
-        "strip-ansi": "^3.0.1",
+        "strip-ansi": "^5.2.0",
-        "wrap-ansi": "^2.0.0"
+        "wrap-ansi": "^5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
       }
     },
     "clone-deep": {
@@ -3502,6 +3522,38 @@
       "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
       "dev": true
     },
+    "file-loader": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz",
+      "integrity": "sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -4195,17 +4247,6 @@
         "inherits": "~2.0.0",
         "mkdirp": ">=0.5 0",
         "rimraf": "2"
-      },
-      "dependencies": {
-        "rimraf": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
       }
     },
     "function-bind": {
@@ -4240,9 +4281,9 @@
       }
     },
     "get-caller-file": {
-      "version": "1.0.3",
+      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true
     },
     "get-stdin": {
@@ -4603,6 +4644,15 @@
       "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
       "dev": true
     },
+    "indent-string": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+      "dev": true,
+      "requires": {
+        "repeating": "^2.0.0"
+      }
+    },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -4651,12 +4701,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "invert-kv": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-      "dev": true
-    },
     "is-accessor-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
@@ -5172,8 +5216,7 @@
         },
         "yargs-parser": {
           "version": "13.1.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
+          "resolved": "",
-          "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
           "dev": true,
           "requires": {
             "camelcase": "^5.0.0",
@@ -5587,9 +5630,9 @@
           }
         },
         "yargs-parser": {
-          "version": "13.1.1",
+          "version": "13.1.2",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-          "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
           "dev": true,
           "requires": {
             "camelcase": "^5.0.0",
@@ -5788,9 +5831,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "5.7.3",
+          "version": "5.7.4",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
-          "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
+          "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
           "dev": true
         }
       }
@@ -5858,15 +5901,6 @@
       "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
       "dev": true
     },
-    "lcid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-      "dev": true,
-      "requires": {
-        "invert-kv": "^1.0.0"
-      }
-    },
     "left-pad": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
@@ -6368,15 +6402,6 @@
         "which": "1"
       },
       "dependencies": {
-        "rimraf": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
         "semver": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
@@ -6523,9 +6548,9 @@
       }
     },
     "node-sass": {
-      "version": "4.13.1",
+      "version": "4.14.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
-      "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
       "dev": true,
       "requires": {
         "async-foreach": "^0.1.3",
@@ -6542,7 +6567,7 @@
         "node-gyp": "^3.8.0",
         "npmlog": "^4.0.0",
         "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
+        "sass-graph": "2.2.5",
         "stdout-stream": "^1.4.0",
         "true-case-path": "^1.0.2"
       },
@@ -6778,15 +6803,6 @@
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
-    "os-locale": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-      "dev": true,
-      "requires": {
-        "lcid": "^1.0.0"
-      }
-    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@@ -7455,17 +7471,6 @@
       "requires": {
         "indent-string": "^2.1.0",
         "strip-indent": "^1.0.1"
-      },
-      "dependencies": {
-        "indent-string": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-          "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-          "dev": true,
-          "requires": {
-            "repeating": "^2.0.0"
-          }
-        }
       }
     },
     "redux": {
@@ -7657,9 +7662,9 @@
       "dev": true
     },
     "require-main-filename": {
-      "version": "1.0.1",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
       "dev": true
     },
     "resolve": {
@@ -7708,6 +7713,15 @@
       "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
       "dev": true
     },
+    "rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
     "ripemd160": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
@@ -7772,15 +7786,15 @@
       }
     },
     "sass-graph": {
-      "version": "2.2.4",
+      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
       "dev": true,
       "requires": {
         "glob": "^7.0.0",
         "lodash": "^4.0.0",
         "scss-tokenizer": "^0.2.3",
-        "yargs": "^7.0.0"
+        "yargs": "^13.3.2"
       }
     },
     "sass-loader": {
@@ -8878,6 +8892,54 @@
         }
       }
     },
+    "url-loader": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.0.tgz",
+      "integrity": "sha512-IzgAAIC8wRrg6NYkFIJY09vtktQcsvU8V6HhtQj9PTefbYImzLB1hufqo4m+RyM5N3mLx5BqJKccgxJS+W3kqw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.26",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "mime-db": {
+          "version": "1.44.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+          "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
+          "dev": true
+        },
+        "mime-types": {
+          "version": "2.1.27",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+          "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+          "dev": true,
+          "requires": {
+            "mime-db": "1.44.0"
+          }
+        }
+      }
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -9320,9 +9382,9 @@
       }
     },
     "which-module": {
-      "version": "1.0.0",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
     "wide-align": {
@@ -9350,13 +9412,42 @@
       }
     },
     "wrap-ansi": {
-      "version": "2.1.0",
+      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
       "dev": true,
       "requires": {
-        "string-width": "^1.0.1",
+        "ansi-styles": "^3.2.0",
-        "strip-ansi": "^3.0.1"
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
       }
     },
     "wrappy": {
@@ -9398,9 +9489,9 @@
       "dev": true
     },
     "y18n": {
-      "version": "3.2.1",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
       "dev": true
     },
     "yallist": {
@@ -9410,33 +9501,67 @@
       "dev": true
     },
     "yargs": {
-      "version": "7.1.0",
+      "version": "13.3.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-      "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
       "dev": true,
       "requires": {
-        "camelcase": "^3.0.0",
+        "cliui": "^5.0.0",
-        "cliui": "^3.2.0",
+        "find-up": "^3.0.0",
-        "decamelize": "^1.1.1",
+        "get-caller-file": "^2.0.1",
-        "get-caller-file": "^1.0.1",
-        "os-locale": "^1.4.0",
-        "read-pkg-up": "^1.0.1",
         "require-directory": "^2.1.1",
-        "require-main-filename": "^1.0.1",
+        "require-main-filename": "^2.0.0",
         "set-blocking": "^2.0.0",
-        "string-width": "^1.0.2",
+        "string-width": "^3.0.0",
-        "which-module": "^1.0.0",
+        "which-module": "^2.0.0",
-        "y18n": "^3.2.1",
+        "y18n": "^4.0.0",
-        "yargs-parser": "^5.0.0"
+        "yargs-parser": "^13.1.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
       }
     },
     "yargs-parser": {
-      "version": "5.0.0",
+      "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
       "dev": true,
       "requires": {
-        "camelcase": "^3.0.0"
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        }
       }
     }
   }

package.json

@@ -44,16 +44,18 @@
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.4.2",
     "fetch-mock": "^8.3.1",
+    "file-loader": "^6.0.0",
     "jest": "^24.9.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-fetch": "^2.6.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "prettier": "^1.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.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",
     "webpack-merge": "^4.2.2"

src/newsreader/assets/fonts/METADATA.pb

@@ -0,0 +1,101 @@
+name: "Rubik"
+designer: "Hubert and Fischer, Meir Sadan, Cyreal"
+license: "OFL"
+category: "SANS_SERIF"
+date_added: "2015-07-22"
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 300
+  filename: "Rubik-Light.ttf"
+  post_script_name: "Rubik-Light"
+  full_name: "Rubik Light"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 300
+  filename: "Rubik-LightItalic.ttf"
+  post_script_name: "Rubik-LightItalic"
+  full_name: "Rubik Light Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 400
+  filename: "Rubik-Regular.ttf"
+  post_script_name: "Rubik-Regular"
+  full_name: "Rubik Regular"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 400
+  filename: "Rubik-Italic.ttf"
+  post_script_name: "Rubik-Italic"
+  full_name: "Rubik Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 500
+  filename: "Rubik-Medium.ttf"
+  post_script_name: "Rubik-Medium"
+  full_name: "Rubik Medium"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 500
+  filename: "Rubik-MediumItalic.ttf"
+  post_script_name: "Rubik-MediumItalic"
+  full_name: "Rubik Medium Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 700
+  filename: "Rubik-Bold.ttf"
+  post_script_name: "Rubik-Bold"
+  full_name: "Rubik Bold"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 700
+  filename: "Rubik-BoldItalic.ttf"
+  post_script_name: "Rubik-BoldItalic"
+  full_name: "Rubik Bold Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "normal"
+  weight: 900
+  filename: "Rubik-Black.ttf"
+  post_script_name: "Rubik-Black"
+  full_name: "Rubik Black"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+fonts {
+  name: "Rubik"
+  style: "italic"
+  weight: 900
+  filename: "Rubik-BlackItalic.ttf"
+  post_script_name: "Rubik-BlackItalic"
+  full_name: "Rubik Black Italic"
+  copyright: "Copyright 2015 The Rubik Project Authors (https://github.com/googlefonts/rubik)"
+}
+subsets: "cyrillic"
+subsets: "cyrillic-ext"
+subsets: "hebrew"
+subsets: "latin"
+subsets: "latin-ext"
+subsets: "menu"

src/newsreader/conf/base.py

@@ -31,6 +31,7 @@ INSTALLED_APPS = [
     "axes",
     # app modules
     "newsreader.accounts",
+    "newsreader.utils",
     "newsreader.news",
     "newsreader.news.core",
     "newsreader.news.collection",
@@ -70,6 +71,8 @@ TEMPLATES = [
     }
 ]
 
+FORM_RENDERER = "newsreader.utils.form.FormRenderer"
+
 WSGI_APPLICATION = "newsreader.wsgi.application"
 
 # Database

src/newsreader/fixtures/default-fixture.json

@@ -140,6 +140,22 @@
         "expire_date": "2020-05-16T18:29:04.049Z"
     }
 },
+{
+    "model": "sessions.session",
+    "pk": "d4wophwpjm8z96doe8iddvhdv9yfafyx",
+    "fields": {
+        "session_data": "OWZkZTQyZDQ2NzNkYzdkOTBhM2ZlOWU3MDhhNDkyMWQ0MDdmZTc5ODp7Il9hdXRoX3VzZXJfaWQiOiIxIiwiX2F1dGhfdXNlcl9iYWNrZW5kIjoiZGphbmdvLmNvbnRyaWIuYXV0aC5iYWNrZW5kcy5Nb2RlbEJhY2tlbmQiLCJfYXV0aF91c2VyX2hhc2giOiJhZTMwMWFlMzI5OGFlOThkNjY1MTY1NDIxM2EyMmM0NDA0Y2FkZTc3In0=",
+        "expire_date": "2020-06-07T19:45:49.727Z"
+    }
+},
+{
+    "model": "sessions.session",
+    "pk": "jwn66dptmdkm6hom2ns3j288aaxqtyjd",
+    "fields": {
+        "session_data": "OWZkZTQyZDQ2NzNkYzdkOTBhM2ZlOWU3MDhhNDkyMWQ0MDdmZTc5ODp7Il9hdXRoX3VzZXJfaWQiOiIxIiwiX2F1dGhfdXNlcl9iYWNrZW5kIjoiZGphbmdvLmNvbnRyaWIuYXV0aC5iYWNrZW5kcy5Nb2RlbEJhY2tlbmQiLCJfYXV0aF91c2VyX2hhc2giOiJhZTMwMWFlMzI5OGFlOThkNjY1MTY1NDIxM2EyMmM0NDA0Y2FkZTc3In0=",
+        "expire_date": "2020-06-07T18:38:19.116Z"
+    }
+},
 {
     "model": "django_celery_beat.intervalschedule",
     "pk": 1,
@@ -172,6 +188,14 @@
         "period": "hours"
     }
 },
+{
+    "model": "django_celery_beat.intervalschedule",
+    "pk": 5,
+    "fields": {
+        "every": 4,
+        "period": "hours"
+    }
+},
 {
     "model": "django_celery_beat.crontabschedule",
     "pk": 1,
@@ -188,7 +212,7 @@
     "model": "django_celery_beat.periodictasks",
     "pk": 1,
     "fields": {
-        "last_update": "2020-05-02T20:40:29.029Z"
+        "last_update": "2020-05-24T19:46:50.243Z"
     }
 },
 {
@@ -225,11 +249,11 @@
     "fields": {
         "name": "sonny@bakker.nl-collection-task",
         "task": "newsreader.news.collection.tasks.FeedTask",
-        "interval": 4,
+        "interval": 5,
         "crontab": null,
         "solar": null,
         "clocked": null,
-        "args": "[2]",
+        "args": "[1]",
         "kwargs": "{}",
         "queue": null,
         "exchange": null,
@@ -241,37 +265,9 @@
         "one_off": false,
         "start_time": null,
         "enabled": true,
-        "last_run_at": "2020-05-02T20:06:24.012Z",
+        "last_run_at": "2020-05-24T18:37:57.707Z",
-        "total_run_count": 292,
+        "total_run_count": 293,
-        "date_changed": "2020-05-02T20:06:24.027Z",
+        "date_changed": "2020-05-24T19:46:50.245Z",
-        "description": ""
-    }
-},
-{
-    "model": "django_celery_beat.periodictask",
-    "pk": 26,
-    "fields": {
-        "name": "sonnyba871@gmail.com-collection-task",
-        "task": "newsreader.news.collection.tasks.FeedTask",
-        "interval": 4,
-        "crontab": null,
-        "solar": null,
-        "clocked": null,
-        "args": "[18]",
-        "kwargs": "{}",
-        "queue": null,
-        "exchange": null,
-        "routing_key": null,
-        "headers": "{}",
-        "priority": null,
-        "expires": null,
-        "expire_seconds": null,
-        "one_off": false,
-        "start_time": null,
-        "enabled": true,
-        "last_run_at": "2020-05-02T20:06:24.045Z",
-        "total_run_count": 105,
-        "date_changed": "2020-05-02T20:09:24.331Z",
         "description": ""
     }
 },
@@ -1115,7 +1111,7 @@
     "model": "accounts.user",
     "fields": {
         "password": "pbkdf2_sha256$180000$KGKGsPnSwyiN$RqQAD46r4Kzqndqp5dmpj+H/drDrPRI0r6j4gLtYBjE=",
-        "last_login": "2020-05-02T18:29:04.047Z",
+        "last_login": "2020-05-24T19:45:49.721Z",
         "is_superuser": true,
         "first_name": "",
         "last_name": "",
@@ -1167,6 +1163,7 @@
         "last_suceeded": "2020-05-02T20:06:25.793Z",
         "succeeded": true,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1187,6 +1184,7 @@
         "last_suceeded": "2020-05-02T20:06:24.128Z",
         "succeeded": true,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1207,6 +1205,7 @@
         "last_suceeded": "2020-05-02T20:06:25.364Z",
         "succeeded": true,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1227,6 +1226,7 @@
         "last_suceeded": "2020-05-02T20:06:25.620Z",
         "succeeded": true,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1247,6 +1247,7 @@
         "last_suceeded": "2020-05-02T20:06:24.730Z",
         "succeeded": true,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1267,6 +1268,7 @@
         "last_suceeded": "2020-05-02T20:06:25.742Z",
         "succeeded": true,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1287,6 +1289,7 @@
         "last_suceeded": "2020-05-02T20:06:25.549Z",
         "succeeded": true,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1307,6 +1310,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1327,6 +1331,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1347,6 +1352,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1367,6 +1373,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1387,6 +1394,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1407,6 +1415,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1427,6 +1436,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1447,6 +1457,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1467,6 +1478,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1487,6 +1499,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1507,6 +1520,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1527,6 +1541,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1547,6 +1562,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1567,6 +1583,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1587,6 +1604,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1607,6 +1625,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1627,6 +1646,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1647,6 +1667,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1667,6 +1688,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1687,6 +1709,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1707,6 +1730,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1727,6 +1751,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1747,6 +1772,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1767,6 +1793,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1787,6 +1814,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1807,6 +1835,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1827,6 +1856,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1847,6 +1877,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1867,6 +1898,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1887,6 +1919,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1907,6 +1940,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1927,6 +1961,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1947,6 +1982,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1967,6 +2003,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -1987,6 +2024,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2007,6 +2045,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2027,6 +2066,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2047,6 +2087,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2067,6 +2108,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2087,6 +2129,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2107,6 +2150,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2127,6 +2171,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2147,6 +2192,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2167,6 +2213,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2187,6 +2234,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2207,6 +2255,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2227,6 +2276,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2247,6 +2297,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2267,6 +2318,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2287,6 +2339,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2307,6 +2360,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2327,6 +2381,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2347,6 +2402,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2367,6 +2423,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2387,6 +2444,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2407,6 +2465,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2427,6 +2486,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2447,6 +2507,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2467,6 +2528,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2487,6 +2549,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2507,6 +2570,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2527,6 +2591,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2547,6 +2612,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2567,6 +2633,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2587,6 +2654,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2607,6 +2675,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2627,6 +2696,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2647,6 +2717,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2667,6 +2738,7 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
@@ -2687,9 +2759,82 @@
         "last_suceeded": null,
         "succeeded": false,
         "error": null,
+        "enabled": true,
         "user": [
             "sonny@bakker.nl"
         ]
     }
+},
+{
+    "model": "admin.logentry",
+    "pk": 1,
+    "fields": {
+        "action_time": "2020-05-24T18:38:44.624Z",
+        "user": [
+            "sonny@bakker.nl"
+        ],
+        "content_type": [
+            "django_celery_beat",
+            "intervalschedule"
+        ],
+        "object_id": "5",
+        "object_repr": "every 4 hours",
+        "action_flag": 1,
+        "change_message": "[{\"added\": {}}]"
+    }
+},
+{
+    "model": "admin.logentry",
+    "pk": 2,
+    "fields": {
+        "action_time": "2020-05-24T18:38:46.689Z",
+        "user": [
+            "sonny@bakker.nl"
+        ],
+        "content_type": [
+            "django_celery_beat",
+            "periodictask"
+        ],
+        "object_id": "10",
+        "object_repr": "sonny@bakker.nl-collection-task: every 4 hours",
+        "action_flag": 2,
+        "change_message": "[{\"changed\": {\"fields\": [\"Interval Schedule\"]}}]"
+    }
+},
+{
+    "model": "admin.logentry",
+    "pk": 3,
+    "fields": {
+        "action_time": "2020-05-24T18:39:09.203Z",
+        "user": [
+            "sonny@bakker.nl"
+        ],
+        "content_type": [
+            "django_celery_beat",
+            "periodictask"
+        ],
+        "object_id": "26",
+        "object_repr": "sonnyba871@gmail.com-collection-task: every hour",
+        "action_flag": 3,
+        "change_message": ""
+    }
+},
+{
+    "model": "admin.logentry",
+    "pk": 4,
+    "fields": {
+        "action_time": "2020-05-24T19:46:50.248Z",
+        "user": [
+            "sonny@bakker.nl"
+        ],
+        "content_type": [
+            "django_celery_beat",
+            "periodictask"
+        ],
+        "object_id": "10",
+        "object_repr": "sonny@bakker.nl-collection-task: every 4 hours",
+        "action_flag": 2,
+        "change_message": "[{\"changed\": {\"fields\": [\"Positional Arguments\"]}}]"
+    }
 }
 ]

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

@@ -47,16 +47,37 @@ 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>
+              {post.author && <span className="post__author">{post.author}</span>}
+              {this.props.category && (
+                <span className="badge post__category" title={this.props.category.name}>
+                  <a
+                    href={`/core/categories/${this.props.category.id}/`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {this.props.category.name}
+                  </a>
+                </span>
+              )}
+              <span className="badge post__rule" title={this.props.rule.name}>
+                <a
+                  href={`/collection/rules/${this.props.rule.id}/`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {this.props.rule.name}
+                </a>
+              </span>
               <a
                 className="post__link"
                 href={post.url}
@@ -67,13 +88,6 @@ class PostModal extends React.Component {
               </a>
             </div>
           </div>
-          <aside className="post__section-info">
-            {this.props.category && (
-              <h5 title={this.props.category.name}>{this.props.category.name}</h5>
-            )}
-
-            <h5 title={this.props.rule.name}>{this.props.rule.name}</h5>
-          </aside>
 
           {/* HTML is sanitized by the collectors */}
           <div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} />

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

@@ -6,7 +6,7 @@ import { fetchPostsBySection } from '../../actions/posts.js';
 import { filterPosts } from './filters.js';
 
 import LoadingIndicator from '../../../../components/LoadingIndicator.js';
-import RuleItem from './RuleItem.js';
+import PostItem from './PostItem.js';
 
 class FeedList extends React.Component {
   checkScrollHeight = ::this.checkScrollHeight;
@@ -37,8 +37,8 @@ class FeedList extends React.Component {
   }
 
   render() {
-    const ruleItems = this.props.posts.map((item, index) => {
+    const postItems = this.props.postsBySection.map((item, index) => {
-      return <RuleItem key={index} posts={item.posts} rule={item.rule} />;
+      return <PostItem key={index} post={item} selected={this.props.selected} />;
     });
 
     if (isEqual(this.props.selected, {})) {
@@ -50,7 +50,7 @@ class FeedList extends React.Component {
           </div>
         </div>
       );
-    } else if (ruleItems.length === 0 && !this.props.isFetching) {
+    } else if (postItems.length === 0 && !this.props.isFetching) {
       return (
         <div className="post-message">
           <div className="post-message__block">
@@ -62,8 +62,8 @@ class FeedList extends React.Component {
       );
     } else {
       return (
-        <div className="post-block">
+        <div className="posts">
-          {ruleItems}
+          <ul className="posts__list">{postItems}</ul>
           {this.props.isFetching && <LoadingIndicator />}
         </div>
       );
@@ -73,7 +73,7 @@ class FeedList extends React.Component {
 
 const mapStateToProps = state => ({
   isFetching: state.posts.isFetching,
-  posts: filterPosts(state),
+  postsBySection: filterPosts(state),
   next: state.selected.next,
   lastReached: state.selected.lastReached,
   selected: state.selected.item,

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

@@ -1,33 +1,44 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { CATEGORY_TYPE, RULE_TYPE } from '../../constants.js';
 import { selectPost } from '../../actions/posts.js';
-
 import { formatDatetime } from '../../../../utils.js';
 
 class PostItem extends React.Component {
   render() {
-    const post = this.props.post;
+    const rule = { ...this.props.post.rule };
+    const post = { ...this.props.post, rule: rule.id };
     const publicationDate = formatDatetime(post.publicationDate);
     const titleClassName = post.read
-      ? 'posts-header__title posts-header__title--read'
+      ? 'posts__header posts__header--read'
-      : 'posts-header__title';
+      : 'posts__header';
 
     return (
-      <li
+      <li className="posts__item">
-        className="posts__item"
+        <h5
-        onClick={() => {
+          className={titleClassName}
-          this.props.selectPost(post);
+          title={post.title}
-        }}
+          onClick={() => this.props.selectPost(post)}
-      >
+        >
-        <h5 className={titleClassName} title={post.title}>
           {post.title}
         </h5>
 
         <div className="posts-info">
           <span className="posts-info__date" title={publicationDate}>
-            {publicationDate}
+            {publicationDate} {post.author && `By ${post.author}`}
           </span>
+          {this.props.selected.type == CATEGORY_TYPE && (
+            <span className="badge">
+              <a
+                href={`/collection/rules/${rule.id}/`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {rule.name}
+              </a>
+            </span>
+          )}
           <a
             className="posts-info__link"
             href={post.url}

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

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import PostItem from './PostItem.js';
-
-class RuleItem extends React.Component {
-  render() {
-    const posts = Object.values(this.props.posts).sort((firstEl, secondEl) => {
-      return new Date(secondEl.publicationDate) - new Date(firstEl.publicationDate);
-    });
-
-    const postItems = posts.map(post => {
-      return <PostItem key={post.id} post={post} />;
-    });
-
-    return (
-      <section className="posts-section">
-        <h3 className="posts-section__name">{this.props.rule.name}</h3>
-        <ul className="posts">{postItems}</ul>
-      </section>
-    );
-  }
-}
-
-export default RuleItem;

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

@@ -9,7 +9,9 @@ export const filterPostsByRule = (rule = {}, posts = []) => {
     return post.rule === rule.id;
   });
 
-  return filteredPosts.length > 0 ? [{ rule, posts: filteredPosts }] : [];
+  const filteredData = filteredPosts.map(post => ({ ...post, rule: { ...rule } }));
+
+  return filteredData.length > 0 ? [...filteredData] : [];
 };
 
 export const filterPostsByCategory = (category = {}, rules = [], posts = []) => {
@@ -22,13 +24,14 @@ export const filterPostsByCategory = (category = {}, rules = [], posts = []) =>
       return post.rule === rule.id;
     });
 
-    return {
+    return filteredPosts.map(post => ({ ...post, rule: { ...rule } }));
-      rule: { ...rule },
-      posts: filteredPosts,
-    };
   });
 
-  return filteredData.filter(rule => rule.posts.length > 0);
+  const sortedPosts = [...filteredData.flat()].sort((firstPost, secondPost) => {
+    return new Date(secondPost.publicationDate) - new Date(firstPost.publicationDate);
+  });
+
+  return sortedPosts;
 };
 
 export const filterPosts = state => {

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>

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>

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

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load i18n static %}
+{% load i18n static filters %}
 
 {% block content %}
   <main id="rules--page" class="main">
@@ -15,6 +15,7 @@
 
         <div class="form__actions">
           <a class="link button button--confirm" href="{% url "news:collection:rule-create" %}">{% trans "Add a rule" %}</a>
+          <a class="link button button--confirm" href="{% url "news:collection:import" %}">{% trans "Import rules" %}</a>
         </div>
       </section>
 
@@ -23,7 +24,7 @@
           <thead class="table__header rules-table__header">
             <tr class="table__row rules-table__row">
               <th class="table__heading rules-table__heading--select">
-                <input type="checkbox" id="select-all" data-input="rules" />
+                {% include "components/form/checkbox.html" with id="select-all" data_input="rules" id_for_label="select-all" %}
               </th>
               <th class="table__heading rules-table__heading--name">{% trans "Name" %}</th>
               <th class="table__heading rules-table__heading--category">{% trans "Category" %}</th>
@@ -36,7 +37,11 @@
           <tbody class="table__body">
             {% for rule in rules %}
               <tr class="table__row rules-table__row">
-                <td class="table__item rules-table__item"><input name="rules" type="checkbox" value="{{ rule.pk }}" /></td>
+                <td class="table__item rules-table__item">
+                  {% with rule|id_for_label:"rules" as id_for_label %}
+                    {% include "components/form/checkbox.html" with name="rules" value=rule.pk id=id_for_label id_for_label=id_for_label %}
+                  {% endwith %}
+                </td>
                 <td class="table__item rules-table__item" title="{{ rule.name }}">{{ rule.name }}</td>
                 <td class="table__item rules-table__item" title="{{ rule.category.name }}">{{ rule.category.name }}</td>
                 <td class="table__item rules-table__item" title="{{ rule.url }}">{{ rule.url }}</td>

src/newsreader/news/core/endpoints.py

@@ -92,7 +92,7 @@ class NestedPostCategoryView(ListAPIView):
 
         queryset = Post.objects.filter(
             rule__in=category.rules.values_list("id", flat=True)
-        ).order_by("rule", "-publication_date")
+        ).order_by("-publication_date", "rule__name")
 
         return queryset
 

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

@@ -1,5 +1,8 @@
-<input class="input category-form__input" type="{{ option.type }}"
+{% load filters %}
-       name="{{ option.name }}" value="{{ option.value|stringformat:'s' }}"{% if option.selected %} checked{% endif %} />
+
+{% with option.instance|id_for_label:"category" as id_for_label %}
+  {% include "components/form/checkbox.html" with widget=option checked=option.selected id_for_label=id_for_label only %}
+{% endwith %}
 
 {% if option.instance.favicon %}
   <img class="favicon" src="{{ option.instance.favicon }}" />

src/newsreader/news/core/tests/endpoints/category/list/tests.py

@@ -498,13 +498,12 @@ class NestedCategoryPostView(TestCase):
         self.assertEquals(data["count"], 6)
 
         self.assertEquals(posts[0]["title"], "Second BBC post")
-        self.assertEquals(posts[1]["title"], "First BBC post")
+        self.assertEquals(posts[1]["title"], "Second Reuters post")
-
         self.assertEquals(posts[2]["title"], "Second Guardian post")
-        self.assertEquals(posts[3]["title"], "First Guardian post")
 
-        self.assertEquals(posts[4]["title"], "Second Reuters post")
+        self.assertEquals(posts[3]["title"], "First BBC post")
-        self.assertEquals(posts[5]["title"], "First Reuters post")
+        self.assertEquals(posts[4]["title"], "First Reuters post")
+        self.assertEquals(posts[5]["title"], "First Guardian post")
 
     def test_only_posts_from_category_are_returned(self):
         category = CategoryFactory.create(user=self.user)

src/newsreader/scss/components/body/_body.scss

@@ -1,10 +1,9 @@
 .body {
   margin: 0;
   padding: 0;
-  background-color: $gainsboro;
 
-  font-family: $default-font;
+  font-family: Rubik, sans-serif;
-  color: $default-font-color;
+  color: $font-color;
 }
 
 body {

src/newsreader/scss/components/body/index.scss

@@ -1 +1 @@
-@import "body";
+@import './body';

src/newsreader/scss/components/card/index.scss

@@ -1,2 +1,2 @@
-@import "card";
+@import './card';
-@import "rule-card";
+@import './rule-card';

src/newsreader/scss/components/category/_category.scss

@@ -4,8 +4,6 @@
 
   padding: 5px;
 
-  border-radius: 5px;
-
   &__info {
     display: flex;
     justify-content: space-between;
@@ -35,11 +33,7 @@
     }
   }
 
-  &:hover {
+  &--selected, &:hover {
-    background-color: darken($azureish-white, +10%);
+    background-color: $border-gray;
-  }
-
-  &--selected {
-    background-color: darken($azureish-white, +10%);
   }
 }

src/newsreader/scss/components/category/index.scss

@@ -1 +1 @@
-@import "category";
+@import './category';

src/newsreader/scss/components/errorlist/index.scss

@@ -1 +1 @@
-@import "errorlist";
+@import './errorlist';

src/newsreader/scss/components/fieldset/index.scss

@@ -1 +1 @@
-@import "fieldset";
+@import './fieldset';

src/newsreader/scss/components/form/_form.scss

@@ -7,7 +7,6 @@
   width: 70%;
   border-radius: 5px;
 
-  font-family: $form-font;
   background-color: $white;
 
   &__section {
@@ -47,6 +46,7 @@
   &__actions {
     display: flex;
     flex-direction: row;
+    gap: 15px;
 
     @include form-padding;
   }

src/newsreader/scss/components/form/index.scss

@@ -1,3 +1,2 @@
-@import "form";
+@import './form';
-
+@import './rules-form';
-@import "rules-form";

src/newsreader/scss/components/index.scss

@@ -1,28 +1,25 @@
-@import "body/index";
+@import './body/index';
-@import "form/index";
+@import './form/index';
-@import "main/index";
+@import './main/index';
-@import "navbar/index";
+@import './navbar/index';
-@import "loading-indicator/index";
+@import './loading-indicator/index';
 
-@import "modal/index";
+@import './modal/index';
 
-@import "card/index";
+@import './card/index';
-@import "list/index";
+@import './list/index';
-@import "messages/index";
+@import './messages/index';
-@import "section/index";
+@import './section/index';
-@import "errorlist/index";
+@import './errorlist/index';
-@import "fieldset/index";
+@import './fieldset/index';
-@import "pagination/index";
+@import './pagination/index';
-@import "sidebar/index";
+@import './sidebar/index';
-@import "table/index";
+@import './table/index';
 
-@import "rules/index";
+@import './rules/index';
-@import "category/index";
+@import './category/index';
 
-@import "post/index";
+@import './post/index';
-@import "post-block/index";
+@import './post-message/index';
-@import "post-message/index";
+@import './posts/index';
-@import "posts/index";
+@import './posts-info/index';
-@import "posts-header/index";
-@import "posts-info/index";
-@import "posts-section/index";

src/newsreader/scss/components/list/index.scss

@@ -1 +1 @@
-@import "list";
+@import './list';

src/newsreader/scss/components/loading-indicator/index.scss

@@ -1 +1 @@
-@import "loading-indicator";
+@import './loading-indicator';

src/newsreader/scss/components/main/index.scss

@@ -1 +1 @@
-@import "main";
+@import './main';

src/newsreader/scss/components/messages/index.scss

@@ -1 +1 @@
-@import "messages";
+@import './messages';

src/newsreader/scss/components/modal/_modal.scss

@@ -20,7 +20,6 @@
 
     width: 60%;
 
-    border-radius: 5px;
     background-color: $white;
   }
 

src/newsreader/scss/components/modal/index.scss

@@ -1,3 +1,2 @@
-@import "modal";
+@import './modal';
-
+@import './post-modal';
-@import "post-modal";

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;
@@ -16,26 +14,14 @@
     list-style-type: none;
   }
 
-  a {
-    color: $nickel;
-    text-decoration: none;
-  }
-
   &__item {
     margin: 0px 10px;
 
-    border: none;
-    border-radius: 2px;
-
-    background-color: darken($azureish-white, 20%);
-
-    &:hover{
-      background-color: lighten($azureish-white, +5%);
-    }
-
     & a {
       @extend .button;
-      color: $white;
+
+      font-size: 18px !important;
+      font-weight: 600;
     }
   }
 

src/newsreader/scss/components/navbar/index.scss

@@ -1 +1 @@
-@import "navbar";
+@import './navbar';

src/newsreader/scss/components/pagination/index.scss

@@ -1 +1 @@
-@import "pagination";
+@import './pagination';

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

@@ -1,12 +0,0 @@
-.post-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  width: 70%;
-  margin: 0 0 2% 0;
-
-  font-family: $article-font;
-
-  border-radius: 2px;
-}

src/newsreader/scss/components/post-block/index.scss

@@ -1 +0,0 @@
-@import "post-block";

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

@@ -6,9 +6,7 @@
 
   width: 60%;
   height: 80vh;
-  border-radius: 2px;
 
-  font-family: $article-font;
   background-color: $white;
 
   &__message {

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

@@ -1 +1 @@
-@import "post-message";
+@import './post-message';

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

@@ -9,8 +9,6 @@
 
   margin: 2% auto 5% auto;
 
-  border-radius: 5px;
-
   overflow-y: auto;
 
   background-color: $white;
@@ -22,13 +20,9 @@
     flex-direction: column;
     padding: 20px 0 10px 0;
     width: 75%;
-
-    font-family: $article-header-font;
   }
 
   &__title {
-    line-height: 1;
-
     &--read {
       color: $gainsboro;
     }
@@ -44,10 +38,21 @@
   }
 
   &__date {
-    align-self: center;
     font-size: small;
   }
 
+  &__author {
+    font-size: small;
+  }
+
+  &__rule, &__category {
+    background-color: $light-orange !important;
+
+    & a {
+      color: $black;
+    }
+  }
+
   &__body {
     display:flex;
     flex-direction: column;
@@ -55,10 +60,6 @@
     padding: 10px 0 30px 0;
     width: 75%;
 
-    line-height: 1.5;
-    font-family: $article-font;
-    font-size: 18px;
-
     & p {
       padding: 10px 0;
     }
@@ -82,9 +83,11 @@
     position: relative;
     margin: 1% 2% 0 0;
     align-self: flex-end;
+    background-color: $button-blue;
+    color: $white;
 
     &:hover {
-      background-color: lighten($gainsboro, +1%);
+      background-color: lighten($button-blue, +1%);
     }
   }
 
@@ -94,39 +97,6 @@
     align-items: center;
 
     margin: 15px 0;
-  }
+    gap: 5px;
-
-  &__section-info {
-    display: flex;
-    flex-direction: column;
-
-    align-self: flex-end;
-    position: absolute;
-    top: 25%;
-    width: 10%;
-
-    font-family: $button-font;
-    color: lighten($default-font-color, +10%);
-
-    & h5 {
-      margin: 10px 0 0 0;
-      padding: 5px 1px 5px 5px;
-
-      border-radius: 5px 0 0 5px;
-
-      background-color: aquamarine;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      text-align: center;
-    }
-
-    & h5:first-child {
-      background-color: $light-orange;
-    }
-
-    & h5:last-child {
-      background-color: $beige;
-    }
   }
 }

src/newsreader/scss/components/post/index.scss

@@ -1 +1 @@
-@import "post";
+@import './post';

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

@@ -1,15 +0,0 @@
-.posts-header {
-
-  &__title {
-    width: 80%;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 16px;
-
-    &--read {
-      color: darken($gainsboro, +10%);
-    }
-  }
-}

src/newsreader/scss/components/posts-header/index.scss

@@ -1 +0,0 @@
-@import "posts-header";

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

@@ -1,9 +1,9 @@
 .posts-info {
   display: flex;
-  justify-content: space-around;
   align-items: center;
 
-  width: 20%;
+  margin: 10px 0;
+  gap: 15px;
 
   &__date {
     align-self: center;
@@ -12,4 +12,10 @@
   &__link {
     display: inline-flex;
   }
+
+  & .badge {
+    & a {
+      color: $black;
+    }
+  }
 }

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

@@ -1 +1 @@
-@import "posts-info";
+@import './posts-info';

src/newsreader/scss/components/posts-section/_post-section.scss

@@ -1,20 +0,0 @@
-.posts-section {
-  display: flex;
-  flex-direction: column;
-  width: 95%;
-
-  margin: 20px;
-  padding: 10px;
-  border-radius: 5px;
-
-  background-color: $white;
-
-  &:first-child {
-    padding: 0 10px 10px 10px;
-    margin: 0 20px 20px 20px;
-  }
-
-  &__name {
-    padding: 20px 0 10px 0;
-  }
-}

src/newsreader/scss/components/posts-section/index.scss

@@ -1 +0,0 @@
-@import "post-section";

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

@@ -1,23 +1,25 @@
 .posts {
-  display: flex;
+  width: 70%;
-  flex-direction: column;
+  margin: 0 0 2% 20px;
 
-  list-style: none;
+  &__list {
+    display: flex;
+    flex-direction: column;
 
-  padding: 0;
+    list-style: none;
+
+    width: 95%;
+    padding: 0;
+  }
 
   &__item {
     display: flex;
-    align-items: center;
+    flex-direction: column-reverse;
 
-    padding: 10px 0 10px 0;
+    padding: 10px;
 
-    border-radius: 2px;
+    &:first-child {
-    border-bottom: 2px solid $azureish-white;
+      padding: 0 10px 10px 10px;
-
-    &:hover {
-      cursor: pointer;
-      background-color: $gainsboro;
     }
 
     & span {
@@ -27,8 +29,29 @@
       white-space: nowrap;
     }
 
+    & .badge {
+      background-color: $light-orange;
+    }
+
     &:last-child {
       border-bottom: 0;
     }
   }
+
+  &__header {
+    width: 80%;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 16px;
+
+    &--read {
+      color: darken($gainsboro, +10%);
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }

src/newsreader/scss/components/posts/index.scss

@@ -1 +1 @@
-@import "posts";
+@import './posts';

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

@@ -8,19 +8,17 @@
 
     padding: 5px 5px 5px 20px;
 
-    border-radius: 5px;
-
     & * {
       padding: 0 2px 0 2px;
     }
 
     &:hover {
       cursor: pointer;
-      background-color: $focus-blue;
+      background-color: $border-gray;
     }
 
     &--selected {
-      background-color: $focus-blue;
+      background-color: $border-gray;
     }
   }
 

src/newsreader/scss/components/rules/index.scss

@@ -1 +1 @@
-@import "rules";
+@import './rules';

src/newsreader/scss/components/section/index.scss

@@ -1,2 +1,2 @@
-@import "section";
+@import './section';
-@import "text-section";
+@import './text-section';

src/newsreader/scss/components/sidebar/_sidebar.scss

@@ -17,8 +17,6 @@
     list-style: none;
     border-radius: 5px;
 
-    font-family: $sidebar-font;
-
     &__item {
       padding: 2px 10px 5px 10px;
     }

src/newsreader/scss/components/sidebar/index.scss

@@ -1 +1 @@
-@import "sidebar";
+@import './sidebar';

src/newsreader/scss/components/table/_table.scss

@@ -1,8 +1,6 @@
 @import "../../lib/mixins";
 
 .table {
-  @include rounded;
-
   table-layout: fixed;
   background-color: $white;
   width: 90%;

src/newsreader/scss/components/table/index.scss

@@ -1,2 +1,2 @@
-@import "table";
+@import './table';
-@import "rules-table";
+@import './rules-table';

src/newsreader/scss/elements/badge/_badge.scss

@@ -3,12 +3,10 @@
 
   padding-left: 8px;
   padding-right: 8px;
-  border-radius: 2px;
 
   text-align: center;
 
-  background-color: lighten($pewter-blue, +20%);
+  background-color: $gainsboro;
 
-  font-family: $button-font;
   font-size: small;
 }

src/newsreader/scss/elements/badge/index.scss

@@ -1 +1 @@
-@import "badge";
+@import './badge';

src/newsreader/scss/elements/button/_button.scss

@@ -9,9 +9,7 @@
   @include button-padding;
 
   border: none;
-  border-radius: 2px;
 
-  font-family: $button-font;
   font-size: 16px;
 
   &:hover {
@@ -39,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%);
     }
   }
 }

src/newsreader/scss/elements/button/index.scss

@@ -1,2 +1,2 @@
-@import "button";
+@import './button';
-@import "_read-button";
+@import './read-button';

src/newsreader/scss/elements/checkbox/_checkbox.scss

@@ -0,0 +1,35 @@
+.checkbox {
+  display: block;
+  height: 20px;
+  width: 20px;
+  margin: 0 0 0 20px;
+
+
+  & input[type=checkbox] {
+    position: absolute;
+    opacity: 0;
+
+    appearance: none;
+    -moz-appearance: none;
+
+    &:checked + .checkbox__label {
+      .checkbox__box {
+        background-color: $checkbox-blue;
+      }
+    }
+  }
+
+  &__label {
+    padding: 0;
+  }
+
+  &__box {
+    display: block;
+    position: relative;
+
+    height: 100%;
+    width: 100%;
+    border: 2px solid darken($gainsboro, 10%);
+    cursor: pointer;
+  }
+}

src/newsreader/scss/elements/checkbox/index.scss

@@ -0,0 +1 @@
+@import './checkbox';

src/newsreader/scss/elements/h1/_h1.scss

@@ -1,3 +1,8 @@
 .h1 {
-  font-family: $header-font;
+  color: $header-color;
+  font-size: 20px;
+}
+
+h1 {
+  @extend .h1;
 }

src/newsreader/scss/elements/h1/index.scss

@@ -1 +1 @@
-@import "h1";
+@import './h1';

src/newsreader/scss/elements/h2/_h2.scss

@@ -1,3 +1,7 @@
 .h2 {
-  font-family: $header-font;
+  color: $header-color;
+}
+
+h2 {
+  @extend .h2;
 }

src/newsreader/scss/elements/h2/index.scss

@@ -1 +1 @@
-@import "h2";
+@import './h2';

src/newsreader/scss/elements/h3/_h3.scss

@@ -1,3 +1,7 @@
 .h3 {
-  font-family: $header-font;
+  color: $header-color;
+}
+
+h3 {
+  @extend .h3;
 }

src/newsreader/scss/elements/h3/index.scss

@@ -1 +1 @@
-@import "h3";
+@import './h3';

src/newsreader/scss/elements/h4/_h4.scss

@@ -0,0 +1,7 @@
+.h4 {
+  color: $header-color;
+}
+
+h4 {
+  @extend .h4;
+}

src/newsreader/scss/elements/h4/index.scss

@@ -0,0 +1 @@
+@import './h4';

src/newsreader/scss/elements/h5/_h5.scss

@@ -0,0 +1,7 @@
+.h5 {
+  color: $header-color;
+}
+
+h5 {
+  @extend .h5;
+}

src/newsreader/scss/elements/h5/index.scss

@@ -0,0 +1 @@
+@import './h5';

src/newsreader/scss/elements/help-text/index.scss

@@ -1 +1 @@
-@import "help-text";
+@import './help-text';

src/newsreader/scss/elements/index.scss

@@ -1,11 +1,14 @@
-@import "badge/index";
+@import './badge/index';
-@import "button/index";
+@import './button/index';
-@import "help-text/index";
+@import './help-text/index';
-@import "input/index";
+@import './input/index';
-@import "label/index";
+@import './label/index';
-@import "link/index";
+@import './link/index';
-@import "h1/index";
+@import './h1/index';
-@import "h2/index";
+@import './h2/index';
-@import "h3/index";
+@import './h3/index';
-@import "small/index";
+@import './h4/index';
-@import "select/index";
+@import './h5/index';
+@import './small/index';
+@import './select/index';
+@import './checkbox/index';

src/newsreader/scss/elements/input/_input.scss

@@ -1,9 +1,7 @@
 .input {
   padding: 10px;
 
-  background-color: lighten($gainsboro, +4%);
   border: 1px $border-gray solid;
-  border-radius: 2px;
 
   &:focus {
     border: 1px $focus-blue solid;

src/newsreader/scss/elements/input/index.scss

@@ -1 +1 @@
-@import "input";
+@import './input';

src/newsreader/scss/elements/label/index.scss

@@ -1 +1 @@
-@import "label";
+@import './label';

src/newsreader/scss/elements/link/index.scss

@@ -1 +1 @@
-@import "link";
+@import './link';

src/newsreader/scss/elements/select/index.scss

@@ -1 +1 @@
-@import "select";
+@import './select';

src/newsreader/scss/elements/small/index.scss

@@ -1 +1 @@
-@import "small";
+@import './small';

src/newsreader/scss/index.scss

@@ -1,6 +1,6 @@
-@import "lib/index";
+@import './lib/index';
-@import "partials/index";
+@import './partials/index';
-@import "components/index";
+@import './components/index';
-@import "elements/index";
+@import './elements/index';
 
-@import "pages/index";
+@import './pages/index';

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

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

src/newsreader/scss/lib/_mixins.scss

@@ -1,3 +1 @@
-@mixin rounded {
+
-  border-radius: 5px;
-}

src/newsreader/scss/lib/index.scss

@@ -1 +1 @@
-@import "css.gg";
+@import 'css.gg';

src/newsreader/scss/pages/index.scss

@@ -1,14 +1,14 @@
-@import "categories/index";
+@import './categories/index';
-@import "category/index";
+@import './category/index';
 
-@import "import/index";
+@import './import/index';
-@import "homepage/index";
+@import './homepage/index';
 
-@import "login/index";
+@import './login/index';
-@import "password-reset/index";
+@import './password-reset/index';
-@import "register/index";
+@import './register/index';
 
-@import "rule/index";
+@import './rule/index';
-@import "rules/index";
+@import './rules/index';
 
-@import "settings/index";
+@import './settings/index';

src/newsreader/scss/partials/_colors.scss

@@ -19,10 +19,10 @@ $lavendal-pink: rgba(162, 155, 254, 1);
 $beige: rgba(245, 245, 220, 1);
 
 $light-green: rgba(230, 247, 185, 1);
-$light-orange: rgba(237, 212, 178, 1);
+$light-orange: rgba(255, 212, 153, 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,11 @@ $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);
+$checkbox-blue: rgba(34, 170, 253, 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);

src/newsreader/scss/partials/_fonts.scss

@@ -1,17 +1,10 @@
-@import url("https://fonts.googleapis.com/css?family=Barlow&display=swap");
+@font-face {
-@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
+  font-family: Rubik;
-@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
+  src: url('../assets/fonts/Rubik-Regular.ttf');
-@import url("https://fonts.googleapis.com/css?family=Noto+Sans&display=swap");
+}
-@import url("https://fonts.googleapis.com/css?family=Noto+Serif&display=swap");
-@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:600&display=swap");
 
-$default-font: "Noto Serif", serif;
+@font-face {
-
+  font-family: Rubik;
-$button-font: "IBM Plex Sans", sans-serif;
+  src: url('../assets/fonts/Rubik-Bold.ttf');
-$form-font: "Barlow", sans-serif;
+  font-weight: bold;
-
+}
-$article-font: "Noto Serif", serif;
-$article-header-font: "Oswald", sans-serif;
-
-$header-font: "Noto Sans", sans-serif;
-$sidebar-font: "Nunito", sans-serif;

src/newsreader/scss/partials/index.scss

@@ -1,2 +1,2 @@
-@import "fonts";
+@import './colors';
-@import "colors";
+@import './fonts';

src/newsreader/templates/components/form/attrs.html

@@ -0,0 +1,18 @@
+{% spaceless %}
+  {% for name, value in widget.attrs.items %}
+    {% if value is not False %}
+      {{ name }}
+
+      {% if value is not True %}
+        ="{{ value|stringformat:'s' }}"
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+
+  {% if id %} id="{{ id }}"{% endif %}
+  {% if type %} type="{{ type }}"{% endif %}
+  {% if value %} value="{{ value }}"{% endif %}
+  {% if name %} name="{{ name }}"{% endif %}
+  {% if data_input %} data-input="{{ data_input }}"{% endif %}
+  {% if checked %} checked {% endif %}
+{% endspaceless %}

src/newsreader/templates/components/form/checkbox.html

@@ -0,0 +1,10 @@
+<div class="checkbox">
+  {% if widget %}
+    {% include "components/form/input.html" with widget=widget %}
+  {% else %}
+    {% include "components/form/input.html" with id=id name=name type="checkbox" value=value data_input=data_input checked=checked %}
+  {% endif %}
+  <label class="checkbox__label" for="{% if widget %}{{ widget.attrs.id }}{% else %}{{ id_for_label }}{% endif %}">
+    <span class="checkbox__box"/>
+  </label>
+</div>