Skip to content

feat(builder): redesign CV creator UI for typing comfort and optimize ATS PDF template #3

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
DongDuong2001 merged 6 commits into from
Jun 28, 2026
Merged

feat(builder): redesign CV creator UI for typing comfort and optimize ATS PDF template #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
79142b9
style(css): improve input focus behavior
DongDuong2001 Jun 24, 2026
74290ef
refactor(personal-info): remove inline focus blackout styles
DongDuong2001 Jun 24, 2026
b73184e
refactor(builder-forms): remove inline focus blackout styles from inputs
DongDuong2001 Jun 24, 2026
dfb9ea9
feat(score): export scoreResume helper for use in builder navigation
DongDuong2001 Jun 24, 2026
5a0e0ee
feat(builder): redesign builder layout with dynamic sidebar navigatio…
DongDuong2001 Jun 24, 2026
4ace1cf
feat(pdf): convert ATS PDF template to single column layout
DongDuong2001 Jun 24, 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
56 changes: 34 additions & 22 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

@theme inline {
--color-black: #000000;
--color-white: #FFFFFF;
--color-gray-100: #F5F5F5;
--color-gray-200: #E5E5E5;
--color-gray-300: #D4D4D4;
--color-gray-400: #A3A3A3;
--color-white: #ffffff;
--color-gray-100: #f5f5f5;
--color-gray-200: #e5e5e5;
--color-gray-300: #d4d4d4;
--color-gray-400: #a3a3a3;
--color-gray-500: #737373;
--color-gray-600: #525252;
--color-gray-700: #404040;
Expand All @@ -33,27 +33,29 @@
}

html {
background-color: #FFFFFF;
background-color: #ffffff;
color: #000000;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
font-feature-settings: "kern" 1, "liga" 1;
font-feature-settings:
"kern" 1,
"liga" 1;
text-rendering: optimizeLegibility;

@coderabbitai coderabbitai Bot Jun 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Fix the lint-breaking keyword casing.

Line 44 will keep stylelint failing under value-keyword-case.

Suggested fix 
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
📝 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
text-rendering: optimizeLegibility;
text-rendering: optimizelegibility;
🧰 Tools
🪛 Stylelint (17.13.0)

[error] 44-44: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/globals.css` at line 44, The CSS declaration in the global styles
uses a keyword casing that breaks stylelint’s value-keyword-case rule. Update
the text-rendering value in the globals stylesheet to use the expected lowercase
keyword form, and keep the change localized to the same declaration so the lint
error is resolved without affecting the rest of the styles.

Source: Linters/SAST tools

}

body {
font-family: var(--font-sans), system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #FFFFFF;
background-color: #ffffff;
color: #000000;
}

/* Brutalist selection */
::selection {
background-color: #000000;
color: #FFFFFF;
color: #ffffff;
}

/* Brutalist focus states */
Expand All @@ -69,7 +71,7 @@ body {
}

::-webkit-scrollbar-track {
background: #FFFFFF;
background: #ffffff;
border-left: 1px solid #000000;
}

Expand All @@ -78,7 +80,9 @@ body {
}

/* Brutalist input reset */
input, textarea, select {
input,
textarea,
select {
border: 1px solid #000000;
background: transparent;
color: #000000;
Expand All @@ -87,13 +91,18 @@ input, textarea, select {
transition: all 0.15s ease;
}

input:focus, textarea:focus, select:focus {
background-color: #000000;
color: #FFFFFF;
input:focus,
textarea:focus,
select:focus {
background-color: #ffffff;
color: #000000;
border-color: #000000;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
outline: none;
}

input::placeholder, textarea::placeholder {
input::placeholder,
textarea::placeholder {
color: #737373;
text-transform: uppercase;
font-size: 0.75rem;
Expand Down Expand Up @@ -123,8 +132,9 @@ textarea::-moz-selection {
color: #000000 !important;
}

input:focus::placeholder, textarea:focus::placeholder {
color: #A3A3A3;
input:focus::placeholder,
textarea:focus::placeholder {
color: #a3a3a3;
}

input[type="text"]:focus::selection,
Expand Down Expand Up @@ -177,15 +187,17 @@ select {
background-position:
calc(100% - 16px) calc(50% - 2px),
calc(100% - 10px) calc(50% - 2px);
background-size: 6px 6px, 6px 6px;
background-size:
6px 6px,
6px 6px;
background-repeat: no-repeat;
padding-right: 2.25rem;
}

select:focus {
background-image:
linear-gradient(45deg, transparent 50%, #FFFFFF 50%),
linear-gradient(135deg, #FFFFFF 50%, transparent 50%);
linear-gradient(45deg, transparent 50%, #ffffff 50%),
linear-gradient(135deg, #ffffff 50%, transparent 50%);
Comment on lines 197 to +200

@coderabbitai coderabbitai Bot Jun 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Focused select caret becomes invisible on the new white focus background.

With white focus background (Lines 97-98), keeping white caret gradients at Line 199-200 removes the visible dropdown indicator.

Suggested fix 
 select:focus {
   background-image:
-    linear-gradient(45deg, transparent 50%, `#ffffff` 50%),
-    linear-gradient(135deg, `#ffffff` 50%, transparent 50%);
+    linear-gradient(45deg, transparent 50%, `#000000` 50%),
+    linear-gradient(135deg, `#000000` 50%, transparent 50%);
 }
📝 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
select:focus {
background-image:
linear-gradient(45deg, transparent 50%, #FFFFFF 50%),
linear-gradient(135deg, #FFFFFF 50%, transparent 50%);
linear-gradient(45deg, transparent 50%, #ffffff 50%),
linear-gradient(135deg, #ffffff 50%, transparent 50%);
select:focus {
background-image:
linear-gradient(45deg, transparent 50%, `#000000` 50%),
linear-gradient(135deg, `#000000` 50%, transparent 50%);
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/globals.css` around lines 197 - 200, The select focus styling in
select:focus uses white gradient caret indicators that disappear against the new
white focus background. Update the caret/background-image colors in the
select:focus rule so the dropdown indicator remains visible on focus, and keep
the change aligned with the existing select focus styling in globals.css.

}

/* macOS/Safari: custom checkbox styling (Safari ignores border-radius without appearance reset) */
Expand Down Expand Up @@ -214,7 +226,7 @@ input[type="checkbox"]:checked::after {
top: 0px;
width: 5px;
height: 9px;
border: 2px solid #FFFFFF;
border: 2px solid #ffffff;
border-top: none;
border-left: none;
transform: rotate(45deg);
Expand Down Expand Up @@ -250,7 +262,7 @@ button {

button:hover {
background-color: #000000;
color: #FFFFFF;
color: #ffffff;
}

/* Monospace label utility */
Expand Down
Loading
Loading