Merge pull request #3066 from nwmac/styling-refinements

Styling refinements

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
@@ -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"

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);
     }
   }

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 {}

pages/auth/setup.vue

@@ -183,7 +183,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>
 
@@ -221,8 +221,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">
+          <div class="checkbox pt-10 eula">
-            <Checkbox v-model="eula" label-key="setup.eula" type="checkbox" />
+            <Checkbox v-model="eula" type="checkbox" />
+            <span v-html="t('setup.eula', {}, true)"></span>
           </div>
 
           <div class="text-center mt-20">
@@ -241,7 +242,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>
@@ -281,13 +282,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 {
+  .landscape {
-      background-image: url('~assets/images/pl/login-landscape.svg');
+    background-image: url('~assets/images/pl/login-landscape.svg');
-      background-repeat: no-repeat;
+    background-repeat: no-repeat;
-      background-size: cover;
+    background-size: cover;
-      background-position: center center;
+    background-position: center center;
-      height: 100vh;
+    height: 100vh;
-    }
+  }
 </style>