complete page content alignment across all dashboard pages

appknox · Nov 22, 2024 · 1f4ff53 · 1f4ff53
1 parent 1a8d4e7
commit 1f4ff53
Show file tree

Hide file tree

Showing 102 changed files with 904 additions and 949 deletions.
diff --git a/app/components/app-monitoring/details/index.hbs b/app/components/app-monitoring/details/index.hbs
@@ -2,7 +2,7 @@
   @direction='column'
   @width='full'
   local-class='app-details-container'
-  class='pl-3 pt-3 pr-3'
+  class='pt-3'
   data-test-app-details-container
 >
   <AkStack

diff --git a/app/components/app-monitoring/index.scss b/app/components/app-monitoring/index.scss
@@ -1,5 +1,5 @@
 .app-monitoring-container {
   width: 100%;
-  padding: 0.714em 4.285em 0;
+  padding: 0.714em 0;
   box-sizing: border-box;
 }
diff --git a/app/components/app-monitoring/settings/index.hbs b/app/components/app-monitoring/settings/index.hbs
@@ -8,6 +8,7 @@
     @width='full'
     @justifyContent='space-between'
     @alignItems='center'
+    @spacing='1.5'
     local-class='header-app-moitoring-page-title'
   >
     <AkStack @direction='column' @spacing='0.5'>

diff --git a/app/components/app-monitoring/version-table/index.hbs b/app/components/app-monitoring/version-table/index.hbs
@@ -2,7 +2,6 @@
   @direction='column'
   @spacing='2'
   @width='full'
-  class='px-3'
   data-test-amVersionTable-container
 >
   <AkTypography @color='textSecondary' {{style paddingLeft='1.2143em'}}>

diff --git a/app/components/file-compare/compare-list/index.scss b/app/components/file-compare/compare-list/index.scss
@@ -1,11 +1,9 @@
 .file-compare-list-root {
-  background-color: var(--file-compare-compare-list-wrapper-background-color);
   min-height: calc(100vh - 70px);
 
   .file-compare-list-files-wrapper {
     margin-top: 1.4286em;
     margin-bottom: 5.7143em;
-    padding: 0em 0.9286em;
   }
 
   .file-compare-list-file-overviews {

diff --git a/app/components/file-compare/empty/index.scss b/app/components/file-compare/empty/index.scss
@@ -1,6 +1,7 @@
 .empty-container {
-  margin-top: 4.625em;
-  margin-bottom: 4.625em;
+  background-color: var(--file-compare-background-light);
+  padding-top: 4.625em;
+  padding-bottom: 4.625em;
 
   .empty-state-vector {
     margin-bottom: 1.5625em;

diff --git a/app/components/file-compare/header/index.hbs b/app/components/file-compare/header/index.hbs
@@ -7,6 +7,7 @@
 >
   <div
     local-class='file-compare-header-breadcrumbs'
+    class='pt-2 pb-3'
     data-test-fileCompare-headerBreadcrumbs
   >
     {{yield to='breadcrumbs'}}

diff --git a/app/components/file-compare/header/index.scss b/app/components/file-compare/header/index.scss
@@ -1,12 +1,11 @@
 .file-compare-header-container {
-  background-color: var(--file-compare-header-white-background-color);
-  padding: 0em 0.7143em;
   position: sticky;
   top: -0.5em;
   z-index: 10;
 
   .file-compare-header-breadcrumbs {
-    padding: 1.2857em 0em;
+    background-color: var(--file-compare-background-light);
+    width: 100%;
   }
 
   .file-compare-header-project-overview {
@@ -49,8 +48,6 @@
 }
 
 .files-overview-container {
-  margin-left: 0.7143em;
-  margin-right: 0.7143em;
   padding: 1.4286em;
   border: 1px solid var(--file-compare-header-files-overview-border-color);
   border-top: none;
@@ -67,4 +64,4 @@
 
 .platform-apple {
   color: var(--file-compare-header-platform-ios-color);
-}
+}
diff --git a/app/components/file-compare/index.hbs b/app/components/file-compare/index.hbs
@@ -89,7 +89,7 @@
   </:headerCTA>
 </FileCompare::Header>
 
-<div local-class='file-compare-tabs' class='px-3 pb-3'>
+<div local-class='file-compare-tabs' class='pb-3'>
   <AkTabs class='w-full' as |Akt|>
     {{#each this.tabItems as |item|}}
       <Akt.tabItem

diff --git a/app/components/file-compare/index.scss b/app/components/file-compare/index.scss
@@ -1,7 +1,7 @@
 .file-compare-tabs {
   position: sticky;
   margin-top: 1.4286em;
-  top: calc(198px - 0.5em);
+  top: calc(198px - 0.53em);
   z-index: 10;
   background: var(--file-compare-tabs-background-color);
 }
diff --git a/app/components/file-compare/loader/index.scss b/app/components/file-compare/loader/index.scss
@@ -1,6 +1,6 @@
 .loading {
-  border: 1px solid var(--appmonitoring-border-color);
-  border-radius: var(--appmonitoring-border-radius);
+  border: 1px solid var(--file-compare-loader-border-color);
+  border-radius: var(--file-compare-loader-border-radius);
   width: 100%;
   min-height: 35em;
 

diff --git a/app/components/file-compare/table/index.hbs b/app/components/file-compare/table/index.hbs
@@ -1,4 +1,4 @@
-<div class='pl-3 pr-3 mb-3' data-test-fileCompare-table-root>
+<div class='mb-3' data-test-fileCompare-table-root>
   <AkPaginationProvider
     @results={{this.comparisonTableData}}
     @onItemPerPageChange={{this.onItemPerPageChange}}

diff --git a/app/components/file-compare/table/index.scss b/app/components/file-compare/table/index.scss
@@ -1,6 +1,6 @@
 .file-compare-table {
   table {
-    background-color: transparent;
+    background-color: var(--file-compare-background-light);
   }
 
   tr:first-of-type:hover td {

diff --git a/app/components/file-compare/vulnerability-details/index.hbs b/app/components/file-compare/vulnerability-details/index.hbs
@@ -67,13 +67,13 @@
 
 <AkStack
   @direction='column'
-  {{style padding='0.7143em'}}
+  {{style paddingTop='0.7143em'}}
   data-test-fileCompare-vulnerabilityDetails-root
 >
   <AkStack
     @width='full'
     local-class='file-compare-vulnerability-details-header-wrapper'
-    {{style paddingTop='1.4286em'}}
+    {{style marginTop='1.4286em'}}
     data-test-fileCompare-vulnerabilityDetails-header
   >
     <AkStack

diff --git a/app/components/file-compare/vulnerability-details/index.scss b/app/components/file-compare/vulnerability-details/index.scss
@@ -3,7 +3,7 @@
     --file-compare-vulnerability-details-header-wrapper-background-color
   );
   position: sticky;
-  top: calc(198px - 0.5em);
+  top: calc(198px - 0.54em);
   z-index: 1;
 
   .file-compare-vulnerability-details-header {

diff --git a/app/components/file-details/api-scan/index.hbs b/app/components/file-details/api-scan/index.hbs
@@ -1,55 +1,52 @@
 <div local-class='api-scan-root'>
-  <div local-class='api-scan-container'>
-    <div local-class='api-scan-breadcrumbs-container'>
-      <AkBreadcrumbs::Container
-        data-test-fileDetails-apiScan-breadcrumbContainer
-      >
-        {{#each this.breadcrumbItems as |item|}}
-          <AkBreadcrumbs::Item
-            @route={{item.route}}
-            @model={{item.model}}
-            @linkTitle={{item.linkTitle}}
-            data-test-fileDetails-apiScan-breadcrumbItem='{{item.linkTitle}}'
-          />
-        {{/each}}
-      </AkBreadcrumbs::Container>
-    </div>
 
-    <FileDetails::Summary @file={{@file}} />
+  <div local-class='api-scan-breadcrumbs-container' class='pb-3 pt-2'>
+    <AkBreadcrumbs::Container data-test-fileDetails-apiScan-breadcrumbContainer>
+      {{#each this.breadcrumbItems as |item|}}
+        <AkBreadcrumbs::Item
+          @route={{item.route}}
+          @model={{item.model}}
+          @linkTitle={{item.linkTitle}}
+          data-test-fileDetails-apiScan-breadcrumbItem='{{item.linkTitle}}'
+        />
+      {{/each}}
+    </AkBreadcrumbs::Container>
+  </div>
+
+  <FileDetails::Summary @file={{@file}} />
 
-    <div class='my-3'>
-      <AkTabs local-class='api-scan-tabs-container' as |Akt|>
-        {{#each this.tabItems as |item|}}
-          <Akt.tabItem
-            @id={{item.id}}
-            @hasBadge={{item.hasBadge}}
-            @route={{item.route}}
-            @currentWhen={{item.currentWhen}}
-            @indicatorVariant='shadow'
-            data-test-fileDetails-apiScan-tabs='{{item.id}}-tab'
-          >
-            <:badge>
-              <AkStack @alignItems='center'>
-                <AkIcon @iconName='bug-report' @size='small' />
+  <div class='my-3'>
+    <AkTabs local-class='api-scan-tabs-container' as |Akt|>
+      {{#each this.tabItems as |item|}}
+        <Akt.tabItem
+          @id={{item.id}}
+          @hasBadge={{item.hasBadge}}
+          @route={{item.route}}
+          @currentWhen={{item.currentWhen}}
+          @indicatorVariant='shadow'
+          data-test-fileDetails-apiScan-tabs='{{item.id}}-tab'
+        >
+          <:badge>
+            <AkStack @alignItems='center'>
+              <AkIcon @iconName='bug-report' @size='small' />
 
-                <AkTypography
-                  local-class='bagde-count-text'
-                  @color='inherit'
-                  @tag='span'
-                  @fontWeight='bold'
-                >
-                  {{item.badgeCount}}
-                </AkTypography>
-              </AkStack>
-            </:badge>
+              <AkTypography
+                local-class='bagde-count-text'
+                @color='inherit'
+                @tag='span'
+                @fontWeight='bold'
+              >
+                {{item.badgeCount}}
+              </AkTypography>
+            </AkStack>
+          </:badge>
 
-            <:default>{{item.label}}</:default>
-          </Akt.tabItem>
-        {{/each}}
-      </AkTabs>
+          <:default>{{item.label}}</:default>
+        </Akt.tabItem>
+      {{/each}}
+    </AkTabs>
 
-      {{yield}}
-    </div>
+    {{yield}}
   </div>
 
   {{#if this.apiScan.footerComponent}}

diff --git a/app/components/file-details/api-scan/index.scss b/app/components/file-details/api-scan/index.scss
@@ -1,30 +1,23 @@
 $container-width: 1200px;
 
 .api-scan-root {
-  padding: 0 1.5em 1.5em;
-  margin: -0.5em;
+  padding: 0 0em 1.5em;
   background-color: var(--file-details-api-scan-background-color);
   min-height: calc(100vh - 56px);
 
-  .api-scan-container {
-    max-width: $container-width;
-    margin: 0 auto;
-
-    .api-scan-breadcrumbs-container,
-    .api-scan-tabs-container {
-      position: sticky;
-      z-index: 100;
-      background-color: var(--file-details-api-scan-background-color);
-    }
+  .api-scan-breadcrumbs-container,
+  .api-scan-tabs-container {
+    position: sticky;
+    z-index: 100;
+    background-color: var(--file-details-api-scan-background-color);
+  }
 
-    .api-scan-breadcrumbs-container {
-      padding: 1.5em 0;
-      top: -0.5em;
-    }
+  .api-scan-breadcrumbs-container {
+    top: -0.5em;
+  }
 
-    .api-scan-tabs-container {
-      top: 3.5em;
-    }
+  .api-scan-tabs-container {
+    top: 3em;
   }
 
   .bagde-count-text {

diff --git a/app/components/file-details/api-scan/results/index.scss b/app/components/file-details/api-scan/results/index.scss
@@ -4,7 +4,7 @@
     --file-details-api-scan-results-tabs-container-background
   );
   position: sticky;
-  top: 6.42em;
+  top: 5.92em;
   z-index: 100;
 }
 

diff --git a/app/components/file-details/dynamic-scan/header/index.hbs b/app/components/file-details/dynamic-scan/header/index.hbs
@@ -1,6 +1,7 @@
 <AkBreadcrumbs::Container
   data-test-fileDetails-dynamicScan-header-breadcrumbContainer
   local-class='breadcrumb-container'
+  class='pb-3 pt-2'
 >
   {{#each this.breadcrumbItems as |item|}}
     <AkBreadcrumbs::Item

diff --git a/app/components/file-details/dynamic-scan/header/index.scss b/app/components/file-details/dynamic-scan/header/index.scss
@@ -8,13 +8,11 @@
 
 .breadcrumb-container {
   top: -0.5em;
-  margin: 0;
-  padding: 1.5em 0em;
 }
 
 .dast-results-sticky-tabs {
   margin-top: 1.5em;
-  top: 3.5em;
+  top: 3em;
 
   .badge-count-text {
     font-size: 0.857rem;

diff --git a/app/components/file-details/dynamic-scan/index.hbs b/app/components/file-details/dynamic-scan/index.hbs
@@ -1,9 +1,7 @@
-<FileDetails::DynamicScan::PageWrapper>
-  <FileDetails::DynamicScan::Header
-    @file={{@file}}
-    @profileId={{@profileId}}
-    @dynamicScan={{this.dynamicScan}}
-  />
+<FileDetails::DynamicScan::Header
+  @file={{@file}}
+  @profileId={{@profileId}}
+  @dynamicScan={{this.dynamicScan}}
+/>
 
-  {{yield}}
-</FileDetails::DynamicScan::PageWrapper>
+{{yield}}
diff --git a/app/components/file-details/dynamic-scan/page-wrapper/index.hbs b/app/components/file-details/dynamic-scan/page-wrapper/index.hbs
diff --git a/app/components/file-details/dynamic-scan/page-wrapper/index.scss b/app/components/file-details/dynamic-scan/page-wrapper/index.scss
diff --git a/app/components/file-details/dynamic-scan/page-wrapper/index.ts b/app/components/file-details/dynamic-scan/page-wrapper/index.ts
diff --git a/app/components/file-details/dynamic-scan/results/index.scss b/app/components/file-details/dynamic-scan/results/index.scss
@@ -9,7 +9,7 @@
 .dast-results-tabs {
   position: sticky;
   background-color: var(--file-details-dynamic-scan-results-background-color);
-  top: 6.4em;
+  top: 5.92em;
   z-index: 100;
   width: 100%;
 }