From 63e91c031a5f4639f6364e01945e831eacb41a55 Mon Sep 17 00:00:00 2001
From: David Ma <davidma415@gmail.com>
Date: Fri, 8 Sep 2023 09:57:49 -0600
Subject: [PATCH] refactor: remove tailwind utility from components

---
 src/assets/utilities.scss                     | 24 +++++++++
 src/components/ActionsDropdown.vue            |  8 ++-
 .../ApiDocumentation/DocumentSections.vue     | 20 +++++--
 src/components/AuthCard.vue                   | 18 +++++--
 src/components/Catalog.vue                    | 20 +++++--
 src/components/CatalogCardList.vue            | 31 +++++++++--
 src/components/CatalogItem.vue                | 26 ++++++++--
 src/components/CatalogTableList.vue           |  6 ++-
 src/components/Content.vue                    | 11 +++-
 src/components/CopyButton.vue                 | 21 ++++++--
 src/components/DisplayNameModal.vue           | 16 ++++--
 src/components/ErrorWrapper.vue               | 26 ++++++++--
 src/components/Nav.vue                        | 24 +++++++--
 src/components/PageTitle.vue                  | 20 ++++---
 src/components/PaginationBar.vue              |  7 ++-
 src/components/UserDropdown.vue               | 23 ++++++--
 src/components/ViewSpecModal.vue              |  6 ++-
 src/components/ViewSpecRegistrationModal.vue  | 52 ++++++++++++++-----
 src/components/product/Sidebar.vue            | 29 ++++++++---
 src/components/product/sidebar/Section.vue    |  8 ++-
 .../vitals/AnalyticsMetricsCard.vue           |  6 +--
 src/components/vitals/ChartPanel.vue          |  5 +-
 22 files changed, 330 insertions(+), 77 deletions(-)

diff --git a/src/assets/utilities.scss b/src/assets/utilities.scss
index 43fe5252..c112a303 100644
--- a/src/assets/utilities.scss
+++ b/src/assets/utilities.scss
@@ -195,4 +195,28 @@
 .uuid-icon-wrapper {
   display: flex;
   margin-left: 4px;
+}
+
+.responsive-container {
+  width: 100% ;
+
+  @media (min-width: $kui-breakpoint-mobile) {
+    max-width: $kui-breakpoint-mobile !important;
+  }
+
+  @media (min-width: $kui-breakpoint-phablet) {
+    max-width: $kui-breakpoint-phablet !important;
+  }
+
+  @media (min-width: $kui-breakpoint-tablet) {
+    max-width: $kui-breakpoint-tablet !important;
+  }
+
+  @media (min-width: $kui-breakpoint-laptop) {
+    max-width: $kui-breakpoint-laptop !important;
+  }
+  
+  @media (min-width: $kui-breakpoint-desktop) {
+    max-width: $kui-breakpoint-desktop !important;
+  }
 }
\ No newline at end of file
diff --git a/src/components/ActionsDropdown.vue b/src/components/ActionsDropdown.vue
index 76a53882..3414e5b1 100644
--- a/src/components/ActionsDropdown.vue
+++ b/src/components/ActionsDropdown.vue
@@ -3,7 +3,7 @@
     ref="popRef"
     :popover-timeout="0"
     popover-classes="mt-1 action-dropdown"
-    class="float-right"
+    class="popover"
     placement="bottomEnd"
     width="150"
     hide-caret
@@ -18,7 +18,7 @@
         <KBadge
           data-testid="action-badge"
           :class="[
-            'cursor-pointer actions-badge',
+            'actions-badge',
             { opened: isOpened }
           ]"
         >
@@ -78,6 +78,10 @@ export default defineComponent({
   align-items: center;
 }
 
+.popover {
+  float: right;
+}
+
 .action-dropdown-button {
   --KButtonOutlineBorder: var(--section_colors-stroke);
   border: none;
diff --git a/src/components/ApiDocumentation/DocumentSections.vue b/src/components/ApiDocumentation/DocumentSections.vue
index e5131d4a..d0baeef7 100644
--- a/src/components/ApiDocumentation/DocumentSections.vue
+++ b/src/components/ApiDocumentation/DocumentSections.vue
@@ -10,9 +10,8 @@
         :key="item.slug"
         :class="{
           active: activeHeading === item.slug,
-          'mt-4':true,
-          'pl-4': true,
-          ['ml-'+(item.level-1)*4]: true
+          'document-section': true,
+          ['indent-level-'+(item.level-1)]: true
         }"
       >
         <a
@@ -97,6 +96,21 @@ export default defineComponent({
     max-height: calc(100vh - var(--headerHeight));
     padding: 2rem 0;
     overflow-x: auto;
+
+    .document-section {
+      margin-top: $kui-space-60;
+      padding-left: $kui-space-60;
+    }
+
+    .indent-level {
+      &-0 {
+        margin-left: $kui-space-0;
+      }
+
+      &-1 {
+        margin-left: $kui-space-60;
+      }
+    }
   }
 
   p {
diff --git a/src/components/AuthCard.vue b/src/components/AuthCard.vue
index 80437dbc..62dd37d1 100644
--- a/src/components/AuthCard.vue
+++ b/src/components/AuthCard.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="auth h-screen d-flex align-items-center justify-content-center flex-column">
+  <div class="auth">
     <KCard
       has-shadow
       data-testid="auth-form"
-      class="auth-card col-10 col-md-6"
+      class="auth-card"
     >
       <template #body>
-        <div class="d-flex flex-column justify-content-center align-items-center mb-5 card-header">
+        <div class="card-header">
           <router-link :to="headerRouteLink">
             <img
               class="logo"
@@ -56,6 +56,12 @@ export default defineComponent({
   --KCardBorder: 1px solid var(--section_colors-stroke);
   --KButtonPaddingY: 1rem;
 
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
   background-color: var(--section_colors-body);
   .auth-card {
     width: 528px;
@@ -64,10 +70,14 @@ export default defineComponent({
     }
     .card-header {
       height: 6rem;
-      margin: calc(var(--KCardPaddingY) * -1) calc(var(--KCardPaddingY) * -1) 0;
+      margin: calc(var(--KCardPaddingY) * -1) calc(var(--KCardPaddingY) * -1) $kui-space-80;
       padding: 2rem;
       border-radius: 3px 3px 0 0;
       background-color: var(--section_colors-hero);
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
     }
   }
 }
diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
index 5464e8f4..5bdcfa19 100644
--- a/src/components/Catalog.vue
+++ b/src/components/Catalog.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="products-content px-5">
-    <div class="container max-w-screen-2xl mx-auto mt-6 mb-5 flex justify-between">
+  <div class="products-content">
+    <div class="products-container responsive-container">
       <span class="products-label">{{ catalogTitle }}</span>
       <KViewSwitcher
         data-testid="view-switcher"
@@ -13,9 +13,9 @@
       v-if="!catalogItems.length"
       class="product-catalog-empty-state"
     >
-      <div class="product-catalog-no-products type-lg color-text_colors-secondary">
+      <div class="product-catalog-no-products color-text_colors-secondary">
         <template v-if="!loading">
-          <EmptyState class="mb-2 mx-auto" />
+          <EmptyState class="empty-products" />
           {{ noResultsMessage }}
         </template>
         <div
@@ -123,6 +123,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .products-content {
   --grey-500: var(--button_colors-primary-fill);
+  padding: 0 $kui-space-80;
 
   .products-label {
     color: var(--text_colors-primary);
@@ -130,6 +131,12 @@ export default defineComponent({
     font-weight: normal;
   }
 
+  .products-container {
+    display: flex;
+    justify-content: space-between;
+    margin: $kui-space-90 auto $kui-space-80 auto;
+  }
+
   .view-switch-button {
     --grey-500: var(--text_colors-primary);
     --spacing-xs: 6px;
@@ -156,5 +163,10 @@ export default defineComponent({
 .product-catalog-no-products {
   text-align: center;
   padding: 20px var(--spacing-xs);
+  font-size: $kui-font-size-50;
+
+  .empty-products {
+    margin: 0 auto $kui-space-40 auto;
+  }
 }
 </style>
diff --git a/src/components/CatalogCardList.vue b/src/components/CatalogCardList.vue
index 6c412332..9cbcb3dd 100644
--- a/src/components/CatalogCardList.vue
+++ b/src/components/CatalogCardList.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container max-w-screen-2xl mx-auto catalog-card-view">
-    <div class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+  <div class="responsive-container catalog-card-view">
+    <div class="card-grid">
       <CatalogItem
         v-for="(product, index) in products"
         :key="product.id + index"
@@ -11,7 +11,7 @@
       />
     </div>
     <PaginationBar
-      class="catalog-pagination mt-4"
+      class="catalog-pagination"
       :page-size="pageSize"
       :total-count="totalCount"
       :search-triggered="searchTriggered"
@@ -62,3 +62,28 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+.catalog-card-view {
+  margin: 0 auto;
+
+  .card-grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: $kui-space-70;
+
+    @media (min-width: $kui-breakpoint-phablet){
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    @media (min-width: $kui-breakpoint-tablet){
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  .catalog-pagination {
+    margin-top: $kui-space-60;
+  }
+}
+</style>
diff --git a/src/components/CatalogItem.vue b/src/components/CatalogItem.vue
index 81b63758..e309863e 100644
--- a/src/components/CatalogItem.vue
+++ b/src/components/CatalogItem.vue
@@ -11,7 +11,7 @@
         v-else
         :to="`/spec/${product.id}`"
       >
-        <p class="products-card-title truncate">
+        <p class="products-card-title truncate-text">
           {{ product.title }}
         </p>
       </router-link>
@@ -29,11 +29,11 @@
           {{ product.description }}
         </template>
       </p>
-      <ul class="mt-auto pt1">
+      <ul class="link-container">
         <li class="details-item">
           <span
             v-if="version"
-            class="my-2 color-text_colors-secondary"
+            class="name-span color-text_colors-secondary"
           >
             <template
               v-if="loading"
@@ -41,7 +41,7 @@
               <KSkeletonBox width="2" />
             </template>
             <template v-else>
-              <span class="mr-2">{{ helpText.latestVersion }}</span>
+              <span class="latest-version">{{ helpText.latestVersion }}</span>
               <KBadge
                 color="var(--text_colors-secondary)"
                 background-color="var(--section_colors-accent)"
@@ -141,6 +141,12 @@ export default {
     padding: 1.5rem 1rem;
     border-bottom: 1px solid var(--section_colors-stroke);
     width: 100%;
+
+    &.truncate-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .description {
@@ -159,6 +165,18 @@ export default {
     padding: 0.25rem 0;
   }
 
+  .name-span {
+    margin: $kui-space-40 0;
+
+    .latest-version {
+      margin-right: $kui-space-40;
+    }
+  }
+
+  .link-container {
+    margin-top: auto;
+  }
+
   .link {
     display: inline-flex;
     align-items: center;
diff --git a/src/components/CatalogTableList.vue b/src/components/CatalogTableList.vue
index cf28929c..4026edda 100644
--- a/src/components/CatalogTableList.vue
+++ b/src/components/CatalogTableList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-screen-2xl mx-auto">
+  <div class="responsive-container table-container">
     <KTable
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
@@ -136,6 +136,10 @@ export default defineComponent({
 }
 </style>
 <style lang="scss" scoped>
+.table-container {
+  margin: 0 auto;
+}
+
 .link {
   display: inline-block;
   margin: 0 0.25rem;
diff --git a/src/components/Content.vue b/src/components/Content.vue
index a2734fc1..afe813f7 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -1,5 +1,14 @@
 <template>
-  <div class="container mx-auto max-w-screen-2xl pt-6 px-5 md:px-0">
+  <div class="responsive-container content-container">
     <slot />
   </div>
 </template>
+
+<style lang="scss" scoped>
+  .content-container {
+    margin: 0 auto;
+    padding-top: $kui-space-90;
+    padding-left: $kui-space-80;
+    padding-right: $kui-space-80;
+  }
+</style>
diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
index 45665eae..1e80b6cd 100644
--- a/src/components/CopyButton.vue
+++ b/src/components/CopyButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="my-4"
+    class="copy-button-container"
   >
     <KTooltip
       :label="helpText.clickToCopy"
@@ -9,12 +9,12 @@
         <KButton
           :is-rounded="false"
           :aria-label="helpText.ariaLabel"
-          class="clipboard-button w-100 justify-content-between"
+          class="clipboard-button"
           data-testid="copy-button"
           appearance="secondary"
           @click="copyTokenToClipboard(copyToClipboard)"
         >
-          <span class="truncate">{{ label }} {{ textToCopy }}</span>
+          <span class="truncate-text">{{ label }} {{ textToCopy }}</span>
           <KIcon
             :title="helpText.copyToClipboard"
             icon="copy"
@@ -68,8 +68,23 @@ export default defineComponent({
 })
 </script>
 
+<style lang="scss" scoped>
+.copy-button-container {
+  margin: $kui-space-60 0;
+}
+
+.truncate-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+
 <style lang="scss">
 .clipboard-button {
   --KButtonFontSize: 12px;
+
+  width: 100%;
+  justify-content: space-between;
 }
 </style>
diff --git a/src/components/DisplayNameModal.vue b/src/components/DisplayNameModal.vue
index 1a23b9b0..4a9b6979 100644
--- a/src/components/DisplayNameModal.vue
+++ b/src/components/DisplayNameModal.vue
@@ -22,7 +22,7 @@
         :placeholder="helpText.renameModal.inputPlaceholder"
         data-testid="rename-display-name-input"
         type="text"
-        class="w-100 k-input--full display-name-input"
+        class="k-input--full display-name-input"
         @keyup.enter="submitHandler"
       />
     </template>
@@ -39,7 +39,7 @@
         :placeholder="helpText.creationModal.inputPlaceholder"
         data-testid="display-name-input"
         type="text"
-        class="w-100 k-input--full display-name-input"
+        class="k-input--full display-name-input"
         @keyup.enter="submitHandler"
       />
     </template>
@@ -51,7 +51,7 @@
         :is-rounded="false"
         :disabled="updatedDisplayName ? null : true"
         appearance="primary"
-        class="mr-3"
+        class="submit-credential-button"
         data-testid="rename-credential-modal-button"
         @click="submitHandler"
       >
@@ -73,7 +73,7 @@
         :is-rounded="false"
         :disabled="displayName ? null : true"
         appearance="primary"
-        class="mr-3"
+        class="submit-credential-button"
         data-testid="create-credential-modal-button"
         @click="submitHandler"
       >
@@ -146,5 +146,13 @@ export default defineComponent({
 .display-name-modal {
   --KModalHeaderColor: var(--text_colors-headings);
   --KModalColor: var(--text_colors-primary);
+
+  .submit-credential-button {
+    margin-right: $kui-space-50;
+  }
+}
+
+.display-name-input {
+  width: 100%;
 }
 </style>
diff --git a/src/components/ErrorWrapper.vue b/src/components/ErrorWrapper.vue
index 7f4bc527..eaf07a6c 100644
--- a/src/components/ErrorWrapper.vue
+++ b/src/components/ErrorWrapper.vue
@@ -1,19 +1,19 @@
 <template>
   <section
-    class="error-wrapper container p-16 mx-auto d-flex flex-column justify-content-center align-items-center"
+    class="error-wrapper responsive-container"
     data-testid="error-wrapper"
   >
     <div
       v-if="errorCode"
-      class="error-wrapper__code mb-2"
+      class="error-wrapper__code"
     >
       {{ errorCode }}
     </div>
 
-    <div class="text-center mt-2">
+    <div class="description-wrapper">
       <p
         v-if="description"
-        class="mb-4 type-xxl"
+        class="description"
       >
         {{ description }}
       </p>
@@ -60,11 +60,29 @@ export default defineComponent({
 .error-wrapper  {
   border: 1px solid var(--section_colors-stroke);
   border-top: 3px solid var(--text_colors-accent);
+  padding: $kui-space-130;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
 
   &__code {
     -webkit-text-stroke: 2px var(--text_colors-accent);
     color: white;
     font-size: 5rem;
+    margin-bottom: $kui-space-40;
+  }
+
+  .description-wrapper {
+    text-align: center;
+    margin-top: $kui-space-40;
+
+    .description {
+      margin-bottom: $kui-space-60;
+      font-size: $kui-font-size-70;
+    }
   }
 }
 </style>
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index d3ce7a74..d634c631 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -1,9 +1,8 @@
 <template>
   <header
     id="site-header"
-    class="flex items-center fixed w-full top-0 z-10"
   >
-    <div class="w-100 container max-w-screen-2xl mx-auto flex justify-between items-center px-5 md:px-0">
+    <div class="nav-container responsive-container">
       <router-link to="/">
         <img
           class="logo"
@@ -15,7 +14,7 @@
         <router-link
           data-testid="catalog-link"
           :to="{ name: 'catalog' }"
-          class="mr-2 p-2 catalog-link"
+          class="catalog-link"
         >
           <div class="background-color-wrapper" />
           {{ helpText.catalog }}
@@ -78,10 +77,29 @@ export default defineComponent({
   max-height: 41px;
 }
 
+.nav-container {
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 $kui-space-80;
+
+  .catalog-link {
+    padding: $kui-space-40;
+    margin-right: $kui-space-40;
+  }
+}
+
 #site-header {
   height: var(--headerHeight);
   background-color: var(--section_colors-header);
   border-bottom: 1px solid var(--section_colors-stroke);
+  display: flex;
+  align-items: center;
+  position: fixed;
+  width: 100%;
+  top: 0px;
+  z-index: 10;
 
   .links a {
     color: var(--text_colors-header);
diff --git a/src/components/PageTitle.vue b/src/components/PageTitle.vue
index 8df0cdce..642774c6 100644
--- a/src/components/PageTitle.vue
+++ b/src/components/PageTitle.vue
@@ -1,8 +1,8 @@
 <template>
-  <header class="flex flex-col sm:flex-row justify-between sm:items-center">
-    <div class="flex-1">
+  <header class="title-container">
+    <div>
       <slot>
-        <h1 class="m-0 type-xl color-text_colors-headings">
+        <h1 class="title color-text_colors-headings">
           {{ title }}
         </h1>
       </slot>
@@ -28,9 +28,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-header > div:first-child {
-  @media only screen and (max-width: 480px) {
-    margin-bottom: var(--spacing-sm);
+  .title-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      flex: 1 1 0;
+      margin: 0;
+      font-size: $kui-font-size-60;
+    }
   }
-}
 </style>
diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue
index b8fd79a5..5e797da8 100644
--- a/src/components/PaginationBar.vue
+++ b/src/components/PaginationBar.vue
@@ -3,7 +3,7 @@
     v-if="!searchTriggered && totalCount > pageSize"
     class="card-pagination-bar flex items-center justify-end"
   >
-    <span class="pagination-text type-lg color-text_colors-secondary mr-4">{{ getPaginationString() }}</span>
+    <span class="pagination-text color-text_colors-secondary">{{ getPaginationString() }}</span>
     <div>
       <button
         class="pagination-button"
@@ -164,6 +164,11 @@ export default defineComponent({
     border-color: var(--button_colors-primary-fill);
   }
 }
+
+  .pagination-text {
+    font-size: $kui-font-size-50;
+    margin-right: $kui-space-60;
+  }
 </style>
 
 <style lang="scss">
diff --git a/src/components/UserDropdown.vue b/src/components/UserDropdown.vue
index b1c28c0e..268c0f1c 100644
--- a/src/components/UserDropdown.vue
+++ b/src/components/UserDropdown.vue
@@ -23,11 +23,11 @@
       >
         <li
           data-testid="my-apps-item"
-          class="type-md block"
+          class="apps-item"
         >
           <router-link
             :to="{ name: 'my-apps' }"
-            class="color-text_colors-primary block py-3 px-4"
+            class="apps-link color-text_colors-primary"
             @click="toggle"
           >
             {{ helpText.myApps }}
@@ -35,7 +35,7 @@
         </li>
         <li
           data-testid="logout-item"
-          class="py-3 px-4 type-md cursor-pointer logout-btn block color-text_colors-primary"
+          class="logout-btn color-text_colors-primary"
           @click="$emit('logout')"
         >
           {{ helpText.logout }}
@@ -68,6 +68,23 @@ export default defineComponent({
 .user-dropdown {
   --KButtonLink: var(--text_colors-header);
 
+  .apps-item {
+    font-size: $kui-font-size-40;
+    display: block;
+
+    .apps-link {
+      display: block;
+      padding: $kui-space-50 $kui-space-60;
+    }
+  }
+
+  .logout-btn {
+    font-size: $kui-font-size-40;
+    display: block;
+    cursor: pointer;
+    padding: $kui-space-50 $kui-space-60;
+  }
+
   .k-button {
     --spacing-lg: var(--spacing-sm);
     // this is to fix the alignment of the text
diff --git a/src/components/ViewSpecModal.vue b/src/components/ViewSpecModal.vue
index bad3e7ab..6222917c 100644
--- a/src/components/ViewSpecModal.vue
+++ b/src/components/ViewSpecModal.vue
@@ -38,7 +38,7 @@
           </KButton>
         </KClipboardProvider>
         <KButton
-          class="ml-2"
+          class="download-btn"
           appearance="secondary"
           :is-rounded="false"
           data-testid="download-btn"
@@ -111,6 +111,10 @@ const copySpec = (executeCopy) => {
 </script>
 
 <style lang="scss" scoped>
+.download-btn {
+  margin-left: $kui-space-40;
+}
+
 #spec-area {
   width: 100%;
   height: 300px;
diff --git a/src/components/ViewSpecRegistrationModal.vue b/src/components/ViewSpecRegistrationModal.vue
index 357770ef..45f0b196 100644
--- a/src/components/ViewSpecRegistrationModal.vue
+++ b/src/components/ViewSpecRegistrationModal.vue
@@ -22,7 +22,7 @@
           v-if="currentState.matches('error') "
           appearance="danger"
           :alert-message="errorMessage"
-          class="mb-4"
+          class="error-banner"
         />
         <div v-if="!availableApplications.length">
           <p class="color-text_colors-primary">
@@ -42,7 +42,7 @@
                     name: 'show-application',
                     params: { 'application_id': app.id }
                   }"
-                  class="color-blue-500"
+                  class="application-link"
                 >
                   {{ app.name }}
                 </router-link>
@@ -51,13 +51,13 @@
           </div>
         </div>
         <div v-else>
-          <div class="color-text_colors-primary font-semibold mb-2">
+          <div class="select-application-title color-text_colors-primary">
             {{ helpText.applicationRegistration.selectApplication }}
           </div>
           <div>
             <select
               v-model="selectedApplication"
-              class="k-input w-100 mb-4"
+              class="k-input application-select"
             >
               <option
                 v-for="app in availableApplications"
@@ -70,7 +70,7 @@
             <router-link
               data-testid="create-application-2"
               :to="{ name: 'create-application', query: { product: $route.params.product, product_version: $route.params.product_version } }"
-              class="color-blue-500"
+              class="application-link"
             >
               {{ helpText.applicationRegistration.createNewApplication }}
             </router-link>
@@ -90,7 +90,7 @@
         :is-rounded="false"
         appearance="primary"
         :disabled="currentState.matches('pending')"
-        class="mr-3"
+        class="action-button"
         :to="{ name: 'create-application', query: { product: $route.params.product, product_version: $route.params.product_version } }"
       >
         {{ helpText.applicationRegistration.createApplication }}
@@ -101,7 +101,7 @@
         :is-rounded="false"
         appearance="primary"
         :disabled="currentState.matches('pending')"
-        class="mr-3"
+        class="action-button"
         @click="currentState.matches('success_application_status_is_pending') ? closeModal() : submitSelection()"
       >
         {{ modalText.buttonText }}
@@ -338,13 +338,39 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+  .application-link {
+    color: $kui-color-text-primary;
+  }
+
+  .error-banner {
+    margin-bottom: $kui-space-60;
+  }
+
+  .select-application-title {
+    margin-bottom: $kui-space-40;
+    font-weight: 600;
+  }
+
+  .action-button {
+    margin-right: $kui-space-50;
+  }
+
+  .application-select {
+    width: 100%;
+    margin-bottom: $kui-space-60;
+  }
 
- .registered-apps-list {
-   margin-top: 1rem;
-   list-style: none;
-   text-align: left;
-   padding-left: var(--spacing-xl, 32px);
- }
+  .registered-apps-list {
+    margin-top: 1rem;
+    list-style: none;
+    text-align: left;
+    padding-left: var(--spacing-xl, 32px);
+  }
+  .application-registration-modal {
+    :deep(.skeleton-loader) {
+      width: 100%;
+    }
+  }
 </style>
 
 <style lang="scss">
diff --git a/src/components/product/Sidebar.vue b/src/components/product/Sidebar.vue
index bff5757a..4f1f92f3 100644
--- a/src/components/product/Sidebar.vue
+++ b/src/components/product/Sidebar.vue
@@ -1,15 +1,15 @@
 <template>
   <aside>
-    <div class="px-5 py-6 content">
-      <header class="mb-6">
-        <span class="title mb-5">
+    <div class="content">
+      <header>
+        <span class="title">
           {{ product?.name }}
         </span>
         <KAlert
           v-if="product && !versionSelectItems.length"
           appearance="warning"
           :alert-message="helpText.noVersions"
-          class="mb-4"
+          class="no-versions"
         />
         <KSelect
           appearance="select"
@@ -92,17 +92,30 @@ watch([
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   aside {
     width: 100%;
     max-width: 260px;
   }
 
+  .content {
+    padding: $kui-space-90 $kui-space-80;
+
+    header {
+      margin-bottom: $kui-space-90;
+    }
+
+    .no-versions {
+      margin-bottom: $kui-space-60;
+    }
+  }
+
   .title {
-    font-weight: 500;
-    font-size: 20px;
-    display: block;
     color: var(--text_colors-primary);
+    display: block;
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: $kui-space-80;
   }
 
   .version-select-dropdown :deep(div.k-select-input.select-input-container) {
diff --git a/src/components/product/sidebar/Section.vue b/src/components/product/sidebar/Section.vue
index e43b8395..ebc93b30 100644
--- a/src/components/product/sidebar/Section.vue
+++ b/src/components/product/sidebar/Section.vue
@@ -2,7 +2,7 @@
   <section>
     <header
       v-if="title"
-      class="mb-3"
+      class="header-wrapper"
     >
       <h2>{{ title }}</h2>
     </header>
@@ -19,11 +19,15 @@ defineProps({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 section {
   margin: 32px 0;
 }
 
+.header-wrapper {
+  margin-bottom: $kui-space-50;
+}
+
 section:first-of-type {
   margin-top: 24px;
 }
diff --git a/src/components/vitals/AnalyticsMetricsCard.vue b/src/components/vitals/AnalyticsMetricsCard.vue
index e15d1061..73b96800 100644
--- a/src/components/vitals/AnalyticsMetricsCard.vue
+++ b/src/components/vitals/AnalyticsMetricsCard.vue
@@ -1,6 +1,6 @@
 <template>
   <KCard
-    class="mb-3 analytics-overview"
+    class="analytics-overview"
     data-testid="analytics-metrics-overview"
   >
     <template #body>
@@ -51,14 +51,14 @@ const metricProviderProps = computed(() => ({
 </script>
 
 <style lang="scss">
-@import '../../assets/variables.scss';
 
 .analytics-overview {
   background-color: var(--white, #fff) !important;
+  margin-bottom: $kui-space-50;
 
   .kong-ui-public-metric-card-container {
     .metricscard {
-      @media (min-width: $viewport-md) {
+      @media (min-width: $kui-breakpoint-phablet) {
         max-width: 220px;
         justify-content: space-around;
       }
diff --git a/src/components/vitals/ChartPanel.vue b/src/components/vitals/ChartPanel.vue
index 0d09a4e1..b75dcac6 100644
--- a/src/components/vitals/ChartPanel.vue
+++ b/src/components/vitals/ChartPanel.vue
@@ -225,12 +225,11 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 @import '../../assets/mixins.scss';
-@import '../../assets/variables.scss';
 
 .chart-grid {
   @include grid-columns(1);
 
-  @media (min-width: $viewport-md) {
+  @media (min-width: $kui-breakpoint-phablet) {
     @include grid-columns(2);
   }
 
@@ -262,7 +261,7 @@ onMounted(() => {
 
     &:deep(ul.tooltip) {
       max-width: 320px;
-      @media (min-width: $viewport-md) {
+      @media (min-width: $kui-breakpoint-phablet) {
         max-width: 440px;
       }
       .display-value, .display-label  {