feat(*): new onboarding process

package.json

@@ -28,6 +28,7 @@
     "@kongponents/kicon": "^5.0.7",
     "@kongponents/kmodal": "^4.0.2",
     "@kongponents/kpop": "^4.0.2",
+    "@kongponents/kradio": "^4.0.2",
     "@kongponents/krumbs": "^4.0.2",
     "@kongponents/ktable": "^4.0.2",
     "@kongponents/ktabs": "^4.0.2",

src/App.vue

@@ -7,16 +7,14 @@
       <KLoader />
     </div>
 
-    <div v-else>
+    <div v-else-if="status !== 'OK'">
       <GlobalHeader />
-      <router-view v-if="status === 'OK'" />
-      <main
-        v-else
-        class="main-content"
-      >
+      <main class="main-content">
         <ApiErrorMessage />
       </main>
     </div>
+
+    <router-view v-else />
   </div>
 </template>
 

src/assets/styles/components.scss

@@ -161,10 +161,7 @@
   padding: 44px;
   transition: var(--transitionTiming) margin var(--transition);
 }
-.page {
-  max-width: 76rem;
-  margin: 0 auto;
-}
+
 .main-content-container {
   max-width: var(--global-content-max-width);
   margin: 0 auto;

src/assets/styles/main.scss

@@ -1,13 +1,6 @@
 /* Base */
-
-html {
-  /* font-size: var(--base-font-size-root); */
-}
-
 body {
-  padding-top: var(--topbar-height);
   font-family: var(--base-font-family);
-  /* font-size: var(--base-font-size); */
 }
 
 button, [type=button], [type=reset], [type=submit] {

src/assets/styles/transitions.scss

@@ -2,8 +2,7 @@
 
 .fade-enter-active,
 .fade-leave-active {
-  /* transition: opacity .12s linear; */
-  transition: opacity 0 linear;
+  transition: opacity .2s linear;
 }
 
 .fade-enter,

src/assets/styles/utilities.scss

@@ -67,13 +67,6 @@
 
 /* New for Kuma */
 
-.arrow-link {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: var(--blue-4);
-}
-
 .k-button {
   font-weight: normal !important;
   display: flex;

src/assets/styles/variables.scss

@@ -77,7 +77,6 @@
   --subnavWidth: 210px;
   --subnavHorizontalMargin: 1rem;
   --sidebarBackground: var(--white);
-  --headerHeight: var(--topbar-height);
   --transition: cubic-bezier(1.0, 0.5, 0.8, 1.0);
   --transitionTiming: 0.1s; // 100ms
 
@@ -150,4 +149,40 @@
 
   // Empty State
   --KEmptyStateContentWidth: 85%;
+
+  // Onboarding
+
+  --kuma-purple-1: #260D50;
+  --kuma-purple-1-rgb: 38, 13, 80;
+
+  --kuma-purple-2: #822DC5;
+  --kuma-purple-2-rgb: 130, 45, 197;
+
+  --kuma-gradient: var(--kuma-purple-1), var(--kuma-purple-2);
+
+  --onboarding-green: #5da46f;
+  --onboarding-green-darken: #539464;
+
+  --onboarding-blueish: #f6f8fd;
+  --onboarding-blueish-darken: #e1e8f8;
+
+  --OnboardingTitle: var(--kuma-gradient);
+
+  --OnboardingRadio: var(--onboarding-green);
+
+  --OnboardingPageGraphBackground: var(--onboarding-blueish);
+
+  --OnboardingNextButton: var(--onboarding-green);
+  --OnboardingNextButtonHover: var(--onboarding-green-darken);
+
+  --OnboardingBackButton: var(--onboarding-blueish);
+  --OnboardingBackButtonHover: var(--onboarding-blueish-darken);
+
+  --OnboardingSkipSetupButton: rgba(var(--kuma-purple-1-rgb), 0.3);
+
+  --OnbordingBoxBorder: #7b2bbc;
+
+  --OnboardingLoading: var(--kuma-purple-2-rgb);
+
+  --OnboardingShadow: 4px 4px 14px 4px rgba(103, 71, 128, 0.11);
 }

src/components/Breadcrumbs.vue

@@ -1,10 +1,8 @@
 <template>
-  <div>
-    <Krumbs
-      v-if="!hideBreadcrumbs"
-      :items="routes"
-    />
-  </div>
+  <Krumbs
+    v-if="!hideBreadcrumbs"
+    :items="routes"
+  />
 </template>
 
 <script>

src/components/Global/Header.vue

@@ -131,6 +131,12 @@ export default {
       return Boolean(this.env && this.apiUrl)
     },
   },
+  mounted() {
+    document.body.style.paddingTop = 'var(--topbar-height)'
+  },
+  destroyed() {
+    document.body.style.paddingTop = ''
+  },
 }
 </script>