Update error state visual on stack interact mode

cardstack · Dec 10, 2024 · 8bf1351 · 8bf1351
1 parent 27e51c0
commit 8bf1351
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/packages/base/cards-grid.gts b/packages/base/cards-grid.gts
@@ -298,7 +298,7 @@ class Isolated extends Component<typeof CardsGrid> {
         background-color: rgba(255, 0, 0, 0.1);
       }
       .instance-error .boundaries {
-        box-shadow: 0 0 0 1px #ff0000;
+        box-shadow: 0 0 0 1px var(--boxel-error-300);
       }
       .instance-error:hover .boundaries {
         box-shadow: 0 0 0 1px var(--boxel-dark);

diff --git a/packages/boxel-ui/addon/src/styles/variables.css b/packages/boxel-ui/addon/src/styles/variables.css
@@ -157,6 +157,7 @@
   /* Status colors */
   --boxel-error-100: #dc0202; /* alert - attention - error */
   --boxel-error-200: #ed0000;
+  --boxel-error-300: #ff0000;
   --boxel-warning-100: var(--boxel-yellow); /* warning - notification */
   --boxel-success-100: var(--boxel-green);
   --boxel-success-200: var(--boxel-teal);

diff --git a/packages/host/app/components/operator-mode/card-error-detail.gts b/packages/host/app/components/operator-mode/card-error-detail.gts
@@ -5,7 +5,7 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import TriangleAlert from '@cardstack/boxel-icons/triangle-alert';
+import ExclamationCircle from '@cardstack/boxel-icons/exclamation-circle';
 
 import { dropTask } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
@@ -44,14 +44,14 @@ export default class CardErrorDetail extends Component<Signature> {
   });
 
   <template>
-    <Accordion class='error-detail' as |A|>
+    <Accordion class='error-detail {{if this.showErrorDetail "open"}}' as |A|>
       <A.Item
         data-test-error-detail-toggle
         @onClick={{fn this.toggleDetail 'schema'}}
         @isOpen={{this.showErrorDetail}}
       >
         <:title>
-          <TriangleAlert />
+          <ExclamationCircle class='error-icon' />
           An error was encountered on this card:
           <span data-test-error-title>{{@title}}</span>
         </:title>
@@ -91,24 +91,35 @@ export default class CardErrorDetail extends Component<Signature> {
 
     <style scoped>
       .error-detail {
-        flex: 1;
+        margin-top: auto;
+        max-height: fit-content;
+      }
+      .error-detail.open {
+        max-height: unset;
+      }
+      .error-detail :deep(.title) {
+        font: 600 var(--boxel-font-sm);
+        background-color: #ffe3e3;
+      }
+      .error-icon {
+        color: var(--boxel-error-300);
       }
       .actions {
         display: flex;
         justify-content: center;
         margin-top: var(--boxel-sp-lg);
       }
       .detail {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp);
         padding: var(--boxel-sp);
       }
-      .detail-item {
-        margin-top: var(--boxel-sp);
-      }
       .detail-title {
-        font: 600 var(--boxel-font);
+        font: 600 var(--boxel-font-sm);
       }
       .detail-contents {
-        font: var(--boxel-font);
+        font: var(--boxel-font-sm);
       }
       pre {
         margin-top: 0;

diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
@@ -13,6 +13,7 @@ import Component from '@glimmer/component';
 
 import { tracked, cached } from '@glimmer/tracking';
 
+import ExclamationCircle from '@cardstack/boxel-icons/exclamation-circle';
 import { formatDistanceToNow } from 'date-fns';
 import {
   task,
@@ -35,7 +36,7 @@ import {
 import { MenuItem, getContrastColor } from '@cardstack/boxel-ui/helpers';
 import { cssVar, optional } from '@cardstack/boxel-ui/helpers';
 
-import { IconTrash, IconLink, Warning } from '@cardstack/boxel-ui/icons';
+import { IconTrash, IconLink } from '@cardstack/boxel-ui/icons';
 
 import {
   type Actions,
@@ -611,10 +612,10 @@ export default class OperatorModeStackItem extends Component<Signature> {
         {{else if this.cardError}}
           <CardHeader
             @cardTypeDisplayName={{this.cardErrorTitle}}
-            @cardTypeIcon={{Warning}}
+            @cardTypeIcon={{ExclamationCircle}}
             @isTopCard={{this.isTopCard}}
             @onClose={{unless this.isBuried (perform this.closeItem)}}
-            class='stack-item-header'
+            class='stack-item-header stack-item-header-error'
             style={{cssVar
               boxel-card-header-icon-container-min-width=(if
                 this.isBuried '50px' '95px'
@@ -795,6 +796,9 @@ export default class OperatorModeStackItem extends Component<Signature> {
         min-width: 100%;
         gap: var(--boxel-sp-xxs);
       }
+      .stack-item-header-error {
+        color: var(--boxel-error-300);
+      }
 
       .stack-item-content {
         overflow: auto;
@@ -843,7 +847,6 @@ export default class OperatorModeStackItem extends Component<Signature> {
         align-items: center;
       }
       .card-error {
-        flex: 2;
         opacity: 0.4;
         border-radius: 0;
         box-shadow: none;