From 2f6f1d90ae8f6bc40a2fe3398bac36bc351b1123 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <nmacdougall@suse.com>
Date: Fri, 21 May 2021 08:34:39 +0100
Subject: [PATCH 1/2] Minor styling refinements

---
 assets/translations/en-us.yaml |  2 +-
 components/Banner.vue          | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index c28f48570c..1b51588578 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -4252,7 +4252,7 @@ featureFlags:
     Feature flags allow {vendor} to gate certain features behind flags.
     Features that are off by defult shoud be considered experimental functionality.
     Some features require a restart of the {vendor} server to change.
-    This will result in a short outage of the API and UI, but no affect running clusters or workloads.
+    This will result in a short outage of the API and UI, but not affect running clusters or workloads.
   promptActivate: Please confirm that you want to activate the feature flag "{flag}"
   promptDeactivate: Please confirm that you want to deactivate the feature flag "{flag}"
   restartRequired: "Note: Updating this feature flag requires a restart"
diff --git a/components/Banner.vue b/components/Banner.vue
index ef8de8704a..72939a7824 100644
--- a/components/Banner.vue
+++ b/components/Banner.vue
@@ -35,13 +35,15 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  $left-border-size: 4px;
+
   .banner {
     padding: 10px;
     margin: 15px 0;
     width: 100%;
-    border-radius: var(--border-radius);
     transition: all 0.2s ease;
     position: relative;
+    line-height: 20px;
 
     &.closable {
       padding-right: 40px;
@@ -63,37 +65,37 @@ export default {
 
     &.primary {
       background: var(--primary);
-      border: solid 1px var(--primary);
+      border-left: solid $left-border-size var(--primary);
       color: var(--body-text);
     }
 
     &.secondary {
       background: var(--secondary-banner-bg);
-      border: solid 1px var(--secondary);
+      border-left: solid $left-border-size var(--secondary);
       color: var(--body-text);
     }
 
     &.success {
       background: var(--success-banner-bg);
-      border: solid 1px var(--success);
+      border-left: solid $left-border-size var(--success);
       color: var(--body-text);
     }
 
     &.info {
       background: var(--info-banner-bg);
-      border: solid 1px var(--info);
+      border-left: solid $left-border-size var(--info);
       color: var(--body-text);
     }
 
     &.warning {
       background: var(--warning-banner-bg);
-      border: solid 1px var(--warning);
+      border-left: solid $left-border-size var(--warning);
       color: var(--body-text);
     }
 
     &.error {
       background: var(--error-banner-bg);
-      border: solid 1px var(--error);
+      border-left: solid $left-border-size var(--error);
       color: var(--error);
     }
   }

From 521e4f02eb40731dc946e3cc5f23b560cef84636 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <nmacdougall@suse.com>
Date: Fri, 21 May 2021 12:25:51 +0100
Subject: [PATCH 2/2] Tweaks to setup page

---
 assets/translations/en-us.yaml |  2 +-
 components/FixedBanner.vue     |  1 -
 pages/auth/setup.vue           | 41 +++++++++++++++++++++++++---------
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index 1b51588578..5b91527f94 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -2831,7 +2831,7 @@ servicesPage:
     label: Service Type
 
 setup:
-  welcome: Welcome to {product}!
+  welcome: Welcome to {vendor}!
   setPassword: The first order of business is to set a strong password for the default <code>admin</code> user. We suggest using this random one generated just for you, but enter your own if you like. 
   newPassword: New Password
   confirmPassword: Confirm New Password
diff --git a/components/FixedBanner.vue b/components/FixedBanner.vue
index 5fc279ee29..f5ec6dee17 100644
--- a/components/FixedBanner.vue
+++ b/components/FixedBanner.vue
@@ -46,7 +46,6 @@ export default {
           const parsed = JSON.parse(neu.value);
 
           this.showHeader = parsed.showHeader === 'true';
-
           this.showFooter = parsed.showFooter === 'true';
           this.banner = parsed.banner || {};
         } catch {}
diff --git a/pages/auth/setup.vue b/pages/auth/setup.vue
index 2e6198e2a9..e2c04b8497 100644
--- a/pages/auth/setup.vue
+++ b/pages/auth/setup.vue
@@ -174,7 +174,7 @@ export default {
         </h1>
 
         <template v-if="step===1">
-          <p class="text-center mb-40 mt-20">
+          <p class="text-center mb-40 mt-20 setup-title">
             <t k="setup.setPassword" :raw="true" />
           </p>
 
@@ -212,8 +212,9 @@ export default {
             <Checkbox v-model="telemetry" :label="t('setup.telemetry.label')" type="checkbox" />
             <i v-tooltip="{content:t('setup.telemetry.tip', {}, true), delay: {hide:500}, autoHide: false}" class="icon icon-info" />
           </div>
-          <div class="checkbox">
-            <Checkbox v-model="eula" label-key="setup.eula" type="checkbox" />
+          <div class="checkbox pt-10 eula">
+            <Checkbox v-model="eula" type="checkbox" />
+            <span v-html="t('setup.eula', {}, true)"></span>
           </div>
 
           <div class="text-center mt-20">
@@ -232,7 +233,7 @@ export default {
             <button type="button" class="btn role-link" @click="done">
               {{ t('setup.serverUrl.skip') }}
             </button>
-            <AsyncButton type="submit" mode="edit" @click="setServerUrl" />
+            <AsyncButton type="submit" mode="continue" @click="setServerUrl" />
           </div>
         </template>
       </div>
@@ -272,13 +273,31 @@ export default {
       }
     }
 
+    .setup-title {
+      ::v-deep code {
+        font-size: 12px;
+      }
+    }
+
+    p {
+      line-height: 20px;
+    }
+
+    .eula {
+      align-items: center;
+      display: flex;
+
+      span {
+        margin-left: 5px;
+      }
+    }
   }
 
-      .landscape {
-      background-image: url('~assets/images/pl/login-landscape.svg');
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center center;
-      height: 100vh;
-    }
+  .landscape {
+    background-image: url('~assets/images/pl/login-landscape.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    height: 100vh;
+  }
 </style>