From 2b664da788e35c6a8cd589619e6b79f06be05cbf Mon Sep 17 00:00:00 2001
From: Avi Shah <avishah1904@gmail.com>
Date: Fri, 27 Dec 2024 15:23:47 +0530
Subject: [PATCH] fix: ak divider vertical width issue

---
 app/components/app-monitoring/settings/index.hbs    |  4 ++--
 app/components/app-monitoring/settings/index.scss   |  7 ++++---
 .../compare-list/skeleton-loader/index.hbs          |  4 ++--
 .../compare-list/skeleton-loader/index.scss         |  6 +-----
 app/components/file-compare/header/index.hbs        | 13 +++++++++----
 app/components/file-compare/header/index.scss       |  8 +++++---
 app/components/project-list/header/index.hbs        |  8 ++++++--
 app/components/project-list/header/index.scss       |  7 ++++---
 app/components/sbom/app-list/header/index.hbs       |  2 +-
 app/components/sbom/app-list/header/index.scss      |  4 +---
 app/components/security/analysis-list/index.hbs     |  4 ++--
 app/components/security/analysis-list/index.scss    |  7 ++++---
 .../storeknox/inventory/pending-review/index.hbs    |  2 +-
 app/styles/_component-variables.scss                |  8 --------
 14 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/app/components/app-monitoring/settings/index.hbs b/app/components/app-monitoring/settings/index.hbs
index 32030f0f4..ef373960c 100644
--- a/app/components/app-monitoring/settings/index.hbs
+++ b/app/components/app-monitoring/settings/index.hbs
@@ -40,7 +40,7 @@
     @width='full'
     local-class='header-app-moitoring-page-sorting-filter'
   >
-    <AkStack>
+    <AkStack local-class='header-app-moitoring-page-height'>
       <AkSelect
         @onChange={{this.filterPlatform}}
         @options={{this.platformObjects}}
@@ -76,7 +76,7 @@
       </AkSelect>
 
       {{#if this.showClearFilter}}
-        <AkDivider local-class='divider' />
+        <AkDivider @direction='vertical' @color='dark' local-class='divider' />
 
         <AkButton
           @color='textSecondary'
diff --git a/app/components/app-monitoring/settings/index.scss b/app/components/app-monitoring/settings/index.scss
index b74b99f1c..fabebb7e2 100644
--- a/app/components/app-monitoring/settings/index.scss
+++ b/app/components/app-monitoring/settings/index.scss
@@ -71,12 +71,13 @@
 }
 
 .divider {
-  width: 1px;
-  height: 32px;
-  background-color: var(--appmonitoring-settings-header-divider-background-color);
   margin-left: 0.714em;
 }
 
+.header-app-moitoring-page-height {
+  height: 32px;
+}
+
 .clear-filter-label {
   font-size: 0.857rem !important;
   text-decoration: underline;
diff --git a/app/components/file-compare/compare-list/skeleton-loader/index.hbs b/app/components/file-compare/compare-list/skeleton-loader/index.hbs
index 63b9435d7..b6e0c706d 100644
--- a/app/components/file-compare/compare-list/skeleton-loader/index.hbs
+++ b/app/components/file-compare/compare-list/skeleton-loader/index.hbs
@@ -16,14 +16,14 @@
     <AkStack @width='full' @direction='column'>
       <div local-class='header-section'>
         <div class='px-4 py-3'>
-          <AkStack @alignItems='center' @spacing='1.5'>
+          <AkStack @alignItems='center' @spacing='1.5' local-class='header'>
 
             <AkStack @spacing='0.5' @alignItems='center'>
               <AkSkeleton @variant='circular' @width='24px' @height='24px' />
               <AkSkeleton @width='80px' @height='19px' />
             </AkStack>
 
-            <AkDivider local-class='divider' />
+            <AkDivider @direction='vertical' />
 
             <AkStack @spacing='0.5' @alignItems='center'>
               <AkSkeleton @width='20px' @height='20px' />
diff --git a/app/components/file-compare/compare-list/skeleton-loader/index.scss b/app/components/file-compare/compare-list/skeleton-loader/index.scss
index 9e487dbfa..ccb0eb134 100644
--- a/app/components/file-compare/compare-list/skeleton-loader/index.scss
+++ b/app/components/file-compare/compare-list/skeleton-loader/index.scss
@@ -13,10 +13,6 @@
   color: var(--file-compare-list-skeleton-loader-breadcrumbs-seperator-color);
 }
 
-.divider {
-  width: 1px;
+.header {
   height: 26px;
-  background-color: var(
-    --file-compare-list-skeleton-loader-divider-background-color
-  );
 }
diff --git a/app/components/file-compare/header/index.hbs b/app/components/file-compare/header/index.hbs
index 672631092..c1a71cadb 100644
--- a/app/components/file-compare/header/index.hbs
+++ b/app/components/file-compare/header/index.hbs
@@ -21,7 +21,12 @@
       local-class='file-compare-header-project-overview'
       data-test-fileCompareHeader-projectOverview
     >
-      <AkStack @width='full' @alignItems='center' @spacing={{1.5}}>
+      <AkStack
+        @width='full'
+        @alignItems='center'
+        @spacing={{1.5}}
+        local-class='project-overview'
+      >
         <AkStack @alignItems='center' @spacing={{1}}>
           <div local-class='file-icon'>
             <img
@@ -41,7 +46,7 @@
           </AkTypography>
         </AkStack>
 
-        <AkDivider local-class='divider' />
+        <AkDivider @direction='vertical' local-class='divider' />
 
         <AkStack @alignItems='center' @spacing='0.5'>
           <AkIcon @variant='outlined' @iconName='text-snippet' />
@@ -52,7 +57,7 @@
         </AkStack>
 
         {{#if @project}}
-          <AkDivider local-class='divider' />
+          <AkDivider @direction='vertical' local-class='divider' />
 
           <AkStack @alignItems='center' @spacing='0.5'>
             <AkIcon @variant='outlined' @iconName='folder' />
@@ -65,7 +70,7 @@
           </AkStack>
         {{/if}}
 
-        <AkDivider local-class='divider' />
+        <AkDivider @direction='vertical' local-class='divider' />
 
         <AkStack @alignItems='center'>
           <AkIcon
diff --git a/app/components/file-compare/header/index.scss b/app/components/file-compare/header/index.scss
index 88ad12ab6..f70e14452 100644
--- a/app/components/file-compare/header/index.scss
+++ b/app/components/file-compare/header/index.scss
@@ -13,10 +13,12 @@
     border: 1px solid var(--file-compare-header-dark-border-color);
     padding: 1em 1.5em;
 
+    .project-overview {
+      height: 26px;      
+    }
+    
     .divider {
-      width: 1px;
-      height: 26px;
-      background-color: var(--file-compare-header-divider-background-color);
+      border-color: var(--file-compare-header-divider-background-color) !important;
     }
 
     .file-icon {
diff --git a/app/components/project-list/header/index.hbs b/app/components/project-list/header/index.hbs
index e3fc42971..a034f84e9 100644
--- a/app/components/project-list/header/index.hbs
+++ b/app/components/project-list/header/index.hbs
@@ -52,7 +52,7 @@
       @width='full'
       local-class='header-home-page-sorting-filter'
     >
-      <AkStack @alignItems='center'>
+      <AkStack @alignItems='center' local-class='home-page-header-height'>
         <AkSelect
           @onChange={{this.filterPlatformChange}}
           @options={{this.platformObjects}}
@@ -128,7 +128,11 @@
         </AkSelect>
 
         {{#if this.showClearFilter}}
-          <AkDivider local-class='divider' />
+          <AkDivider
+            local-class='divider'
+            @direction='vertical'
+            @color='dark'
+          />
 
           <AkButton
             @color='textSecondary'
diff --git a/app/components/project-list/header/index.scss b/app/components/project-list/header/index.scss
index 086331ab7..dd4aadd56 100644
--- a/app/components/project-list/header/index.scss
+++ b/app/components/project-list/header/index.scss
@@ -40,12 +40,13 @@
 }
 
 .divider {
-  width: 1px;
-  height: 32px;
-  background-color: var(--project-list-header-divider-background-color);
   margin-left: 0.714em;
 }
 
+.home-page-header-height {
+  height: 32px;
+}
+
 .clear-filter-label {
   font-size: 0.857rem !important;
   text-decoration: underline;
diff --git a/app/components/sbom/app-list/header/index.hbs b/app/components/sbom/app-list/header/index.hbs
index b7e907b2e..b23516a61 100644
--- a/app/components/sbom/app-list/header/index.hbs
+++ b/app/components/sbom/app-list/header/index.hbs
@@ -80,7 +80,7 @@
     </AkSelect>
 
     {{#if this.showClearFilter}}
-      <AkDivider local-class='divider' />
+      <AkDivider @direction='vertical' local-class='divider' />
 
       <AkButton
         @color='textSecondary'
diff --git a/app/components/sbom/app-list/header/index.scss b/app/components/sbom/app-list/header/index.scss
index 62ba2921b..714d6b083 100644
--- a/app/components/sbom/app-list/header/index.scss
+++ b/app/components/sbom/app-list/header/index.scss
@@ -10,6 +10,7 @@
 
 .header-sbom-page-sorting-filter {
   padding: 0.785em 1.285em;
+  height: 52px;
 }
 
 .filter-input {
@@ -55,9 +56,6 @@
 }
 
 .divider {
-  width: 1px;
-  height: 32px;
-  background-color: var(--sbom-app-list-header-divider-background-color);
   margin-left: 0.714em;
 }
 
diff --git a/app/components/security/analysis-list/index.hbs b/app/components/security/analysis-list/index.hbs
index 76a9b21a7..b18c39f04 100644
--- a/app/components/security/analysis-list/index.hbs
+++ b/app/components/security/analysis-list/index.hbs
@@ -4,7 +4,7 @@
     @reloadAnalysesList={{this.reloadAnalysisList}}
   >
     <:analysesFilter>
-      <AkStack>
+      <AkStack local-class='analyses-filter'>
         <AkSelect
           @onChange={{this.filterVulnerabilityType}}
           @options={{this.vulnerabilityTypes}}
@@ -44,7 +44,7 @@
         </AkSelect>
 
         {{#if this.showClearFilter}}
-          <AkDivider local-class='divider' />
+          <AkDivider @direction='vertical' local-class='divider' />
 
           <AkButton
             @color='textSecondary'
diff --git a/app/components/security/analysis-list/index.scss b/app/components/security/analysis-list/index.scss
index a347f1316..9f7842e43 100644
--- a/app/components/security/analysis-list/index.scss
+++ b/app/components/security/analysis-list/index.scss
@@ -38,10 +38,11 @@
   font-size: 0.857rem !important;
 }
 
-.divider {
-  width: 1px;
+.analyses-filter {
   height: 32px;
-  background-color: var(--security-analysis-list-divider-background-color);
+}
+
+.divider {
   margin-left: 0.714em;
 }
 
diff --git a/app/components/storeknox/inventory/pending-review/index.hbs b/app/components/storeknox/inventory/pending-review/index.hbs
index 395b10cb2..eed9ee15f 100644
--- a/app/components/storeknox/inventory/pending-review/index.hbs
+++ b/app/components/storeknox/inventory/pending-review/index.hbs
@@ -37,7 +37,7 @@
         </:default>
       </AkButton>
 
-      <AkDivider local-class='divider' />
+      <AkDivider local-class='divider' /> //TODO: change this to @variant="vertical"
     {{/if}}
 
     <AkLink @route='authenticated.storeknox.review-logs'>
diff --git a/app/styles/_component-variables.scss b/app/styles/_component-variables.scss
index b757afd07..b7c4745c9 100644
--- a/app/styles/_component-variables.scss
+++ b/app/styles/_component-variables.scss
@@ -722,9 +722,6 @@ body {
   --appmonitoring-settings-header-filter-option-hover-background: var(
     --hover-light-background
   );
-  --appmonitoring-settings-header-divider-background-color: var(
-    --neutral-grey-200
-  );
   --appmonitoring-settings-header-clear-filter-color: var(--neutral-grey-600);
   --appmonitoring-settings-header-clear-filter-hover-color: var(--primary-main);
 
@@ -764,7 +761,6 @@ body {
   --sbom-app-list-header-filter-option-hover-background: var(
     --hover-light-background
   );
-  --sbom-app-list-header-divider-background-color: var(--neutral-grey-200);
   --sbom-app-list-header-clear-filter-color: var(--neutral-grey-600);
   --sbom-app-list-header-clear-filter-hover-color: var(--primary-main);
 
@@ -1307,9 +1303,6 @@ body {
   --file-compare-list-skeleton-loader-breadcrumbs-seperator-color: var(
     --neutral-grey-500
   );
-  --file-compare-list-skeleton-loader-divider-background-color: var(
-    --border-color-2
-  );
 
   // variables for user-login
   --user-login-footer-background-color: var(--neutral-grey-100);
@@ -1559,7 +1552,6 @@ body {
   --project-list-header-filter-option-hover-background: var(
     --hover-light-background
   );
-  --project-list-header-divider-background-color: var(--neutral-grey-200);
   --project-list-header-clear-filter-color: var(--neutral-grey-600);
   --project-list-header-clear-filter-hover-color: var(--primary-main);