Various improvements for every views.

13 files changed, 48 insertions, 37 deletions

diff --git a/newspipe/web/static/css/customized-bootstrap.css b/newspipe/web/static/css/custom.css
index 02f8a72e..8fb4eef3 100644
--- a/newspipe/web/static/css/customized-bootstrap.css
+++ b/newspipe/web/static/css/custom.css
@@ -15,8 +15,23 @@ a {
     color: #3572B0;
 }
 
+.navbar-dark .navbar-nav .nav-link {
+    color:
+    rgb(255, 255, 255, 1);
+}
+
 .bg-newspipe-blue {
-    background-color: #205081;
+    /* background-color: #0082c9; */
+    background-image: linear-gradient(40deg, #0082c9 0%, #30b6ff 100%);
+}
+.btn-primary {
+    background-color: #0082c9;
+    color: white;
+}
+
+.btn-outline-primary {
+    border-color: #0082c9;
+    color: #0082c9;
 }
 
 /* Sticky footer */
diff --git a/newspipe/web/templates/about.html b/newspipe/web/templates/about.html
index ff8cac47..43d8c73d 100644
--- a/newspipe/web/templates/about.html
+++ b/newspipe/web/templates/about.html
@@ -19,7 +19,7 @@
             <h2>{{ _('Help') }}</h2>
             <p>{{ _('Contact')}}: <a href="mailto:{{ contact }}">{{ contact }}</a></p>
             <p>{{ _('You can subscribe to new feeds with a bookmarklet. Drag the following button to your browser bookmarks.') }}</p>
-            {{ _('<a class="btn btn-light" href="%(bookmarklet)s" rel="bookmark">Subscribe to this feed using Newspipe</a>', bookmarklet='javascript:window.location="%s?url="+encodeURIComponent(document.location)' % url_for('feed.bookmarklet', _external=True)) }}
+            {{ _('<a class="btn btn-primary" href="%(bookmarklet)s" rel="bookmark">Subscribe to this feed using Newspipe</a>', bookmarklet='javascript:window.location="%s?url="+encodeURIComponent(document.location)' % url_for('feed.bookmarklet', _external=True)) }}
         </div>
     </div>
 </div><!-- /.container -->
diff --git a/newspipe/web/templates/admin/create_user.html b/newspipe/web/templates/admin/create_user.html
index 40aad468..8844f987 100644
--- a/newspipe/web/templates/admin/create_user.html
+++ b/newspipe/web/templates/admin/create_user.html
@@ -19,7 +19,7 @@
             {{ form.automatic_crawling(class_="form-control") }} {% for error in form.automatic_crawling.errors %} <span style="color: red;">{{ error }}<br /></span>{% endfor %}
 
             <br />
-            {{ form.submit(class_="btn btn-default") }}
+            {{ form.submit(class_="btn btn-primary") }}
         </form>
     </div>
 </div>
diff --git a/newspipe/web/templates/admin/dashboard.html b/newspipe/web/templates/admin/dashboard.html
index 350a2e47..390e8853 100644
--- a/newspipe/web/templates/admin/dashboard.html
+++ b/newspipe/web/templates/admin/dashboard.html
@@ -46,7 +46,7 @@
     {% endfor %}
     </tbody>
 </table>
-<a href="{{ url_for("admin.user_form") }}" class="btn btn-default">{{ _('Add a new user') }}</a>
+<a href="{{ url_for("admin.user_form") }}" class="btn btn-primary">{{ _('Add a new user') }}</a>
 </div>
 <script>
 $(document).ready(function() {
diff --git a/newspipe/web/templates/edit_bookmark.html b/newspipe/web/templates/edit_bookmark.html
index efd9d775..ee0e0243 100644
--- a/newspipe/web/templates/edit_bookmark.html
+++ b/newspipe/web/templates/edit_bookmark.html
@@ -57,7 +57,7 @@
 
             <div class="form-group">
                 <div class="col-sm-offset-3 col-sm-9">
-                    {{ form.submit(class_="btn btn-default") }}
+                    {{ form.submit(class_="btn btn-primary") }}
                 </div>
             </div>
         </form>
@@ -66,7 +66,7 @@
         <div class="row">
             <div class="col-md-6 pull-right">
                 <p>{{ _('You can add a bookmark with a bookmarklet. Drag the following button to your browser bookmarks.') }}</p>
-                {{ _('<a class="btn btn-default" href="%(bookmarklet)s" rel="bookmark">Bookmark this page using Newspipe</a>', bookmarklet='javascript:window.location="%s?href="+encodeURIComponent(document.location)+"&title="+document.title' % url_for('bookmark.bookmarklet', _external=True)) }}
+                {{ _('<a class="btn btn-primary" href="%(bookmarklet)s" rel="bookmark">Bookmark this page using Newspipe</a>', bookmarklet='javascript:window.location="%s?href="+encodeURIComponent(document.location)+"&title="+document.title' % url_for('bookmark.bookmarklet', _external=True)) }}
             </div>
             <div class="col-md-6">
                 <form action="{{ url_for('bookmark.import_pinboard') }}" method="post" id="formImportPinboard" enctype="multipart/form-data">
@@ -74,7 +74,7 @@
                     <span>
                         <input type="file" name="jsonfile" />
                         <br />
-                        <button class="btn btn-default btn-default" type="submit">OK</button>
+                        <button class="btn btn-primary" type="submit">OK</button>
                     </span>
                 </form>
             </div>
diff --git a/newspipe/web/templates/edit_category.html b/newspipe/web/templates/edit_category.html
index 93c952d6..955d17b9 100644
--- a/newspipe/web/templates/edit_category.html
+++ b/newspipe/web/templates/edit_category.html
@@ -14,7 +14,7 @@
             </div>
             <div class="form-group">
                 <div class="col-sm-offset-3 col-sm-9">
-                    {{ form.submit(class_="btn btn-default") }}
+                    {{ form.submit(class_="btn btn-primary") }}
                 </div>
             </div>
         </form>
diff --git a/newspipe/web/templates/edit_feed.html b/newspipe/web/templates/edit_feed.html
index 9c773204..a439c78d 100644
--- a/newspipe/web/templates/edit_feed.html
+++ b/newspipe/web/templates/edit_feed.html
@@ -89,7 +89,7 @@
 
             <div class="form-group">
                 <div class="col-sm-offset-3 col-sm-9">
-                    {{ form.submit(class_="btn btn-default") }}
+                    {{ form.submit(class_="btn btn-primary") }}
                 </div>
             </div>
         </form>
diff --git a/newspipe/web/templates/layout.html b/newspipe/web/templates/layout.html
index 38ec49ef..9319d104 100644
--- a/newspipe/web/templates/layout.html
+++ b/newspipe/web/templates/layout.html
@@ -8,23 +8,22 @@
     <meta name="author" content="" />
     <title>Newspipe{% if head_titles %} - {{ ' - '.join(head_titles) }}{% endif %}</title>
     <link rel="shortcut icon" href="{{ url_for("static", filename="img/favicon.ico") }}" />
-    <!-- Bootstrap core CSS -->
-    <link href="{{ url_for('static', filename='npm_components/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet" media="screen" />
-    <!-- Add custom CSS here -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='npm_components/fork-awesome/css/fork-awesome.min.css') }}">
-    <link href="{{ url_for("static", filename="css/customized-bootstrap.css") }}" rel="stylesheet" media="screen" />
-    <!-- jquery, bootstrap, datatables -->
+    <!-- CSS -->
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='npm_components/bootstrap/dist/css/bootstrap.min.css') }}" media="screen" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='npm_components/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='npm_components/fork-awesome/css/fork-awesome.min.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}" />
+    <!-- JavaScript -->
     <script type="text/javascript" src="{{ url_for('static', filename = 'npm_components/jquery/dist/jquery.min.js') }}"></script>
     <script type="text/javascript" src="{{ url_for('static', filename = 'npm_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='npm_components/datatables.net-bs/css/dataTables.bootstrap.min.css') }}">
     <script type="text/javascript" src="{{ url_for('static', filename='npm_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='npm_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='npm_components/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
     {% endblock %}
   </head>
   <body>
     {% block menu %}
     <nav class="navbar navbar-expand-lg navbar-dark bg-newspipe-blue">
-        <a class="navbar-brand" href="/"><img src="{{ url_for('static', filename='img/logo.png') }}" width="120px" alt="Newspipe" title="Newspipe" /></a>
+        <a class="navbar-brand" href="/">🗞&nbsp;Newspipe</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -35,7 +34,7 @@
                 {% if current_user.is_authenticated %}
                     {% if current_user.is_admin %}
                         <li class="nav-item">
-                            <a class="nav-link" href="/fetch" title="{{  _('Fetch') }}">{{  _('Fetch') }}</a>
+                            <a class="nav-link" href="{{ url_for('fetch') }}" title="{{  _('Fetch') }}"><i class="fa fa-download" aria-hidden="true"></i>&nbsp;{{  _('Fetch') }}</a>
                         </li>
                     {% endif %}
                     <li class="nav-item dropdown">
@@ -117,9 +116,6 @@
         </div>
         {% endblock %}
     </nav>
-
-
-
     {% endblock %}
     <br />
 
diff --git a/newspipe/web/templates/login.html b/newspipe/web/templates/login.html
index 0c23b7fe..1253e2d3 100644
--- a/newspipe/web/templates/login.html
+++ b/newspipe/web/templates/login.html
@@ -20,11 +20,12 @@
                         {% for message in form.password.errors %}
                             <div class="alert alert-warning" role="alert">{{ message }}</div>
                         {% endfor %}
-                        {{ form.submit(class_="btn btn-light") }}
+                        {{ form.submit(class_="btn btn-primary") }}
                     </form>
                 </div>
             </div>
-            <a href="/signup" class="btn btn-link">{{ _('Sign up') }}</a>
+            <br />
+            <a href="/signup" class="btn btn-primary">{{ _('Sign up') }}</a>
         </div>
     </div>
 </div><!-- /.container -->
diff --git a/newspipe/web/templates/management.html b/newspipe/web/templates/management.html
index c3f6a943..af4dae2b 100644
--- a/newspipe/web/templates/management.html
+++ b/newspipe/web/templates/management.html
@@ -9,12 +9,12 @@
                     <p>{{ _('You are subscribed to') }} {{ nb_feeds }} <a href="/feeds">{{ _('feeds') }}</a>. <a href="{{ url_for("feed.form") }}">{{ _('Add') }}</a> {{ _('a feed') }}.</p>
                     <p>{{ nb_articles }} {{ _('articles are stored in the database with') }} {{ nb_unread_articles }} {{ _('unread articles') }}.</p>
                     <p>{{ _('You have') }} {{ nb_categories }} <a href="{{ url_for("categories.list_")}}">{{ _('categories') }}</a>.</p>
-                    <a href="{{ url_for("articles.expire", weeks=10) }}" class="btn btn-light" onclick="return confirm('{{ _('You are going to delete old articles.') }}');">{{ _('Delete articles older than 10 weeks') }}</a>
+                    <a href="{{ url_for("articles.expire", weeks=10) }}" class="btn btn-primary" onclick="return confirm('{{ _('You are going to delete old articles.') }}');">{{ _('Delete articles older than 10 weeks') }}</a>
                 </div>
                 <div class="col">
                     <h2>{{ _('Your bookmarks') }}</h2>
                     <p>{{ _('You have') }} {{ nb_bookmarks }} <a href="{{ url_for("bookmarks.list_")}}">{{ _('bookmarks') }}</a>.</p>
-                    <a href="{{ url_for("bookmarks.delete_all") }}" class="btn btn-light" onclick="return confirm('{{ _('You are going to delete all bookmarks.') }}');">{{ _('Delete all bookmarks') }}</a>
+                    <a href="{{ url_for("bookmarks.delete_all") }}" class="btn btn-primary" onclick="return confirm('{{ _('You are going to delete all bookmarks.') }}');">{{ _('Delete all bookmarks') }}</a>
                 </div>
             </div>
         </div>
@@ -33,17 +33,17 @@
                     <h4>{{ _('Import') }}</h4>
                     <form action="" method="post" id="formImportJSON" enctype="multipart/form-data">
                         <span class="btn btn-file">{{ _('Import a Newspipe account') }} (<span class="text-info">*.json</span>)<input type="file" name="jsonfile" /></span>
-                        <button class="btn btn-light" type="submit">OK</button>
+                        <button class="btn btn-primary" type="submit">OK</button>
                     </form>
                     <h4>{{ _('Export') }}</h4>
-                    <a href="{{ url_for('articles.export') }}" class="btn btn-light">{{ _('Export your Newspipe account to JSON') }}</a>
+                    <a href="{{ url_for('articles.export') }}" class="btn btn-primary">{{ _('Export your Newspipe account to JSON') }}</a>
                 </div>
                 <div class="col">
                     <h3 id="import">{{ _('OPML') }}</h3>
                     <h4>{{ _('Import') }}</h4>
                     <form action="" method="post" id="formImportOPML" enctype="multipart/form-data">
                         <span class="btn btn-file">{{ _('Batch import feeds from OPML') }} (<span class="text-info">*.xml {{ _('or') }} *.opml</span>)<input type="file" name="opmlfile" /></span>
-                        <button class="btn btn-light" type="submit">OK</button>
+                        <button class="btn btn-primary" type="submit">OK</button>
                     </form>
                     <h4>{{ _('Export') }}</h4>
                     <form class="form-inline" action="{{ url_for('feeds.export') }}" method="GET" id="formExportOPML">
@@ -61,14 +61,14 @@
                                 <input type="checkbox" class="form-control" name="includeprivate" checked />
                             </div>
                         </div>
-                        <button class="btn btn-light" type="submit">{{ _('Export your feeds to OPML') }}</button>
+                        <button class="btn btn-primary" type="submit">{{ _('Export your feeds to OPML') }}</button>
                     </form>
                 </div>
             </div>
             <div class="row">
                 <div class="col-md-12">
                     <h2>{{ _('Bookmarks') }}</h2>
-                    <a href="{{ url_for('bookmarks.export') }}" class="btn btn-light">{{ _('Export your bookmarks to JSON') }}</a>
+                    <a href="{{ url_for('bookmarks.export') }}" class="btn btn-primary">{{ _('Export your bookmarks to JSON') }}</a>
                 </div>
             </div>
         </div>
diff --git a/newspipe/web/templates/profile.html b/newspipe/web/templates/profile.html
index 1ddb7e74..edbae368 100644
--- a/newspipe/web/templates/profile.html
+++ b/newspipe/web/templates/profile.html
@@ -52,7 +52,7 @@
                 <div class="row">
                     <div class="col">
                         <br />
-                        {{ form.submit(class_="btn btn-light") }}
+                        {{ form.submit(class_="btn btn-primary") }}
                     </div>
                 </div>
             </form>
diff --git a/package-lock.json b/package-lock.json
index cbbd0aed..106e200a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,10 +25,10 @@
         "jquery": "3.4.1"
       }
     },
-    "datatables.net-bs": {
+    "datatables.net-bs4": {
       "version": "1.10.20",
-      "resolved": "https://registry.npmjs.org/datatables.net-bs/-/datatables.net-bs-1.10.20.tgz",
-      "integrity": "sha512-NsMoOOYZ6NlteOpzhltw21lXsNdhjIMbIOxnqmcrb62ntl8eL9pYzk2AeiDXBlIKY4e550ZrExCq3CYKQ9myEg==",
+      "resolved": "https://registry.npmjs.org/datatables.net-bs4/-/datatables.net-bs4-1.10.20.tgz",
+      "integrity": "sha512-kQmMUMsHMOlAW96ztdoFqjSbLnlGZQ63iIM82kHbmldsfYdzuyhbb4hTx6YNBi481WCO3iPSvI6YodNec46ZAw==",
       "requires": {
         "datatables.net": "1.10.20",
         "jquery": "3.4.1"
diff --git a/package.json b/package.json
index feccdfbe..099771b0 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,7 @@
   "dependencies": {
     "bootstrap": "^4.4.1",
     "datatables": "^1.10.18",
-    "datatables.net": "^1.10.20",
-    "datatables.net-bs": "^1.10.20",
+    "datatables.net-bs4": "^1.10.20",
     "fork-awesome": "^1.1.7",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",