complete global styles migration in partner dashboard

appknox · Sep 12, 2024 · bc819a1 · bc819a1
1 parent a722a17
commit bc819a1
Show file tree

Hide file tree

Showing 47 changed files with 728 additions and 691 deletions.
diff --git a/app/components/partner/client-info/template.hbs b/app/components/partner/client-info/template.hbs
@@ -25,9 +25,9 @@
             {{#if @client.lastUploadedOn}}
               {{dayjs-from-now @client.lastUploadedOn}}
             {{else}}
-              <em class='text-lightgray'>
+              <AkTypography @color='neutral' {{style fontStyle='italic'}}>
                 {{t 'noUploads'}}
-              </em>
+              </AkTypography>
             {{/if}}
           </div>
         </div>
@@ -79,11 +79,15 @@
       {{/if}}
       {{#if (and @showDetailLink this.partner.access.list_projects)}}
         <div local-class='action' data-test-detail-page-link>
-          <LinkTo
-            @route='authenticated.partner.client'
-            @model={{@client.id}}
-            class='button is-primary'
-          ><AkIcon @iconName='arrow-forward' /></LinkTo>
+          <AkLink @route='authenticated.partner.client' @model={{@client.id}}>
+            <AkButton
+              @variant='outlined'
+              @color='primary'
+              {{style minWidth='50px'}}
+            >
+              <AkIcon @iconName='arrow-forward' @color='primary' />
+            </AkButton>
+          </AkLink>
         </div>
       {{/if}}
     </div>

diff --git a/app/components/partner/client-list/index.hbs b/app/components/partner/client-list/index.hbs
@@ -1,4 +1,4 @@
-<div local-class='partner-client-list' class='padding-h-1 padding-b-2'>
+<div local-class='partner-client-list' class='pb-4 px-2'>
   <div local-class='header'>
     <h3 local-class='title'>{{t 'clients'}}</h3>
 

diff --git a/app/components/partner/client-plan/template.hbs b/app/components/partner/client-plan/template.hbs
@@ -15,13 +15,13 @@
         </div>
         <div local-class='plan-status' data-test-plan-status>
           {{#if this.clientPlan.limitedScans}}
-            <strong class='margin-r-h' data-test-scans-left>
+            <strong class='mr-1' data-test-scans-left>
               {{this.clientPlan.scansLeft}}
               {{t 'pluralScans' itemCount=this.clientPlan.scansLeft}}
             </strong>
             {{t 'remaining'}}
           {{else}}
-            <strong class='margin-r-h' data-test-projects-left>
+            <strong class='mr-1' data-test-projects-left>
               {{this.clientPlan.projectsLimit}}
               {{t 'pluralApps' itemCount=this.clientPlan.projectsLimit}}
             </strong>

diff --git a/app/components/partner/client-project-detail/index.hbs b/app/components/partner/client-project-detail/index.hbs
@@ -1,7 +1,7 @@
 <AkStack local-class='project-card' @alignItems='center'>
-  <AkIcon
-    @iconName='{{@project.platformIcon}}'
-    class='platform-icon--{{@project.platformIcon}}'
-  />
-  <span class='black-text'>{{@project.packageName}}</span>
+  <AppPlatformIcon @platform='{{@project.platformIcon}}' />
+
+  <AkTypography>
+    {{@project.packageName}}
+  </AkTypography>
 </AkStack>
diff --git a/app/components/partner/client-project-list/index.hbs b/app/components/partner/client-project-list/index.hbs
@@ -3,12 +3,15 @@
     <div local-class='header'>
       <h3 local-class='title' data-test-title>{{t 'projects'}}</h3>
 
-      <div
-        class='badge-square is-default margin-l-1'
+      <AkStack
+        @justifyContent='center'
+        @alignItems='center'
+        local-class='badge'
+        class='ml-1'
         data-test-total-projects-count
       >
         {{this.totalParnterClientProjectsCount}}
-      </div>
+      </AkStack>
     </div>
 
     <AkPaginationProvider
@@ -44,17 +47,29 @@
               }}'
               data-test-table-header
             >
-              <div class='bold' data-test-table-header-platform>
+              <AkTypography
+                @fontWeight='bold'
+                data-test-table-header-item
+                data-test-table-header-platform
+              >
                 {{t 'platform'}}
-              </div>
+              </AkTypography>
 
-              <div class='bold' data-test-table-header-package_name>
+              <AkTypography
+                @fontWeight='bold'
+                data-test-table-header-item
+                data-test-table-header-package_name
+              >
                 {{t 'packageName'}}
-              </div>
+              </AkTypography>
 
-              <div class='bold' data-test-table-header-created_on>
+              <AkTypography
+                @fontWeight='bold'
+                data-test-table-header-item
+                data-test-table-header-created_on
+              >
                 {{t 'createdOn'}}
-              </div>
+              </AkTypography>
             </div>
 
             <div local-class='table-body' data-test-table-body>

diff --git a/app/components/partner/client-project-list/index.scss b/app/components/partner/client-project-list/index.scss
@@ -76,3 +76,15 @@
   align-items: center;
   justify-content: center;
 }
+
+.badge {
+  font-size: 0.857em;
+  min-width: 24px;
+  min-height: 20px;
+  padding: 0em 0.357em;
+  margin-left: 0.7em;
+  border-radius: var(--border-radius);
+  font-weight: var(--font-weight-regular);
+  background-color: var(--neutral-grey-200);
+  color: var(--text-secondary);
+}
diff --git a/app/components/partner/client-project-list/item/index.hbs b/app/components/partner/client-project-list/item/index.hbs
@@ -1,27 +1,28 @@
-<AkStack
-  @alignItems='center'
-  local-class='platform platform-{{@project.platformIcon}}'
-  data-test-platform='{{@project.platformIcon}}'
->
-  <AkIcon @iconName='{{@project.platformIcon}}' />
+<AkStack @alignItems='center' data-test-platform='{{@project.platformIcon}}'>
+  <AppPlatformIcon @platform='{{@project.platformIcon}}' />
 </AkStack>
+
 <div
   local-class='package-name'
   title='Project ID: {{@project.id}}'
   data-test-package_name
 >
   {{@project.packageName}}
 </div>
-<div local-class='created-on' class='text-lightgray' data-test-created_on>
+
+<AkTypography @color='textSecondary' @fontWeight='light' data-test-created_on>
   {{day-js date=@project.createdOn format='DD MMM YYYY'}}
-</div>
+</AkTypography>
+
 {{#if (and @enableViewFiles @clientId @project.id)}}
-  <LinkTo
+  <AkLink
     @route='authenticated.partner.project'
     @models={{array @clientId @project.id}}
-    class='button is-primary margin-l-3q'
+    @underline='none'
+    @color='primary'
+    local-class='view-files-button'
     data-test-view-files
   >
     {{t 'viewUploads'}}
-  </LinkTo>
+  </AkLink>
 {{/if}}
diff --git a/app/components/partner/client-project-list/item/index.scss b/app/components/partner/client-project-list/item/index.scss
@@ -3,15 +3,15 @@
   color: var(--black-500);
 }
 
-.platform-android {
-  color: var(--android);
-}
-.platform-apple {
-  color: var(--ios);
-}
-
 .version {
   display: grid;
   align-items: center;
   font-size: 0.95em;
 }
+
+.view-files-button {
+  height: 32px;
+  padding-left: 0.7143em;
+  padding-right: 0.7143em;
+  border: 1px solid var(--primary);
+}
diff --git a/app/components/partner/client-report-download/index.hbs b/app/components/partner/client-report-download/index.hbs
@@ -30,35 +30,47 @@
             </:tooltipContent>
 
             <:default>
-              <button
-                type='button'
-                class='button is-primary is-small'
+              <AkButton
+                @variant='outlined'
+                @disabled={{this.isDownloadButtonDisabled}}
                 local-class='{{if
                   this.isGenerating
                   "button-progress"
                 }} download-button button-small'
-                disabled={{this.isDownloadButtonDisabled}}
                 {{on 'click' (fn this.onDownload this.latestReport.id)}}
                 data-test-download-report-button
               >
-                {{#if this.isGenerating}}
-                  <span
-                    class='is-progress'
-                    local-class='progress-loader'
-                    style={{this.generationProgressStyle}}
-                    data-test-download-button-generating-progress
-                  ></span>
-                  <span
-                    class='vertical-align-center'
-                    data-test-download-button-generating-label
-                  >{{t 'generating'}}</span>
-                {{else}}
-                  <span
-                    class='vertical-align-center'
-                    data-test-download-button-download-label
-                  ><AkIcon @iconName='download' />&nbsp; {{t 'download'}}</span>
-                {{/if}}
-              </button>
+
+                <:leftIcon>
+                  {{#unless this.isGenerating}}
+                    <AkIcon @iconName='download' />
+                  {{/unless}}
+                </:leftIcon>
+
+                <:default>
+                  {{#if this.isGenerating}}
+                    <span
+                      local-class='progress-loader is-progress'
+                      style={{this.generationProgressStyle}}
+                      data-test-download-button-generating-progress
+                    ></span>
+
+                    <AkTypography
+                      @color='inherit'
+                      data-test-download-button-generating-label
+                    >
+                      {{t 'generating'}}
+                    </AkTypography>
+                  {{else}}
+                    <AkTypography
+                      @color='inherit'
+                      data-test-download-button-download-label
+                    >
+                      {{t 'download'}}
+                    </AkTypography>
+                  {{/if}}
+                </:default>
+              </AkButton>
             </:default>
           </AkTooltip>
         </div>
@@ -78,16 +90,15 @@
             </:tooltipContent>
 
             <:default>
-              <button
-                type='button'
-                class='button is-default'
-                local-class='button-small'
+              <AkIconButton
+                @variant='outlined'
                 disabled={{this.isGenerateButtonDisabled}}
+                local-class='button-small'
                 {{on 'click' this.onGenerate}}
                 data-test-generate-report-button
               >
                 <AkIcon @iconName='refresh' />
-              </button>
+              </AkIconButton>
             </:default>
           </AkTooltip>
         </div>

diff --git a/app/components/partner/client-report-download/index.scss b/app/components/partner/client-report-download/index.scss
@@ -9,9 +9,8 @@
 }
 
 .button-progress {
-  &:hover {
+  &:disabled {
     background-color: transparent !important;
-    color: var(--primary) !important;
   }
 }
 
@@ -38,3 +37,28 @@
   justify-content: center;
   gap: 0.5rem;
 }
+
+.is-progress {
+  transition: width 0.6s ease;
+  background-image: linear-gradient(
+    -45deg,
+    #fff2f1 25%,
+    transparent 25%,
+    transparent 50%,
+    #fff2f1 50%,
+    #fff2f1 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 20px 20px;
+  animation: progress 0.5s linear infinite;
+}
+
+@keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 20px 0px;
+  }
+}
diff --git a/app/components/partner/client-report-download/report-password/index.hbs b/app/components/partner/client-report-download/report-password/index.hbs
@@ -6,16 +6,14 @@
       </:tooltipContent>
 
       <:default>
-        <button
-          type='button'
-          class='button is-default no-border no-hover-button'
+        <AkIconButton
           local-class='dropdown-toggle'
           id='password-toggle-{{@reportId}}'
           {{on 'click' this.togglePassTrayVisibility}}
           data-test-dropdown-toggle
         >
           <AkIcon @iconName='key' />
-        </button>
+        </AkIconButton>
       </:default>
     </AkTooltip>
 
@@ -47,18 +45,22 @@
                 data-test-report-password-value
               />
 
-              <button
-                type='button'
-                class='button is-primary highlighted-button copy-unlock-key-button-{{@reportId}}'
+              <AkButton
+                {{on 'click' this.onCopyPassword}}
+                class='copy-unlock-key-button-{{@reportId}}'
                 local-class='copy-button button-small'
                 data-clipboard-target='#unlock-key-{{@reportId}}'
                 data-clipboard-action='copy'
-                {{on 'click' this.onCopyPassword}}
                 data-test-report-password-copy-button
               >
-                <AkIcon @iconName='content-copy' />
-                {{t 'copy'}}
-              </button>
+                <:leftIcon>
+                  <AkIcon @iconName='content-copy' />
+                </:leftIcon>
+
+                <:default>
+                  {{t 'copy'}}
+                </:default>
+              </AkButton>
             </div>
           {{else if this.apiError}}
             <div local-class='password-loading-error' data-test-api-error>