仮デプロイ - #40
Conversation
There was a problem hiding this comment.
Pull request overview
This PR focuses on UI improvements and component refactoring for a temporary deployment. The changes update styling to use CSS custom properties, add new shared Button components, remove unused components, and enhance the visual presentation of group and debt information throughout the application.
Changes:
- Added new reusable
ButtonandFormButtoncomponents to replace inline button elements - Removed unused
LinkButtonandErrorcomponents - Updated CSS to use CSS custom properties (e.g.,
var(--space-xl)) instead of hardcoded pixel values for consistency - Enhanced UI styling for group lists, debt history, and login pages with improved layouts and visual elements
- Added icon libraries (
lucide-reactandreact-icons) for improved UI elements
Reviewed changes
Copilot reviewed 23 out of 26 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| products/frontend/src/share/index.ts | Exports new Button and FormButton components |
| products/frontend/src/share/Title/index.module.css | Updates margin to use CSS custom properties |
| products/frontend/src/share/LinkButton/* | Removes unused LinkButton component |
| products/frontend/src/share/Error/* | Removes unused Error component |
| products/frontend/src/share/Button/* | Adds new reusable Button component |
| products/frontend/src/share/FormButton/* | Adds new FormButton component for forms |
| products/frontend/src/routes/Root/* | Enhances group list UI with structured layout and member display |
| products/frontend/src/routes/Profile/index.tsx | Replaces inline button with FormButton component |
| products/frontend/src/routes/Login/* | Improves login UI with icon buttons for OAuth providers |
| products/frontend/src/routes/Invite/index.tsx | Replaces inline button with FormButton component |
| products/frontend/src/routes/GroupDetail/* | Major UI enhancements including collapsible debt details and improved styling |
| products/frontend/src/routes/GenerateGroup/* | Replaces inline buttons with new Button components |
| products/frontend/src/routes/Share/* | Updates padding to use CSS custom properties |
| package files | Adds lucide-react and react-icons dependencies |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| content: string; | ||
| }; | ||
|
|
||
| const Button: FC<Props> = (props: Props) => { |
There was a problem hiding this comment.
The component is named 'Button' but is exported as 'FormButton' and the file is in the FormButton directory. The component name should be 'FormButton' to match the export and file structure for consistency.
| <> | ||
| <Title title={groupInfoResult.group_name} /> | ||
| <p>作成者: {groupInfoResult.created_by_name}</p> | ||
| <h1 className={styles.title}>{groupInfoResult.group_name}</h1> |
There was a problem hiding this comment.
The Title component was removed from the imports and replaced with a raw h1 element. This creates inconsistency as other pages still use the Title component. Consider either continuing to use the Title component for consistency or documenting why this page needs custom styling.
| .title { | ||
| font-size: var(--text-3xl); | ||
| text-align: center; | ||
| margin: var(--text-6xl) 0 0 0; |
There was a problem hiding this comment.
Using a text size variable (--text-6xl) for margin is semantically incorrect. This should use a spacing variable like --space-6xl or similar, as text size variables are intended for font sizes, not spacing.
| margin: var(--text-6xl) 0 0 0; | |
| margin: var(--space-6xl) 0 0 0; |
| <div> | ||
| <label htmlFor="description">詳細:</label> | ||
| <input id="description" type="text" {...register('description')} /> | ||
| <textarea id="description" {...register('description')} /> |
There was a problem hiding this comment.
The textarea element is missing rows and cols attributes or CSS sizing, and lacks a placeholder or aria-label to help users understand the expected input format.
| <textarea id="description" {...register('description')} /> | |
| <textarea | |
| id="description" | |
| rows={3} | |
| cols={40} | |
| placeholder="例: 昼食代の立て替え、交通費などの詳細を入力してください" | |
| {...register('description')} | |
| /> |
No description provided.