From d95e01330160de0e144f9308072281efe515c467 Mon Sep 17 00:00:00 2001
From: Joao Figueiredo <joao.figueiredo@jfig.net>
Date: Fri, 23 May 2025 22:58:41 +0100
Subject: [PATCH] add support for CSS

---
 door-status.css     | 15 +++++++++++++++
 wp-api-consumer.php | 18 +++++++++++++-----
 2 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 door-status.css

diff --git a/door-status.css b/door-status.css
new file mode 100644
index 0000000..5edb1a2
--- /dev/null
+++ b/door-status.css
@@ -0,0 +1,15 @@
+/* door-status.css */
+.door-status-indicator        { display:inline-flex; align-items:center; font-size:1.1em; line-height:1; }
+.door-status-indicator.open   { color:#28a745; }   /* green  */
+.door-status-indicator.closed { color:#dc3545; }   /* red    */
+
+/* optional embellishments */
+.door-status-indicator.open::before,
+.door-status-indicator.closed::before {
+    content:"";
+    display:inline-block;
+    width:.6em; height:.6em;
+    border-radius:50%;
+    margin-right:.35em;
+    background:currentColor;
+}
diff --git a/wp-api-consumer.php b/wp-api-consumer.php
index d615cd0..49dfd9d 100644
--- a/wp-api-consumer.php
+++ b/wp-api-consumer.php
@@ -92,7 +92,7 @@ function dsi_get_status() : bool {
 
 function dsi_shortcode() : string {
     $open  = dsi_get_status();
-    $emoji = $open ? '<div>🟢 Open</div>' : '<div>🔴 Closed</div>';
+    $emoji = $open ? '<div class="door-status-indicator open">🟢 Open</div>' : '<div class="door-status-indicator closed">🔴 Closed</div>';
 
     return sprintf(
         '<span class="door-status-indicator" aria-label="Door is %s">%s</span>',
@@ -132,13 +132,21 @@ add_action( 'admin_bar_menu', 'dsi_admin_bar', 1000 );
 |--------------------------------------------------------------------------
 */
 
+/**
+ * Front-end + admin-bar styles for the indicator.
+ */
 function dsi_enqueue_assets() : void {
-    if ( is_admin() ) {
-        return; // Front‑end only.
-    }
-    wp_add_inline_style( 'wp-block-library', '.door-status-indicator{font-size:1.2em;line-height:1}' );
+    // register & enqueue the standalone CSS file
+    wp_enqueue_style(
+        'door-status-indicator',
+        plugins_url( 'door-status.css', __FILE__ ),
+        [],          // no dependencies
+        '1.0.0'      // file version
+    );
 }
 add_action( 'wp_enqueue_scripts', 'dsi_enqueue_assets' );
+add_action( 'admin_enqueue_scripts', 'dsi_enqueue_assets' ); // so the Admin Bar icon also gets styled
+
 
 /*
 |--------------------------------------------------------------------------