#401 Update the styling/buttons to use the new solid-ui by SharonStrats · Pull Request #402 · SolidOS/profile-pane

SharonStrats · 2026-06-14T10:40:48Z

Done

adjusted buttons and styling to match the design system solid-ui-button
Used any available styles (fontsize, colors, min touch target) from solid-ui
Changed spacing and gaps to px instead of rem
did a little css cleanup
check when screen resizes so that we can use the tertiary and the ghost buttons for the add more/edit at the top of each section, otherwise the icon will underline on hover and doesn't look correct.

Some things we need

Font-size .75rem for mobile - will need to change Upload button to just say Upload for the 1rem font size
Highlight lavender-300 over icon buttons
Following button - no option for purple outline
Not sure about the combobox for select because you can’t use the down and up keys and there is no highlighting..
The …more button font size does not match the text size.
Skills x button highlight is too much should I use a normal button

Things I’ll need to do

Combobox doesn’t work for search.. either need to create a new one in profile-pane or maybe export the v2 one under a different name like SearchComponent or something.
Paste button is unique may need to just use a regular button
Determine is select … should it be the combobox from the design-system

Missing colors from solid-ui

var(--color-icon-muted, var(--slate-400, #90A1B9));
var(--color-text-strong-secondary, var(--slate-800, #1D293D));
var(--color-text-detail, var(--slate-500, #62748E));
var(--color-text-heading, #000)
var(--color-text-secondary, #4A5565)
var(--color-surface-placeholder, var(--gray-300, #D1D5DC))
var(--color-text-subheading, var(--gray-900, #101828));
--color-background: #F8F9FB
var(--color-surface-tertiary, var(--gray-50, #F9FAFB));
var(--purple-500, #AD46FF);
var(--yellow-700, #A65F00);
var(--color-text-control, var(--slate-700, #314158));
var(--color-border, var(--gray-200, #E5E7EB));
var(--color-border-pale, #eee);
var(--color-surface-accent-subtle, var(--lavender-300, #e6dcff));
var(--color-text-primary, #314158);
var(--color-background, #F8F9FB);

Copilot

Pull request overview

This PR updates the profile pane UI to align with the newer solid-ui button component and design tokens, including button variant changes and a broad CSS spacing/token pass across dialogs and sections.

Changes:

Migrates many usages from solid-ui/components/actions/button to solid-ui/components/button, updating variants (e.g., tertiary, ghost) and loading handling.
Converts spacing and sizing from rem/design vars to px, and replaces several color/font variables with solid-ui tokens.
Refactors some section card helper logic and updates section templates to use icon slots.

Reviewed changes

Copilot reviewed 32 out of 32 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/ui/dialog.ts	Switches modal header/footer buttons to new `solid-ui-button` import and variants.
src/ui/dialog.responsive.css	Updates responsive modal spacing/radius to px-based values.
src/ui/dialog.css	Updates modal base styles, borders, and header/button styling to `solid-ui` tokens.
src/styles/EditDialogs.responsive.css	Updates responsive edit-dialog sizing/typography and replaces touch-target vars.
src/styles/EditDialogs.css	Updates edit-dialog base styling to `solid-ui` tokens and px sizing.
src/styles/CollapsibleSection.css	Simplifies collapsible section styles and aligns spacing with new tokens.
src/sections/social/SocialSection.ts	Updates buttons to new component/variants and adjusts button content structure.
src/sections/social/SocialSection.css	Updates social section spacing/colors and relies more on `solid-ui` styling.
src/sections/social/SocialEditDialog.ts	Updates drag/delete buttons to new variants and icon slot usage.
src/sections/skills/SkillsSection.ts	Updates buttons to new component/variants and tweaks event handling.
src/sections/skills/SkillsSection.css	Updates skills chip spacing/typography and error styling to `solid-ui` tokens.
src/sections/skills/SkillsEditDialog.ts	Updates delete button variant for the skills edit dialog.
src/sections/shared/sectionCardHelpers.ts	Reorders helper function placement and renames a local variable for clarity.
src/sections/resume/ResumeSection.ts	Updates “...more” and edit/toggle buttons to new variants/slots.
src/sections/resume/ResumeSection.css	Updates resume card spacing/typography and toggle styling to `solid-ui` tokens.
src/sections/resume/ResumeEditDialog.ts	Updates combobox import path and icon-button variants in the resume editor.
src/sections/projects/ProjectSection.ts	Updates follow/edit/toggle/more buttons, loading attribute, and icon slot usage.
src/sections/projects/ProjectSection.css	Updates project card spacing/typography and loading selector for new loading attribute.
src/sections/projects/ProjectEditDialog.ts	Updates paste button variant and moves icon into a left-icon slot.
src/sections/languages/LanguageSection.ts	Updates section buttons to new variants.
src/sections/languages/LanguageSection.css	Updates spacing/typography for language list items.
src/sections/languages/LanguageEditDialog.ts	Updates combobox import path and icon-button variants; adds a combobox note.
src/sections/heading/HeadingSection.ts	Updates heading edit button to new variants/classes.
src/sections/heading/HeadingSection.css	Updates heading layout spacing/typography and removes many button overrides.
src/sections/heading/HeadingEditDialog.ts	Updates camera/upload/remove button variants and icon slot usage.
src/sections/contactInfo/ContactInfoSection.ts	Updates section action/toggle buttons to new variants.
src/sections/contactInfo/ContactInfoSection.css	Updates spacing/line-height and uses px-based values.
src/sections/contactInfo/ContactInfoEditDialog.ts	Updates delete/add buttons to new variants and slot usage.
src/sections/contactInfo/ContactInfoEditDialog.css	Updates contact-info dialog spacing/typography to px and `solid-ui` tokens.
src/sections/bio/BioSection.ts	Updates edit/add buttons to new variants and slot usage.
src/sections/bio/BioSection.css	Updates spacing/radius and adjusts toggle button styling for new button behavior.
src/ProfileView.css	Updates global layout spacing/tokens and removes/relaxes many legacy button overrides.

Comments suppressed due to low confidence (3)

src/sections/social/SocialEditDialog.ts:300

These icon/drag-handle controls are rendered inside a <form>. Without type="button", the internal <button> used by solid-ui-button may default to type="submit", causing accidental form submission when reordering.

      <solid-ui-button
        class="profile-edit-dialog__drag-handle"
        variant="ghost"
        aria-label=${`Reorder social account ${displayIndex + 1}`}
        title="Drag to reorder"
        draggable="true"
        @dragstart=${(event: DragEvent) => onDragStart(event, index)}

src/ProfileView.css:4

Several mobile font-size rules now reference CSS variables like --profile-mobile-section-heading-size / --profile-mobile-header-name-size without fallbacks, but those variables are not defined in this stylesheet. When undefined, the font-size declarations become invalid and can revert to browser defaults. Define sensible defaults at the root so these rules always compute.

:root {
  --profile-image-size: 3rem;
  --profile-interactive-cursor: pointer;
}

src/sections/social/SocialSection.ts:56

The literal text SocialData: SocialPresentation appears inside the <section ...> start tag. This will be parsed as invalid attributes and can also surface in the DOM, breaking markup and potentially styles/queries.

              <solid-ui-button
                variant="tertiary"
                class="social-card__more-button"
                aria-controls="social-media"
                aria-expanded="false"
                @click=${expandSocialAccounts}

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

SharonStrats · 2026-06-14T10:52:37Z

+  padding: 10px;
  box-sizing: border-box;
-  border: 1px solid var(--color-border, var(--gray-200, #E5E7EB));
-  border-radius: var(--border-radius-md, 0.5rem);
+  border: 1px solid var(--solid-color-gray-200, #E5E7EB);
+  border-radius: 8px;


this is the color name right now, maybe this will change when there is only one file.

Prompt: set the layout on resize using the observer pattern like the social heading sync also check the size initially. Consolidate code if possible and put it in the utils directory. Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

Prompt: Use this responsive solid-ui-button code (highlighted code) to create a reusable function that can be used on all sections. Make layout, className, ariaLabel, variants which are desktop: 'tertiary' and mobile: 'ghost', onClick, desktopIcon, desktopLabel, andmobileIcon configurable. Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

Copilot

Pull request overview

Copilot reviewed 43 out of 43 changed files in this pull request and generated 12 comments.

also do more cleanup and fix a few style bugs.

SharonStrats added 5 commits June 14, 2026 20:24

SolidOS#401 bio section updated

184e598

SolidOS#401 contactinfo section

1ce1259

SolidOS#401 heading section updated

2d0dfcf

SolidOS#401 base dialog

ebd88a9

SolidOS#401 languages

ad66802

SharonStrats requested a review from Copilot June 14, 2026 10:40

SharonStrats self-assigned this Jun 14, 2026

SharonStrats added this to SolidOS NLNet UI Jun 14, 2026

SharonStrats added the enhancement New feature or request label Jun 14, 2026

SharonStrats moved this to In progress in SolidOS NLNet UI Jun 14, 2026

Copilot started reviewing on behalf of SharonStrats June 14, 2026 10:41 View session

SharonStrats linked an issue Jun 14, 2026 that may be closed by this pull request

Profile-pane component update - fix styling #401

Open

Copilot AI reviewed Jun 14, 2026

View reviewed changes

SharonStrats mentioned this pull request Jun 14, 2026

#780 Migrate to Vite, Vitest, and Storybook 10 SolidOS/solid-ui#787

Merged

SharonStrats and others added 7 commits June 15, 2026 08:50

SolidOS#401 projects

cff0115

SolidOS#401 resume

2f6dc3c

SolidOS#401 skills

92e88a4

SolidOS#401 social accounts

5506b3c

SolidOS#401 cleanup global styles

bc8f907

SolidOS#401 change layout on resize

8ac6878

Prompt: set the layout on resize using the observer pattern like the social heading sync also check the size initially. Consolidate code if possible and put it in the utils directory. Co-authored-by: GPT-5.4 Mini <gpt-5.4-mini@openai.com>

SharonStrats force-pushed the fix/update-component-styling branch 2 times, most recently from 5e15394 to 4597362 Compare June 15, 2026 04:49

SharonStrats requested a review from Copilot June 15, 2026 06:31

Copilot started reviewing on behalf of SharonStrats June 15, 2026 06:32 View session

Copilot AI reviewed Jun 15, 2026

View reviewed changes

SharonStrats force-pushed the fix/update-component-styling branch 2 times, most recently from 64efba4 to 34b7b33 Compare June 15, 2026 07:10

SolidOS#401 use responsive add/edit button in all sections

89001b1

also do more cleanup and fix a few style bugs.

SharonStrats force-pushed the fix/update-component-styling branch from 34b7b33 to 89001b1 Compare June 15, 2026 07:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#401 Update the styling/buttons to use the new solid-ui#402

#401 Update the styling/buttons to use the new solid-ui#402
SharonStrats wants to merge 13 commits into
SolidOS:stagingfrom
SharonStrats:fix/update-component-styling

SharonStrats commented Jun 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

SharonStrats Jun 14, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

SharonStrats commented Jun 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

SharonStrats Jun 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SharonStrats commented Jun 14, 2026 •

edited

Loading