From 370b7f7a5916eefc2d1c0d9bbaed3e61c2611fb0 Mon Sep 17 00:00:00 2001
From: VinnyNC <vinny@vlyons.net>
Date: Mon, 29 Sep 2025 19:06:22 -0400
Subject: [PATCH] Complete 2.4.2: Icon Size Variants Implementation

---
 index.php                |  4 +-
 static/css/icons.css     | 84 ++++++++++++++++++++++++++++++++++++++++
 static/css/variables.css | 18 +++++++++
 3 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/index.php b/index.php
index d7c16a8..13c51d4 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">
-                        <span class="icon-refresh"></span> Refresh
+                        <span class="icon-refresh icon-sm"></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! <span class="icon-wave"></span></div>
+                <div class="chat__empty-state">No messages yet. Be the first to say hello! <span class="icon-wave icon-md"></span></div>
             </section>
 
             <div class="chat__typing-indicator" id="typingIndicator" aria-live="assertive">
diff --git a/static/css/icons.css b/static/css/icons.css
index 189c161..eb9cb61 100644
--- a/static/css/icons.css
+++ b/static/css/icons.css
@@ -89,3 +89,87 @@
     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;
 }
+
+/* =================================================================
+   ICON SIZE MODIFIERS
+   ================================================================= */
+
+/* Extra small icons (12px) */
+.icon-xs {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+}
+
+/* Small icons (16px) - Default fallback */
+.icon-sm {
+    width: var(--icon-size-sm);
+    height: var(--icon-size-sm);
+}
+
+/* Medium icons (20px) */
+.icon-md {
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
+}
+
+/* Large icons (24px) */
+.icon-lg {
+    width: var(--icon-size-lg);
+    height: var(--icon-size-lg);
+}
+
+/* Extra large icons (32px) */
+.icon-xl {
+    width: var(--icon-size-xl);
+    height: var(--icon-size-xl);
+}
+
+/* =================================================================
+   RESPONSIVE ICON SCALING
+   ================================================================= */
+
+/* Responsive size variants that scale with viewport */
+.icon-responsive {
+    --current-icon-size: var(--icon-size-sm);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-xs {
+    --current-icon-size: var(--icon-size-responsive-xs);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-sm {
+    --current-icon-size: var(--icon-size-responsive-sm);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-md {
+    --current-icon-size: var(--icon-size-responsive-md);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-lg {
+    --current-icon-size: var(--icon-size-responsive-lg);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+.icon-responsive-xl {
+    --current-icon-size: var(--icon-size-responsive-xl);
+
+    width: var(--current-icon-size);
+    height: var(--current-icon-size);
+}
+
+/* Override defaults for specific icon types if needed */
+/* Add icon-specific overrides here as needed */
diff --git a/static/css/variables.css b/static/css/variables.css
index f2a6db3..b163c6d 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -277,6 +277,24 @@
     --z-tooltip: 1070;
     --z-toast: 1080;
 
+    /* =================================================================
+       ICON SIZE SCALE
+       ================================================================= */
+
+    /* Icon Size Scale - Consistent scaling for SVG icons */
+    --icon-size-xs: 0.75rem;    /* 12px - Small indicators */
+    --icon-size-sm: 1rem;       /* 16px - Default size */
+    --icon-size-md: 1.25rem;    /* 20px - Button icons */
+    --icon-size-lg: 1.5rem;     /* 24px - Navigation elements */
+    --icon-size-xl: 2rem;       /* 32px - Hero elements */
+
+    /* Responsive icon sizes based on viewport */
+    --icon-size-responsive-xs: clamp(0.625rem, 2vw, var(--icon-size-xs));
+    --icon-size-responsive-sm: clamp(0.875rem, 2.5vw, var(--icon-size-sm));
+    --icon-size-responsive-md: clamp(1rem, 3vw, var(--icon-size-md));
+    --icon-size-responsive-lg: clamp(1.25rem, 3.5vw, var(--icon-size-lg));
+    --icon-size-responsive-xl: clamp(1.5rem, 4vw, var(--icon-size-xl));
+
     /* =================================================================
        TRANSITIONS & ANIMATIONS
        ================================================================= */