Updated some styles to check for a better fit

Signed-off-by: Dave Shanley <[email protected]>
pb33f · Jul 20, 2023 · 253b516 · 253b516
1 parent fcd610c
commit 253b516
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git a/ui/src/components/transaction/transaction-item.css.ts b/ui/src/components/transaction/transaction-item.css.ts
@@ -55,7 +55,7 @@ export default css`
   }
   
   .invalid {
-    color: var(--warn-color);
+    color: var(--error-color);
     font-size: 25px;
     margin-top: 2px;
     margin-right: 12px;
@@ -67,7 +67,16 @@ export default css`
     margin-top: 2px;
     margin-right: 12px;
   }
-  
+
+  .failed {
+    color: var(--dark-font-color);
+    font-size: 25px;
+    margin-top: 2px;
+    margin-right: 12px;
+  }
+
+
+
   .delay {
     text-align: right;
     min-width: 60px;

diff --git a/ui/src/components/transaction/transaction-item.ts b/ui/src/components/transaction/transaction-item.ts
@@ -93,7 +93,13 @@ export class HttpTransactionItemComponent extends LitElement {
                     this._httpTransaction.responseValidation?.length > 0) {
                     statusIcon = html`<sl-icon name="exclamation-circle" class="invalid"></sl-icon>`
                 } else {
-                    statusIcon = html`<sl-icon name="check-lg" class="valid"></sl-icon>`
+
+                    if (this._httpTransaction.httpResponse?.statusCode >= 400) {
+                        statusIcon = html`<sl-icon name="x-square" class="failed"></sl-icon>`
+                    } else {
+                        statusIcon = html`<sl-icon name="check-lg" class="valid"></sl-icon>`
+                    }
+
                 }
             }
         }

diff --git a/ui/src/components/transaction/transaction-view.css.ts b/ui/src/components/transaction/transaction-view.css.ts
@@ -43,6 +43,7 @@ export default css`
   .violation-badge::part(base) {
     font-size: 0.5rem;
     margin-left: 5px;
+    --sl-color-danger-600: var(--error-color);
   }
   
   h2 {

diff --git a/ui/src/components/transaction/transaction-view.ts b/ui/src/components/transaction/transaction-view.ts
@@ -166,7 +166,7 @@ export class HttpTransactionViewComponent extends LitElement {
                     total += this._httpTransaction.responseValidation.length;
                 }
                 violations = html`Violations
-                <sl-badge variant="warning" class="violation-badge">${total}</sl-badge>`;
+                <sl-badge variant="danger" class="violation-badge">${total}</sl-badge>`;
             }
             const noData: TemplateResult = html`
                 <div class="empty-data ok">
@@ -215,7 +215,10 @@ export class HttpTransactionViewComponent extends LitElement {
                 <sl-tab-group id="tabs" @sl-tab-show=${this.tabSelected}>
                     <sl-tab slot="nav" panel="violations" id="violation-tab" class="tab">${violations}</sl-tab>
                     <sl-tab slot="nav" panel="request" class="tab">Request</sl-tab>
-                    <sl-tab slot="nav" panel="response" class="tab">Response</sl-tab>
+                    <sl-tab slot="nav" panel="response" class="tab">Response ${(resp?.statusCode>=400) ? html`
+                        <sl-badge variant="${(resp?.statusCode>=400 && resp?.statusCode < 500) ? 'warning' : 'danger'}" class="violation-badge">
+                        <sl-icon name="exclamation-triangle"></sl-icon>
+                    </sl-badge>` : null}</sl-tab>
                     ${this._currentLinks?.length > 0 ? html`
                         <sl-tab slot="nav" panel="chain" class="tab">Chain</sl-tab>` : null}
                     <sl-tab-panel name="violations" class="tab-panel">
@@ -259,7 +262,9 @@ export class HttpTransactionViewComponent extends LitElement {
                     <sl-tab-panel name="response">
                         <sl-tab-group class="secondary-tabs" placement="start">
                             <sl-tab slot="nav" panel="response-body" class="tab-secondary">Body</sl-tab>
-                            <sl-tab slot="nav" panel="response-code" class="tab-secondary">Code</sl-tab>
+                            <sl-tab slot="nav" panel="response-code" class="tab-secondary">
+                                Code ${(resp?.statusCode>=400) ? html`
+                                <sl-badge variant="${(resp?.statusCode>=400 && resp?.statusCode < 500) ? 'warning' : 'danger'}" class="violation-badge">${resp.statusCode}</sl-badge>` : null}</sl-tab>
                             <sl-tab slot="nav" panel="response-headers" class="tab-secondary">Headers</sl-tab>
                             <sl-tab slot="nav" panel="response-cookies" class="tab-secondary">Cookies</sl-tab>
                             <sl-tab-panel name="response-code">

diff --git a/ui/src/components/violation/violation.css.ts b/ui/src/components/violation/violation.css.ts
@@ -2,7 +2,7 @@ import {css} from "lit";
 
 export default css`
   .error-icon {
-    color: var(--warn-color);
+    color: var(--error-color);
     font-size: 1.5em;
     vertical-align: bottom;
   }