ProjectTech4DevAI / ProjectTech4DevAI/kaapi-frontend

Chat: Update primary button style

オープン 初心者向け
#261 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
TypeScript
スター
1
フォーク
0
平均マージ
10時間 40分
マージ済み PR(30日)
4

説明

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.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

app/(main)/chat/page.tsx の464~470行付近から始め、既存のボタンと app/components/ui/Button.tsx を比較してください。手作業で実装されたボタンを、primary バリアントと size="sm" を使用する共有の Button に置き換え、handleNewChat は維持してください。New chat アクションが共有の primary スタイルを使用し、Chat ページのヘッダーで一貫して目立つようになれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
frontend
issue の種類
機能追加
難易度
1/5
見積もり時間
1時間未満
活発さ
活発
明瞭さ
明確に書かれている
初心者へのやさしさ
90/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。