Transform BZZZ config-ui to CHORUS ultra-minimalist branding
- Replace BZZZ branding with CHORUS Agent Configuration - Implement ultra-minimalist design system with subtle 3-5px rounded corners - Add CHORUS corporate color palette (Dark Mulberry primary, Orchestration Blue secondary) - Integrate Mobius ring logo from brand assets - Update all copy from BZZZ to CHORUS/CHORUS:Agents references - Apply clean typography hierarchy and generous spacing - Remove shadows and gradients for minimalist aesthetic - Implement invisible border system for subtle organization - Update progress indicators and status elements - Maintain all functionality while enhancing brand consistency 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
@@ -23,7 +23,7 @@ const SETUP_STEPS = [
|
||||
{
|
||||
id: 'license',
|
||||
title: 'License Validation',
|
||||
description: 'Validate your BZZZ license key and email',
|
||||
description: 'Validate your CHORUS license key and email',
|
||||
component: LicenseValidation,
|
||||
},
|
||||
{
|
||||
@@ -59,13 +59,13 @@ const SETUP_STEPS = [
|
||||
{
|
||||
id: 'deployment',
|
||||
title: 'Service Deployment',
|
||||
description: 'Deploy and configure CHORUS:agents services',
|
||||
description: 'Deploy and configure CHORUS agent services',
|
||||
component: ServiceDeployment,
|
||||
},
|
||||
{
|
||||
id: 'cluster',
|
||||
title: 'Cluster Formation',
|
||||
description: 'Join or create CHORUS:agents cluster',
|
||||
description: 'Join or create CHORUS agent cluster',
|
||||
component: ClusterFormation,
|
||||
},
|
||||
{
|
||||
@@ -99,7 +99,7 @@ export default function SetupPage() {
|
||||
|
||||
const loadPersistedData = () => {
|
||||
try {
|
||||
const savedState = localStorage.getItem('bzzz-setup-state')
|
||||
const savedState = localStorage.getItem('chorus-setup-state')
|
||||
if (savedState) {
|
||||
const state = JSON.parse(savedState)
|
||||
setCurrentStep(state.currentStep || 0)
|
||||
@@ -119,7 +119,7 @@ export default function SetupPage() {
|
||||
configData,
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
localStorage.setItem('bzzz-setup-state', JSON.stringify(state))
|
||||
localStorage.setItem('chorus-setup-state', JSON.stringify(state))
|
||||
} catch (error) {
|
||||
console.error('Failed to save setup state:', error)
|
||||
}
|
||||
@@ -127,7 +127,7 @@ export default function SetupPage() {
|
||||
|
||||
const clearPersistedData = () => {
|
||||
try {
|
||||
localStorage.removeItem('bzzz-setup-state')
|
||||
localStorage.removeItem('chorus-setup-state')
|
||||
// Reset state to initial values
|
||||
setCurrentStep(0)
|
||||
setCompletedSteps(new Set<number>())
|
||||
@@ -183,29 +183,29 @@ export default function SetupPage() {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
Welcome to CHORUS:agents Setup
|
||||
<h1 className="heading-hero mb-3">
|
||||
CHORUS Agent Setup
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
Let's configure your distributed AI agent coordination cluster in {SETUP_STEPS.length} simple steps.
|
||||
<p className="text-body">
|
||||
Configure your distributed agent orchestration platform in {SETUP_STEPS.length} simple steps.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Resume Setup Notification */}
|
||||
{isResuming && (
|
||||
<div className="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="mb-8 bg-chorus-secondary bg-opacity-5 border border-chorus-secondary border-opacity-20 rounded-lg p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0">
|
||||
<svg className="h-5 w-5 text-blue-500 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg className="h-5 w-5 text-chorus-secondary mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h3 className="text-sm font-medium text-blue-800">
|
||||
<h3 className="text-sm font-medium text-chorus-secondary">
|
||||
Setup Progress Restored
|
||||
</h3>
|
||||
<p className="text-sm text-blue-700 mt-1">
|
||||
<p className="text-small text-chorus-text-secondary mt-1">
|
||||
Your previous setup progress has been restored. You're currently on step {currentStep + 1} of {SETUP_STEPS.length}.
|
||||
{completedSteps.size > 0 && ` You've completed ${completedSteps.size} step${completedSteps.size !== 1 ? 's' : ''}.`}
|
||||
</p>
|
||||
@@ -213,7 +213,7 @@ export default function SetupPage() {
|
||||
</div>
|
||||
<button
|
||||
onClick={clearPersistedData}
|
||||
className="text-blue-500 hover:text-blue-700 text-sm font-medium"
|
||||
className="btn-text"
|
||||
>
|
||||
Start Over
|
||||
</button>
|
||||
@@ -221,11 +221,11 @@ export default function SetupPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-12">
|
||||
{/* Progress Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="card sticky top-8">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
<h2 className="heading-subsection mb-6">
|
||||
Setup Progress
|
||||
</h2>
|
||||
<nav className="space-y-2">
|
||||
@@ -239,25 +239,25 @@ export default function SetupPage() {
|
||||
key={step.id}
|
||||
onClick={() => isAccessible && setCurrentStep(index)}
|
||||
disabled={!isAccessible}
|
||||
className={`w-full text-left p-3 rounded-lg border transition-all duration-200 ${
|
||||
className={`w-full text-left progress-step ${
|
||||
isCurrent
|
||||
? 'border-bzzz-primary bg-bzzz-primary bg-opacity-10 text-bzzz-primary'
|
||||
? 'progress-step-current'
|
||||
: isCompleted
|
||||
? 'border-green-200 bg-green-50 text-green-700'
|
||||
? 'progress-step-completed'
|
||||
: isAccessible
|
||||
? 'border-gray-200 hover:border-gray-300 text-gray-700'
|
||||
: 'border-gray-100 text-gray-400 cursor-not-allowed'
|
||||
? 'progress-step-accessible'
|
||||
: 'progress-step-disabled'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 mr-3">
|
||||
{isCompleted ? (
|
||||
<CheckCircleIcon className="h-5 w-5 text-green-500" />
|
||||
<CheckCircleIcon className="h-5 w-5 text-chorus-secondary" />
|
||||
) : (
|
||||
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs font-medium ${
|
||||
isCurrent
|
||||
? 'border-bzzz-primary bg-bzzz-primary text-white'
|
||||
: 'border-gray-300 text-gray-500'
|
||||
? 'border-chorus-primary bg-chorus-primary text-white'
|
||||
: 'border-chorus-border-emphasis text-chorus-text-subtle'
|
||||
}`}>
|
||||
{index + 1}
|
||||
</div>
|
||||
@@ -280,13 +280,13 @@ export default function SetupPage() {
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-gray-200">
|
||||
<div className="text-sm text-gray-600 mb-2">
|
||||
<div className="mt-8 pt-6 border-t border-chorus-border-invisible">
|
||||
<div className="text-small mb-3">
|
||||
Progress: {completedSteps.size} of {SETUP_STEPS.length} steps
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div className="w-full bg-chorus-border-subtle rounded-sm h-2">
|
||||
<div
|
||||
className="bg-bzzz-primary h-2 rounded-full transition-all duration-500"
|
||||
className="bg-chorus-primary h-2 rounded-sm transition-all duration-500"
|
||||
style={{ width: `${(completedSteps.size / SETUP_STEPS.length) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -297,16 +297,16 @@ export default function SetupPage() {
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-3">
|
||||
<div className="card">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="heading-section">
|
||||
{SETUP_STEPS[currentStep].title}
|
||||
</h2>
|
||||
<div className="text-sm text-gray-500">
|
||||
<div className="text-ghost">
|
||||
Step {currentStep + 1} of {SETUP_STEPS.length}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600">
|
||||
<p className="text-body">
|
||||
{SETUP_STEPS[currentStep].description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user