From 1d531989bbd867b8125331f549cfcdf9bf01c6c2 Mon Sep 17 00:00:00 2001
From: Michiel Scholten <michiel@diginaut.net>
Date: Sat, 24 Mar 2018 11:17:26 +0100
Subject: [PATCH] Main nav items to buttons, theme support for buttons

---
 digimarks.py        | 10 ++++++++++
 templates/base.html | 12 ++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/digimarks.py b/digimarks.py
index b86b585..fbae8f4 100644
--- a/digimarks.py
+++ b/digimarks.py
@@ -38,6 +38,8 @@ themes = {
         'MESSAGE_TEXT': 'white-text',
         'ERRORMESSAGE_BACKGROUND': 'red darken-1',
         'ERRORMESSAGE_TEXT': 'white-text',
+        'BUTTON': '#1b5e20', # green darken-4
+        'BUTTON_ACTIVE': '#43a047',  # green darken-1
         'CARD_BACKGROUND': 'green darken-3',
         'CARD_TEXT': 'white-text',
         'CARD_LINK': '#FFF',  # white-text
@@ -59,6 +61,8 @@ themes = {
         'MESSAGE_TEXT': 'white-text',
         'ERRORMESSAGE_BACKGROUND': 'red darken-1',
         'ERRORMESSAGE_TEXT': 'white-text',
+        'BUTTON': '#1b5e20', # green darken-4
+        'BUTTON_ACTIVE': '#43a047',  # green darken-1
         'CARD_BACKGROUND': 'green darken-1',
         'CARD_TEXT': 'white-text',
         'CARD_LINK': '#FFF',  # white-text
@@ -80,6 +84,8 @@ themes = {
         'MESSAGE_TEXT': 'white-text',
         'ERRORMESSAGE_BACKGROUND': 'red darken-1',
         'ERRORMESSAGE_TEXT': 'white-text',
+        'BUTTON': '#fb8c00', # orange darken-1
+        'BUTTON_ACTIVE': '#ffa726',  # orange lighten-1
         'CARD_BACKGROUND': 'light-blue lighten-2',
         'CARD_TEXT': 'black-text',
         'CARD_LINK': '#263238',  # blue-grey-text darken-4
@@ -101,6 +107,8 @@ themes = {
         'MESSAGE_TEXT': 'white-text',
         'ERRORMESSAGE_BACKGROUND': 'red darken-1',
         'ERRORMESSAGE_TEXT': 'white-text',
+        'BUTTON': '#fb8c00', # orange darken-1
+        'BUTTON_ACTIVE': '#ffa726',  # orange lighten-1
         'CARD_BACKGROUND': 'grey darken-3',
         'CARD_TEXT': 'grey-text lighten-1',
         'CARD_LINK': '#fb8c00',  # orange-text darken-1
@@ -122,6 +130,8 @@ themes = {
         'MESSAGE_TEXT': 'white-text',
         'ERRORMESSAGE_BACKGROUND': 'red darken-1',
         'ERRORMESSAGE_TEXT': 'white-text',
+        'BUTTON': '#fb8c00', # orange darken-1
+        'BUTTON_ACTIVE': '#ffa726',  # orange lighten-1
         'CARD_BACKGROUND': 'grey darken-3',
         'CARD_TEXT': 'grey-text lighten-1',
         'CARD_LINK': '#fb8c00',  # orange-text darken-1
diff --git a/templates/base.html b/templates/base.html
index cd5e62e..bee5698 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,6 +32,14 @@
             {
                 color: {{ theme.TEXTHEX }} !important;
             }
+            .btn, .btn:visited
+            {
+                background-color: {{ theme.BUTTON }};
+            }
+            .btn:hover, .btn:active
+            {
+                background-color: {{ theme.BUTTON_ACTIVE }};
+            }
         </style>
         <link href="{{ url_for('static', filename='css/digimarks.css') }}?20180317" type="text/css" rel="stylesheet" media="screen,projection"/>
     </head>
@@ -40,8 +48,8 @@
             <div class="nav-wrapper container"><a id="logo-container" href="{% if userkey %}{{ url_for('bookmarks_page', userkey=userkey) }}{% else %}{{ url_for('index') }}{% endif %}" class="brand-logo">digimarks</a>
                 <ul class="right hide-on-med-and-down">
                     {% if userkey %}
-                    <li><a href="{{ url_for('tags', userkey=userkey) }}"><i class="material-icons left">label</i>Tags</a></li>
-                    <li><a href="{{ url_for('addbookmark', userkey=userkey) }}"><i class="material-icons left">add</i>Add bookmark</a></li>
+                    <li><a href="{{ url_for('tags', userkey=userkey) }}" class="waves-effect waves-light btn"><i class="material-icons left">label</i>Tags</a></li>
+                    <li><a href="{{ url_for('addbookmark', userkey=userkey) }}" class="waves-effect waves-light btn"><i class="material-icons left">add</i>Add bookmark</a></li>
                     {% endif %}
                 </ul>