ProjectTech4DevAI / ProjectTech4DevAI/kaapi-frontend
Chat: Update primary button style
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 fromapp/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
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Ö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