Skip to content

Deploy form UI polish to main - #7

Merged
devyanijain merged 6 commits into
mainfrom
devyanijain-build-portfolio-site
Aug 31, 2026
Merged

Deploy form UI polish to main#7
devyanijain merged 6 commits into
mainfrom
devyanijain-build-portfolio-site

Conversation

@devyanijain

Copy link
Copy Markdown
Owner

Merges latest form polish changes to deploy to GitHub Pages:

  • Required asterisk always visible on required fields
  • Footer border-default token
  • Form copy improvements
  • View variant typography and label fixes

devyanijain and others added 6 commits August 29, 2026 23:22
* Block search engine indexing (noindex meta + robots.txt)

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd

* Redesign: framed card layout with sticky identity column and pill accents

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd

* feat: Golden Github Seeds redesign — full-viewport dot field + feedback panel

- Three-section layout: topContent 40vh / middleContent 20vh / bottomContent 40vh
- Design tokens: Space Mono (headings) + Space Grotesk (body), dark palette
  (bg-primary #000, bg-secondary #1F1F1F, bg-tertiary #3D3D3D)
- Dull dot fills: fg-yellow-dull, fg-blue-dull, fg-green-dull, fg-red-dull, fg-purple-dull
- Submitted dots: radial gradient + glow, clickable; default dots: dull, pointer-events none
- Color groups: yellow/teal (top) | green/red/purple (bottom)
- Feedback panel: fixed right, slides in — Edit / View / Confirmation variants
- Edit: actionBar (Feedback title + X), contentBar (form), footerBar (Submit)
- View: actionBar (X), contentBar (read-only fields), footerBar (◀ ▶ arrows)
- Confirmation: actionBar (Thank you! + X), contentBar (planted message), footerBar (Edit / Done)
- Phosphor icons inline SVG: X, ArrowBendUpRight, ArrowCircleLeft, ArrowCircleRight
- 'More' scroll hint on Edit contentBar; bottom-sheet layout on mobile

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Devyani Jain <devyanijain0@gmail.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd
…#2)

* Block search engine indexing (noindex meta + robots.txt)

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd

* Redesign: framed card layout with sticky identity column and pill accents

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd

* feat: Golden Github Seeds redesign — full-viewport dot field + feedback panel

- Three-section layout: topContent 40vh / middleContent 20vh / bottomContent 40vh
- Design tokens: Space Mono (headings) + Space Grotesk (body), dark palette
  (bg-primary #000, bg-secondary #1F1F1F, bg-tertiary #3D3D3D)
- Dull dot fills: fg-yellow-dull, fg-blue-dull, fg-green-dull, fg-red-dull, fg-purple-dull
- Submitted dots: radial gradient + glow, clickable; default dots: dull, pointer-events none
- Color groups: yellow/teal (top) | green/red/purple (bottom)
- Feedback panel: fixed right, slides in — Edit / View / Confirmation variants
- Edit: actionBar (Feedback title + X), contentBar (form), footerBar (Submit)
- View: actionBar (X), contentBar (read-only fields), footerBar (◀ ▶ arrows)
- Confirmation: actionBar (Thank you! + X), contentBar (planted message), footerBar (Edit / Done)
- Phosphor icons inline SVG: X, ArrowBendUpRight, ArrowCircleLeft, ArrowCircleRight
- 'More' scroll hint on Edit contentBar; bottom-sheet layout on mobile

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* fix: only one feedback variant visible at a time

- Added hidden to editVariant on page load so all three boxes start hidden
- Switched panel from display:flex to display:block so boxes don't render side by side
- Added .feedback-box[hidden] { display:none !important } as belt-and-suspenders
- Panel fills full height between padding-lg top and bottom
- Feedback box fills 100% panel height so edit form scrolls internally

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

---------

Co-authored-by: Devyani Jain <devyanijain0@gmail.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949
* Block search engine indexing (noindex meta + robots.txt)

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd

* Redesign: framed card layout with sticky identity column and pill accents

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd

* feat: Golden Github Seeds redesign — full-viewport dot field + feedback panel

- Three-section layout: topContent 40vh / middleContent 20vh / bottomContent 40vh
- Design tokens: Space Mono (headings) + Space Grotesk (body), dark palette
  (bg-primary #000, bg-secondary #1F1F1F, bg-tertiary #3D3D3D)
- Dull dot fills: fg-yellow-dull, fg-blue-dull, fg-green-dull, fg-red-dull, fg-purple-dull
- Submitted dots: radial gradient + glow, clickable; default dots: dull, pointer-events none
- Color groups: yellow/teal (top) | green/red/purple (bottom)
- Feedback panel: fixed right, slides in — Edit / View / Confirmation variants
- Edit: actionBar (Feedback title + X), contentBar (form), footerBar (Submit)
- View: actionBar (X), contentBar (read-only fields), footerBar (◀ ▶ arrows)
- Confirmation: actionBar (Thank you! + X), contentBar (planted message), footerBar (Edit / Done)
- Phosphor icons inline SVG: X, ArrowBendUpRight, ArrowCircleLeft, ArrowCircleRight
- 'More' scroll hint on Edit contentBar; bottom-sheet layout on mobile

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* fix: only one feedback variant visible at a time

- Added hidden to editVariant on page load so all three boxes start hidden
- Switched panel from display:flex to display:block so boxes don't render side by side
- Added .feedback-box[hidden] { display:none !important } as belt-and-suspenders
- Panel fills full height between padding-lg top and bottom
- Feedback box fills 100% panel height so edit form scrolls internally

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Add custom relationship dropdown (CSS + JS, position:fixed to escape overflow)

- Custom select CSS: trigger, list (position:fixed), options, hover/selected states
- JS: open/close, option selection, keyboard nav, fixed positioning via getBoundingClientRect
- Closes when contentBar scrolls or click outside
- Default value: Manager

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Rename relationship labels

Manager → Manager/PM
Peer → Colleague
Cross-functional Partner → Team/Engineer
Mentor → SF office buddy

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Fix custom dropdown trigger visibility — explicit button reset CSS

- custom-select__trigger now self-contained (no input-field__input class)
- Explicit appearance, background, border, font, height, padding resets
- Prevents browser UA stylesheet from overriding custom styles

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Update improvement label to third person

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Restore native select for relationship field

- Removes custom dropdown HTML, JS entirely
- Native <select> with existing styling
- contentBar gets 120px padding-bottom so OS popup opens downward

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Fix focus border clipped by overflow:hidden — use border not outline

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Polish: photos, validation, copy, error tokens, Go Back button

- Add 9 photo images for More and Confirmation panel circles
- Add fg-red-bright token (#FF4444) for error states
- Make all form fields required with live error clearing
- Format phone input as (XXX)-XXX-XXXX
- Update Go Back button to primary with back arrow
- Apply final More panel copy (experience + Kusama)

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Polish view feedback variant: typography, quote box, role label

- Remove all-caps/letter-spacing from .view-label (caption style)
- Remove fill from .feedback-quote-box (border only)
- Update Role label to 'Role at Github'

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

---------

Co-authored-by: Devyani Jain <devyanijain0@gmail.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949
* Block search engine indexing (noindex meta + robots.txt)

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd

* Redesign: framed card layout with sticky identity column and pill accents

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd

* feat: Golden Github Seeds redesign — full-viewport dot field + feedback panel

- Three-section layout: topContent 40vh / middleContent 20vh / bottomContent 40vh
- Design tokens: Space Mono (headings) + Space Grotesk (body), dark palette
  (bg-primary #000, bg-secondary #1F1F1F, bg-tertiary #3D3D3D)
- Dull dot fills: fg-yellow-dull, fg-blue-dull, fg-green-dull, fg-red-dull, fg-purple-dull
- Submitted dots: radial gradient + glow, clickable; default dots: dull, pointer-events none
- Color groups: yellow/teal (top) | green/red/purple (bottom)
- Feedback panel: fixed right, slides in — Edit / View / Confirmation variants
- Edit: actionBar (Feedback title + X), contentBar (form), footerBar (Submit)
- View: actionBar (X), contentBar (read-only fields), footerBar (◀ ▶ arrows)
- Confirmation: actionBar (Thank you! + X), contentBar (planted message), footerBar (Edit / Done)
- Phosphor icons inline SVG: X, ArrowBendUpRight, ArrowCircleLeft, ArrowCircleRight
- 'More' scroll hint on Edit contentBar; bottom-sheet layout on mobile

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* fix: only one feedback variant visible at a time

- Added hidden to editVariant on page load so all three boxes start hidden
- Switched panel from display:flex to display:block so boxes don't render side by side
- Added .feedback-box[hidden] { display:none !important } as belt-and-suspenders
- Panel fills full height between padding-lg top and bottom
- Feedback box fills 100% panel height so edit form scrolls internally

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Add custom relationship dropdown (CSS + JS, position:fixed to escape overflow)

- Custom select CSS: trigger, list (position:fixed), options, hover/selected states
- JS: open/close, option selection, keyboard nav, fixed positioning via getBoundingClientRect
- Closes when contentBar scrolls or click outside
- Default value: Manager

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Rename relationship labels

Manager → Manager/PM
Peer → Colleague
Cross-functional Partner → Team/Engineer
Mentor → SF office buddy

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Fix custom dropdown trigger visibility — explicit button reset CSS

- custom-select__trigger now self-contained (no input-field__input class)
- Explicit appearance, background, border, font, height, padding resets
- Prevents browser UA stylesheet from overriding custom styles

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Update improvement label to third person

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Restore native select for relationship field

- Removes custom dropdown HTML, JS entirely
- Native <select> with existing styling
- contentBar gets 120px padding-bottom so OS popup opens downward

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Fix focus border clipped by overflow:hidden — use border not outline

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Polish: photos, validation, copy, error tokens, Go Back button

- Add 9 photo images for More and Confirmation panel circles
- Add fg-red-bright token (#FF4444) for error states
- Make all form fields required with live error clearing
- Format phone input as (XXX)-XXX-XXXX
- Update Go Back button to primary with back arrow
- Apply final More panel copy (experience + Kusama)

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Polish view feedback variant: typography, quote box, role label

- Remove all-caps/letter-spacing from .view-label (caption style)
- Remove fill from .feedback-quote-box (border only)
- Update Role label to 'Role at Github'

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Remove all placeholder submitted dot feedback data

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Fix double-brace syntax error in dots array

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

---------

Co-authored-by: Devyani Jain <devyanijain0@gmail.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949
* feat: Golden Github Seeds redesign — full-viewport dot field + feedback panel

- Three-section layout: topContent 40vh / middleContent 20vh / bottomContent 40vh
- Design tokens: Space Mono (headings) + Space Grotesk (body), dark palette
  (bg-primary #000, bg-secondary #1F1F1F, bg-tertiary #3D3D3D)
- Dull dot fills: fg-yellow-dull, fg-blue-dull, fg-green-dull, fg-red-dull, fg-purple-dull
- Submitted dots: radial gradient + glow, clickable; default dots: dull, pointer-events none
- Color groups: yellow/teal (top) | green/red/purple (bottom)
- Feedback panel: fixed right, slides in — Edit / View / Confirmation variants
- Edit: actionBar (Feedback title + X), contentBar (form), footerBar (Submit)
- View: actionBar (X), contentBar (read-only fields), footerBar (◀ ▶ arrows)
- Confirmation: actionBar (Thank you! + X), contentBar (planted message), footerBar (Edit / Done)
- Phosphor icons inline SVG: X, ArrowBendUpRight, ArrowCircleLeft, ArrowCircleRight
- 'More' scroll hint on Edit contentBar; bottom-sheet layout on mobile

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

* fix: only one feedback variant visible at a time

- Added hidden to editVariant on page load so all three boxes start hidden
- Switched panel from display:flex to display:block so boxes don't render side by side
- Added .feedback-box[hidden] { display:none !important } as belt-and-suspenders
- Panel fills full height between padding-lg top and bottom
- Feedback box fills 100% panel height so edit form scrolls internally

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Add custom relationship dropdown (CSS + JS, position:fixed to escape overflow)

- Custom select CSS: trigger, list (position:fixed), options, hover/selected states
- JS: open/close, option selection, keyboard nav, fixed positioning via getBoundingClientRect
- Closes when contentBar scrolls or click outside
- Default value: Manager

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Rename relationship labels

Manager → Manager/PM
Peer → Colleague
Cross-functional Partner → Team/Engineer
Mentor → SF office buddy

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Fix custom dropdown trigger visibility — explicit button reset CSS

- custom-select__trigger now self-contained (no input-field__input class)
- Explicit appearance, background, border, font, height, padding resets
- Prevents browser UA stylesheet from overriding custom styles

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Update improvement label to third person

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Restore native select for relationship field

- Removes custom dropdown HTML, JS entirely
- Native <select> with existing styling
- contentBar gets 120px padding-bottom so OS popup opens downward

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Fix focus border clipped by overflow:hidden — use border not outline

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Polish: photos, validation, copy, error tokens, Go Back button

- Add 9 photo images for More and Confirmation panel circles
- Add fg-red-bright token (#FF4444) for error states
- Make all form fields required with live error clearing
- Format phone input as (XXX)-XXX-XXXX
- Update Go Back button to primary with back arrow
- Apply final More panel copy (experience + Kusama)

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Polish view feedback variant: typography, quote box, role label

- Remove all-caps/letter-spacing from .view-label (caption style)
- Remove fill from .feedback-quote-box (border only)
- Update Role label to 'Role at Github'

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Remove all placeholder submitted dot feedback data

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Fix double-brace syntax error in dots array

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

* Polish form UI: asterisk validation, footer border, copy tweaks

- Always show red asterisk next to required field labels
- Suppress browser-native :invalid red borders
- Footer bar border-top uses border-default token
- Label copy: 'What can she work on?'
- Improvement input placeholder: 'Areas of growth'
- View variant: label fixes (no uppercase), role label update

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949

---------

Co-authored-by: Devyani Jain <devyanijain0@gmail.com>
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949
@devyanijain
devyanijain merged commit d914938 into main Aug 31, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants