UI/fix icon colors (#13601)

ui/app/helpers/mountable-auth-methods.js

@@ -18,24 +18,28 @@ const MOUNTABLE_AUTH_METHODS = [
     value: 'aws',
     type: 'aws',
     category: 'cloud',
+    glyph: 'aws-color',
   },
   {
     displayName: 'Azure',
     value: 'azure',
     type: 'azure',
     category: 'cloud',
+    glyph: 'azure-color',
   },
   {
     displayName: 'Google Cloud',
     value: 'gcp',
     type: 'gcp',
     category: 'cloud',
+    glyph: 'gcp-color',
   },
   {
     displayName: 'GitHub',
     value: 'github',
     type: 'github',
     category: 'cloud',
+    glyph: 'github-color',
   },
   {
     displayName: 'JWT',
@@ -56,6 +60,7 @@ const MOUNTABLE_AUTH_METHODS = [
     value: 'kubernetes',
     type: 'kubernetes',
     category: 'infra',
+    glyph: 'kubernetes-color',
   },
   {
     displayName: 'LDAP',
@@ -69,6 +74,7 @@ const MOUNTABLE_AUTH_METHODS = [
     value: 'okta',
     type: 'okta',
     category: 'infra',
+    glyph: 'okta-color',
   },
   {
     displayName: 'RADIUS',

ui/app/helpers/mountable-secret-engines.js

@@ -34,12 +34,14 @@ const MOUNTABLE_SECRET_ENGINES = [
     value: 'aws',
     type: 'aws',
     category: 'cloud',
+    glyph: 'aws-color',
   },
   {
     displayName: 'Azure',
     value: 'azure',
     type: 'azure',
     category: 'cloud',
+    glyph: 'azure-color',
   },
   {
     displayName: 'Consul',
@@ -58,12 +60,14 @@ const MOUNTABLE_SECRET_ENGINES = [
     value: 'gcp',
     type: 'gcp',
     category: 'cloud',
+    glyph: 'gcp-color',
   },
   {
     displayName: 'Google Cloud KMS',
     value: 'gcpkms',
     type: 'gcpkms',
     category: 'cloud',
+    glyph: 'gcp-color',
   },
   {
     displayName: 'KV',

ui/app/styles/components/empty-state.scss

@@ -60,7 +60,8 @@
   }
 }
 
-.empty-state-icon > .hs-icon {
+.empty-state-icon > .hs-icon,
+.empty-state-icon > .flight-icon {
   float: left;
   margin-right: $spacing-xs;
 }

ui/app/styles/components/page-header.scss

@@ -24,6 +24,10 @@
     margin-top: $size-1;
   }
 
+  .title-with-icon {
+    display: flex;
+  }
+
   .breadcrumb + .level .title {
     margin-top: $size-4;
   }

ui/app/styles/components/toolbar.scss

@@ -127,5 +127,6 @@
   .diff-status {
     display: flex;
     direction: rtl;
+    align-items: center;
   }
 }

ui/app/templates/components/alert-popup.hbs

@@ -11,9 +11,7 @@
         {{this.type.text}}
       </div>
       {{#if this.message}}
-        <p class="message-body {{if @isPreformatted "pre"}}" data-test-flash-message-body="true" test="another attribute">
+        <p class="message-body {{if @isPreformatted "pre"}}" data-test-flash-message-body="true">{{this.message}}</p>
-          {{this.message}}
-        </p>
       {{/if}}
     </div>
   </div>

ui/app/templates/components/clients/history.hbs

@@ -149,7 +149,7 @@
                       </div>
                       <div class="control">
                         <button type="button" class="button is-ghost" {{action "resetData"}}>
-                          <Icon @glyph="trash" class="has-text-grey" />
+                          <Icon @name="trash" class="has-text-grey" />
                         </button>
                       </div>
                     </li>

ui/app/templates/components/diff-version-selector.hbs

@@ -30,11 +30,11 @@
                       (not leftSideSecretVersion.deleted)
                     )
                   }}
-                    <Icon @glyph="check-circle-outline" class="has-text-success is-pulled-right" />
+                    <Icon @name="check-circle" class="has-text-success is-pulled-right" />
                   {{else if leftSideSecretVersion.destroyed}}
-                    <Icon @glyph="cancel-square-fill" class="has-text-danger is-pulled-right" />
+                    <Icon @name="x-square" class="has-text-danger is-pulled-right" />
                   {{else if leftSideSecretVersion.deleted}}
-                    <Icon @glyph="cancel-square-fill" class="has-text-grey is-pulled-right" />
+                    <Icon @name="x-square" class="has-text-grey is-pulled-right" />
                   {{/if}}
                 </button>
               </li>
@@ -74,11 +74,11 @@
                       (not rightSideSecretVersion.deleted)
                     )
                   }}
-                    <Icon @glyph="check-circle-outline" class="has-text-success is-pulled-right" />
+                    <Icon @name="check-circle" class="has-text-success is-pulled-right" />
                   {{else if rightSideSecretVersion.destroyed}}
-                    <Icon @glyph="cancel-square-fill" class="has-text-danger is-pulled-right" />
+                    <Icon @name="x-square" class="has-text-danger is-pulled-right" />
                   {{else if rightSideSecretVersion.deleted}}
-                    <Icon @glyph="cancel-square-fill" class="has-text-grey is-pulled-right" />
+                    <Icon @name="x-square" class="has-text-grey is-pulled-right" />
                   {{/if}}
                 </button>
               </li>
@@ -91,7 +91,7 @@
     {{#if this.statesMatch}}
       <div class="diff-status">
         <span>States match</span>
-        <Icon @glyph="check-circle-fill" class="has-text-success" />
+        <Icon @name="check-circle-fill" class="has-text-success" />
       </div>
     {{/if}}
   </div>

ui/app/templates/components/mount-backend-form.hbs

@@ -1,10 +1,9 @@
 <PageHeader as |p|>
   <p.levelLeft>
-    <h1 class="title is-3" data-test-mount-form-header="true">
+    <h1 class="title is-3 title-with-icon" data-test-mount-form-header="true">
       {{#if this.showEnable}}
         {{#with (find-by "type" this.mountModel.type this.mountTypes) as |typeInfo|}}
-          <Icon @name={{or typeInfo.glyph typeInfo.type}} class="has-text-grey-light" />
+          <Icon @name={{or typeInfo.glyph typeInfo.type}} @size="24" class="has-text-grey-light" />
-
           {{#if (eq this.mountType "auth")}}
             {{concat "Enable " typeInfo.displayName " Authentication Method"}}
           {{else}}