From f5d9f4bdd3f0148fa1841558181bb5dee97ef4fa Mon Sep 17 00:00:00 2001
From: VinnyNC <vinny@vlyons.net>
Date: Mon, 29 Sep 2025 17:23:07 -0400
Subject: [PATCH] 2.4.1: Icon Replacement Strategy - replaced all emojis with
 semantic SVG icons

---
 assets/css/main.css       | 11 ++---
 index.php                 |  4 +-
 static/css/components.css | 26 ++++++++---
 static/css/icons.css      | 91 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 120 insertions(+), 12 deletions(-)
 create mode 100644 static/css/icons.css

diff --git a/assets/css/main.css b/assets/css/main.css
index 87b8f1c..1d09957 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,6 +1,7 @@
 /* Main CSS file - imports all modular stylesheets */
-@import url('reset.css');
-@import url('variables.css');
-@import url('utilities.css');
-@import url('components.css');
-@import url('layout.css');
+@import url('../static/css/reset.css');
+@import url('../static/css/variables.css');
+@import url('../static/css/utilities.css');
+@import url('../static/css/components.css');
+@import url('../static/css/icons.css');
+@import url('../static/css/layout.css');
diff --git a/index.php b/index.php
index 851bbc7..d7c16a8 100644
--- a/index.php
+++ b/index.php
@@ -326,7 +326,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                 </div>
                 <div class="video-player__header-controls">
                     <button class="stream-stats__refresh-btn" data-action="manual-refresh" title="Manual Stream Refresh" aria-label="Refresh stream">
-                        🔄 Refresh
+                        <span class="icon-refresh"></span> Refresh
                     </button>
                     <select class="video-player__quality-selector" id="qualitySelector" style="display:none;" aria-label="Video quality">
                         <option value="auto">Auto Quality</option>
@@ -381,7 +381,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
             </div>
 
             <section class="chat__messages" id="chatMessages" aria-live="polite" aria-label="Chat messages" role="log" aria-atomic="false">
-                <div class="chat__empty-state">No messages yet. Be the first to say hello! 👋</div>
+                <div class="chat__empty-state">No messages yet. Be the first to say hello! <span class="icon-wave"></span></div>
             </section>
 
             <div class="chat__typing-indicator" id="typingIndicator" aria-live="assertive">
diff --git a/static/css/components.css b/static/css/components.css
index 134c41b..dca71e4 100644
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -31,8 +31,13 @@
 }
 
 .stream-logo::before {
-    content: "⚾";
-    font-size: var(--font-size-2xl);
+    content: '';
+    display: inline-block;
+    width: 1.25em;
+    height: 1.25em;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+    margin-right: var(--spacing-2);
 }
 
 /* =================================================================
@@ -70,7 +75,13 @@
 }
 
 .stream-stats__viewer-count::before {
-    content: "👥";
+    content: '';
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM6.5 9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z'%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+    margin-right: var(--spacing-2);
 }
 
 /* =================================================================
@@ -172,8 +183,13 @@
 }
 
 .chat__header-title::before {
-    content: "💬";
-    font-size: var(--font-size-lg);
+    content: '';
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+    margin-right: var(--spacing-2);
 }
 
 .chat__admin-controls {
diff --git a/static/css/icons.css b/static/css/icons.css
new file mode 100644
index 0000000..189c161
--- /dev/null
+++ b/static/css/icons.css
@@ -0,0 +1,91 @@
+/* SVG Icon System */
+
+.icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+}
+
+.icon svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+}
+
+/* Icon Definitions */
+.icon-refresh {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+}
+
+.icon-refresh::before {
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11.356 2a8.001 8.001 0 01-15.356 2M4 4v5h.582M4.582 9A8.003 8.003 0 019.582 9'%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+}
+
+.icon-baseball {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+}
+
+.icon-baseball::before {
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+}
+
+.icon-chat {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+}
+
+.icon-chat::before {
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+}
+
+.icon-users {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+}
+
+.icon-users::before {
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM6.5 9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z'%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+}
+
+.icon-wave {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+}
+
+.icon-wave::before {
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 16l-4-4m0 0l4-4m-4 4h18'%3E%3C/svg%3E") no-repeat center center;
+    background-size: contain;
+}