Make "Add OTP" button more material-y

config.xml

@@ -41,6 +41,7 @@
     </platform>
     <preference name="AutoHideSplashScreen" value="false" />
     <engine name="android" spec="^6.3.0" />
+    <engine name="browser" spec="^4.1.0" />
     <plugin name="cordova-plugin-app-version" spec="^0.1.9" />
     <plugin name="cordova-plugin-console" spec="git+https://github.com/apache/cordova-plugin-console.git" />
     <plugin name="cordova-plugin-device" spec="git+https://github.com/apache/cordova-plugin-device.git" />

package.json

@@ -8,6 +8,7 @@
     "license": "MPL-2.0",
     "dependencies": {
         "cordova-android": "^6.3.0",
+        "cordova-browser": "^4.1.0",
         "cordova-plugin-add-swift-support": "^1.7.0",
         "cordova-plugin-app-version": "^0.1.9",
         "cordova-plugin-console": "git+https://github.com/apache/cordova-plugin-console.git",
@@ -39,7 +40,8 @@
             "cordova-plugin-file": {}
         },
         "platforms": [
-            "android"
+            "android",
+            "browser"
         ]
     }
 }

www/css/app.css

@@ -109,7 +109,7 @@ html, body {
     .navbar-right {
         margin-top: -6px;
     }
-    
+
     .navbar-right li a img {
         margin-top: -1px;
     }
@@ -125,4 +125,23 @@ html, body {
 
 .loading-text {
     font-size: 18px;
+}
+
+.circle-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+    border-radius: 50%;
+    height: 5rem;
+    width: 5rem;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin: 2rem;
+}
+
+.circle-btn img {
+    height: 3rem;
+    width: 3rem;
 }

www/js/app.js

@@ -156,7 +156,6 @@ function setnavbar(type, screentitle, returnscreen) {
                 break;
             case "otp":
                 setnavbartitle("Auth Keys", true, "home");
-                addnavbarbtn("addotp", "ic_add.svg", "Add Key");
                 break;
             case "app":
                 setnavbartitle(screentitle, true, returnscreen);

www/views/addotp.html

@@ -1,7 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<br />
 <div class="panel panel-blue">
     <div class="panel-body">
         <p></p>

www/views/otp.html

@@ -4,13 +4,16 @@
 <div class="progress">
     <div class="progress-bar" id="countdown" style="width: 0%;"></div>
 </div>
+<div class="circle-btn btn btn-light-blue" onclick="openscreen('addotp', 'FADE');">
+    <img src="icons/ic_add.svg" />
+</div>
 <div id="nokeys">
     <div class="app-dock-container">
         <div class="app-dock" id="app-dock">
             <div style="margin-top: 50px; text-align: center; font-size: 120%;">
-                <img src="img/nokeys.svg" alt="" style="max-width: 80%; max-height: 33%;" />
+                <img src="img/nokeys.svg" alt="" style="max-width: 80%; max-height: 25%;" />
                 <br /><br />
-                You haven't added any authentication keys yet.  Press the <i class="fa fa-plus"></i> icon to add one.
+                <p style="max-width: 80%; margin: 0 auto;">You haven't added any authentication keys yet.  Press <i class="fa fa-plus"></i> to add one.</p>
             </div>
         </div>
     </div>