From 9b8fbe8809fa8d5c4771912b922238a98f7cc730 Mon Sep 17 00:00:00 2001
From: lifeadventurer <life0adventurer@gmail.com>
Date: Fri, 1 Nov 2024 22:36:35 +0800
Subject: [PATCH] Feat(fortune): Add colorPreviewContainer to encapsulate dots
 for improved clarity

---
 fortune_generator/css/styles.css |  7 +++++++
 fortune_generator/js/theme.js    | 12 +++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/fortune_generator/css/styles.css b/fortune_generator/css/styles.css
index 6f9df5e..2a34d14 100644
--- a/fortune_generator/css/styles.css
+++ b/fortune_generator/css/styles.css
@@ -126,6 +126,13 @@ button:hover {
   color: var(--title-color);
 }
 
+.color-preview-container {
+  display: flex;
+  align-items: center;
+  padding: 3px;
+  border-radius: 25px;
+}
+
 .color-preview {
   display: flex; /* Use flex to align dots in a row */
 }
diff --git a/fortune_generator/js/theme.js b/fortune_generator/js/theme.js
index b1d53b6..091b375 100644
--- a/fortune_generator/js/theme.js
+++ b/fortune_generator/js/theme.js
@@ -27,16 +27,26 @@ document.addEventListener("DOMContentLoaded", () => {
       themeName.textContent = theme.name;
       themeItem.appendChild(themeName);
 
+      const colorPreivewContainer = document.createElement("div");
+      colorPreivewContainer.className = "color-preview-container";
+
+      const propertyKeys = Object.keys(theme.properties);
+      colorPreivewContainer.style.backgroundColor =
+        theme.properties[propertyKeys[3]];
+
       // Add color dots for visual preview
       const colorPreview = document.createElement("div");
       colorPreview.className = "color-preview";
+
       Object.values(theme.properties).slice(0, 3).forEach((color) => {
         const colorDot = document.createElement("span");
         colorDot.style.backgroundColor = color;
         colorDot.className = "color-dot";
         colorPreview.appendChild(colorDot);
       });
-      themeItem.appendChild(colorPreview);
+
+      colorPreivewContainer.appendChild(colorPreview);
+      themeItem.appendChild(colorPreivewContainer);
 
       // Apply theme on click
       themeItem.addEventListener("click", () => applyTheme(theme.properties));