chore: upgrade @ciphera-net/ui to v0.0.18 and refactor icon imports across components

This commit is contained in:
Usman Baig
2026-01-24 12:50:43 +01:00
parent 1c4ea35296
commit 5857a2ea15
10 changed files with 41 additions and 43 deletions

View File

@@ -6,7 +6,7 @@ import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
import { LoadingOverlay } from '@ciphera-net/ui'
import SiteList from '@/components/sites/SiteList'
import { Button } from '@ciphera-net/ui'
import { BarChartIcon, LockClosedIcon, LightningBoltIcon } from '@radix-ui/react-icons'
import { BarChartIcon, LockIcon, LightningIcon } from '@ciphera-net/ui'
export default function HomePage() {
const { user, loading } = useAuth()
@@ -58,7 +58,7 @@ export default function HomePage() {
<div className="grid md:grid-cols-3 gap-8 pt-16 text-left">
<div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
<LockClosedIcon className="w-6 h-6" />
<LockIcon className="w-6 h-6" />
</div>
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Privacy First</h3>
<p className="text-neutral-600 dark:text-neutral-400">
@@ -76,7 +76,7 @@ export default function HomePage() {
</div>
<div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
<LightningBoltIcon className="w-6 h-6" />
<LightningIcon className="w-6 h-6" />
</div>
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Lightweight</h3>
<p className="text-neutral-600 dark:text-neutral-400">

View File

@@ -12,7 +12,7 @@ import Locations from '@/components/dashboard/Locations'
import TechSpecs from '@/components/dashboard/TechSpecs'
import PerformanceStats from '@/components/dashboard/PerformanceStats'
import { Select, DatePicker as DatePickerModal } from '@ciphera-net/ui'
import { LightningBoltIcon } from '@radix-ui/react-icons'
import { LightningIcon } from '@ciphera-net/ui'
// Helper to get date ranges
const getDateRange = (days: number) => {
@@ -105,7 +105,7 @@ export default function PublicDashboardPage() {
<div className="max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-8 shadow-lg">
<div className="text-center mb-6">
<div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mx-auto mb-4 text-brand-orange">
<LightningBoltIcon className="w-6 h-6" />
<LightningIcon className="w-6 h-6" />
</div>
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
Protected Dashboard
@@ -254,7 +254,7 @@ export default function PublicDashboardPage() {
rel="noopener noreferrer"
className="hidden md:flex items-center gap-2 px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
>
<LightningBoltIcon className="w-4 h-4" />
<LightningIcon className="w-4 h-4" />
<span>Powered by Ciphera</span>
</a>
</div>

View File

@@ -13,14 +13,14 @@ import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
import { motion, AnimatePresence } from 'framer-motion'
import { useAuth } from '@/lib/auth/context'
import {
GearIcon,
SettingsIcon,
GlobeIcon,
FileTextIcon,
CheckIcon,
CopyIcon,
ExclamationTriangleIcon,
LightningBoltIcon,
} from '@radix-ui/react-icons'
AlertTriangleIcon,
LightningIcon,
} from '@ciphera-net/ui'
const TIMEZONES = [
'UTC',
@@ -236,7 +236,7 @@ export default function SiteSettingsPage() {
: 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
}`}
>
<GearIcon className="w-5 h-5" />
<SettingsIcon className="w-5 h-5" />
General
</button>
<button
@@ -267,7 +267,7 @@ export default function SiteSettingsPage() {
<div className="flex-1 relative">
{!canEdit && (
<div className="mb-6 p-4 bg-amber-50 dark:bg-amber-900/10 text-amber-800 dark:text-amber-200 rounded-xl border border-amber-200 dark:border-amber-800 flex items-center gap-3">
<ExclamationTriangleIcon className="w-5 h-5" />
<AlertTriangleIcon className="w-5 h-5" />
<p className="text-sm font-medium">You have read-only access to this site. Contact an admin to make changes.</p>
</div>
)}
@@ -359,7 +359,7 @@ export default function SiteSettingsPage() {
onClick={() => setShowVerificationModal(true)}
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium"
>
<LightningBoltIcon className="w-4 h-4" />
<LightningIcon className="w-4 h-4" />
Verify Installation
</button>
<p className="text-xs text-neutral-500 dark:text-neutral-500">

View File

@@ -14,7 +14,7 @@ import {
} from 'recharts'
import type { TooltipProps } from 'recharts'
import { formatNumber, formatDuration } from '@/lib/utils/format'
import { ArrowTopRightIcon, ArrowBottomRightIcon, DownloadIcon, BarChartIcon } from '@radix-ui/react-icons'
import { ArrowUpRightIcon, ArrowDownRightIcon, DownloadIcon, BarChartIcon } from '@ciphera-net/ui'
import { Button } from '@ciphera-net/ui'
import { Checkbox } from '@ciphera-net/ui'
@@ -319,9 +319,9 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
: 'text-neutral-500'
}`}>
{(item.invertTrend ? -item.trend : item.trend) > 0 ? (
<ArrowTopRightIcon className="w-3 h-3 mr-0.5" />
<ArrowUpRightIcon className="w-3 h-3 mr-0.5" />
) : (item.invertTrend ? -item.trend : item.trend) < 0 ? (
<ArrowBottomRightIcon className="w-3 h-3 mr-0.5" />
<ArrowDownRightIcon className="w-3 h-3 mr-0.5" />
) : null}
{Math.abs(item.trend)}%
</span>

View File

@@ -2,7 +2,7 @@
import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import { ChevronDownIcon } from '@radix-ui/react-icons'
import { ChevronDownIcon } from '@ciphera-net/ui'
import { PerformanceStats as Stats, PerformanceByPageStat, getPerformanceByPage } from '@/lib/api/stats'
import { Select } from '@ciphera-net/ui'

View File

@@ -19,14 +19,14 @@ import {
import { toast } from 'sonner'
import { motion, AnimatePresence } from 'framer-motion'
import {
ExclamationTriangleIcon,
AlertTriangleIcon,
PlusIcon,
CubeIcon,
PersonIcon,
BoxIcon,
UserIcon,
CheckIcon,
Cross2Icon,
XIcon,
CopyIcon
} from '@radix-ui/react-icons'
} from '@ciphera-net/ui'
// @ts-ignore
import { Button, Input } from '@ciphera-net/ui'
@@ -198,7 +198,7 @@ export default function OrganizationSettings() {
: 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
}`}
>
<CubeIcon className="w-5 h-5" />
<BoxIcon className="w-5 h-5" />
General
</button>
<button
@@ -209,7 +209,7 @@ export default function OrganizationSettings() {
: 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
}`}
>
<PersonIcon className="w-5 h-5" />
<UserIcon className="w-5 h-5" />
Members
</button>
</nav>
@@ -462,7 +462,7 @@ export default function OrganizationSettings() {
<div className="flex justify-between items-center mb-4">
<div className="flex items-center gap-3 text-red-600">
<div className="h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center shrink-0">
<ExclamationTriangleIcon className="h-5 w-5" />
<AlertTriangleIcon className="h-5 w-5" />
</div>
<h3 className="text-lg font-semibold">Delete Organization?</h3>
</div>
@@ -473,7 +473,7 @@ export default function OrganizationSettings() {
}}
className="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-white"
>
<Cross2Icon className="w-5 h-5" />
<XIcon className="w-5 h-5" />
</button>
</div>

View File

@@ -6,7 +6,7 @@ import { listSites, deleteSite, type Site } from '@/lib/api/sites'
import { toast } from 'sonner'
import { LoadingOverlay } from '@ciphera-net/ui'
import { useAuth } from '@/lib/auth/context'
import { BarChartIcon } from '@radix-ui/react-icons'
import { BarChartIcon } from '@ciphera-net/ui'
export default function SiteList() {
const { user } = useAuth()

View File

@@ -4,12 +4,12 @@ import { useState, useEffect } from 'react'
import { createPortal } from 'react-dom'
import { motion, AnimatePresence } from 'framer-motion'
import {
Cross2Icon,
XIcon,
ExternalLinkIcon,
CheckCircledIcon,
ExclamationTriangleIcon,
LightningBoltIcon
} from '@radix-ui/react-icons'
CheckCircleIcon,
AlertTriangleIcon,
LightningIcon
} from '@ciphera-net/ui'
import { Site } from '@/lib/api/sites'
import { getRealtime } from '@/lib/api/stats'
import { toast } from 'sonner'
@@ -111,7 +111,7 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
onClick={onClose}
className="p-1 rounded-lg text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
>
<Cross2Icon className="w-5 h-5" />
<XIcon className="w-5 h-5" />
</button>
</div>
@@ -121,7 +121,7 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
<div className="space-y-4">
<div className="p-4 rounded-xl bg-brand-orange/5 border border-brand-orange/10 flex gap-4">
<div className="p-2 bg-brand-orange/10 rounded-lg h-fit text-brand-orange">
<LightningBoltIcon className="w-5 h-5" />
<LightningIcon className="w-5 h-5" />
</div>
<div className="space-y-1">
<h4 className="font-medium text-brand-orange">How this works</h4>
@@ -161,7 +161,7 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
{status === 'success' && (
<div className="flex flex-col items-center justify-center py-6 space-y-6">
<div className="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center text-green-600 dark:text-green-400">
<CheckCircledIcon className="w-8 h-8" />
<CheckCircleIcon className="w-8 h-8" />
</div>
<div className="text-center space-y-1">
<h4 className="text-xl font-bold text-neutral-900 dark:text-white">
@@ -184,7 +184,7 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
<div className="space-y-6">
<div className="flex flex-col items-center justify-center space-y-2 text-center">
<div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
<ExclamationTriangleIcon className="w-6 h-6" />
<AlertTriangleIcon className="w-6 h-6" />
</div>
<h4 className="font-medium text-red-600 dark:text-red-400">
Connection Timed Out

9
package-lock.json generated
View File

@@ -8,8 +8,7 @@
"name": "pulse-frontend",
"version": "0.1.0",
"dependencies": {
"@ciphera-net/ui": "^0.0.16",
"@radix-ui/react-icons": "^1.3.2",
"@ciphera-net/ui": "^0.0.18",
"axios": "^1.13.2",
"country-flag-icons": "^1.6.4",
"d3-scale": "^4.0.2",
@@ -268,9 +267,9 @@
}
},
"node_modules/@ciphera-net/ui": {
"version": "0.0.16",
"resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.16/896c89477d9a9907f3e1f3db950fcd84400ee64c",
"integrity": "sha512-HYmyv9wUxggr+ZwpR+kSf+LtmEHuvrPxHVDOg9OxVuIppjExku1YdNbKbUgYFvcLbsHDqULGDfecrgsHoC1Rgg==",
"version": "0.0.18",
"resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.18/bc703f2d658a9ba28ad8cc6a9ff683a30b8f662f",
"integrity": "sha512-WMBWOx/7QHlZ7p2umIZRTA7iOB0PSgxBYyR52uHhE8tjR1jSSEzrFruth/azzwbLx8zi7DqIeeGSjxJpuRddDA==",
"dependencies": {
"@radix-ui/react-icons": "^1.3.0",
"clsx": "^2.1.0",

View File

@@ -10,8 +10,7 @@
"type-check": "tsc --noEmit"
},
"dependencies": {
"@ciphera-net/ui": "^0.0.16",
"@radix-ui/react-icons": "^1.3.2",
"@ciphera-net/ui": "^0.0.18",
"axios": "^1.13.2",
"country-flag-icons": "^1.6.4",
"d3-scale": "^4.0.2",