ProjectTech4DevAI / ProjectTech4DevAI/kaapi-frontend
Chat: Update primary button style
まだ誰も着手していません。
- 主要言語
- 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 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.
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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