ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

refactor(ui): update button and input components to use brand-orange styles, enhancing UI consistency across the application

Browse Source
This commit is contained in:
Usman Baig
2026-01-22 20:40:17 +01:00
parent c325f50504
commit d4afbc1930
8 changed files with 21 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@@ -63,7 +63,7 @@ export default function RootLayout({
success: 'group-[.toast]:!text-green-600 group-[.toast]:dark:!text-green-400',
error: 'group-[.toast]:!text-red-600 group-[.toast]:dark:!text-red-400',
warning: 'group-[.toast]:!text-amber-600 group-[.toast]:dark:!text-amber-400',
info: 'group-[.toast]:!text-blue-600 group-[.toast]:dark:!text-blue-400',
info: 'group-[.toast]:!text-brand-orange group-[.toast]:dark:!text-brand-orange',
},
}}
/>

2
app/onboarding/page.tsx
View File

@@ -95,7 +95,7 @@ export default function OnboardingPage() {
<div>
<Button
type="submit"
className="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
className="w-full"
>
Create Organization
</Button>

2
app/sites/[id]/settings/page.tsx
View File

@@ -307,7 +307,7 @@ export default function SiteSettingsPage() {
{/* Content Area */}
<div className="flex-1 relative">
{!canEdit && (
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 rounded-xl border border-blue-200 dark:border-blue-800 flex items-center gap-3">
<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" />
<p className="text-sm font-medium">You have read-only access to this site. Contact an admin to make changes.</p>
</div>

24
app/sites/new/page.tsx
View File

@@ -4,6 +4,8 @@ import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createSite } from '@/lib/api/sites'
import { toast } from 'sonner'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
export default function NewSitePage() {
const router = useRouter()
@@ -39,13 +41,11 @@ export default function NewSitePage() {
<label htmlFor="name" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
Site Name
</label>
<input
type="text"
<Input
id="name"
required
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
placeholder="My Website"
/>
</div>
@@ -54,13 +54,11 @@ export default function NewSitePage() {
<label htmlFor="domain" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
Domain
</label>
<input
type="text"
<Input
id="domain"
required
value={formData.domain}
onChange={(e) => setFormData({ ...formData, domain: e.target.value.toLowerCase().trim() })}
className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
placeholder="example.com"
/>
<p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
@@ -69,20 +67,20 @@ export default function NewSitePage() {
</div>
<div className="flex gap-4">
<button
<Button
type="submit"
disabled={loading}
className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
isLoading={loading}
>
{loading ? 'Creating...' : 'Create Site'}
</button>
<button
Create Site
</Button>
<Button
type="button"
variant="secondary"
onClick={() => router.back()}
className="btn-secondary"
>
Cancel
</button>
</Button>
</div>
</form>
</div>

6
components/WorkspaceSwitcher.tsx
View File

@@ -80,8 +80,8 @@ export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: Organiz
}`}
>
<div className="flex items-center gap-2">
<div className="h-5 w-5 rounded bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
<CubeIcon className="h-3 w-3 text-blue-600 dark:text-blue-400" />
<div className="h-5 w-5 rounded bg-brand-orange/10 flex items-center justify-center">
<CubeIcon className="h-3 w-3 text-brand-orange" />
</div>
<span className="text-neutral-700 dark:text-neutral-300 truncate max-w-[140px]">
{org.organization_name}
@@ -97,7 +97,7 @@ export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: Organiz
{/* Create New */}
<Link
href="/onboarding"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-neutral-500 hover:text-blue-600 dark:text-neutral-400 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/10 rounded-md transition-colors mt-1"
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-neutral-500 hover:text-brand-orange dark:text-neutral-400 dark:hover:text-brand-orange hover:bg-brand-orange/10 rounded-md transition-colors mt-1"
>
<div className="h-5 w-5 rounded border border-dashed border-neutral-300 dark:border-neutral-600 flex items-center justify-center">
<PlusIcon className="h-3 w-3" />

4
components/settings/OrganizationSettings.tsx
View File

@@ -345,7 +345,7 @@ export default function OrganizationSettings() {
</div>
<div className="w-32">
<select
className="w-full h-10 px-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm outline-none focus:ring-2 focus:ring-blue-500 dark:text-white"
className="w-full h-10 px-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm outline-none focus:ring-2 focus:ring-brand-orange dark:text-white"
value={inviteRole}
onChange={(e) => setInviteRole(e.target.value)}
>
@@ -394,7 +394,7 @@ export default function OrganizationSettings() {
member.role === 'owner'
? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
: member.role === 'admin'
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
? 'bg-brand-orange/10 text-brand-orange'
: 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
}`}>
{member.role}

2
components/ui/Button.tsx
View File

@@ -10,7 +10,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
const baseStyles = 'inline-flex items-center justify-center rounded-xl text-sm font-medium px-5 py-2.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
const variants = {
primary: 'bg-blue-600 text-white shadow-sm hover:bg-blue-700 focus:ring-blue-500',
primary: 'bg-brand-orange text-white shadow-sm hover:bg-brand-orange-hover focus:ring-brand-orange',
secondary: 'bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white hover:bg-neutral-50 dark:hover:bg-neutral-800 shadow-sm focus:ring-neutral-200',
ghost: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:ring-neutral-200',
};

2
components/ui/Input.tsx
View File

@@ -16,7 +16,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
${icon ? 'pl-11 pr-4' : 'px-4'}
${error
? 'border-red-300 dark:border-red-800 focus:border-red-500 focus:ring-4 focus:ring-red-500/10'
: 'border-neutral-200 dark:border-neutral-800 hover:border-blue-500/50 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10'}
: 'border-neutral-200 dark:border-neutral-800 hover:border-brand-orange/50 focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10'}
${className}
`}
{...props}