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

refactor: replace button elements with a unified Button component in SiteSettingsPage and VerificationModal for consistency and improved styling

Browse Source
This commit is contained in:
Usman Baig
2026-02-21 22:41:43 +01:00
parent e8e304e238
commit 23ba5f77a9
2 changed files with 19 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -495,21 +495,9 @@ export default function SiteSettingsPage() {
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end"> <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
{canEdit && ( {canEdit && (
<button <Button type="submit" disabled={saving} isLoading={saving}>
type="submit" Save Changes
disabled={saving} </Button>
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
)} )}
</div> </div>
</form> </form>
@@ -666,21 +654,9 @@ export default function SiteSettingsPage() {
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end"> <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
{canEdit && ( {canEdit && (
<button <Button type="submit" disabled={saving} isLoading={saving}>
type="submit" Save Changes
disabled={saving} </Button>
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
)} )}
</div> </div>
</form> </form>
@@ -976,21 +952,9 @@ export default function SiteSettingsPage() {
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end"> <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
{canEdit && ( {canEdit && (
<button <Button type="submit" disabled={saving} isLoading={saving}>
type="submit" Save Changes
disabled={saving} </Button>
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
)} )}
</div> </div>
</form> </form>

32
components/sites/VerificationModal.tsx
View File

@@ -11,7 +11,7 @@ import {
} from '@ciphera-net/ui' } from '@ciphera-net/ui'
import { Site } from '@/lib/api/sites' import { Site } from '@/lib/api/sites'
import { getRealtime } from '@/lib/api/stats' import { getRealtime } from '@/lib/api/stats'
import { toast } from '@ciphera-net/ui' import { toast, Button } from '@ciphera-net/ui'
interface VerificationModalProps { interface VerificationModalProps {
isOpen: boolean isOpen: boolean
@@ -130,15 +130,12 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
</div> </div>
</div> </div>
<button <Button onClick={handleStartVerification} className="w-full justify-center">
onClick={handleStartVerification}
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
>
Open Website & Verify Open Website & Verify
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg className="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg> </svg>
</button> </Button>
</div> </div>
)} )}
@@ -172,12 +169,9 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
We are successfully receiving data from your website. We are successfully receiving data from your website.
</p> </p>
</div> </div>
<button <Button onClick={onClose} className="w-full justify-center">
onClick={onClose}
className="w-full px-4 py-3 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
>
Done Done
</button> </Button>
</div> </div>
)} )}
@@ -205,18 +199,12 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
<button <Button variant="secondary" onClick={onClose} className="flex-1 justify-center">
onClick={onClose}
className="flex-1 px-4 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
>
Close Close
</button> </Button>
<button <Button onClick={handleStartVerification} className="flex-1 justify-center">
onClick={handleStartVerification}
className="flex-1 px-4 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium hover:opacity-90 transition-opacity"
>
Try Again Try Again
</button> </Button>
</div> </div>
</div> </div>
)} )}