ProjectTech4DevAI / ProjectTech4DevAI/kaapi-frontend

Chat: Update primary button style

Aperta Adatta ai principianti
#261 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
1
Fork
0
Merge medio
10h 40m
PR unite (30g)
4

Descrizione

Is your feature request related to a problem?
The "New chat" button in the Chat page header does not appear as a proper primary action, rendering instead as a faint outline style. This diminishes its visibility and importance as an action.

Describe the solution you'd like
Update the button to use the shared Button component with the primary variant:

  • Replace the current <button> with the <Button> component from app/components/ui/Button.tsx
  • Ensure it is consistent with the rest of the app's UI
Original issue

Problem

The "New chat" button in the Chat page header does not look like a proper primary action — it currently renders as a plain <button> with hand-rolled outline-style classes instead of using the shared Button component.

File: app/(main)/chat/page.tsx (~line 464-470)

<button
  type="button"
  onClick={handleNewChat}
  className="px-3 py-1.5 rounded-full text-xs font-medium border border-border bg-bg-primary text-text-primary hover:bg-neutral-50 transition-colors cursor-pointer"
>
  New chat
</button>

This mimics the outline variant of app/components/ui/Button.tsx, making it look faint/secondary.

Expected

Use the shared Button component with the primary (default) variant so "New chat" reads as a proper button, consistent with the rest of the app:

<Button onClick={handleNewChat} size="sm">New chat</Button>

Screenshot (current, faint outline look)

Button top-right blends into the header instead of standing out as a primary action.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia in app/(main)/chat/page.tsx intorno alle righe 464-470 e confronta il pulsante esistente con app/components/ui/Button.tsx. Sostituisci il pulsante realizzato manualmente con il Button condiviso usando la variante primary e size="sm", mantenendo handleNewChat. Il lavoro è completato quando l’azione New chat utilizza lo stile primary condiviso e risalta in modo coerente nell’intestazione della pagina Chat.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
1/5
Tempo stimato
Meno di un'ora
Stato di attività
Attiva
Chiarezza
Specificata chiaramente
Idoneità per principianti
90/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.