17 files changed, 195 insertions, 162 deletions

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 9ff84bf..2706ce4 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -14,6 +14,7 @@
     --color-header-span: rgba(255, 255, 255, 1);
 
     --color-text: rgba(0, 0, 0, 1);
+    --color-text-light: rgba(97, 97, 97, 1);
     --color-label-text: rgba(158, 158, 158, 1);
     --color-table-hover: rgba(242, 242, 242, 0.5);
 
@@ -24,7 +25,6 @@
 
     --color-btn-flat: rgba(52, 52, 52, 1);
     --color-btn-flat-disabled: rgba(178, 178, 178, 1);
-
 }
 
 body {
@@ -355,7 +355,7 @@ h5.subheader {
     color: var(--color-btn-flat) !important;
 }
 
-.modal-close.btn-flat:disabled {
+.modal-close.btn-flat[disabled] {
     color: var(--color-btn-flat-disabled) !important;
 }
 
@@ -363,10 +363,18 @@ h5.subheader {
     color: var(--color-text) !important;
 }
 
+.light-text {
+    color: var(--color-text-light) !important;
+}
+
 .dropdown-content {
     background: var(--background-accent-1) !important;
 }
 
 p {
-		color: var(--color-text) !important;
+	color: var(--color-text) !important;
 }
+
+.select-dropdown {
+    color: var(--color-text) !important;
+}
\ No newline at end of file
diff --git a/assets/js/lib/themes.js b/assets/js/lib/themes.js
index 8917aaa..14ef436 100644
--- a/assets/js/lib/themes.js
+++ b/assets/js/lib/themes.js
@@ -15,6 +15,7 @@ const THEME_COLOR_SCHEMES = {
         "color-header-span": "rgba(255, 255, 255, 1)",
 
         "color-text": "rgba(0, 0, 0, 1)",
+        "color-text-light": "rgba(97, 97, 97, 1)",
         "color-label-text": "rgba(158, 158, 158, 1)",
         "color-table-hover": "rgba(242, 242, 242, 0.5)",
 
@@ -42,13 +43,14 @@ const THEME_COLOR_SCHEMES = {
         "color-header-bold": "rgba(255, 255, 255, 1)",
         "color-header-span": "rgba(255, 255, 255, 1)",
 
-        "color-text": "rgba(255, 255, 255, 1)",
+        "color-text": "rgba(189, 189, 189, 1)",
+        "color-text-light": "rgba(160, 160, 160, 1)",
         "color-label-text": "rgba(158, 158, 158, 1)",
         "color-table-hover": "rgba(70, 70, 70, 0.5)",
 
         "color-sidenav-background": "rgba(31, 31, 31, 1)",
-        "color-sidenav-text": "rgba(255, 255, 255, 1)",
-        "color-sidenav-header": "rgba(255, 255, 255, 0.54)",
+        "color-sidenav-text": "rgba(189, 189, 189, 1)",
+        "color-sidenav-header": "rgba(189, 189, 189, 0.54)",
         "color-divider": "rgba(80, 80, 80, 1)",
 
         "color-btn-flat": "rgba(178, 178, 178, 1)",
diff --git a/assets/js/meals.js b/assets/js/meals.js
index e9b3af8..78de032 100644
--- a/assets/js/meals.js
+++ b/assets/js/meals.js
@@ -4,10 +4,10 @@ async function checkLogin() {
     localforage.getItem("logged_in_lopolis").then((value) => {
         if (value != true) {
             $("#meals-container").hide();
-            $("#meals-login").show();
+            $("#meals-login-container").show();
         } else {
             $("#meals-container").show();
-            $("#meals-login").hide();
+            $("#meals-login-container").hide();
             loadMeals();
         }
     }).catch((err) => {
@@ -240,8 +240,8 @@ function lopolisLogout() {
 
 async function lopolisLogin() {
     setLoading(true);
-    var usernameEl = $("#meals_username");
-    var passwordEl = $("#meals_password");
+    var usernameEl = $("#meals-username");
+    var passwordEl = $("#meals-password");
     $.ajax({
         url: API_ENDPOINT+"gettoken",
         crossDomain: true,
diff --git a/assets/js/messaging.js b/assets/js/messaging.js
index 5426c7b..f829cd5 100644
--- a/assets/js/messaging.js
+++ b/assets/js/messaging.js
@@ -93,7 +93,11 @@ function populateAutocomplete() {
 
     $(document).ready(function () {
         if (window.location.hash.length > 1 && !window.location.hash.substring(1).startsWith("beziapp")) {
-            $("#full-name").val(decodeURIComponent(window.location.hash.substring(1)));
+            var hashValue = decodeURIComponent(window.location.hash.substring(1));
+            $("#full-name").val(hashValue);
+            if (hashValue in directory) {
+                $("#msg-send").removeAttr("disabled");
+            }
             $("#beziapp-new-message").modal();
             $("#beziapp-new-message").modal("open"); 
         }
@@ -346,7 +350,7 @@ function displayData(messageType) {
                                 </button>
                             <p>
                         </div>
-                        <div class="card-action">
+                        <div class="card-action general-text">
                             <a onclick="deleteMsg('${filterXSS(element["id"])}')">
                                 <i class="material-icons">delete</i>
                             </a>
diff --git a/assets/pages-src/meals.bvr b/assets/pages-src/meals.bvr
index 408e22a..0621766 100644
--- a/assets/pages-src/meals.bvr
+++ b/assets/pages-src/meals.bvr
@@ -49,67 +49,67 @@
     </nav>
 		<@?i navigation@>
     <br>
-    <div class="container login" hidden="hidden" id="meals-login">
-	<h4 class="general-text"><x-su>loginToLopolis</x-su></h4>
-	<p class="general-text">
-		<x-du>loginToLopolisNote</x-du>
-	</p>
-	  <div class="row">
-	    <div class="col s12">
-	      <div class="row">
-	        <div class="input-field col s12">
-	          <input id="meals_username" type="text" value="" required="required" name="meals_password" class="validate">
-	          <label for="meals_username">Lopolis <x-su>username</x-su></label>
-	        </div>
-	      </div>
-	      <div class="row">
-	        <div class="input-field col s12">
-	          <input autocomplete="new-password" id="meals_password" type="password" value="" required="required" name="meals_password" class="validate">
-	          <label for="meals_password">Lopolis <x-su>password</x-su></label>
-	        </div>
-	      </div>
-	      <div class="row">
-	        <div class="input-field col s12">
-	          <button id="meals-login" type="button" class="waves-effect waves-light btn">
+    <div class="container login" hidden="hidden" id="meals-login-container">
+		<h4 class="general-text"><x-su>loginToLopolis</x-su></h4>
+		<p class="general-text">
+			<x-du>loginToLopolisNote</x-du>
+		</p>
+	  	<div class="row">
+	    	<div class="col s12">
+	      		<div class="row">
+	        		<div class="input-field col s12">
+	          			<input id="meals-username" type="text" value="" required="required" name="meals_password" class="validate">
+	          			<label for="meals-username">Lopolis <x-su>username</x-su></label>
+	        		</div>
+	      		</div>
+	      		<div class="row">
+	        		<div class="input-field col s12">
+	          			<input autocomplete="new-password" id="meals-password" type="password" value="" required="required" name="meals_password" class="validate">
+	          			<label for="meals-password">Lopolis <x-su>password</x-su></label>
+	        		</div>
+	      		</div>
+	      		<div class="row">
+	        		<div class="input-field col s12">
+	          			<button id="meals-login" type="button" class="waves-effect waves-light btn">
 							<x-su>loginToLopolis</x-su>
 							<i class="material-icons right">arrow_right_alt</i>
-		  			</button>
-	        </div>
-	      </div>
-	    </div>
-	  </div>
+		  				</button>
+	        		</div>
+	      		</div>
+	    	</div>
+	  	</div>
     </div>
     <div class="meals-container container" hidden="hidden" id="meals-container">
-	<h4>Meals
-		<button id="meals-logout" type="button" class="waves-effect waves-light btn" style="float: right">
-			<x-su>logOutFromLopolis</x-su>
-			<i class="material-icons right">exit_to_app</i>
-		</button>
-	</h4>
-	<ul id="meals-collapsible" class="collapsible"></ul>
-	<p>
-		<small>
-			<b>
-				<x-su>usage</x-su>:
-			</b>
-			<x-du>mealsUsageNote</x-du>
-			<br>
-			<b>
-				<x-su>note</x-su>:
-			</b>
-			<x-du>lunchesNote</x-du>
-			<br>
-			<b>
-				<x-su>note</x-su>:
-			</b>
-			<x-du>mealNotShownNote</x-du>
-			<br>
-			<b>
-				Note:
-			</b>
+		<h4>Meals
+			<button id="meals-logout" type="button" class="waves-effect waves-light btn" style="float: right">
+				<x-su>logOutFromLopolis</x-su>
+				<i class="material-icons right">exit_to_app</i>
+			</button>
+		</h4>
+		<ul id="meals-collapsible" class="collapsible"></ul>
+		<p>
+			<small>
+				<b>
+					<x-su>usage</x-su>:
+				</b>
+				<x-du>mealsUsageNote</x-du>
+				<br>
+				<b>
+					<x-su>note</x-su>:
+				</b>
+				<x-du>lunchesNote</x-du>
+				<br>
+				<b>
+					<x-su>note</x-su>:
+				</b>
+				<x-du>mealNotShownNote</x-du>
+				<br>
+				<b>
+					Note:
+				</b>
 				<x-du>mealsContributeNote</x-du>
-		</small>
-	</p>
+			</small>
+		</p>
 	</div>
 </body>
 
diff --git a/assets/pages-src/messaging.bvr b/assets/pages-src/messaging.bvr
index 3bc2fd7..6d07b40 100644
--- a/assets/pages-src/messaging.bvr
+++ b/assets/pages-src/messaging.bvr
@@ -53,7 +53,7 @@
         <div class="row">
 
             <br>
-            <div class="row grey-text text-darken-2" id="storage-bar">
+            <div class="row light-text" id="storage-bar">
                 <div class="col s6">
                     <x-su>messageStorageUsed</x-su>: <span id="storage-stats">0/120</span> <x-sl>messages</x-sl>
                 </div>
@@ -62,7 +62,7 @@
                 </div>
             </div>
 
-            <div class="row grey-text text-darken-2" style="text-align: center;">
+            <div class="row light-text" style="text-align: center;">
                 <x-du>maxMessagesNote</x-du>
             </div>
 
@@ -74,9 +74,9 @@
                 </ul>
             </div>
             <br>
-            <div id="beziapp-received" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
-            <div id="beziapp-sent" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
-            <div id="beziapp-deleted" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-received" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-sent" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-deleted" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
         </div>
     </div>
 
diff --git a/assets/pages-src/misc/msg-compose-modal.bvr b/assets/pages-src/misc/msg-compose-modal.bvr
index 9ccd9d0..16d1b9c 100644
--- a/assets/pages-src/misc/msg-compose-modal.bvr
+++ b/assets/pages-src/misc/msg-compose-modal.bvr
@@ -13,8 +13,6 @@
 
             <div class="row" >
 
-# sorry, ampak display: flex še nisem pogruntu 100%
-
                 <div class="col s9 m10">
                     <div class="input-field">
                         <i class="material-icons prefix">subject</i>
diff --git a/assets/pages-src/settings.bvr b/assets/pages-src/settings.bvr
index 6145311..f1913f1 100644
--- a/assets/pages-src/settings.bvr
+++ b/assets/pages-src/settings.bvr
@@ -51,14 +51,16 @@
             <div class="col s12">
                 <h3><b class="title-secondary">Beži</b><span class="title-primary">App</span>
                 </h3>
-                <h4 class="subheader"><x-su>settings</x-su></h4>
+                <h4 class="subheader general-text"><x-su>settings</x-su></h4>
             </div>
         </div>
         <div class="row">
-            <h5><x-su>language</x-su></h5>
+            <div class="col s12">
+                <h5 class="general-text"><x-su>language</x-su></h5>
+            </div>
             <div class="input-field col s12">
                 <i class="material-icons prefix">translate</i>
-                <select class="lang-select icons" id="select-language">
+                <select class="lang-select icons input-select" id="select-language">
                     <option value="sl" id="option-sl" data-icon="/img/flags/sl.svg" selected>Slovenščina</option>
                     <option value="en" id="option-en" data-icon="/img/flags/en.svg">English</option>
                 </select>
@@ -67,10 +69,12 @@
         </div>
 
         <div class="row">
-            <h5><x-su>theme</x-su></h5>
+            <div class="col s12">
+                <h5 class="general-text"><x-su>theme</x-su></h5>
+            </div>
             <div class="input-field col s12">
                 <i class="material-icons prefix">palette</i>
-                <select class="theme-select" id="select-theme">
+                <select class="theme-select input-select" id="select-theme">
                     <option value="light" id="option-light" data-theme="light" selected>Light</option>
                     <option value="dark" id="option-dark" data-theme="dark">Dark</option>
                 </select>
diff --git a/dist/css/styles.css b/dist/css/styles.css
index 9ff84bf..2706ce4 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -14,6 +14,7 @@
     --color-header-span: rgba(255, 255, 255, 1);
 
     --color-text: rgba(0, 0, 0, 1);
+    --color-text-light: rgba(97, 97, 97, 1);
     --color-label-text: rgba(158, 158, 158, 1);
     --color-table-hover: rgba(242, 242, 242, 0.5);
 
@@ -24,7 +25,6 @@
 
     --color-btn-flat: rgba(52, 52, 52, 1);
     --color-btn-flat-disabled: rgba(178, 178, 178, 1);
-
 }
 
 body {
@@ -355,7 +355,7 @@ h5.subheader {
     color: var(--color-btn-flat) !important;
 }
 
-.modal-close.btn-flat:disabled {
+.modal-close.btn-flat[disabled] {
     color: var(--color-btn-flat-disabled) !important;
 }
 
@@ -363,10 +363,18 @@ h5.subheader {
     color: var(--color-text) !important;
 }
 
+.light-text {
+    color: var(--color-text-light) !important;
+}
+
 .dropdown-content {
     background: var(--background-accent-1) !important;
 }
 
 p {
-		color: var(--color-text) !important;
+	color: var(--color-text) !important;
 }
+
+.select-dropdown {
+    color: var(--color-text) !important;
+}
\ No newline at end of file
diff --git a/dist/js/lib/themes.js b/dist/js/lib/themes.js
index 8917aaa..14ef436 100644
--- a/dist/js/lib/themes.js
+++ b/dist/js/lib/themes.js
@@ -15,6 +15,7 @@ const THEME_COLOR_SCHEMES = {
         "color-header-span": "rgba(255, 255, 255, 1)",
 
         "color-text": "rgba(0, 0, 0, 1)",
+        "color-text-light": "rgba(97, 97, 97, 1)",
         "color-label-text": "rgba(158, 158, 158, 1)",
         "color-table-hover": "rgba(242, 242, 242, 0.5)",
 
@@ -42,13 +43,14 @@ const THEME_COLOR_SCHEMES = {
         "color-header-bold": "rgba(255, 255, 255, 1)",
         "color-header-span": "rgba(255, 255, 255, 1)",
 
-        "color-text": "rgba(255, 255, 255, 1)",
+        "color-text": "rgba(189, 189, 189, 1)",
+        "color-text-light": "rgba(160, 160, 160, 1)",
         "color-label-text": "rgba(158, 158, 158, 1)",
         "color-table-hover": "rgba(70, 70, 70, 0.5)",
 
         "color-sidenav-background": "rgba(31, 31, 31, 1)",
-        "color-sidenav-text": "rgba(255, 255, 255, 1)",
-        "color-sidenav-header": "rgba(255, 255, 255, 0.54)",
+        "color-sidenav-text": "rgba(189, 189, 189, 1)",
+        "color-sidenav-header": "rgba(189, 189, 189, 0.54)",
         "color-divider": "rgba(80, 80, 80, 1)",
 
         "color-btn-flat": "rgba(178, 178, 178, 1)",
diff --git a/dist/js/meals.js b/dist/js/meals.js
index e9b3af8..78de032 100644
--- a/dist/js/meals.js
+++ b/dist/js/meals.js
@@ -4,10 +4,10 @@ async function checkLogin() {
     localforage.getItem("logged_in_lopolis").then((value) => {
         if (value != true) {
             $("#meals-container").hide();
-            $("#meals-login").show();
+            $("#meals-login-container").show();
         } else {
             $("#meals-container").show();
-            $("#meals-login").hide();
+            $("#meals-login-container").hide();
             loadMeals();
         }
     }).catch((err) => {
@@ -240,8 +240,8 @@ function lopolisLogout() {
 
 async function lopolisLogin() {
     setLoading(true);
-    var usernameEl = $("#meals_username");
-    var passwordEl = $("#meals_password");
+    var usernameEl = $("#meals-username");
+    var passwordEl = $("#meals-password");
     $.ajax({
         url: API_ENDPOINT+"gettoken",
         crossDomain: true,
diff --git a/dist/js/messaging.js b/dist/js/messaging.js
index 5426c7b..f829cd5 100644
--- a/dist/js/messaging.js
+++ b/dist/js/messaging.js
@@ -93,7 +93,11 @@ function populateAutocomplete() {
 
     $(document).ready(function () {
         if (window.location.hash.length > 1 && !window.location.hash.substring(1).startsWith("beziapp")) {
-            $("#full-name").val(decodeURIComponent(window.location.hash.substring(1)));
+            var hashValue = decodeURIComponent(window.location.hash.substring(1));
+            $("#full-name").val(hashValue);
+            if (hashValue in directory) {
+                $("#msg-send").removeAttr("disabled");
+            }
             $("#beziapp-new-message").modal();
             $("#beziapp-new-message").modal("open"); 
         }
@@ -346,7 +350,7 @@ function displayData(messageType) {
                                 </button>
                             <p>
                         </div>
-                        <div class="card-action">
+                        <div class="card-action general-text">
                             <a onclick="deleteMsg('${filterXSS(element["id"])}')">
                                 <i class="material-icons">delete</i>
                             </a>
diff --git a/dist/pages/about.html b/dist/pages/about.html
index 4087085..b83300c 100644
--- a/dist/pages/about.html
+++ b/dist/pages/about.html
@@ -142,7 +142,7 @@
 				<div class="row">
 					<p>
 						<small>
-							^HEAD 70555eff18936f28b2952ca05337124489db7dca
+							^HEAD 44fe5313019bbce17cce0d49ce6d49b1b4ebc35f
                         </small>
 					</p>
 				</div>
diff --git a/dist/pages/meals.html b/dist/pages/meals.html
index b1179eb..590e761 100644
--- a/dist/pages/meals.html
+++ b/dist/pages/meals.html
@@ -69,67 +69,67 @@
 </ul>
 
     <br>
-    <div class="container login" hidden="hidden" id="meals-login">
-	<h4 class="general-text"><x-su>loginToLopolis</x-su></h4>
-	<p class="general-text">
-		<x-du>loginToLopolisNote</x-du>
-	</p>
-	  <div class="row">
-	    <div class="col s12">
-	      <div class="row">
-	        <div class="input-field col s12">
-	          <input id="meals_username" type="text" value="" required="required" name="meals_password" class="validate">
-	          <label for="meals_username">Lopolis <x-su>username</x-su></label>
-	        </div>
-	      </div>
-	      <div class="row">
-	        <div class="input-field col s12">
-	          <input autocomplete="new-password" id="meals_password" type="password" value="" required="required" name="meals_password" class="validate">
-	          <label for="meals_password">Lopolis <x-su>password</x-su></label>
-	        </div>
-	      </div>
-	      <div class="row">
-	        <div class="input-field col s12">
-	          <button id="meals-login" type="button" class="waves-effect waves-light btn">
+    <div class="container login" hidden="hidden" id="meals-login-container">
+		<h4 class="general-text"><x-su>loginToLopolis</x-su></h4>
+		<p class="general-text">
+			<x-du>loginToLopolisNote</x-du>
+		</p>
+	  	<div class="row">
+	    	<div class="col s12">
+	      		<div class="row">
+	        		<div class="input-field col s12">
+	          			<input id="meals-username" type="text" value="" required="required" name="meals_password" class="validate">
+	          			<label for="meals-username">Lopolis <x-su>username</x-su></label>
+	        		</div>
+	      		</div>
+	      		<div class="row">
+	        		<div class="input-field col s12">
+	          			<input autocomplete="new-password" id="meals-password" type="password" value="" required="required" name="meals_password" class="validate">
+	          			<label for="meals-password">Lopolis <x-su>password</x-su></label>
+	        		</div>
+	      		</div>
+	      		<div class="row">
+	        		<div class="input-field col s12">
+	          			<button id="meals-login" type="button" class="waves-effect waves-light btn">
 							<x-su>loginToLopolis</x-su>
 							<i class="material-icons right">arrow_right_alt</i>
-		  			</button>
-	        </div>
-	      </div>
-	    </div>
-	  </div>
+		  				</button>
+	        		</div>
+	      		</div>
+	    	</div>
+	  	</div>
     </div>
     <div class="meals-container container" hidden="hidden" id="meals-container">
-	<h4>Meals
-		<button id="meals-logout" type="button" class="waves-effect waves-light btn" style="float: right">
-			<x-su>logOutFromLopolis</x-su>
-			<i class="material-icons right">exit_to_app</i>
-		</button>
-	</h4>
-	<ul id="meals-collapsible" class="collapsible"></ul>
-	<p>
-		<small>
-			<b>
-				<x-su>usage</x-su>:
-			</b>
-			<x-du>mealsUsageNote</x-du>
-			<br>
-			<b>
-				<x-su>note</x-su>:
-			</b>
-			<x-du>lunchesNote</x-du>
-			<br>
-			<b>
-				<x-su>note</x-su>:
-			</b>
-			<x-du>mealNotShownNote</x-du>
-			<br>
-			<b>
-				Note:
-			</b>
+		<h4>Meals
+			<button id="meals-logout" type="button" class="waves-effect waves-light btn" style="float: right">
+				<x-su>logOutFromLopolis</x-su>
+				<i class="material-icons right">exit_to_app</i>
+			</button>
+		</h4>
+		<ul id="meals-collapsible" class="collapsible"></ul>
+		<p>
+			<small>
+				<b>
+					<x-su>usage</x-su>:
+				</b>
+				<x-du>mealsUsageNote</x-du>
+				<br>
+				<b>
+					<x-su>note</x-su>:
+				</b>
+				<x-du>lunchesNote</x-du>
+				<br>
+				<b>
+					<x-su>note</x-su>:
+				</b>
+				<x-du>mealNotShownNote</x-du>
+				<br>
+				<b>
+					Note:
+				</b>
 				<x-du>mealsContributeNote</x-du>
-		</small>
-	</p>
+			</small>
+		</p>
 	</div>
 </body>
 
diff --git a/dist/pages/messaging.html b/dist/pages/messaging.html
index 8e912c6..3c65e51 100644
--- a/dist/pages/messaging.html
+++ b/dist/pages/messaging.html
@@ -73,7 +73,7 @@
         <div class="row">
 
             <br>
-            <div class="row grey-text text-darken-2" id="storage-bar">
+            <div class="row light-text" id="storage-bar">
                 <div class="col s6">
                     <x-su>messageStorageUsed</x-su>: <span id="storage-stats">0/120</span> <x-sl>messages</x-sl>
                 </div>
@@ -82,7 +82,7 @@
                 </div>
             </div>
 
-            <div class="row grey-text text-darken-2" style="text-align: center;">
+            <div class="row light-text" style="text-align: center;">
                 <x-du>maxMessagesNote</x-du>
             </div>
 
@@ -94,9 +94,9 @@
                 </ul>
             </div>
             <br>
-            <div id="beziapp-received" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
-            <div id="beziapp-sent" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
-            <div id="beziapp-deleted" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-received" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-sent" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-deleted" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
         </div>
     </div>
 
@@ -121,7 +121,6 @@
 
             <div class="row" >
 
-
                 <div class="col s9 m10">
                     <div class="input-field">
                         <i class="material-icons prefix">subject</i>
diff --git a/dist/pages/settings.html b/dist/pages/settings.html
index 28d4df7..b0e70ae 100644
--- a/dist/pages/settings.html
+++ b/dist/pages/settings.html
@@ -71,14 +71,16 @@
             <div class="col s12">
                 <h3><b class="title-secondary">Beži</b><span class="title-primary">App</span>
                 </h3>
-                <h4 class="subheader"><x-su>settings</x-su></h4>
+                <h4 class="subheader general-text"><x-su>settings</x-su></h4>
             </div>
         </div>
         <div class="row">
-            <h5><x-su>language</x-su></h5>
+            <div class="col s12">
+                <h5 class="general-text"><x-su>language</x-su></h5>
+            </div>
             <div class="input-field col s12">
                 <i class="material-icons prefix">translate</i>
-                <select class="lang-select icons" id="select-language">
+                <select class="lang-select icons input-select" id="select-language">
                     <option value="sl" id="option-sl" data-icon="/img/flags/sl.svg" selected>Slovenščina</option>
                     <option value="en" id="option-en" data-icon="/img/flags/en.svg">English</option>
                 </select>
@@ -87,10 +89,12 @@
         </div>
 
         <div class="row">
-            <h5><x-su>theme</x-su></h5>
+            <div class="col s12">
+                <h5 class="general-text"><x-su>theme</x-su></h5>
+            </div>
             <div class="input-field col s12">
                 <i class="material-icons prefix">palette</i>
-                <select class="theme-select" id="select-theme">
+                <select class="theme-select input-select" id="select-theme">
                     <option value="light" id="option-light" data-theme="light" selected>Light</option>
                     <option value="dark" id="option-dark" data-theme="dark">Dark</option>
                 </select>
diff --git a/dist/sw.js b/dist/sw.js
index 686267d..640fe95 100644
--- a/dist/sw.js
+++ b/dist/sw.js
@@ -3,8 +3,8 @@
 
 
 // Change version to cause cache refresh
-const static_cache_name = "site-static-1.0.13-beta-70555ef";
-// latest commit is 70555eff18936f28b2952ca05337124489db7dca
+const static_cache_name = "site-static-1.0.13-beta-44fe531";
+// latest commit is 44fe5313019bbce17cce0d49ce6d49b1b4ebc35f
 // Got them with find . -not -path '*/\.*' | sed "s/.*/\"&\",/" | grep -v sw.js
 // sw.js NE SME BITI CACHAN, ker vsebuje verzijo!