meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add business dashboard dark mode from Super Admin theme setting.

Browse Source 
Login and in-app surfaces follow tenant themeMode, matching customer dark tokens, with themed switches and tighter card/table chrome.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-31 13:40:40 +03:30
co-authored by Cursor
parent 65012717d0
commit e9400c2281
83 changed files with 586 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/App.tsx
+2 -2
View File
@@ -79,11 +79,11 @@ function App() {
return (
<BusinessDomainGuard>
<LocaleProvider>
<BusinessThemeProvider>
<BrowserRouter>
<TenantBrandingProvider>
<DashboardDocumentTitle />
<AuthProvider>
<BusinessThemeProvider>
<ToastProvider>
<Routes>
<Route element={<GuestRoute />}>
@@ -170,10 +170,10 @@ function App() {
</Route>
</Routes>
</ToastProvider>
</BusinessThemeProvider>
</AuthProvider>
</TenantBrandingProvider>
</BrowserRouter>
</BusinessThemeProvider>
</LocaleProvider>
</BusinessDomainGuard>
)
apps/business/src/components/BackgroundOrbs.module.css
+4
View File
@@ -132,3 +132,7 @@
animation: none;
}
}
:global(html[data-theme='dark']) .bgOrbs {
display: none;
}
apps/business/src/components/BlogCard.module.css
+1 -1
View File
@@ -67,7 +67,7 @@
text-transform: uppercase;
border-radius: 50px;
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, 0.82);
background: var(--surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
apps/business/src/components/BlogCommentsSection.module.css
+1 -1
View File
@@ -48,7 +48,7 @@
.comment {
padding: 14px 16px;
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: var(--radius-sm);
}
apps/business/src/components/BrandModal.module.css
+2 -2
View File
@@ -14,7 +14,7 @@
.modal {
width: 100%;
max-width: 520px;
background: rgba(255, 255, 255, 0.85);
background: var(--surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
@@ -76,7 +76,7 @@
font-size: var(--field-font-size);
line-height: 1.4;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
apps/business/src/components/BrandRow.module.css
+1 -1
View File
@@ -4,7 +4,7 @@
flex-shrink: 0;
object-fit: contain;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.2);
}
apps/business/src/components/CategoryModal.module.css
+3 -3
View File
@@ -45,7 +45,7 @@
.modal {
width: 100%;
max-width: 480px;
background: rgba(255, 255, 255, 0.92);
background: var(--elevated-surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
@@ -114,7 +114,7 @@
font-size: var(--field-font-size);
line-height: 1.4;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
@@ -135,7 +135,7 @@
color: var(--text-primary);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--select-arrow-offset) center;
apps/business/src/components/CategoryTreeSelect.module.css
+2 -2
View File
@@ -11,7 +11,7 @@
gap: 6px;
min-height: var(--field-height);
padding: 0 var(--field-padding-x);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
@@ -84,7 +84,7 @@
overflow-y: auto;
margin-top: 0;
padding: 4px;
background: rgba(255, 255, 255, 0.98);
background: var(--elevated-surface);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
box-shadow: 0 10px 28px rgba(31, 38, 135, 0.14);
apps/business/src/components/ChangeUserAccessModal.module.css
+1 -1
View File
@@ -11,7 +11,7 @@
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.45);
background: var(--surface);
cursor: pointer;
font-family: var(--font-ui);
}
apps/business/src/components/ConfirmBulkAddStoreItemsModal.module.css
+1 -1
View File
@@ -17,7 +17,7 @@
max-width: 440px;
padding: 32px 28px 24px;
text-align: start;
background: rgba(255, 255, 255, 0.94);
background: var(--elevated-surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(245, 158, 11, 0.28);
apps/business/src/components/ConfirmDeleteModal.module.css
+1 -1
View File
@@ -17,7 +17,7 @@
max-width: 400px;
padding: 32px 28px 24px;
text-align: center;
background: rgba(255, 255, 255, 0.92);
background: var(--elevated-surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(239, 68, 68, 0.25);
apps/business/src/components/CreateStoreItemsModal.module.css
+3 -3
View File
@@ -10,7 +10,7 @@
gap: 8px;
align-items: center;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: var(--radius-sm);
}
@@ -39,7 +39,7 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -235,7 +235,7 @@
.discountRow {
padding: 10px 12px;
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: var(--radius-sm);
}
apps/business/src/components/DailyActivityChart.module.css
+1 -1
View File
@@ -218,7 +218,7 @@
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease, visibility 0.12s;
background: rgba(255, 255, 255, 0.98);
background: var(--elevated-surface);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
apps/business/src/components/GenerateWebsiteLinkModal.module.css
+1 -1
View File
@@ -45,7 +45,7 @@
font-size: 12px;
font-family: var(--font-ui);
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.45);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: var(--radius-sm);
word-break: break-all;
apps/business/src/components/Header.module.css
+2 -2
View File
@@ -89,7 +89,7 @@
gap: 8px;
padding: 8px 14px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
background: var(--surface);
border: 1px solid var(--glass-border);
cursor: pointer;
transition: box-shadow 0.2s, border-color 0.2s;
@@ -143,7 +143,7 @@
inset-inline-end: 0;
min-width: 180px;
padding: 6px;
background: rgba(255, 255, 255, 0.95);
background: var(--elevated-surface);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
apps/business/src/components/ImageCropper.module.css
+2 -2
View File
@@ -15,7 +15,7 @@
min-height: 0;
border: 2px dashed rgba(148, 163, 184, 0.4);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.4);
background: var(--surface);
color: var(--text-secondary);
font-size: 14px;
cursor: pointer;
@@ -89,7 +89,7 @@
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
overflow: hidden;
background: rgba(255, 255, 255, 0.5);
background: var(--surface);
}
.cropArea {
apps/business/src/components/ImageLightbox.module.css
+2 -2
View File
@@ -55,7 +55,7 @@
max-height: calc(100vh - 180px);
object-fit: contain;
border-radius: 12px;
background: #ffffff;
background: var(--card-media-bg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
@@ -107,7 +107,7 @@
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
background: #fff;
background: var(--card-media-bg);
opacity: 0.72;
transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
}
apps/business/src/components/ImageUploader.module.css
+2 -2
View File
@@ -15,7 +15,7 @@
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--glass-border);
background: #fff;
background: var(--card-media-bg);
display: flex;
align-items: center;
justify-content: center;
@@ -58,7 +58,7 @@
gap: 6px;
border: 2px dashed rgba(148, 163, 184, 0.4);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.4);
background: var(--surface);
color: var(--text-secondary);
font-size: 12px;
transition: border-color 0.2s, color 0.2s, background 0.2s;
apps/business/src/components/InvoiceDraftFields.module.css
+2 -2
View File
@@ -12,7 +12,7 @@
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.45);
background: var(--surface);
}
.itemCardHeader {
@@ -100,7 +100,7 @@
font-size: 12px;
font-family: var(--font-ui);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
appearance: none;
apps/business/src/components/InvoiceForm.module.css
+1 -1
View File
@@ -22,7 +22,7 @@
line-height: 1.4;
font-family: var(--font-ui);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
apps/business/src/components/JalaliDatePicker.module.css
+2 -2
View File
@@ -8,7 +8,7 @@
padding: var(--field-padding-y) var(--field-padding-x);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.85);
background: var(--surface);
font-size: var(--field-font-size);
font-family: var(--font-ui);
color: var(--text-primary);
@@ -39,7 +39,7 @@
.calendar :global(.rmdp-wrapper) {
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.98);
background: var(--elevated-surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
apps/business/src/components/ListFiltersPanel.module.css
+2 -2
View File
@@ -104,7 +104,7 @@
padding: var(--field-padding-y) var(--field-padding-x);
font-size: var(--field-font-size);
color: var(--text-primary);
background: rgba(255, 255, 255, 0.65);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -117,7 +117,7 @@
padding: var(--field-padding-y) var(--select-padding-end) var(--field-padding-y) var(--field-padding-x);
appearance: none;
-webkit-appearance: none;
background-color: rgba(255, 255, 255, 0.65);
background-color: var(--surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--select-arrow-offset) center;
apps/business/src/components/Modal.module.css
+1 -1
View File
@@ -17,7 +17,7 @@
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.9);
background: var(--elevated-surface);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
border: 1px solid var(--glass-border);
apps/business/src/components/MultiSelectDropdown.module.css
+3 -3
View File
@@ -14,7 +14,7 @@
font-family: inherit;
color: var(--text-primary);
text-align: left;
background: rgba(255, 255, 255, 0.65);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
@@ -71,7 +71,7 @@
flex-direction: column;
max-height: none;
overflow: visible;
background: rgba(255, 255, 255, 0.95);
background: var(--elevated-surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
@@ -148,7 +148,7 @@
border: 1.5px solid rgba(148, 163, 184, 0.55);
border-radius: 4px;
color: white;
background: white;
background: var(--card-media-bg);
}
.checkSelected {
apps/business/src/components/OrderItemsModal.module.css
+2 -2
View File
@@ -48,7 +48,7 @@
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
}
.itemThumb {
@@ -57,7 +57,7 @@
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background: #fff;
background: var(--card-media-bg);
border: 1px solid rgba(148, 163, 184, 0.15);
}
apps/business/src/components/OrderStepModal.module.css
+1 -1
View File
@@ -14,7 +14,7 @@
text-align: start;
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.45);
background: var(--surface);
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
apps/business/src/components/OrderTransactionsModal.module.css
+1 -1
View File
@@ -22,7 +22,7 @@
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
}
.txHeader {
apps/business/src/components/PickStoreVariantModal.module.css
+1 -1
View File
@@ -18,7 +18,7 @@
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(255, 255, 255, 0.65);
background: var(--surface);
text-align: left;
transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
apps/business/src/components/ProductActivityChart.module.css
+1 -1
View File
@@ -189,7 +189,7 @@
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease, visibility 0.12s;
background: rgba(255, 255, 255, 0.98);
background: var(--elevated-surface);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
apps/business/src/components/ProductCard.module.css
+4 -4
View File
@@ -7,6 +7,7 @@
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-shadow);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
@@ -34,16 +35,15 @@
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #ffffff;
background: var(--card-media-bg);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.image {
width: 100%;
height: 100%;
object-fit: contain;
padding: 10px;
object-fit: cover;
display: block;
}
.imagePlaceholder {
apps/business/src/components/ProductCommentsModal.module.css
+2 -2
View File
@@ -17,7 +17,7 @@
max-height: 90vh;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.92);
background: var(--elevated-surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
@@ -94,7 +94,7 @@
.comment {
padding: 14px 16px;
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: var(--radius-sm);
}
apps/business/src/components/ProductDetailsTabs.module.css
+2 -2
View File
@@ -37,7 +37,7 @@
.tabActive {
color: var(--primary);
background: rgba(255, 255, 255, 0.75);
background: var(--surface);
box-shadow: inset 0 -2px 0 var(--primary);
}
@@ -118,7 +118,7 @@
.comment,
.review {
padding: 14px 16px;
background: rgba(255, 255, 255, 0.65);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: var(--radius-sm);
}
apps/business/src/components/SearchableSelect.module.css
+2 -2
View File
@@ -8,7 +8,7 @@
gap: 6px;
min-height: var(--field-height);
padding: 0 var(--field-padding-x);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
@@ -74,7 +74,7 @@
list-style: none;
margin: 0;
padding: 6px;
background: rgba(255, 255, 255, 0.98);
background: var(--elevated-surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
apps/business/src/components/SectionCard.module.css
+2 -1
View File
@@ -25,7 +25,8 @@
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-light) 0%, rgba(219, 234, 254, 0.5) 100%);
background: linear-gradient(135deg, var(--icon-bg) 0%, var(--icon-bg-end) 100%);
border: 1px solid rgba(var(--primary-rgb) / 0.22);
border-radius: var(--radius-sm);
color: var(--primary);
margin-bottom: 20px;
apps/business/src/components/ShoppingCartModal.module.css
+7 -7
View File
@@ -56,7 +56,7 @@
padding: 6px 10px;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
min-width: 0;
}
@@ -66,7 +66,7 @@
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
background: #fff;
background: var(--card-media-bg);
border: 1px solid rgba(148, 163, 184, 0.15);
}
@@ -136,7 +136,7 @@
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
padding: 1px;
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
}
.qtyBtn {
@@ -211,7 +211,7 @@
font-size: var(--field-font-size);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.75);
background: var(--surface);
color: var(--text-primary);
}
@@ -258,7 +258,7 @@
list-style: none;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.85);
background: var(--surface);
max-height: 180px;
overflow-y: auto;
overflow-x: hidden;
@@ -356,7 +356,7 @@
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
font-size: 13px;
color: var(--text-secondary);
}
@@ -450,7 +450,7 @@
padding: var(--field-padding-y) var(--field-padding-x);
font-size: var(--field-font-size);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.75);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
apps/business/src/components/Sidebar.module.css
+1 -1
View File
@@ -35,7 +35,7 @@
.brandLogoUploaded {
border-radius: 8px;
object-fit: cover;
background: rgba(255, 255, 255, 0.75);
background: var(--card-media-bg);
}
.brandEditBtn {
apps/business/src/components/Sidebar.tsx
+1 -4
View File
@@ -91,10 +91,9 @@ export function Sidebar({ open = false }: SidebarProps) {
const navigate = useNavigate()
const { user, logout } = useAuth()
const { locale } = useLocale()
const { enabledModules } = useTenantBranding()
const { enabledModules, logoUrl: brandLogoUrl } = useTenantBranding()
const t = useT()
const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({})
const [brandLogoUrl, setBrandLogoUrl] = useState<string | null>(null)
const [nameEn, setNameEn] = useState('')
const [nameFa, setNameFa] = useState('')
@@ -242,12 +241,10 @@ export function Sidebar({ open = false }: SidebarProps) {
async function loadBranding() {
try {
const data = await getBusinessProfile(controller.signal)
setBrandLogoUrl(data.profile.logoUrl)
setNameEn(data.profile.nameEn.trim())
setNameFa(data.profile.nameFa.trim())
} catch (err) {
if (isAbortError(err)) return
setBrandLogoUrl(null)
setNameEn('')
setNameFa('')
}
apps/business/src/components/StoreItemCard.module.css
+2 -2
View File
@@ -38,7 +38,7 @@
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #ffffff;
background: var(--card-media-bg);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
@@ -73,7 +73,7 @@
letter-spacing: 0.03em;
border-radius: 50px;
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, 0.82);
background: var(--surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
apps/business/src/components/StoreItemMultiSearchSelect.module.css
+3 -3
View File
@@ -37,7 +37,7 @@
font-size: 11px;
font-weight: 700;
color: var(--primary);
background: #fff;
background: var(--card-media-bg);
}
.optionSelected .checkbox {
@@ -51,7 +51,7 @@
flex-shrink: 0;
border-radius: 6px;
overflow: hidden;
background: #fff;
background: var(--card-media-bg);
border: 1px solid rgba(148, 163, 184, 0.15);
display: flex;
align-items: center;
@@ -132,7 +132,7 @@
padding: 8px 10px;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
}
.removeSelectedBtn {
apps/business/src/components/Switch.module.css
+31
View File
@@ -5,13 +5,43 @@
flex-shrink: 0;
border-radius: 50px;
background: rgba(148, 163, 184, 0.45);
overflow: hidden;
transition: background 0.2s ease;
}
.switch::before,
.switch::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-en), var(--font-ui);
font-size: 10px;
font-weight: 700;
line-height: 1;
pointer-events: none;
z-index: 0;
color: var(--text-primary);
}
.switch::before {
content: '1';
left: 7px;
}
.switch::after {
content: '0';
right: 7px;
}
.switch.on {
background: var(--primary);
}
.switch.on::before,
.switch.on::after {
color: #fff;
}
.switch:disabled {
opacity: 0.55;
cursor: not-allowed;
@@ -27,6 +57,7 @@
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
transition: transform 0.2s ease;
z-index: 1;
}
.switch.on .thumb {
apps/business/src/components/TagInput.module.css
+1 -1
View File
@@ -1,7 +1,7 @@
.wrapper {
min-height: var(--field-height);
padding: 6px 10px;
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
apps/business/src/components/TechnicalFormModal.module.css
+4 -4
View File
@@ -11,7 +11,7 @@
.fieldCard {
padding: 10px 12px;
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: var(--radius-sm);
}
@@ -30,7 +30,7 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -115,7 +115,7 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -137,7 +137,7 @@
line-height: 1.5;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
apps/business/src/components/Toast.module.css
+1 -1
View File
@@ -19,7 +19,7 @@
font-weight: 500;
line-height: 1.4;
color: var(--text-primary);
background: var(--toast-bg, rgba(255, 255, 255, 0.94));
background: var(--toast-bg, var(--elevated-surface));
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border: 1px solid var(--glass-border);
apps/business/src/components/ToggleSwitch.module.css
+46 -2
View File
@@ -4,12 +4,42 @@
height: 22px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.45);
overflow: hidden;
transition: background 0.2s;
flex-shrink: 0;
}
.switch::before,
.switch::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-en), var(--font-ui);
font-size: 9px;
font-weight: 700;
line-height: 1;
pointer-events: none;
z-index: 0;
color: var(--text-primary);
}
.switch::before {
content: '1';
left: 6px;
}
.switch::after {
content: '0';
right: 6px;
}
.switch.on {
background: #16a34a;
background: var(--primary);
}
.switch.on::before,
.switch.on::after {
color: #fff;
}
.thumb {
@@ -19,9 +49,10 @@
width: 18px;
height: 18px;
border-radius: 50%;
background: white;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
transition: transform 0.2s;
z-index: 1;
}
.switch.on .thumb {
@@ -33,6 +64,19 @@
height: 18px;
}
.compact::before,
.compact::after {
font-size: 8px;
}
.compact::before {
left: 5px;
}
.compact::after {
right: 5px;
}
.compact .thumb {
width: 14px;
height: 14px;
apps/business/src/components/Tooltip.module.css
+3 -3
View File
@@ -21,7 +21,7 @@
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s;
background: rgba(255, 255, 255, 0.95);
background: var(--elevated-surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
@@ -44,10 +44,10 @@
.tipTop::after {
top: 100%;
border-top-color: rgba(255, 255, 255, 0.95);
border-top-color: var(--elevated-surface);
}
.tipBottom::after {
bottom: 100%;
border-bottom-color: rgba(255, 255, 255, 0.95);
border-bottom-color: var(--elevated-surface);
}
apps/business/src/components/UserProductStatusModal.module.css
+1 -1
View File
@@ -18,7 +18,7 @@
padding: var(--field-padding-y) var(--field-padding-x);
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
cursor: pointer;
font-size: var(--field-font-size);
font-family: var(--font-ui);
apps/business/src/components/VariationsModal.module.css
+6 -6
View File
@@ -28,7 +28,7 @@
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
background: rgba(255, 255, 255, 0.92);
background: var(--elevated-surface);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
@@ -117,7 +117,7 @@
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: var(--radius-sm);
}
@@ -208,7 +208,7 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -236,7 +236,7 @@
line-height: 1.5;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
@@ -262,7 +262,7 @@
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 50px;
transition: all 0.15s;
@@ -300,7 +300,7 @@
font-size: var(--field-font-size);
font-family: var(--font-ui);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
apps/business/src/components/WebsiteSliderSlideCard.module.css
+1 -1
View File
@@ -21,7 +21,7 @@
width: 100%;
aspect-ratio: 9 / 4;
overflow: hidden;
background: #fff;
background: var(--card-media-bg);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
apps/business/src/components/WebsiteStaticImageGallery.module.css
+1 -1
View File
@@ -61,7 +61,7 @@
width: 100%;
padding: 0;
overflow: hidden;
background: #fff;
background: var(--card-media-bg);
cursor: pointer;
}
apps/business/src/context/BusinessThemeContext.tsx
+6 -3
View File
@@ -2,12 +2,13 @@ import { useEffect, type ReactNode } from 'react'
import { isAbortError } from '../lib/api'
import { getBusinessDomain } from '../lib/config'
import { resolveTenantByDomain } from '../services/tenantService'
import { applyBusinessPrimaryColor } from '../utils/applyBusinessTheme'
import { applyBusinessPrimaryColor, applyThemeMode } from '../utils/applyBusinessTheme'
import { normalizeBusinessPrimaryColorId } from '../utils/businessPrimaryColors'
/**
* Applies the tenant primary color. Does not reset to blue on unmount —
* Strict Mode / HMR remounts were wiping the brand color back to the default.
* Applies the tenant primary color and dashboard theme mode.
* Does not reset to blue on unmount — Strict Mode / HMR remounts were
* wiping the brand color back to the default.
*/
export function BusinessThemeProvider({ children }: { children: ReactNode }) {
useEffect(() => {
@@ -21,9 +22,11 @@ export function BusinessThemeProvider({ children }: { children: ReactNode }) {
applyBusinessPrimaryColor(
normalizeBusinessPrimaryColorId(tenant.primaryColor),
)
applyThemeMode(tenant.themeMode)
} catch (err) {
if (isAbortError(err) || controller.signal.aborted) return
applyBusinessPrimaryColor(undefined)
applyThemeMode('light')
}
}
apps/business/src/context/TenantBrandingContext.tsx
+27 -3
View File
@@ -15,7 +15,12 @@ import { getBusinessDomain } from '../lib/config'
import { BUSINESS_PROFILE_UPDATED_EVENT } from '../lib/businessContext'
import { getBusinessProfile } from '../services/businessProfileService'
import { resolveTenantByDomain } from '../services/tenantService'
import { applyBusinessPrimaryColor } from '../utils/applyBusinessTheme'
import {
applyBusinessPrimaryColor,
applyThemeMode,
pickThemedLogoUrl,
type DashboardThemeMode,
} from '../utils/applyBusinessTheme'
import { normalizeBusinessPrimaryColorId } from '../utils/businessPrimaryColors'
import {
DEFAULT_ENABLED_BUSINESS_MODULES,
@@ -31,6 +36,7 @@ interface TenantBrandingContextValue {
businessNameEn: string
logoUrl: string | null
faviconUrl: string | null
themeMode: DashboardThemeMode
enabledModules: BusinessModuleId[]
homeCharts: [HomeChartId, HomeChartId]
refreshBranding: () => void
@@ -54,6 +60,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
const [nameFa, setNameFa] = useState('')
const [logoUrl, setLogoUrl] = useState<string | null>(null)
const [faviconUrl, setFaviconUrl] = useState<string | null>(null)
const [themeMode, setThemeMode] = useState<DashboardThemeMode>('light')
const [enabledModules, setEnabledModules] = useState<BusinessModuleId[]>(
DEFAULT_ENABLED_BUSINESS_MODULES,
)
@@ -78,7 +85,13 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
let nextNameEn = pickBusinessName(tenant.name, domain)
let nextNameFa = pickBusinessName(tenant.nameFa, tenant.name, domain)
let nextLogo = tenant.logoUrl?.trim() || null
const nextThemeMode: DashboardThemeMode =
tenant.themeMode === 'dark' ? 'dark' : 'light'
let nextLogo = pickThemedLogoUrl(
tenant.logoUrl,
tenant.logoDarkUrl,
nextThemeMode,
)
let nextFavicon =
tenant.faviconUrl?.trim() || tenant.logoUrl?.trim() || null
@@ -96,7 +109,12 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
nextNameFa,
domain,
)
nextLogo = profile.profile.logoUrl?.trim() || nextLogo
nextLogo =
pickThemedLogoUrl(
profile.profile.logoUrl,
profile.profile.logoDarkUrl,
nextThemeMode,
) || nextLogo
nextFavicon =
profile.profile.faviconUrl?.trim() ||
profile.profile.logoUrl?.trim() ||
@@ -113,12 +131,14 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
setNameFa(nextNameFa || nextNameEn || domain)
setLogoUrl(nextLogo)
setFaviconUrl(nextFavicon)
setThemeMode(nextThemeMode)
setEnabledModules(normalizeEnabledBusinessModules(tenant.enabledModules))
setHomeCharts(normalizeHomeCharts(tenant.homeCharts))
applyDocumentFavicon(nextFavicon)
applyBusinessPrimaryColor(
normalizeBusinessPrimaryColorId(tenant.primaryColor),
)
applyThemeMode(nextThemeMode)
if (!defaultLocaleAppliedRef.current) {
defaultLocaleAppliedRef.current = true
if (tenant.defaultLocale === 'en' || tenant.defaultLocale === 'fa') {
@@ -135,10 +155,12 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
setNameFa(domain)
setLogoUrl(null)
setFaviconUrl(null)
setThemeMode('light')
setEnabledModules([...DEFAULT_ENABLED_BUSINESS_MODULES])
setHomeCharts([...DEFAULT_HOME_CHARTS])
applyDocumentFavicon(null)
applyBusinessPrimaryColor(undefined)
applyThemeMode('light')
}
}
@@ -173,6 +195,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
businessNameEn,
logoUrl,
faviconUrl,
themeMode,
enabledModules,
homeCharts,
refreshBranding,
@@ -182,6 +205,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
businessNameEn,
logoUrl,
faviconUrl,
themeMode,
enabledModules,
homeCharts,
refreshBranding,
apps/business/src/index.css
+86 -2
View File
@@ -44,6 +44,16 @@
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--border-color: rgba(148, 163, 184, 0.35);
--surface: rgba(255, 255, 255, 0.82);
--card-media-bg: #ffffff;
--elevated-surface: rgba(255, 255, 255, 0.96);
--icon-bg: color-mix(in srgb, var(--primary) 14%, #ffffff);
--icon-bg-end: color-mix(in srgb, var(--primary) 8%, #f1f5f9);
--card-hover-lift: -4px;
--card-hover-shadow: 0 16px 48px rgba(var(--primary-rgb) / 0.14);
--card-hover-transition: transform 0.25s ease, box-shadow 0.25s ease;
--table-header-bg: rgba(255, 255, 255, 0.35);
--sidebar-width: 260px;
--radius: 16px;
--radius-sm: 12px;
@@ -61,6 +71,57 @@
sans-serif;
}
/*
* Dark mode: neutral dark gray backgrounds.
* Brand/theme color (--primary) is for accents only — not page/card backgrounds.
*/
html[data-theme='dark'] {
color-scheme: dark;
--bg-gradient-start: #2a2d34;
--bg-gradient-mid: #22252b;
--bg-gradient-end: #1a1d23;
--glass-bg: rgba(45, 49, 57, 0.9);
--header-bg: color-mix(in srgb, #2a2d34 92%, transparent);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
--modal-overlay-bg: rgba(0, 0, 0, 0.6);
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--border-color: rgba(255, 255, 255, 0.12);
--surface: rgba(55, 59, 68, 0.95);
--card-media-bg: #32363f;
--elevated-surface: #3a3e48;
--toast-bg: rgba(58, 62, 72, 0.96);
--toast-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
--card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
/* Table header: one step above the row, still dark */
--table-header-bg: rgba(255, 255, 255, 0.07);
/* Icon chip: dark gray tile, slight primary tint — not a light wash */
--icon-bg: color-mix(in srgb, var(--primary) 22%, #2f333c);
--icon-bg-end: color-mix(in srgb, var(--primary) 12%, #25282f);
}
html[data-theme='dark'] select {
background-color: var(--surface);
color: var(--text-primary);
border-color: var(--border-color);
}
html[data-theme='dark']
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
html[data-theme='dark'] textarea {
background-color: var(--surface);
color: var(--text-primary);
border-color: var(--border-color);
}
html {
min-height: 100%;
}
@@ -91,6 +152,29 @@ body {
overflow-x: hidden;
}
html[data-theme='dark'] body {
background: linear-gradient(
135deg,
var(--bg-gradient-start) 0%,
var(--bg-gradient-mid) 45%,
var(--bg-gradient-end) 100%
);
background-attachment: fixed;
}
/* Soft neutral aura — no theme-color wash on the page */
html[data-theme='dark'] body::before {
content: '';
position: fixed;
inset: -30%;
z-index: -1;
pointer-events: none;
display: block;
background:
radial-gradient(ellipse 520px 520px at 72% 18%, rgba(255, 255, 255, 0.04), transparent 72%),
radial-gradient(ellipse 420px 420px at 22% 82%, rgba(255, 255, 255, 0.03), transparent 72%);
}
/* Portaled dialogs sit on body; blur the app behind them. */
body:has([aria-modal='true']) #root {
filter: blur(var(--modal-overlay-blur, 16px));
@@ -117,8 +201,8 @@ select {
font-size: var(--field-font-size);
line-height: 1.4;
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(148, 163, 184, 0.35);
background-color: var(--surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
min-height: var(--field-height);
padding: var(--field-padding-y) var(--select-padding-end) var(--field-padding-y) var(--field-padding-x);
apps/business/src/pages/AddNewProductPage.module.css
+4 -4
View File
@@ -158,7 +158,7 @@
font-size: var(--field-font-size);
line-height: 1.4;
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
@@ -261,7 +261,7 @@
font-weight: 500;
line-height: 1.2;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 50px;
transition: border-color 0.15s, color 0.15s, background 0.15s;
@@ -318,7 +318,7 @@
font-size: var(--field-font-size);
line-height: 1.4;
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
cursor: pointer;
@@ -363,7 +363,7 @@
font-size: var(--field-font-size);
line-height: 1.4;
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
apps/business/src/pages/BusinessProfilePage.module.css
+1 -1
View File
@@ -128,7 +128,7 @@
font-size: var(--field-font-size);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
}
.selectField {
apps/business/src/pages/CustomerProductDetailsPage.module.css
+2 -2
View File
@@ -72,7 +72,7 @@
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
background: #ffffff;
background: var(--card-media-bg);
}
.galleryThumbs {
@@ -86,7 +86,7 @@
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
background: #ffffff;
background: var(--card-media-bg);
}
.galleryThumb img {
apps/business/src/pages/CustomersPage.module.css
+1 -1
View File
@@ -76,7 +76,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.35);
background: var(--table-header-bg);
}
.td {
apps/business/src/pages/InvoicesPage.module.css
+2 -2
View File
@@ -76,7 +76,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.35);
background: var(--table-header-bg);
}
.td {
@@ -433,7 +433,7 @@
padding: 12px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.4);
background: var(--surface);
}
.detailItemTop {
apps/business/src/pages/LoginPage.module.css
+14 -7
View File
@@ -15,12 +15,12 @@
width: 100%;
max-width: 420px;
padding: 24px 32px 28px;
background: rgba(255, 255, 255, 0.75);
background: var(--glass-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(31, 38, 135, 0.12);
box-shadow: var(--glass-shadow);
}
.brand {
@@ -176,8 +176,8 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(148, 163, 184, 0.35);
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
@@ -325,13 +325,20 @@ button.submitBtn {
.error {
font-size: 13px;
color: #b91c1c;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.25);
line-height: 1.55;
color: #fecaca;
background: rgba(239, 68, 68, 0.16);
border: 1px solid rgba(248, 113, 113, 0.45);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
:global(html:not([data-theme='dark'])) .error {
color: #b91c1c;
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.25);
}
.info {
font-size: 13px;
color: var(--text-secondary);
apps/business/src/pages/OrdersPage.module.css
+1 -1
View File
@@ -84,7 +84,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.35);
background: var(--table-header-bg);
}
.td {
apps/business/src/pages/PortfolioDetailsPage.module.css
+1 -1
View File
@@ -163,7 +163,7 @@
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: var(--radius);
overflow: hidden;
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
apps/business/src/pages/ProductDetailsPage.module.css
+2 -2
View File
@@ -23,7 +23,7 @@
width: 100%;
max-width: 320px;
aspect-ratio: 1 / 1;
background: #ffffff;
background: var(--card-media-bg);
border-radius: var(--radius-sm);
border: 1px solid rgba(148, 163, 184, 0.15);
overflow: hidden;
@@ -70,7 +70,7 @@
.thumb {
width: 52px;
height: 52px;
background: #fff;
background: var(--card-media-bg);
border: 2px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
overflow: hidden;
apps/business/src/pages/ProfilePage.module.css
+1 -1
View File
@@ -70,7 +70,7 @@
font-family: var(--font-ui);
line-height: 1.4;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.8);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
apps/business/src/pages/SettingsPage.module.css
+2 -2
View File
@@ -6,7 +6,7 @@
.gatewayCard,
.comingSoonCard {
background: rgba(255, 255, 255, 0.45);
background: var(--glass-bg);
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: var(--radius);
padding: 20px;
@@ -99,7 +99,7 @@
line-height: 1.4;
font-family: var(--font-ui);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
outline: none;
apps/business/src/pages/StoreItemsPage.module.css
+1 -1
View File
@@ -85,7 +85,7 @@
padding: 0 36px;
border-radius: 50px;
border: 1px solid rgba(var(--primary-rgb) / 0.3);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 8px 28px rgba(31, 38, 135, 0.12);
apps/business/src/pages/StoreSettingsPage.module.css
+1 -1
View File
@@ -49,7 +49,7 @@
line-height: 1.4;
font-family: inherit;
color: var(--text-primary);
background: rgba(255, 255, 255, 0.6);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: var(--radius-sm);
transition: border-color 0.2s, box-shadow 0.2s;
apps/business/src/pages/WebsiteContactPage.module.css
+2 -2
View File
@@ -56,7 +56,7 @@
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.35);
background: var(--table-header-bg);
}
.td {
@@ -133,7 +133,7 @@
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.55);
background: var(--surface);
border: 1px solid rgba(148, 163, 184, 0.25);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
apps/business/src/pages/WebsiteSettingsPage.module.css
+2 -2
View File
@@ -17,7 +17,7 @@
font-size: var(--field-font-size);
font-family: var(--font-ui);
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--select-arrow-offset) center;
@@ -60,7 +60,7 @@
font-family: var(--font-ui);
font-weight: 600;
color: var(--primary);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
border: 1px solid rgba(var(--primary-rgb) / 0.35);
border-radius: var(--radius-sm);
cursor: pointer;
apps/business/src/pages/WebsiteStaticImagesPage.module.css
+1 -1
View File
@@ -71,7 +71,7 @@
appearance: none;
-webkit-appearance: none;
padding-right: var(--select-padding-end);
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--select-arrow-offset) center;
apps/business/src/services/tenantService.ts
+3
View File
@@ -1,6 +1,7 @@
import { apiRequest } from '../lib/api'
import type { DashboardLocale } from '@meshkee/dashboard-core'
import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
import type { DashboardThemeMode } from '../utils/applyBusinessTheme'
import type { BusinessModuleId, HomeChartId } from '../utils/businessModules'
export interface ResolvedTenant {
@@ -11,10 +12,12 @@ export interface ResolvedTenant {
domain: string
primaryColor: BusinessPrimaryColorId
defaultLocale?: DashboardLocale
themeMode?: DashboardThemeMode
enabledModules?: BusinessModuleId[]
homeCharts?: [HomeChartId, HomeChartId]
specialProductsSource?: 'product' | 'store_item'
logoUrl?: string | null
logoDarkUrl?: string | null
faviconUrl?: string | null
}
apps/business/src/styles/ai.module.css
+1 -1
View File
@@ -89,7 +89,7 @@
textarea.aiPromptTextarea:focus {
border: 2px solid transparent;
background-image:
linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
linear-gradient(var(--elevated-surface), var(--elevated-surface)),
linear-gradient(
90deg,
#ff375f 0%,
apps/business/src/utils/applyBusinessTheme.ts
+19
View File
@@ -4,6 +4,25 @@ import {
type BusinessPrimaryColorId,
} from './businessPrimaryColors'
export type DashboardThemeMode = 'light' | 'dark'
export function applyThemeMode(mode: 'light' | 'dark' | undefined) {
document.documentElement.setAttribute(
'data-theme',
mode === 'dark' ? 'dark' : 'light',
)
}
export function pickThemedLogoUrl(
lightUrl: string | null | undefined,
darkUrl: string | null | undefined,
mode: DashboardThemeMode,
): string | null {
const light = lightUrl?.trim() || null
const dark = darkUrl?.trim() || null
return mode === 'dark' ? dark || light : light
}
const CSS_VAR_DEFAULTS: Record<string, string> = {
'--primary': '#3b82f6',
'--primary-glow': '#3b82f6',