cameleer/cameleer-saas
2
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align button icons and polish vendor sidebar
All checks were successful
CI / build (push) Successful in 2m8s
Details
CI / docker (push) Successful in 1m41s
Details

Browse Source 
Fix vertical alignment of Lucide icons inside Button children across
all pages by adding verticalAlign offsets (-3px for 16px icons, -2px
for 14px icons). The design system Button wraps children in an inline
span, so SVG icons defaulted to baseline alignment.

Hide the redundant top-right "Create Tenant" button on VendorTenantsPage
when no tenants exist — the EmptyState already provides that action.

Add icons to all vendor sidebar sub-items for consistency (previously
only Email Connector had one).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-25 21:30:37 +02:00
parent adb4ef1af8
commit dee1f39554
9 changed files with 44 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/components/Layout.tsx
View File

@@ -4,7 +4,7 @@ import {
Sidebar,
TopBar,
} from '@cameleer/design-system';
import { LayoutDashboard, ShieldCheck, Users, Settings, Shield, Building, ScrollText, Mail } from 'lucide-react';
import { LayoutDashboard, ShieldCheck, Users, Settings, Shield, Building, ScrollText, Mail, BarChart3, Server, ExternalLink } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { useAuth } from '../auth/useAuth';
import { useScopes } from '../auth/useScopes';
@@ -78,6 +78,7 @@ export function Layout() {
color: isActive(location, '/vendor/tenants') && !location.pathname.startsWith('/vendor/tenants/') ? 'var(--amber)' : 'var(--text-muted)' }}
onClick={() => navigate('/vendor/tenants')}
>
<Users size={12} style={{ marginRight: 6, verticalAlign: -1 }} />
Tenants
</div>
{vendorTenants?.filter(t => t.status !== 'DELETED').map(t => (
@@ -99,6 +100,7 @@ export function Layout() {
color: isActive(location, '/vendor/audit') ? 'var(--amber)' : 'var(--text-muted)' }}
onClick={() => navigate('/vendor/audit')}
>
<ScrollText size={12} style={{ marginRight: 6, verticalAlign: -1 }} />
Audit Log
</div>
<div
@@ -107,6 +109,7 @@ export function Layout() {
color: isActive(location, '/vendor/certificates') ? 'var(--amber)' : 'var(--text-muted)' }}
onClick={() => navigate('/vendor/certificates')}
>
<ShieldCheck size={12} style={{ marginRight: 6, verticalAlign: -1 }} />
Certificates
</div>
<div
@@ -115,6 +118,7 @@ export function Layout() {
color: isActive(location, '/vendor/metrics') ? 'var(--amber)' : 'var(--text-muted)' }}
onClick={() => navigate('/vendor/metrics')}
>
<BarChart3 size={12} style={{ marginRight: 6, verticalAlign: -1 }} />
Metrics
</div>
<div
@@ -123,6 +127,7 @@ export function Layout() {
color: isActive(location, '/vendor/infrastructure') ? 'var(--amber)' : 'var(--text-muted)' }}
onClick={() => navigate('/vendor/infrastructure')}
>
<Server size={12} style={{ marginRight: 6, verticalAlign: -1 }} />
Infrastructure
</div>
<div
@@ -138,6 +143,7 @@ export function Layout() {
style={{ padding: '6px 12px 6px 36px', fontSize: 13, cursor: 'pointer', color: 'var(--text-muted)' }}
onClick={() => window.open(`${window.location.protocol}//${window.location.hostname}:3002`, '_blank', 'noopener')}
>
<ExternalLink size={12} style={{ marginRight: 6, verticalAlign: -1 }} />
Logto Console
</div>
</Sidebar.Section>