feat(HRISProviderSelector): add dark mode support, real logos, and St…#59
Merged
garrity-miepub merged 1 commit intomainfrom Feb 3, 2026
Merged
Conversation
…orybook controls Dark Mode Support: Replace hardcoded light mode colors with semantic design tokens including border-border, bg-card, bg-muted, text-foreground, and text-muted-foreground. Add dark mode variants for provider cards, search input, loading skeletons, logo fallbacks, sync pending alert, and disconnect button. Real HRIS Provider Logos: Add SVG logos for all 15 providers in .storybook/public/hris-logos/. Use Simple Icons CDN for available brands (ADP, Gusto, QuickBooks, Sage, Square). Create branded SVG placeholders for others. Replace defunct finchdata.io logo URLs. Storybook Controls: Convert Default story from render wrapper to args-based for controls. Add argTypes with descriptions for all props. Configure action logging for callback props. Set sensible default args at meta level.
There was a problem hiding this comment.
Pull request overview
Adds dark-mode-friendly styling to HRISProviderSelector, replaces defunct provider logo URLs with local SVG assets for Storybook, and refactors the Storybook stories to be args/controls-driven.
Changes:
- Swap hardcoded light-mode colors for semantic design tokens + dark variants in
HRISProviderSelector. - Add local SVG logos for 15 HRIS providers under
.storybook/public/hris-logos/. - Convert the Storybook stories to args-based usage with
argTypesand action logging.
Reviewed changes
Copilot reviewed 2 out of 17 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/HRISProviderSelector/HRISProviderSelector.tsx | Updates styling for dark mode and adds logo fallback rendering in the provider grid. |
| src/components/HRISProviderSelector/HRISProviderSelector.stories.tsx | Switches stories to args/controls + updates provider logoUrls to local assets. |
| .storybook/public/hris-logos/adp.svg | Adds ADP logo asset for Storybook. |
| .storybook/public/hris-logos/bamboohr.svg | Adds BambooHR logo asset for Storybook. |
| .storybook/public/hris-logos/gusto.svg | Adds Gusto logo asset for Storybook. |
| .storybook/public/hris-logos/justworks.svg | Adds Justworks logo asset for Storybook. |
| .storybook/public/hris-logos/paychex.svg | Adds Paychex logo asset for Storybook. |
| .storybook/public/hris-logos/paycom.svg | Adds Paycom logo asset for Storybook. |
| .storybook/public/hris-logos/paylocity.svg | Adds Paylocity logo asset for Storybook. |
| .storybook/public/hris-logos/quickbooks.svg | Adds QuickBooks logo asset for Storybook. |
| .storybook/public/hris-logos/rippling.svg | Adds Rippling logo asset for Storybook. |
| .storybook/public/hris-logos/sage.svg | Adds Sage logo asset for Storybook. |
| .storybook/public/hris-logos/square.svg | Adds Square logo asset for Storybook. |
| .storybook/public/hris-logos/trinet.svg | Adds TriNet logo asset for Storybook. |
| .storybook/public/hris-logos/ukg.svg | Adds UKG logo asset for Storybook. |
| .storybook/public/hris-logos/workday.svg | Adds Workday logo asset for Storybook. |
| .storybook/public/hris-logos/zenefits.svg | Adds Zenefits logo asset for Storybook. |
Comments suppressed due to low confidence (1)
src/components/HRISProviderSelector/HRISProviderSelector.tsx:103
- In the connected-provider view, the logo
<img>has no error handling/fallback. IfcurrentProvider.logoUrlis broken, the UI will show a broken image with no initials fallback (unlike the grid cards). Consider reusing the same image+fallback pattern here for consistency and resilience.
<div className="border-border bg-muted/50 rounded-lg border p-4">
<div className="flex flex-col gap-4 md:flex-row md:items-center">
{/* Provider Logo */}
{currentProvider.logoUrl && (
<div className="flex-shrink-0">
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+148
to
+151
| onSearchChange: { | ||
| action: 'search changed', | ||
| }, | ||
| }, |
There was a problem hiding this comment.
searchQuery is a controlled prop, but in these stories onSearchChange is only an action. Typing in the search input won’t update the value, so the input appears broken. Use useArgs() (or a small render wrapper) to update searchQuery when onSearchChange fires while still logging the action.
| if (fallback) fallback.classList.remove('hidden'); | ||
| }} | ||
| /> | ||
| <div className="bg-muted text-muted-foreground hidden h-12 w-12 items-center justify-center rounded-lg text-lg font-bold"> |
There was a problem hiding this comment.
The logo fallback <div> shown after an image error is missing flex, so items-center/justify-center won’t apply and the initials won’t be centered. Add flex (or otherwise ensure proper centering) on the fallback element.
Suggested change
| <div className="bg-muted text-muted-foreground hidden h-12 w-12 items-center justify-center rounded-lg text-lg font-bold"> | |
| <div className="bg-muted text-muted-foreground hidden flex h-12 w-12 items-center justify-center rounded-lg text-lg font-bold"> |
| @@ -0,0 +1 @@ | |||
| <svg fill="#000000" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Square</title><path d="M4.01 0A4.01 4.01 0 000 4.01v15.98c0 2.21 1.8 4 4.01 4.01h15.98C22.2 24 24 22.2 24 19.99V4A4.01 4.01 0 0019.99 0H4zm1.62 4.36h12.74c.7 0 1.26.57 1.26 1.27v12.74c0 .7-.56 1.27-1.26 1.27H5.63c-.7 0-1.26-.57-1.26-1.27V5.63a1.27 1.27 0 011.26-1.27zm3.83 4.35a.73.73 0 00-.73.73v5.09c0 .4.32.72.72.72h5.1a.73.73 0 00.73-.72V9.44a.73.73 0 00-.73-.73h-5.1Z"/></svg> No newline at end of file | |||
There was a problem hiding this comment.
This SVG uses a hard-coded black fill (#000000). On the component’s dark-mode bg-card background, the Square logo will have very low contrast / be effectively invisible. Consider adding a light background in the SVG (e.g., a white rounded rect) or providing a dark-mode-friendly variant.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…orybook controls
Dark Mode Support: Replace hardcoded light mode colors with semantic design tokens including border-border, bg-card, bg-muted, text-foreground, and text-muted-foreground. Add dark mode variants for provider cards, search input, loading skeletons, logo fallbacks, sync pending alert, and disconnect button.
Real HRIS Provider Logos: Add SVG logos for all 15 providers in .storybook/public/hris-logos/. Use Simple Icons CDN for available brands (ADP, Gusto, QuickBooks, Sage, Square). Create branded SVG placeholders for others. Replace defunct finchdata.io logo URLs.
Storybook Controls: Convert Default story from render wrapper to args-based for controls. Add argTypes with descriptions for all props. Configure action logging for callback props. Set sensible default args at meta level.
hria-updates.mov