From f1ba0aa53147c1283de2061c2c4b378ccb4687a2 Mon Sep 17 00:00:00 2001
From: "IGNY8 VPS (Salman)" <vps@igny8.com>
Date: Sat, 3 Jan 2026 09:07:47 +0000
Subject: [PATCH] Section 2 Completed

---
 docs/plans/FINAL-PRELAUNCH.md         |  6 +-
 frontend/src/pages/Sites/Settings.tsx | 85 ++++++++++++++-------------
 2 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/docs/plans/FINAL-PRELAUNCH.md b/docs/plans/FINAL-PRELAUNCH.md
index 39582a3f..86ce43ae 100644
--- a/docs/plans/FINAL-PRELAUNCH.md
+++ b/docs/plans/FINAL-PRELAUNCH.md
@@ -12,13 +12,13 @@ Update the rules files, to follow the rules in all changes for styles, for compo
 
 2.1 ✅ - All logos and images to update for dark and light color scheme layout, and logo design final as well as favicon, and move images to right folder
 
-2.2 - Sidebar menu rearrange for items that need rearranging, and reduce padding/spacing
+2.2 ✅ - Sidebar menu rearrange for items that need rearranging, and reduce padding/spacing
 
-2.3 - Fix the sidebar active/selected menu and hover color
+2.3 ✅ - Fix the sidebar active/selected menu and hover color
 
 2.4 ✅ - Assign manually the colors to each module, and verify and fix that in each page and progress bar consistent colors are used, across module pages, automation and dashboard
 
-2.5 - Use colors in setup, sites and account and all its subpages
+2.5 ✅ - Use colors in setup, sites and account and all its subpages
 
 ---
 
diff --git a/frontend/src/pages/Sites/Settings.tsx b/frontend/src/pages/Sites/Settings.tsx
index 7d408677..28471f88 100644
--- a/frontend/src/pages/Sites/Settings.tsx
+++ b/frontend/src/pages/Sites/Settings.tsx
@@ -29,7 +29,7 @@ import {
 import { useSiteStore } from '../../store/siteStore';
 import WordPressIntegrationForm from '../../components/sites/WordPressIntegrationForm';
 import { integrationApi, SiteIntegration } from '../../services/integration.api';
-import { GridIcon, PlugInIcon, PaperPlaneIcon, DocsIcon, BoltIcon, FileIcon, ChevronDownIcon, CloseIcon, PlusIcon, RefreshCwIcon, FileTextIcon, ImageIcon, SaveIcon, Loader2Icon, ArrowRightIcon, SettingsIcon, GlobeIcon, LayersIcon } from '../../icons';
+import { GridIcon, PlugInIcon, PaperPlaneIcon, DocsIcon, BoltIcon, FileIcon, ChevronDownIcon, CloseIcon, PlusIcon, RefreshCwIcon, FileTextIcon, ImageIcon, SaveIcon, Loader2Icon, ArrowRightIcon, SettingsIcon, GlobeIcon, LayersIcon, CheckCircleIcon } from '../../icons';
 import Badge from '../../components/ui/badge/Badge';
 import { Dropdown } from '../../components/ui/dropdown/Dropdown';
 import { DropdownItem } from '../../components/ui/dropdown/DropdownItem';
@@ -1566,21 +1566,19 @@ export default function SiteSettings() {
                 </p>
                 
                 <div className="space-y-4">
+                  {/* Industry Selection - Dropdown style from wizard */}
                   <div>
                     <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                      Select Industry
+                      Industry *
                     </label>
-                    <Select
-                      options={industries.map((industry) => ({
-                        value: industry.slug,
-                        label: industry.name,
-                      }))}
-                      placeholder="Select an industry..."
-                      defaultValue={selectedIndustry}
+                    <SelectDropdown
+                      options={industries.map(i => ({ value: i.slug, label: i.name }))}
+                      value={selectedIndustry}
                       onChange={(value) => {
                         setSelectedIndustry(value);
                         setSelectedSectors([]);
                       }}
+                      placeholder="Select an industry"
                     />
                     {selectedIndustry && (
                       <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
@@ -1589,45 +1587,48 @@ export default function SiteSettings() {
                     )}
                   </div>
 
-                  {selectedIndustry && (
+                  {/* Sector Selection - Badge style from wizard */}
+                  {selectedIndustry && getIndustrySectors().length > 0 && (
                     <div>
                       <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                        Select Sectors (max 5)
+                        Sectors * <span className="text-gray-400 font-normal">(Select up to 5)</span>
                       </label>
-                      <div className="space-y-2 max-h-48 overflow-y-auto border border-gray-200 rounded-lg p-3 dark:border-gray-700">
-                        {getIndustrySectors().map((sector) => (
-                          <div
-                            key={sector.slug}
-                            className="flex items-start space-x-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
-                          >
-                            <Checkbox
-                              checked={selectedSectors.includes(sector.slug)}
-                              onChange={(checked) => {
-                                if (checked) {
-                                  if (selectedSectors.length >= 5) {
-                                    toast.error('Maximum 5 sectors allowed per site');
-                                    return;
+                      <div className="flex flex-wrap gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg max-h-48 overflow-y-auto">
+                        {getIndustrySectors().map((sector) => {
+                          const isSelected = selectedSectors.includes(sector.slug);
+                          return (
+                            <Badge
+                              key={sector.slug}
+                              tone={isSelected ? 'success' : 'neutral'}
+                              variant="soft"
+                              className={`cursor-pointer transition-all ${isSelected ? 'ring-2 ring-success-500' : 'hover:bg-gray-200 dark:hover:bg-gray-700'}`}
+                            >
+                              <span 
+                                onClick={() => {
+                                  if (isSelected) {
+                                    setSelectedSectors(selectedSectors.filter(s => s !== sector.slug));
+                                  } else {
+                                    if (selectedSectors.length >= 5) {
+                                      toast.error('Maximum 5 sectors allowed per site');
+                                      return;
+                                    }
+                                    setSelectedSectors([...selectedSectors, sector.slug]);
                                   }
-                                  setSelectedSectors([...selectedSectors, sector.slug]);
-                                } else {
-                                  setSelectedSectors(selectedSectors.filter(s => s !== sector.slug));
-                                }
-                              }}
-                            />
-                            <div className="flex-1">
-                              <div className="font-medium text-sm text-gray-900 dark:text-white">
+                                }} 
+                                className="flex items-center"
+                              >
+                                {isSelected && <CheckCircleIcon className="w-3 h-3 mr-1" />}
                                 {sector.name}
-                              </div>
-                              <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-1">
-                                {sector.description}
-                              </div>
-                            </div>
-                          </div>
-                        ))}
+                              </span>
+                            </Badge>
+                          );
+                        })}
                       </div>
-                      <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
-                        Selected: {selectedSectors.length} / 5 sectors
-                      </p>
+                      {selectedSectors.length > 0 && (
+                        <p className="text-xs text-gray-500 mt-2">
+                          {selectedSectors.length} sector{selectedSectors.length !== 1 ? 's' : ''} selected
+                        </p>
+                      )}
                     </div>
                   )}