Expanding theme tab to customization tab. Started improving theme selection.

Moonlight.Client/UI/Components/ColorSelector.razor

@@ -0,0 +1,45 @@
+<label for="@Id" class="btn btn-square border-0 ring-0 outline-0" style="background-color: @Value">
+    <i class="text-lg text-base-content @Icon"></i>
+</label>
+<input value="@Value" @oninput="Update" id="@Id" type="color" class="h-0 w-0 opacity-0"/>
+
+@code
+{
+
+    #region
+
+    [Parameter]
+    public string? Value
+    {
+        get => _value;
+        set
+        {
+            if (_value?.Equals(value) ?? false)
+                return;
+
+            _value = value;
+            ValueChanged.InvokeAsync(value);
+        }
+    }
+
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+
+    private string? _value;
+
+    #endregion
+
+    [Parameter] public string Icon { get; set; } = "icon-paintbrush";
+
+    private string Id;
+
+    protected override void OnInitialized()
+    {
+        Id = $"color-selector-{GetHashCode()}";
+    }
+
+    private async Task Update(ChangeEventArgs args)
+    {
+        Value = args.Value?.ToString() ?? "#FFFFFF";
+        await InvokeAsync(StateHasChanged);
+    }
+}

Moonlight.Client/UI/Components/StatCard.razor

@@ -13,7 +13,7 @@
         <span class="@Icon text-4xl text-primary"></span>
     </div>
     <div class="stat-title">@Title</div>
-    <div class="stat-value text-xl!">@Text</div>
+    <div class="stat-value truncate text-xl!">@Text</div>
 </div>
 
 @code