fix: ak divider vertical width issue

appknox · Dec 27, 2024 · c16381b · c16381b
1 parent 1846dbd
commit c16381b
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 42 deletions.
diff --git 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-monitoring-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
@@ -71,12 +71,13 @@
 }
 
 .divider {
-  width: 1px;
-  height: 32px;
-  background-color: var(--appmonitoring-settings-header-divider-background-color);
   margin-left: 0.714em;
 }
 
+.header-app-monitoring-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
@@ -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' @color='dark' />
 
             <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -80,7 +80,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/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
@@ -4,7 +4,7 @@
     @reloadAnalysesList={{this.reloadAnalysisList}}
   >
     <:analysesFilter>
-      <AkStack>
+      <AkStack local-class='analyses-filter'>
         <AkSelect
           @onChange={{this.filterVulnerabilityType}}
           @options={{this.vulnerabilityTypes}}
@@ -44,7 +44,11 @@
         </AkSelect>
 
         {{#if this.showClearFilter}}
-          <AkDivider local-class='divider' />
+          <AkDivider
+            @direction='vertical'
+            @color='dark'
+            local-class='divider'
+          />
 
           <AkButton
             @color='textSecondary'

diff --git 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
@@ -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
@@ -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);