From da30a2b0d516865e49932a8a22bad998be3e3d37 Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Wed, 11 Jun 2025 16:24:54 -0400
Subject: [PATCH] The RangeEditor looks sick now.

---
 .../TemperatureRangeEditor.razor              | 65 ++++++++++++++++---
 .../TemperatureRangeEditor.razor.css          |  6 ++
 2 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor.css

diff --git a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor
index 3cc3013..69be82c 100644
--- a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor	
@@ -4,7 +4,7 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
-<div class="position-relative" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@
+<div class="container" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@
     <!-- Base number line -->
     @* <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div> *@
 
@@ -22,23 +22,72 @@
     } *@
 
     <!-- Color pickers for each range -->
-    <div class="container">
+    <div class="card rounded-3 w-50 mx-auto">
+        <div class="card-header mb-3 text-center fw-bold">
+            Temperature Blanket Colors
+        </div>
+
         @for (int i = 0; i < TempRanges.Count; i++)
         {
             var localIndex = i;
+@*             if (i == 0)
+            {
+                <div class="row align-items-center mb-2">
+                    <div class="col-6 text-end pe-2">
+                        <label class="form-label mb-0">
+                              @TempRanges[i].Max&deg;
+                        </label>
+                    </div>
+                    <div class="col-6 ps-2">
+                        <input type="color"
+                               value="@TempRanges[i].Color"
+                               @onchange="e => HandleColorChange(e, localIndex)" />
+                    </div>
+                </div>
+            }
+            else if (i == 10)
+            {
+                <div class="row align-items-center mb-2">
+                    <div class="col-6 text-end pe-2">
+                        <label class="form-label mb-0">
+                            @TempRanges[i].Min&deg; +
+                        </label>
+                    </div>
+                    <div class="col-6 ps-2">
+                        <input type="color"
+                               value="@TempRanges[i].Color"
+                               @onchange="e => HandleColorChange(e, localIndex)" />
+                    </div>
+                </div>
+            }
+            else
+            {
+                <div class="row align-items-center mb-2">
+                    <div class="col-6 text-end pe-2">
+                        <label class="form-label mb-0">
+                            @TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
+                        </label>
+                    </div>
+                    <div class="col-6 ps-2">
+                        <input type="color"
+                               value="@TempRanges[i].Color"
+                               @onchange="e => HandleColorChange(e, localIndex)" />
+                    </div>
+                </div>
+            } *@
 
-            <div class="d-flex justify-content-between align-items-center mb-2 gx-2">
-                <div class="col-10">
-                    <label class="form-label mb-0 me-2">
-                        @TempRanges[i].Min&deg; - @TempRanges[i].Max&deg;
+            <div class="row align-items-center mb-2">
+                <div class="col-6 text-end pe-2">
+                    <label class="form-label mb-0">
+                        @TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
                     </label>
                 </div>
-                <div class="col">
+                <div class="col-6 ps-2">
                     <input type="color"
                            value="@TempRanges[i].Color"
                            @onchange="e => HandleColorChange(e, localIndex)" />
                 </div>
-            </div>
+            </div> 
         }
     </div>
 </div>
\ No newline at end of file
diff --git a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor.css b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor.css
new file mode 100644
index 0000000..785a125
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor.css	
@@ -0,0 +1,6 @@
+input[type="color"] {
+    width: 2.5rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+}