Feat(fortune): Add colorPreviewContainer to encapsulate dots for improved clarity

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 */
 }

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));