mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-07-28 04:38:59 +00:00
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
This commit is contained in:
Anso
@@ -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
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-start justify-center pt-8">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-muted/80 border border-border text-muted-foreground text-xs">
|
||||
<Crown className="w-3 h-3" />
|
||||
<ShipWheel className="w-3 h-3" />
|
||||
Upgrade to Admiral to unlock
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@ export function AdmiralGate({ children, featureName = 'This feature' }: AdmiralG
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-6 p-8">
|
||||
<div className="flex items-center justify-center w-16 h-16 rounded-2xl bg-muted/50 border border-border">
|
||||
<Crown className="w-8 h-8 text-muted-foreground" />
|
||||
<ShipWheel className="w-8 h-8 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="text-center max-w-md">
|
||||
<h3 className="text-lg font-semibold mb-2">{featureName} requires Sencho Admiral</h3>
|
||||
@@ -64,7 +64,7 @@ export function AdmiralGate({ children, featureName = 'This feature' }: AdmiralG
|
||||
size="sm"
|
||||
onClick={() => window.open('https://sencho.io/pricing', '_blank')}
|
||||
>
|
||||
<Crown className="w-4 h-4 mr-2" />
|
||||
<ShipWheel className="w-4 h-4 mr-2" />
|
||||
Get Admiral
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -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
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-start justify-center pt-8">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-muted/80 border border-border text-muted-foreground text-xs">
|
||||
<Crown className="w-3 h-3" />
|
||||
<Compass className="w-3 h-3" />
|
||||
Upgrade to Pro to unlock
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@ export function ProGate({ children, featureName = 'This feature' }: ProGateProps
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-6 p-8">
|
||||
<div className="flex items-center justify-center w-16 h-16 rounded-2xl bg-muted/50 border border-border">
|
||||
<Crown className="w-8 h-8 text-muted-foreground" />
|
||||
<Compass className="w-8 h-8 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="text-center max-w-md">
|
||||
<h3 className="text-lg font-semibold mb-2">{featureName} requires Sencho Pro</h3>
|
||||
@@ -64,7 +64,7 @@ export function ProGate({ children, featureName = 'This feature' }: ProGateProps
|
||||
size="sm"
|
||||
onClick={() => window.open('https://sencho.io/pricing', '_blank')}
|
||||
>
|
||||
<Crown className="w-4 h-4 mr-2" />
|
||||
<Compass className="w-4 h-4 mr-2" />
|
||||
Get Sencho Pro
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -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() {
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold tracking-tight flex items-center gap-2">
|
||||
<Shield className="w-5 h-5" />
|
||||
SSO Authentication
|
||||
SSO Authentication <TierBadge />
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Connect your identity provider so team members can sign in with their existing credentials.
|
||||
|
||||
@@ -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' && (
|
||||
<div className="relative border border-border rounded-xl p-4 space-y-3 bg-muted/5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Crown className="w-4 h-4 text-amber-500" />
|
||||
<Compass className="w-4 h-4 text-amber-500" />
|
||||
<span className="font-semibold text-sm">Skipper</span>
|
||||
<Badge variant="secondary" className="text-[10px] font-semibold uppercase px-1.5 py-0">Popular</Badge>
|
||||
</div>
|
||||
@@ -1402,7 +1402,7 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
|
||||
{/* Admiral Card */}
|
||||
<div className="border border-border rounded-xl p-4 space-y-3 bg-muted/5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4 text-blue-500" />
|
||||
<ShipWheel className="w-4 h-4 text-blue-500" />
|
||||
<span className="font-semibold text-sm">Admiral</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">For teams managing shared infrastructure.</p>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user