feat(cc-tile-scalability): replace error message to get rid of cc-error

CleverCloud · Jul 3, 2023 · 4567dcf · 4567dcf
1 parent 4482990
commit 4567dcf
Showing 1 changed file with 28 additions and 2 deletions.
diff --git a/src/components/cc-tile-scalability/cc-tile-scalability.js b/src/components/cc-tile-scalability/cc-tile-scalability.js
@@ -1,7 +1,10 @@
-import '../cc-error/cc-error.js';
+import '../cc-icon/cc-icon.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import {
+  iconRemixAlertFill as iconAlert,
+} from '../../assets/cc-remix.icons.js';
 import { i18n } from '../../lib/i18n.js';
 import { instanceDetailsStyles, tileStyles } from '../../styles/info-tiles.js';
 import { skeletonStyles } from '../../styles/skeleton.js';
@@ -88,7 +91,12 @@ export class CcTileScalability extends LitElement {
       ` : ''}
 
       ${this.error ? html`
-        <cc-error class="tile_message">${i18n('cc-tile-scalability.error')}</cc-error>
+        <div class="tile_message">
+          <div class="error-message">
+            <cc-icon .icon="${iconAlert}" accessible-name="${i18n('cc-tile-scalability.error.icon-a11y-name')}" class="icon-warning"></cc-icon>
+            <p>${i18n('cc-tile-scalability.error')}</p>
+          </div>
+        </div>
       ` : ''}
     `;
   }
@@ -123,6 +131,24 @@ export class CcTileScalability extends LitElement {
         [title] {
           cursor: help;
         }
+
+        .error-message {
+          display: grid;
+          gap: 0.75em;
+          grid-template-columns: min-content 1fr;
+          text-align: left;
+        }
+
+        .error-message p {
+          margin: 0;
+        }
+
+        .icon-warning {
+          align-self: center;
+          color: var(--cc-color-text-warning);
+
+          --cc-icon-size: 1.25em;
+        }
       `,
     ];
   }