Section 2 Completed
This commit is contained in:
@@ -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
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
<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}
|
||||
className="flex items-start space-x-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
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'}`}
|
||||
>
|
||||
<Checkbox
|
||||
checked={selectedSectors.includes(sector.slug)}
|
||||
onChange={(checked) => {
|
||||
if (checked) {
|
||||
<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]);
|
||||
} 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}
|
||||
</span>
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-1">
|
||||
{sector.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
Selected: {selectedSectors.length} / 5 sectors
|
||||
{selectedSectors.length > 0 && (
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
{selectedSectors.length} sector{selectedSectors.length !== 1 ? 's' : ''} selected
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user