tony/bzzz
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Update Chorus branding and configuration UI improvements

Browse Source 
- Updated branding transformation documentation
- Enhanced config UI layout and styling with Tailwind config updates
- Modified web embed integration for improved component packaging
- Added Next.js build artifacts to .gitignore for cleaner repository

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
2025-08-26 23:41:17 +10:00
parent 82036bdd5a
commit c2dfaba4a6
8 changed files with 302 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
install/config-ui/app/components/ThemeToggle.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client'
import { useState, useEffect } from 'react'
import { SunIcon, MoonIcon } from '@heroicons/react/24/outline'
export default function ThemeToggle() {
const [isDark, setIsDark] = useState(true) // Default to dark mode
useEffect(() => {
// Check for saved theme preference or default to dark
const savedTheme = localStorage.getItem('chorus-theme')
const prefersDark = !savedTheme || savedTheme === 'dark'
setIsDark(prefersDark)
updateTheme(prefersDark)
}, [])
const updateTheme = (dark: boolean) => {
const html = document.documentElement
if (dark) {
html.classList.add('dark')
} else {
html.classList.remove('dark')
}
}
const toggleTheme = () => {
const newIsDark = !isDark
setIsDark(newIsDark)
updateTheme(newIsDark)
// Save preference
localStorage.setItem('chorus-theme', newIsDark ? 'dark' : 'light')
}
return (
<button
onClick={toggleTheme}
className="btn-text flex items-center space-x-2 p-2 rounded-md transition-colors duration-200"
aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`}
>
{isDark ? (
<>
<SunIcon className="h-4 w-4" />
<span className="text-xs">Light</span>
</>
) : (
<>
<MoonIcon className="h-4 w-4" />
<span className="text-xs">Dark</span>
</>
)}
</button>
)
}

37
install/config-ui/app/globals.css
View File

@@ -8,8 +8,7 @@
}
body {
background-color: theme('colors.chorus-paper');
color: theme('colors.chorus-text-primary');
@apply bg-chorus-paper text-chorus-text-primary transition-colors duration-200;
}
}
@@ -28,40 +27,40 @@
}
.btn-text {
@apply bg-transparent text-chorus-secondary hover:text-chorus-primary font-medium py-2 px-0 border-none transition-colors duration-200;
@apply bg-transparent text-chorus-secondary hover:text-white font-medium py-2 px-0 border-none transition-colors duration-200;
}
/* Clean Card System */
.card {
@apply bg-white border border-chorus-border-invisible p-8 rounded-lg;
@apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-8 rounded-lg transition-colors duration-200;
}
.card-elevated {
@apply bg-chorus-warm border border-chorus-border-subtle p-8 rounded-lg;
@apply bg-gray-50 dark:bg-gray-800 border border-gray-100 dark:border-gray-600 p-8 rounded-lg transition-colors duration-200;
}
/* Form Elements */
.input-field {
@apply block w-full border border-chorus-border-defined p-3 rounded-sm focus:border-chorus-primary focus:outline-none transition-colors duration-200 bg-white;
@apply block w-full border border-gray-300 dark:border-gray-600 p-3 rounded-sm focus:border-chorus-secondary focus:outline-none transition-colors duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
}
.input-field:focus {
@apply border-chorus-primary ring-0;
@apply border-chorus-secondary ring-0;
}
.label {
@apply block text-sm font-medium text-chorus-text-primary mb-2;
@apply block text-sm font-medium text-gray-900 dark:text-gray-100 mb-2;
}
.error-text {
@apply text-red-600 text-sm mt-1;
@apply text-red-400 text-sm mt-1;
}
.success-text {
@apply text-chorus-secondary text-sm mt-1;
@apply text-green-400 text-sm mt-1;
}
/* Minimalist Status System */
/* Status System */
.status-indicator {
@apply text-xs font-medium;
}
@@ -84,11 +83,11 @@
}
.progress-step-current {
@apply border-chorus-primary bg-chorus-primary bg-opacity-5 text-chorus-primary;
@apply border-chorus-secondary bg-chorus-secondary bg-opacity-20 text-chorus-secondary;
}
.progress-step-completed {
@apply border-chorus-secondary bg-chorus-secondary bg-opacity-5 text-chorus-secondary;
@apply border-chorus-secondary bg-chorus-secondary bg-opacity-10 text-chorus-secondary;
}
.progress-step-accessible {
@@ -101,26 +100,26 @@
/* Typography Hierarchy */
.heading-hero {
@apply text-3xl font-semibold text-chorus-text-primary tracking-tight;
@apply text-3xl font-semibold text-gray-900 dark:text-gray-100 tracking-tight;
}
.heading-section {
@apply text-2xl font-semibold text-chorus-text-primary;
@apply text-2xl font-semibold text-gray-900 dark:text-gray-100;
}
.heading-subsection {
@apply text-lg font-medium text-chorus-text-primary;
@apply text-lg font-medium text-gray-100 dark:text-gray-200;
}
.text-body {
@apply text-base text-chorus-text-secondary leading-relaxed;
@apply text-base text-gray-700 dark:text-gray-300 leading-relaxed;
}
.text-small {
@apply text-sm text-chorus-text-tertiary;
@apply text-sm text-gray-600 dark:text-gray-400;
}
.text-ghost {
@apply text-sm text-chorus-text-ghost;
@apply text-sm text-gray-500 dark:text-gray-500;
}
}

10
install/config-ui/app/layout.tsx
View File

@@ -1,5 +1,6 @@
import type { Metadata } from 'next'
import './globals.css'
import ThemeToggle from './components/ThemeToggle'
export const metadata: Metadata = {
title: 'CHORUS Agent Configuration',
@@ -14,9 +15,9 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className="bg-chorus-paper min-h-screen">
<body className="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-200">
<div className="min-h-screen flex flex-col">
<header className="bg-white border-b border-chorus-border-invisible">
<header className="bg-gray-900 dark:bg-black border-b border-gray-200 dark:border-gray-800 transition-colors duration-200">
<div className="max-w-7xl mx-auto px-8 py-6">
<div className="flex justify-between items-center">
<div className="flex items-center space-x-4">
@@ -40,6 +41,7 @@ export default function RootLayout({
<div className="status-online">
System Online
</div>
<ThemeToggle />
</div>
</div>
</div>
@@ -49,9 +51,9 @@ export default function RootLayout({
{children}
</main>
<footer className="bg-white border-t border-chorus-border-invisible">
<footer className="bg-gray-900 dark:bg-black border-t border-gray-200 dark:border-gray-800 transition-colors duration-200">
<div className="max-w-7xl mx-auto px-8 py-6">
<div className="flex justify-between items-center text-sm text-chorus-text-tertiary">
<div className="flex justify-between items-center text-sm text-gray-400">
<div>
© 2025 Chorus Services. All rights reserved.
</div>

16
install/config-ui/app/setup/page.tsx
View File

@@ -193,7 +193,7 @@ export default function SetupPage() {
{/* Resume Setup Notification */}
{isResuming && (
<div className="mb-8 bg-chorus-secondary bg-opacity-5 border border-chorus-secondary border-opacity-20 rounded-lg p-6">
<div className="mb-8 bg-chorus-secondary bg-opacity-20 border border-chorus-secondary rounded-lg p-6">
<div className="flex items-start justify-between">
<div className="flex items-start">
<div className="flex-shrink-0">
@@ -205,7 +205,7 @@ export default function SetupPage() {
<h3 className="text-sm font-medium text-chorus-secondary">
Setup Progress Restored
</h3>
<p className="text-small text-chorus-text-secondary mt-1">
<p className="text-small text-gray-300 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>
@@ -252,12 +252,12 @@ export default function SetupPage() {
<div className="flex items-center">
<div className="flex-shrink-0 mr-3">
{isCompleted ? (
<CheckCircleIcon className="h-5 w-5 text-chorus-secondary" />
<CheckCircleIcon className="h-5 w-5 text-green-400" />
) : (
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs font-medium ${
isCurrent
? 'border-chorus-primary bg-chorus-primary text-white'
: 'border-chorus-border-emphasis text-chorus-text-subtle'
? 'border-chorus-secondary bg-chorus-secondary text-white'
: 'border-gray-600 text-gray-500'
}`}>
{index + 1}
</div>
@@ -280,13 +280,13 @@ export default function SetupPage() {
})}
</nav>
<div className="mt-8 pt-6 border-t border-chorus-border-invisible">
<div className="mt-8 pt-6 border-t border-gray-800">
<div className="text-small mb-3">
Progress: {completedSteps.size} of {SETUP_STEPS.length} steps
</div>
<div className="w-full bg-chorus-border-subtle rounded-sm h-2">
<div className="w-full bg-gray-800 rounded-sm h-2">
<div
className="bg-chorus-primary h-2 rounded-sm transition-all duration-500"
className="bg-chorus-secondary h-2 rounded-sm transition-all duration-500"
style={{ width: `${(completedSteps.size / SETUP_STEPS.length) * 100}%` }}
/>
</div>