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

Give dashboards a themed orb background and a solid current-nav state.

Browse Source 
Login pages share the same wash as the app shell; customer light mode matches business while dark mode stays gray.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-17 09:00:08 +03:30
co-authored by Cursor
parent e0e68de30f
commit 36180cda2b
25 changed files with 636 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/customer/src/components/BackgroundOrbs.module.css
+138
View File
@@ -0,0 +1,138 @@
.bgOrbs {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.bgOrbs::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(255, 255, 255, 0.2) 100%);
backdrop-filter: blur(1px);
}
.orb1,
.orb2,
.orb3,
.orb4 {
position: absolute;
border-radius: 50%;
filter: blur(100px);
will-change: transform;
}
.orb1 {
width: 560px;
height: 560px;
background: radial-gradient(
circle,
color-mix(in srgb, var(--primary-light) 55%, #ffffff) 0%,
color-mix(in srgb, var(--primary) 30%, #ffffff) 55%,
transparent 72%
);
opacity: 0.55;
top: -140px;
right: -120px;
animation: floatOrb1 18s ease-in-out infinite;
}
.orb2 {
width: 480px;
height: 480px;
background: radial-gradient(
circle,
color-mix(in srgb, var(--primary) 28%, #ffffff) 0%,
color-mix(in srgb, var(--primary) 38%, #ffffff) 50%,
transparent 70%
);
opacity: 0.42;
bottom: -100px;
left: 15%;
animation: floatOrb2 22s ease-in-out infinite;
}
.orb3 {
width: 380px;
height: 380px;
background: radial-gradient(
circle,
color-mix(in srgb, var(--page-accent) 30%, #ffffff) 0%,
color-mix(in srgb, var(--page-accent) 48%, #ffffff) 55%,
transparent 72%
);
opacity: 0.42;
top: 38%;
left: -100px;
animation: floatOrb3 20s ease-in-out infinite;
}
.orb4 {
width: 320px;
height: 320px;
background: radial-gradient(
circle,
color-mix(in srgb, var(--primary-light) 45%, var(--page-accent)) 0%,
color-mix(in srgb, var(--page-accent) 32%, var(--primary-light)) 50%,
transparent 70%
);
opacity: 0.38;
top: 12%;
right: 28%;
animation: floatOrb4 24s ease-in-out infinite;
}
@keyframes floatOrb1 {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-30px, 25px) scale(1.06);
}
}
@keyframes floatOrb2 {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(35px, -20px) scale(1.05);
}
}
@keyframes floatOrb3 {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(20px, 30px) scale(1.08);
}
}
@keyframes floatOrb4 {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-25px, -15px) scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
.orb1,
.orb2,
.orb3,
.orb4 {
animation: none;
}
}
:global(html[data-theme='dark']) .bgOrbs {
display: none;
}
apps/customer/src/components/BackgroundOrbs.tsx
+12
View File
@@ -0,0 +1,12 @@
import styles from './BackgroundOrbs.module.css'
export function BackgroundOrbs() {
return (
<div className={styles.bgOrbs} aria-hidden="true">
<div className={styles.orb1} />
<div className={styles.orb2} />
<div className={styles.orb3} />
<div className={styles.orb4} />
</div>
)
}
apps/customer/src/components/PageLayout.tsx
+2
View File
@@ -3,6 +3,7 @@ import { Outlet, useLocation } from 'react-router-dom'
import { useT } from '../i18n/useT'
import { Sidebar } from './Sidebar'
import { Header } from './Header'
import { BackgroundOrbs } from './BackgroundOrbs'
import styles from './PageLayout.module.css'
const NAV_EXPAND_QUERY = '(min-width: 1281px)'
@@ -43,6 +44,7 @@ export function PageLayout() {
return (
<div className={styles.layout} data-nav-open={navOpen ? 'true' : undefined}>
<BackgroundOrbs />
{navOpen ? (
<button
type="button"
apps/customer/src/components/Sidebar.module.css
+18 -4
View File
@@ -115,8 +115,17 @@
}
.navItem.active {
background: rgba(var(--primary-rgb) / 0.12);
color: var(--primary);
background: var(--primary);
color: #fff;
}
.navItem.active:hover {
background: var(--primary-dark);
color: #fff;
}
.navItem.active .chevron {
color: #fff;
}
.navGroupBtn {
@@ -163,8 +172,13 @@
}
.subNavActive {
background: rgba(var(--primary-rgb) / 0.1);
color: var(--primary);
background: var(--primary);
color: #fff;
}
.subNavActive:hover {
background: var(--primary-dark);
color: #fff;
}
.footer {
apps/customer/src/index.css
+41 -5
View File
@@ -8,11 +8,15 @@
--font-ui: var(--font-en), var(--font-fa), -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma,
sans-serif;
/* Neutral light surfaces (theme color stays on accents only) */
--bg-gradient-start: #f4f5f7;
--bg-gradient-mid: #eef0f3;
--bg-gradient-end: #e8eaee;
--glass-bg: rgba(255, 255, 255, 0.72);
/* Light: themed wash (same pairing as business — primary-light + page accent) */
--bg-gradient-start: color-mix(in srgb, var(--primary-light) 20%, #ffffff);
--bg-gradient-mid: color-mix(
in srgb,
var(--primary-light) 13%,
color-mix(in srgb, var(--page-accent, var(--primary)) 4%, #ffffff)
);
--bg-gradient-end: color-mix(in srgb, var(--page-accent, var(--primary)) 4%, #ffffff);
--glass-bg: rgba(255, 255, 255, 0.42);
--header-bg: color-mix(
in srgb,
color-mix(in srgb, var(--primary-light) 28%, #ffffff) 92%,
@@ -73,8 +77,40 @@ html[data-theme='dark'] textarea {
border-color: var(--border-color);
}
body {
background:
radial-gradient(ellipse 80% 60% at 10% 0%, rgba(var(--primary-rgb) / 0.07) 0%, transparent 55%),
radial-gradient(
ellipse 70% 50% at 90% 100%,
rgba(var(--page-accent-rgb, var(--primary-rgb)) / 0.06) 0%,
transparent 50%
),
linear-gradient(
135deg,
var(--bg-gradient-start) 0%,
var(--bg-gradient-mid) 45%,
var(--bg-gradient-end) 100%
);
background-attachment: fixed;
}
body::before {
display: none;
}
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 {
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%);
apps/customer/src/pages/LoginPage.module.css
+2
View File
@@ -63,6 +63,8 @@
}
.poweredBy {
position: relative;
z-index: 1;
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
apps/customer/src/pages/LoginPage.tsx
+2
View File
@@ -19,6 +19,7 @@ import {
import { LanguageSelect, PasswordStrengthMeter, isPasswordStrong, useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import { safeRedirectPath } from '../lib/redirect'
import { BackgroundOrbs } from '../components/BackgroundOrbs'
import meshkeeLogo from '../assets/meshkee-logo.png'
import styles from './LoginPage.module.css'
@@ -372,6 +373,7 @@ export function LoginPage() {
return (
<div className={styles.page}>
<BackgroundOrbs />
<div className={styles.card}>
<div className={styles.brand}>
<img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />
apps/customer/src/utils/applyBusinessTheme.ts
+4
View File
@@ -15,6 +15,8 @@ const CSS_VAR_DEFAULTS: Record<string, string> = {
'--chart-accent-dark': '#0891b2',
'--chart-accent-rgb': '6 182 212',
'--chart-accent-dark-rgb': '8 145 178',
'--page-accent': '#38bdf8',
'--page-accent-rgb': '56 189 248',
}
export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -31,6 +33,8 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
root.style.setProperty('--page-accent', tokens.pageAccent)
root.style.setProperty('--page-accent-rgb', tokens.pageAccentRgb)
}
export function resetBusinessPrimaryColor() {
apps/customer/src/utils/businessPrimaryColors.ts
+51 -6
View File
@@ -30,6 +30,9 @@ export type BusinessPrimaryColorTokens = {
chartAccentDark: string
chartAccentRgb: string
chartAccentDarkRgb: string
/** Soft analog for the page wash — stays in-family (red→peach, blue→sky). */
pageAccent: string
pageAccentRgb: string
}
const PURPLE_ACCENT = {
@@ -46,6 +49,36 @@ const CYAN_ACCENT = {
chartAccentDarkRgb: '8 145 178',
} as const
const PEACH_PAGE = {
pageAccent: '#fb923c',
pageAccentRgb: '251 146 60',
} as const
const GOLD_PAGE = {
pageAccent: '#fbbf24',
pageAccentRgb: '251 191 36',
} as const
const SKY_PAGE = {
pageAccent: '#38bdf8',
pageAccentRgb: '56 189 248',
} as const
const PINK_PAGE = {
pageAccent: '#f472b6',
pageAccentRgb: '244 114 182',
} as const
const MINT_PAGE = {
pageAccent: '#34d399',
pageAccentRgb: '52 211 153',
} as const
const SAND_PAGE = {
pageAccent: '#d6b896',
pageAccentRgb: '214 184 150',
} as const
export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
BusinessPrimaryColorId,
BusinessPrimaryColorTokens
@@ -59,6 +92,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '239 68 68',
primaryDarkRgb: '220 38 38',
...PURPLE_ACCENT,
...PEACH_PAGE,
},
'dark-red': {
label: 'Dark Red',
@@ -69,16 +103,18 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '153 27 27',
primaryDarkRgb: '127 29 29',
...PURPLE_ACCENT,
...PEACH_PAGE,
},
yellow: {
label: 'Yellow',
primary: '#eab308',
primaryDark: '#ca8a04',
primaryLight: '#fef9c3',
primaryGlow: '#eab308',
primaryRgb: '234 179 8',
primaryDarkRgb: '202 138 4',
primary: '#facc15',
primaryDark: '#eab308',
primaryLight: '#fde047',
primaryGlow: '#facc15',
primaryRgb: '250 204 21',
primaryDarkRgb: '234 179 8',
...PURPLE_ACCENT,
...GOLD_PAGE,
},
black: {
label: 'Black',
@@ -89,6 +125,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '30 41 59',
primaryDarkRgb: '15 23 42',
...CYAN_ACCENT,
...SKY_PAGE,
},
cyan: {
label: 'Cyan',
@@ -99,6 +136,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '6 182 212',
primaryDarkRgb: '8 145 178',
...PURPLE_ACCENT,
...SKY_PAGE,
},
purple: {
label: 'Purple',
@@ -109,6 +147,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '168 85 247',
primaryDarkRgb: '147 51 234',
...CYAN_ACCENT,
...PINK_PAGE,
},
'light-blue': {
label: 'Light Blue',
@@ -119,6 +158,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '56 189 248',
primaryDarkRgb: '14 165 233',
...CYAN_ACCENT,
...SKY_PAGE,
},
'dark-blue': {
label: 'Blue',
@@ -129,6 +169,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '59 130 246',
primaryDarkRgb: '37 99 235',
...CYAN_ACCENT,
...SKY_PAGE,
},
brown: {
label: 'Brown',
@@ -139,6 +180,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '139 94 60',
primaryDarkRgb: '111 74 47',
...CYAN_ACCENT,
...SAND_PAGE,
},
navy: {
label: 'Dark Blue',
@@ -149,6 +191,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '30 58 138',
primaryDarkRgb: '23 37 84',
...CYAN_ACCENT,
...SKY_PAGE,
},
'dark-green': {
label: 'Dark Green',
@@ -159,6 +202,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '22 101 52',
primaryDarkRgb: '20 83 45',
...CYAN_ACCENT,
...MINT_PAGE,
},
orange: {
label: 'Orange',
@@ -169,6 +213,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '234 88 12',
primaryDarkRgb: '194 65 12',
...PURPLE_ACCENT,
...PEACH_PAGE,
},
}