complete page content alignment across all dashboard pages

appknox · Nov 19, 2024 · 6dcea16 · 6dcea16
1 parent d7c1d45
commit 6dcea16
Show file tree

Hide file tree

Showing 84 changed files with 720 additions and 744 deletions.
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/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.scss b/app/components/file-compare/header/index.scss
@@ -1,11 +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 {
+    background-color: var(--file-compare-background-light);
+    width: 100%;
     padding: 1.2857em 0em;
   }
 
@@ -49,8 +49,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 +65,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/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-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'>
+    <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 {
+    padding: 1.5em 0;
+  }
 
-    .api-scan-tabs-container {
-      top: 3.5em;
-    }
+  .api-scan-tabs-container {
+    top: 3.5em;
   }
 
   .bagde-count-text {

diff --git a/app/components/file-details/dynamic-scan/header/index.scss b/app/components/file-details/dynamic-scan/header/index.scss
@@ -7,7 +7,6 @@
 }
 
 .breadcrumb-container {
-  top: -0.5em;
   margin: 0;
   padding: 1.5em 0em;
 }

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/index.hbs b/app/components/file-details/index.hbs
@@ -1,27 +1,25 @@
 <div local-class='file-details-root'>
-  <div local-class='file-details-container'>
-    <AkBreadcrumbs::Container
-      class='mt-2 mb-3'
-      data-test-fileDetails-breadcrumbContainer
-    >
-      {{#each this.breadcrumbItems as |item|}}
-        <AkBreadcrumbs::Item
-          @route={{item.route}}
-          @model={{item.model}}
-          @linkTitle={{item.linkTitle}}
-          data-test-fileDetails-breadcrumbItem='{{item.linkTitle}}'
-        />
-      {{/each}}
-    </AkBreadcrumbs::Container>
+  <AkBreadcrumbs::Container
+    class='mt-2 mb-3'
+    data-test-fileDetails-breadcrumbContainer
+  >
+    {{#each this.breadcrumbItems as |item|}}
+      <AkBreadcrumbs::Item
+        @route={{item.route}}
+        @model={{item.model}}
+        @linkTitle={{item.linkTitle}}
+        data-test-fileDetails-breadcrumbItem='{{item.linkTitle}}'
+      />
+    {{/each}}
+  </AkBreadcrumbs::Container>
 
-    <AkStack @direction='column' @spacing='2.5'>
-      <FileDetails::Summary @file={{@file}} />
+  <AkStack @direction='column' @spacing='2.5'>
+    <FileDetails::Summary @file={{@file}} />
 
-      <FileDetails::ScanActions @file={{@file}} />
+    <FileDetails::ScanActions @file={{@file}} />
 
-      <FileDetails::InsightsWrapper @file={{@file}} />
-    </AkStack>
+    <FileDetails::InsightsWrapper @file={{@file}} />
+  </AkStack>
 
-    <FileDetails::VulnerabilityAnalysis @file={{@file}} />
-  </div>
+  <FileDetails::VulnerabilityAnalysis @file={{@file}} />
 </div>
diff --git a/app/components/file-details/index.scss b/app/components/file-details/index.scss
@@ -1,10 +1,4 @@
 .file-details-root {
   background: var(--file-details-background-color);
-  margin: -0.5em;
-  padding: 0.5em;
-}
-
-.file-details-container {
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: 0.5em 0em;
 }