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', success: 'group-[.toast]:!text-green-600 group-[.toast]:dark:!text-green-400',
error: 'group-[.toast]:!text-red-600 group-[.toast]:dark:!text-red-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', 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> <div>
<Button <Button
type="submit" 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 Create Organization
</Button> </Button>

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

@@ -307,7 +307,7 @@ export default function SiteSettingsPage() {
{/* Content Area */} {/* Content Area */}
<div className="flex-1 relative"> <div className="flex-1 relative">
{!canEdit && ( {!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" /> <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> <p className="text-sm font-medium">You have read-only access to this site. Contact an admin to make changes.</p>
</div> </div>

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

@@ -4,6 +4,8 @@ import { useState } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { createSite } from '@/lib/api/sites' import { createSite } from '@/lib/api/sites'
import { toast } from 'sonner' import { toast } from 'sonner'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
export default function NewSitePage() { export default function NewSitePage() {
const router = useRouter() 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"> <label htmlFor="name" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
Site Name Site Name
</label> </label>
<input <Input
type="text"
id="name" id="name"
required required
value={formData.name} value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })} 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" placeholder="My Website"
/> />
</div> </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"> <label htmlFor="domain" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
Domain Domain
</label> </label>
<input <Input
type="text"
id="domain" id="domain"
required required
value={formData.domain} value={formData.domain}
onChange={(e) => setFormData({ ...formData, domain: e.target.value.toLowerCase().trim() })} 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" placeholder="example.com"
/> />
<p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400"> <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
@@ -69,20 +67,20 @@ export default function NewSitePage() {
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<button <Button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed" isLoading={loading}
> >
{loading ? 'Creating...' : 'Create Site'} Create Site
</button> </Button>
<button <Button
type="button" type="button"
variant="secondary"
onClick={() => router.back()} onClick={() => router.back()}
className="btn-secondary"
> >
Cancel Cancel
</button> </Button>
</div> </div>
</form> </form>
</div> </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="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"> <div className="h-5 w-5 rounded bg-brand-orange/10 flex items-center justify-center">
<CubeIcon className="h-3 w-3 text-blue-600 dark:text-blue-400" /> <CubeIcon className="h-3 w-3 text-brand-orange" />
</div> </div>
<span className="text-neutral-700 dark:text-neutral-300 truncate max-w-[140px]"> <span className="text-neutral-700 dark:text-neutral-300 truncate max-w-[140px]">
{org.organization_name} {org.organization_name}
@@ -97,7 +97,7 @@ export default function WorkspaceSwitcher({ orgs, activeOrgId }: { orgs: Organiz
{/* Create New */} {/* Create New */}
<Link <Link
href="/onboarding" 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"> <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" /> <PlusIcon className="h-3 w-3" />

4
components/settings/OrganizationSettings.tsx
View File

@@ -345,7 +345,7 @@ export default function OrganizationSettings() {
</div> </div>
<div className="w-32"> <div className="w-32">
<select <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} value={inviteRole}
onChange={(e) => setInviteRole(e.target.value)} onChange={(e) => setInviteRole(e.target.value)}
> >
@@ -394,7 +394,7 @@ export default function OrganizationSettings() {
member.role === 'owner' member.role === 'owner'
? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300' ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
: member.role === 'admin' : 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' : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
}`}> }`}>
{member.role} {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 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 = { 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', 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', 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'} ${icon ? 'pl-11 pr-4' : 'px-4'}
${error ${error
? 'border-red-300 dark:border-red-800 focus:border-red-500 focus:ring-4 focus:ring-red-500/10' ? '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} ${className}
`} `}
{...props} {...props}