From f4428a394c2b2e6c4e47d013d92f0040aa1d1ad5 Mon Sep 17 00:00:00 2001 From: Anso Date: Sun, 29 Mar 2026 19:09:21 -0400 Subject: [PATCH] refactor: use nautical icons for Skipper and Admiral tiers (#257) * refactor: use nautical icons for Skipper and Admiral tiers Replace Crown/Users with Compass (Skipper) and ShipWheel (Admiral) across TierBadge, ProGate, AdmiralGate, and SettingsModal upgrade cards. * feat(sso): add Admiral tier badge next to SSO Authentication title --- frontend/src/components/AdmiralGate.tsx | 8 ++++---- frontend/src/components/ProGate.tsx | 8 ++++---- frontend/src/components/SSOSection.tsx | 3 ++- frontend/src/components/SettingsModal.tsx | 6 +++--- frontend/src/components/TierBadge.tsx | 6 +++--- 5 files changed, 16 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/AdmiralGate.tsx b/frontend/src/components/AdmiralGate.tsx index c6417012..99606309 100644 --- a/frontend/src/components/AdmiralGate.tsx +++ b/frontend/src/components/AdmiralGate.tsx @@ -1,5 +1,5 @@ import { type ReactNode, useState } from 'react'; -import { Crown } from 'lucide-react'; +import { ShipWheel } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { useLicense } from '@/context/LicenseContext'; @@ -30,7 +30,7 @@ export function AdmiralGate({ children, featureName = 'This feature' }: AdmiralG
- + Upgrade to Admiral to unlock
@@ -41,7 +41,7 @@ export function AdmiralGate({ children, featureName = 'This feature' }: AdmiralG return (
- +

{featureName} requires Sencho Admiral

@@ -64,7 +64,7 @@ export function AdmiralGate({ children, featureName = 'This feature' }: AdmiralG size="sm" onClick={() => window.open('https://sencho.io/pricing', '_blank')} > - + Get Admiral
diff --git a/frontend/src/components/ProGate.tsx b/frontend/src/components/ProGate.tsx index 8378e729..9765ea41 100644 --- a/frontend/src/components/ProGate.tsx +++ b/frontend/src/components/ProGate.tsx @@ -1,5 +1,5 @@ import { type ReactNode, useState } from 'react'; -import { Crown } from 'lucide-react'; +import { Compass } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { useLicense } from '@/context/LicenseContext'; @@ -30,7 +30,7 @@ export function ProGate({ children, featureName = 'This feature' }: ProGateProps
- + Upgrade to Pro to unlock
@@ -41,7 +41,7 @@ export function ProGate({ children, featureName = 'This feature' }: ProGateProps return (
- +

{featureName} requires Sencho Pro

@@ -64,7 +64,7 @@ export function ProGate({ children, featureName = 'This feature' }: ProGateProps size="sm" onClick={() => window.open('https://sencho.io/pricing', '_blank')} > - + Get Sencho Pro
diff --git a/frontend/src/components/SSOSection.tsx b/frontend/src/components/SSOSection.tsx index d2d8b4f5..fe137dd0 100644 --- a/frontend/src/components/SSOSection.tsx +++ b/frontend/src/components/SSOSection.tsx @@ -8,6 +8,7 @@ import { Badge } from '@/components/ui/badge'; import { toast } from 'sonner'; import { apiFetch } from '@/lib/api'; import { AdmiralGate } from './AdmiralGate'; +import { TierBadge } from './TierBadge'; import { Shield, Loader2, CheckCircle, XCircle } from 'lucide-react'; interface SSOProviderConfig { @@ -334,7 +335,7 @@ export function SSOSection() {

- SSO Authentication + SSO Authentication

Connect your identity provider so team members can sign in with their existing credentials. diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx index 1968ec65..7afdb2a6 100644 --- a/frontend/src/components/SettingsModal.tsx +++ b/frontend/src/components/SettingsModal.tsx @@ -18,7 +18,7 @@ import { Badge } from '@/components/ui/badge'; import { toast } from 'sonner'; import { apiFetch } from '@/lib/api'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; -import { Shield, Activity, Bell, Code, Server, Package, RefreshCw, Database, Info, Crown, CheckCircle, Check, XCircle, Clock, Webhook, Copy, Trash2, Plus, ChevronDown, ChevronRight, History, Users, Pencil, ExternalLink, CreditCard, LifeBuoy, Book, Mail, Bug, Zap } from 'lucide-react'; +import { Shield, Activity, Bell, Code, Server, Package, RefreshCw, Database, Info, Crown, CheckCircle, Check, XCircle, Clock, Webhook, Copy, Trash2, Plus, ChevronDown, ChevronRight, History, Users, Pencil, ExternalLink, CreditCard, LifeBuoy, Book, Mail, Bug, Zap, Compass, ShipWheel } from 'lucide-react'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; import { NodeManager } from './NodeManager'; @@ -1374,7 +1374,7 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) { {license?.tier !== 'pro' && (

- + Skipper Popular
@@ -1402,7 +1402,7 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) { {/* Admiral Card */}
- + Admiral

For teams managing shared infrastructure.

diff --git a/frontend/src/components/TierBadge.tsx b/frontend/src/components/TierBadge.tsx index 3e71bb23..f59dccd5 100644 --- a/frontend/src/components/TierBadge.tsx +++ b/frontend/src/components/TierBadge.tsx @@ -1,4 +1,4 @@ -import { Crown, Globe, Users } from 'lucide-react'; +import { Compass, Globe, ShipWheel } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { useLicense, type LicenseTier, type LicenseVariant, type LicenseStatus } from '@/context/LicenseContext'; @@ -11,8 +11,8 @@ interface TierBadgeProps { const tierConfig = { community: { icon: Globe, label: 'Community' }, - pro: { icon: Crown, label: 'Skipper' }, - team: { icon: Users, label: 'Admiral' }, + pro: { icon: Compass, label: 'Skipper' }, + team: { icon: ShipWheel, label: 'Admiral' }, } as const; function resolveTier(tier: LicenseTier, variant: LicenseVariant, status: LicenseStatus) {