improved a lot of things

This commit is contained in:
SinachPat
2026-04-29 13:59:04 +01:00
parent bfdc187e65
commit 1edf7b8a94
3 changed files with 49 additions and 34 deletions
+8 -8
View File
@@ -2299,15 +2299,15 @@ footer {
<!-- ── TypeScript ── -->
<div class="int-card reveal"
style="--glow:#3b82f6;--glow-dim:rgba(59,130,246,.14);--glow-soft:rgba(59,130,246,.06);--glow-ambient:rgba(59,130,246,.04);--ico-bg:#1e3a5f;--ico-bd:rgba(59,130,246,.3)">
<div class="int-ico" style="background:#1d4ed8;border-color:rgba(59,130,246,.4)">
<!-- TypeScript official mark: blue square with correct TS letterforms -->
style="--glow:#3178c6;--glow-dim:rgba(49,120,198,.14);--glow-soft:rgba(49,120,198,.06);--glow-ambient:rgba(49,120,198,.04);--ico-bg:#3178c6;--ico-bd:rgba(49,120,198,.6)">
<div class="int-ico">
<!-- TypeScript official mark blue bg via --ico-bg, white TS letterforms -->
<svg viewBox="0 0 18 18" width="18" height="18">
<rect width="18" height="18" rx="2" fill="#3178c6"/>
<!-- T: crossbar at TOP, stem descends from centre -->
<path d="M2 6.5h6M5 6.5v7" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
<!-- S: top curve right, mid narrows, bottom curve left -->
<path d="M10 13.5c.5.8 1.4 1.2 2.6 1.2 1.5 0 2.8-.8 2.8-2.2 0-1.1-.7-1.8-2.1-2.3-1.1-.4-1.8-.8-1.8-1.6 0-.7.6-1.3 1.7-1.3.9 0 1.6.3 2.1 1" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
<!-- T: full-width crossbar + centered stem (left half) -->
<rect x="0.5" y="4.5" width="8.5" height="1.8" rx="0.5" fill="white"/>
<rect x="3.75" y="4.5" width="1.9" height="9.2" rx="0.5" fill="white"/>
<!-- S: top arc (opens right) → middle pinch → bottom arc (opens left) -->
<path d="M15.8 7.2c-.5-.9-1.4-1.4-2.5-1.4-1.4 0-2.3.7-2.3 1.9 0 1 .9 1.6 2.1 2 1.3.4 2.3 1.1 2.3 2.3 0 1.3-1.1 2.1-2.6 2.1-1.1 0-2-.4-2.6-1.3" stroke="white" stroke-width="1.7" stroke-linecap="round" fill="none"/>
</svg>
</div>
<div>
+34
View File
@@ -3,10 +3,12 @@
import { useState } from 'react';
import { useUser } from '@clerk/nextjs';
import { useRouter } from 'next/navigation';
import { useTheme } from '@/store/theme';
export default function OnboardingPage() {
const { user, isLoaded } = useUser();
const router = useRouter();
const { mode, toggle } = useTheme();
const defaultName = isLoaded
? `${user?.firstName ?? user?.emailAddresses[0]?.emailAddress?.split('@')[0] ?? 'My'}'s Workspace`
@@ -52,7 +54,39 @@ export default function OnboardingPage() {
background: 'var(--page-bg)',
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
padding: '24px',
position: 'relative',
}}>
{/* Theme toggle */}
<button
onClick={toggle}
title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
style={{
position: 'absolute', top: 16, right: 16,
background: 'none', border: 'none', cursor: 'pointer',
color: mode === 'dark' ? 'rgba(255,255,255,0.4)' : '#A1A1AA',
padding: '7px', display: 'flex', alignItems: 'center', borderRadius: 8,
transition: 'color 0.12s, background 0.12s',
}}
onMouseEnter={e => {
e.currentTarget.style.color = mode === 'dark' ? 'rgba(255,255,255,0.85)' : '#0A0A0A';
e.currentTarget.style.background = mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)';
}}
onMouseLeave={e => {
e.currentTarget.style.color = mode === 'dark' ? 'rgba(255,255,255,0.4)' : '#A1A1AA';
e.currentTarget.style.background = 'none';
}}
>
{mode === 'dark' ? (
<svg width="16" height="16" viewBox="0 0 14 14" fill="none">
<circle cx="7" cy="7" r="2.5" stroke="currentColor" strokeWidth="1.2"/>
<path d="M7 1v1.5M7 11.5V13M1 7h1.5M11.5 7H13M2.93 2.93l1.06 1.06M10.01 10.01l1.06 1.06M2.93 11.07l1.06-1.06M10.01 3.99l1.06-1.06" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
</svg>
) : (
<svg width="16" height="16" viewBox="0 0 14 14" fill="none">
<path d="M12 8.5A5.5 5.5 0 0 1 5.5 2a5.5 5.5 0 1 0 6.5 6.5z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
)}
</button>
{/* Logo */}
<div style={{ marginBottom: 40, fontSize: '1.125rem', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--page-text)' }}>
Origin<span style={{ color: '#0066FF' }}>main</span>
@@ -1,7 +1,7 @@
import { auth } from '@clerk/nextjs/server';
import { redirect } from 'next/navigation';
import Link from 'next/link';
import { serverClient } from '@/lib/supabase';
import { AppHeader } from '@/components/shell/AppHeader';
import { ProjectSettingsForm } from '@/components/shell/ProjectSettingsForm';
export async function generateMetadata({ params }: { params: Promise<{ wid: string; pid: string }> }) {
@@ -55,31 +55,12 @@ export default async function ProjectSettingsPage({
fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
transition: 'background 0.2s',
}}>
{/* Header */}
<div style={{
background: 'var(--card-bg)',
borderBottom: '1px solid var(--card-border)',
padding: '0 32px',
display: 'flex',
alignItems: 'center',
height: 56,
gap: 0,
transition: 'background 0.2s',
}}>
<Link href="/workspaces" style={{ textDecoration: 'none', fontSize: '0.875rem', fontWeight: 700, color: 'var(--card-text)', letterSpacing: '-0.01em' }}>
Origin<span style={{ color: '#3385FF' }}>main</span>
</Link>
<span style={{ color: 'var(--card-border)', margin: '0 8px', fontSize: '0.875rem' }}>/</span>
<Link href={`/workspace/${wid}`} style={{ textDecoration: 'none', fontSize: '0.875rem', color: 'var(--card-muted)', fontWeight: 500 }}>
{wsResult.data?.name ?? 'Workspace'}
</Link>
<span style={{ color: 'var(--card-border)', margin: '0 8px', fontSize: '0.875rem' }}>/</span>
<Link href={`/workspace/${wid}/project/${pid}`} style={{ textDecoration: 'none', fontSize: '0.875rem', color: 'var(--card-muted)', fontWeight: 500 }}>
{project.name}
</Link>
<span style={{ color: 'var(--card-border)', margin: '0 8px', fontSize: '0.875rem' }}>/</span>
<span style={{ fontSize: '0.875rem', color: 'var(--card-text)', fontWeight: 600 }}>Settings</span>
</div>
<AppHeader breadcrumbs={[
{ label: 'Workspaces', href: '/workspaces' },
{ label: wsResult.data?.name ?? 'Workspace', href: `/workspace/${wid}` },
{ label: project.name, href: `/workspace/${wid}/project/${pid}` },
{ label: 'Settings' },
]} />
{/* Content */}
<div style={{ maxWidth: 640, margin: '0 auto', padding: '40px 24px' }}>