From e5c506333f87fac36ce66fa79496e90ae1c7dc3c Mon Sep 17 00:00:00 2001
From: Marius David Wieschollek <passwords.public@mdns.eu>
Date: Sun, 13 Dec 2020 00:06:09 +0100
Subject: Improve first run wizard

Signed-off-by: Marius David Wieschollek <passwords.public@mdns.eu>
---
 src/platform/chrome/scss/browser.scss             | 14 ++++--
 src/vue/Components/Firstrun/FirstRunWizard.vue    | 58 ++++++++++++-----------
 src/vue/Components/Firstrun/Steps/ServerSetup.vue | 16 ++++++-
 3 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/platform/chrome/scss/browser.scss b/src/platform/chrome/scss/browser.scss
index 3af7d50..8349c7b 100644
--- a/src/platform/chrome/scss/browser.scss
+++ b/src/platform/chrome/scss/browser.scss
@@ -33,15 +33,21 @@ body {
         .theme-colors {
             .color-setting {
                 input {
-                    -webkit-appearance: none;
-                    height: 1.5rem;
-                    background-color: transparent;
+                    -webkit-appearance : none;
+                    height             : 1.5rem;
+                    background-color   : transparent;
 
                     &::-webkit-color-swatch {
-                        border: none;
+                        border : none;
                     }
                 }
             }
         }
     }
+}
+
+.input-slider {
+    .input-slider-button {
+        top : 0;
+    }
 }
\ No newline at end of file
diff --git a/src/vue/Components/Firstrun/FirstRunWizard.vue b/src/vue/Components/Firstrun/FirstRunWizard.vue
index 14e695f..c00bfd5 100644
--- a/src/vue/Components/Firstrun/FirstRunWizard.vue
+++ b/src/vue/Components/Firstrun/FirstRunWizard.vue
@@ -15,35 +15,37 @@
 </script>
 
 <style lang="scss">
-    .first-run-wizard {
-        position : fixed;
-        top      : 0;
-        left     : 0;
-        bottom   : 0;
-        right    : 0;
+.first-run-wizard {
+    position : fixed;
+    top      : 0;
+    left     : 0;
+    bottom   : 0;
+    right    : 0;
 
-        &:before {
-            content          : ' ';
-            background-color : var(--element-bg-color);
-            position         : fixed;
-            top              : 0;
-            left             : 0;
-            bottom           : 0;
-            right            : 0;
-            opacity          : .75;
-            z-index          : -1
-        }
+    &:before {
+        content          : " ";
+        background-color : var(--element-bg-color);
+        position         : fixed;
+        top              : 0;
+        left             : 0;
+        bottom           : 0;
+        right            : 0;
+        opacity          : .75;
+        z-index          : -1
+    }
 
-        .first-run-wizard-content {
-            margin           : 1rem;
-            width            : calc(100% - 2rem);
-            height           : calc(100% - 2rem);
-            background-color : var(--element-active-hover-fg-color);
-            color            : var(--element-active-hover-bg-color);
-            border-radius    : var(--element-border-radius);
-            padding          : .5rem;
-            box-sizing       : border-box;
-            position         : relative;
-        }
+    .first-run-wizard-content {
+        margin           : 1rem;
+        width            : calc(100% - 2rem);
+        height           : calc(100% - 2rem);
+        background-color : var(--element-active-hover-fg-color);
+        color            : var(--element-active-hover-bg-color);
+        background-image : url("/img/background.png"), linear-gradient(40deg, #0082c9 0%, #30b6ff 100%);
+        background-size  : 300px, cover;
+        border-radius    : var(--element-border-radius);
+        padding          : .5rem;
+        box-sizing       : border-box;
+        position         : relative;
     }
+}
 </style>
\ No newline at end of file
diff --git a/src/vue/Components/Firstrun/Steps/ServerSetup.vue b/src/vue/Components/Firstrun/Steps/ServerSetup.vue
index 4ca8d9d..1f57ff5 100644
--- a/src/vue/Components/Firstrun/Steps/ServerSetup.vue
+++ b/src/vue/Components/Firstrun/Steps/ServerSetup.vue
@@ -5,8 +5,8 @@
         <ul class="sever-setup-options">
             <translate tag="li" say="FirstRunConnectLink" v-if="platform !== 'chrome'"/>
             <translate tag="li" say="FirstRunConnectScan" v-if="platform !== 'chrome'"/>
-            <translate tag="li" say="FirstRunConnectScanChrome" v-if="platform === 'chrome'"/>
-            <translate tag="li" say="FirstRunConnectManual"/>
+            <translate tag="li" class="link" say="FirstRunConnectScanChrome" v-if="platform === 'chrome'" @click="scanQr" />
+            <translate tag="li" class="link" say="FirstRunConnectManual" @click="openSettings"/>
         </ul>
         <button-field value="FirstRunConnectScanButton" @click="scanQr"/>
     </div>
@@ -35,6 +35,10 @@
                 MessageService.send({type: 'passlink.open', payload: {action: 'scan-qr'}})
                     .catch(ErrorManager.catch);
                 window.close();
+            },
+            openSettings() {
+                MessageService.send('popup.settings.open');
+                //window.close();
             }
         }
     };
@@ -51,6 +55,14 @@
 
             li {
                 margin-bottom : .25rem;
+
+                &.link {
+                    cursor: pointer;
+
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
             }
         }
 
-- 
cgit v1.2.3