ProjectTech4DevAI / ProjectTech4DevAI/kaapi-frontend

Chat: Update primary button style

Ouverte Adaptée aux débutants
#261 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
TypeScript
Étoiles
1
Forks
0
Merge moyen
10 h 40 min
PR mergées (30 j)
4

Description

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.

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez dans app/(main)/chat/page.tsx autour des lignes 464-470 et comparez le bouton existant avec app/components/ui/Button.tsx. Remplacez le bouton implémenté manuellement par le Button partagé en utilisant la variante primary et size="sm", tout en conservant handleNewChat. C’est terminé lorsque l’action New chat utilise le style primary partagé et se distingue de manière cohérente dans l’en-tête de la page Chat.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
1/5
Temps estimé
Moins d'une heure
Activité
Active
Clarté
Clairement spécifiée
Accessibilité débutants
90/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.