ProjectTech4DevAI / ProjectTech4DevAI/kaapi-frontend

Chat: Update primary button style

Offen Anfängerfreundlich
#261 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
TypeScript
Sterne
1
Forks
0
Ø Merge
10 Std. 40 Min.
Gemergte PRs (30 T.)
4

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginnen Sie in app/(main)/chat/page.tsx bei den Zeilen 464–470 und vergleichen Sie den vorhandenen Button mit app/components/ui/Button.tsx. Ersetzen Sie den selbst implementierten Button durch den gemeinsamen Button mit der primary-Variante und size="sm", wobei handleNewChat erhalten bleibt. Erledigt ist dies, wenn die New chat-Aktion das gemeinsame primary-Styling verwendet und sich im Header der Chat-Seite konsistent abhebt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
1/5
Geschätzter Aufwand
Unter einer Stunde
Aktivitätsstatus
Aktiv
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
90/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.