Skip to content

Feat/UI #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amemya merged 8 commits into from
Apr 27, 2026
Merged

Feat/UI #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
42ae3de
feat: enhanced ui
amemya Apr 27, 2026
fd6f6f8
feat: improve accessibility by adding keyboard navigation, aria-label…
amemya Apr 27, 2026
f76f067
fix: empty-state class style
amemya Apr 27, 2026
7e3a40b
Update frontend/src/App.tsx
amemya Apr 27, 2026
9d05554
fix: prevent duplicate image selection by adding loading state and di…
amemya Apr 27, 2026
15901fd
feat: add loading state and visual spinner to image selection UI
amemya Apr 27, 2026
647af56
refactor: await image loading process using a promise in App component
amemya Apr 27, 2026
24bcb3d
fix: prevent image state reset on load error in App component
amemya Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
262 changes: 159 additions & 103 deletions frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,177 +2,233 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
--bg-color: #121212;
--card-bg: #1e1e1e;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--accent-color: #3b82f6;
--accent-hover: #2563eb;
--border-color: #333333;
--bg-workspace: #1e1e1e;
--bg-panel: #2d2d2d;
--bg-topbar: #252525;
--text-primary: #e0e0e0;
--text-secondary: #9aa0a6;
--accent-color: #4a90e2;
--accent-hover: #357abd;
--border-color: #3e3e42;
--input-bg: #1e1e1e;
--input-border: #3e3e42;
}

body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-workspace);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
overflow: hidden;
/* Prevent body scroll */
}

.app-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem;
display: flex;
flex-direction: column;
min-height: 100vh;
height: 100vh;
width: 100vw;
overflow: hidden;
}

.header {
text-align: center;
margin-bottom: 2rem;
/* Top Bar */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 52px;
background-color: var(--bg-topbar);
border-bottom: 1px solid var(--border-color);
padding: 0 1.5rem;
flex-shrink: 0;
}

.header h1 {
font-size: 2.5rem;
font-weight: 700;
.top-bar h1 {
font-size: 1.1rem;
font-weight: 600;
margin: 0;
background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
letter-spacing: 0.5px;
}

.header p {
color: var(--text-secondary);
font-size: 1.1rem;
margin-top: 0.5rem;
.top-bar-actions {
display: flex;
gap: 0.8rem;
}

.btn {
padding: 0.4rem 1rem;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.btn:focus-visible,
.empty-state:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}

.main-content {
.btn-secondary {
background-color: transparent;
color: var(--text-primary);
border-color: var(--border-color);
}

.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.05);
}

.btn-primary {
background-color: var(--accent-color);
color: white;
}

.btn-primary:hover {
background-color: var(--accent-hover);
}
Comment on lines +60 to +92
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

ボタンの無効状態スタイルの追加を検討してください。

将来的にボタンを無効化する必要がある場合（例：エクスポート処理中）に備えて、:disabled状態のスタイルを追加することを推奨します。

💅 無効状態のスタイル追加案 
 .btn-primary:hover {
     background-color: var(--accent-hover);
 }
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.btn {
padding: 0.4rem 1rem;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.btn:focus-visible,
.empty-state:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.main-content {
.btn-secondary {
background-color: transparent;
color: var(--text-primary);
border-color: var(--border-color);
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.btn-primary {
background-color: var(--accent-color);
color: white;
}
.btn-primary:hover {
background-color: var(--accent-hover);
}
.btn {
padding: 0.4rem 1rem;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.btn:focus-visible,
.empty-state:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.btn-secondary {
background-color: transparent;
color: var(--text-primary);
border-color: var(--border-color);
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.btn-primary {
background-color: var(--accent-color);
color: white;
}
.btn-primary:hover {
background-color: var(--accent-hover);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/App.css` around lines 60 - 92, Add explicit disabled-state
styles for buttons: update the .btn selector family (.btn, .btn-primary,
.btn-secondary) to include rules for :disabled (and [disabled]) that set cursor:
not-allowed, lower opacity (e.g. 0.5), disable pointer-events/hover visual
changes, and remove accent outlines/hover backgrounds (or keep a muted
focus-visible) so disabled buttons visibly differ and do not react to
hover/focus the same as active buttons.


/* Main Workspace */
.workspace {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
width: 100%;
flex: 1;
overflow: hidden;
}

.upload-section {
width: 100%;
/* Preview Area */
.preview-area {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--bg-workspace);
padding: 2rem;
overflow: auto;
position: relative;
}

.upload-btn {
display: inline-flex;
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--accent-color);
color: white;
padding: 0.8rem 2rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
color: var(--text-secondary);
cursor: pointer;
padding: 3rem;
border: 2px dashed var(--border-color);
border-radius: 8px;
transition: all 0.2s ease;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
Comment on lines 123 to 124
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

prefers-reduced-motionメディアクエリの追加を検討してください。

アニメーションを減らすことを好むユーザーのために、prefers-reduced-motionメディアクエリを追加することで、アクセシビリティがさらに向上します。

♿ reduced-motion対応の追加案 
`@media` (prefers-reduced-motion: reduce) {
    .btn,
    .empty-state,
    .input-group input {
        transition: none;
    }
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/App.css` around lines 123 - 124, Add a prefers-reduced-motion
media query that disables transitions for interactive/animated selectors so
users who prefer reduced motion don't see animations; specifically, target the
selectors used near the transition declaration (e.g., .btn, .empty-state,
.input-group input) and set transition: none (and any related animation
properties) inside `@media` (prefers-reduced-motion: reduce) to override the
existing transition: all 0.2s ease; rule.


.upload-btn:hover {
background-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.2);
.empty-state:hover {
border-color: var(--text-secondary);
color: var(--text-primary);
}

.canvas-container {
width: 100%;
max-width: 800px;
background: var(--card-bg);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
overflow: hidden;
.empty-state.selecting {
cursor: wait;
opacity: 0.7;
}

.empty-state.selecting:hover {
border-color: var(--border-color);
color: var(--text-secondary);
}

@keyframes spin {
to { transform: rotate(360deg); }
}

.canvas-container.visible {
.spinner {
animation: spin 1s linear infinite;
}

.canvas-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.preview-canvas {
max-width: 100%;
max-height: 60vh;
max-height: 100%;
object-fit: contain;
Copy link

Copilot AI Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

object-fit doesn't apply to <canvas> elements, so object-fit: contain; here is ineffective and can be misleading. Either remove it or replace it with explicit CSS sizing (e.g., controlling width/height) that achieves the intended containment behavior.

Suggested change
object-fit: contain;

Copilot uses AI. Check for mistakes.
border-radius: 4px;
background: #fff; /* The image frame itself is white */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
background: #fff;
}

.settings-panel {
background: var(--card-bg);
padding: 1.5rem;
border-radius: 12px;
width: 100%;
max-width: 800px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
/* Sidebar */
.sidebar {
width: 320px;
background-color: var(--bg-panel);
border-left: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 1rem;
box-sizing: border-box;
overflow-y: auto;
flex-shrink: 0;
}
Comment on lines +165 to 174
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

レスポンシブ対応の検討をお勧めします。

サイドバーの幅が320pxに固定されています。小さな画面サイズ（タブレットなど）での表示を考慮して、メディアクエリでの調整を検討してください。

📱 レスポンシブ対応の追加案 
`@media` (max-width: 768px) {
    .sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
    
    .workspace {
        flex-direction: column;
    }
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/App.css` around lines 147 - 156, The .sidebar rule currently
uses a fixed width of 320px which breaks on smaller screens; update the CSS to
add a media query (e.g., `@media` (max-width: 768px)) that overrides .sidebar to
width: 100%, removes or changes the left border (e.g., border-left: none; add
border-top instead), and adjust related layout containers such as .workspace to
stack vertically (flex-direction: column) so the sidebar becomes responsive on
tablets and phones.


.input-row {
display: flex;
gap: 1rem;
width: 100%;
.sidebar-section {
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
}

.input-row .input-group {
flex: 1;
.sidebar-section h3 {
margin: 0 0 1.2rem 0;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary);
font-weight: 600;
}

.input-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1rem;
}

.input-group:last-child {
margin-bottom: 0;
}

.input-row {
display: flex;
gap: 0.8rem;
margin-bottom: 1rem;
}

.input-row .input-group {
flex: 1;
margin-bottom: 0;
}

.input-group label {
font-size: 0.85rem;
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 500;
margin-bottom: 0.4rem;
}

.input-group input {
background-color: #2a2a2a;
border: 1px solid var(--border-color);
background-color: var(--input-bg);
border: 1px solid var(--input-border);
color: var(--text-primary);
padding: 0.6rem 0.8rem;
border-radius: 6px;
font-size: 0.95rem;
padding: 0.5rem 0.6rem;
border-radius: 4px;
font-size: 0.85rem;
font-family: inherit;
transition: border-color 0.2s;
transition: border-color 0.2s, background-color 0.2s;
outline: none;
width: 100%;
box-sizing: border-box;
}

.input-group input:focus {
border-color: var(--accent-color);
}

.download-btn {
margin-top: 1rem;
background-color: #10b981;
color: white;
border: none;
padding: 0.8rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
}

.download-btn:hover {
background-color: #059669;
background-color: #252525;
}
Loading