From 948c9b027e7b7f9886056ecfeecb64c05f9de1c2 Mon Sep 17 00:00:00 2001
From: Ayo <ayo@ayco.io>
Date: Fri, 8 May 2026 21:56:36 +0200
Subject: [PATCH] refactor: use statusColor variable in template()

---
 index.html              |  2 +-
 src/status-indicator.ts | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index b9b0e77..90138ff 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
             All systems operational
         </status-indicator>
         <br />
-        <status-indicator status="negative">
+        <status-indicator status="negative" pulse>
             Something's wrong
         </status-indicator>
         <br />
diff --git a/src/status-indicator.ts b/src/status-indicator.ts
index 4886a4f..c785828 100644
--- a/src/status-indicator.ts
+++ b/src/status-indicator.ts
@@ -28,6 +28,8 @@ class StatusIndicator extends WebComponent {
     }
 
     get template(): any {
+        const statusColor = this.#indicatorColor[this.props.status]
+
         return html`
             <div class="status-indicator-icon" style=${{
                 display: 'inline-block',
@@ -35,7 +37,7 @@ class StatusIndicator extends WebComponent {
                 cursor: 'pointer',
                 width: '10px',
                 height: '10px',
-                backgroundColor: `rgba(${this.#indicatorColor[this.props.status]})`,
+                backgroundColor: `rgb(${statusColor})`,
                 marginRight: '0.05rem',
                 ...(this.props.pulse ? this.#pulseAnimationCSSRules : [])
             }}> </div>
@@ -47,9 +49,9 @@ class StatusIndicator extends WebComponent {
             this.props.pulse ? html`
                 <style>
                 @keyframes pulse {
-                    0% { box-shadow: 0 0 0 0 rgba(${this.#indicatorColor[this.props.status]}, 0.5);}
-                    70% { box-shadow: 0 0 0 10px rgba(${this.#indicatorColor[this.props.status]}, 0); }
-                    100% { box-shadow: 0 0 0 0 rgba(${this.#indicatorColor[this.props.status]}, 0); }
+                    0% { box-shadow: 0 0 0 0 rgba(${statusColor}, 0.5);}
+                    70% { box-shadow: 0 0 0 10px rgba(${statusColor}, 0); }
+                    100% { box-shadow: 0 0 0 0 rgba(${statusColor}, 0); }
                 }
                 </style>`
                 :