Skip to content

feat(v4): UI refresh - #22

Merged
tharropoulos merged 13 commits into
typesense:v4from
haydenhoang:v4
Aug 11, 2026
Merged

feat(v4): UI refresh#22
tharropoulos merged 13 commits into
typesense:v4from
haydenhoang:v4

Conversation

@haydenhoang

Copy link
Copy Markdown
Collaborator

Change Summary

  • This PR updates the DocSearch Button, Modal, and Sidepanel UI styles to better reflect the Typesense brand identity. The changes include updates to the typesense-docsearch-css package while preserving the flexibility for users to customize their look and feel.

For reference, here is the before:

Screenshot 2026-08-07 at 01 19 45 Screenshot 2026-08-07 at 01 20 10
image Screenshot 2026-08-07 at 01 21 50

And here is the after: https://new-typesense-docsearch-ui-demo-rea.vercel.app/

PR Checklist

- Update the UI of Docsearch button, modal and sidepanel to better relfect Typesense brand.
- Update Typesense Logo
@haydenhoang haydenhoang changed the title feat: UI refresh feat(v4): UI refresh Aug 6, 2026

@tharropoulos tharropoulos left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

two general things

  • lint:css goes from 277 to 345 errors with this change (most are autofixable with --fix),
  • 3 of the css files lost their trailing newline

Comment thread packages/docsearch-css/src/modal.css Outdated
Comment thread packages/docsearch-css/src/modal.css Outdated
Comment thread packages/docsearch-css/src/_variables.css Outdated
Comment thread packages/docsearch-css/src/_variables.css
Comment thread packages/docsearch-react/src/TypesenseLogo.tsx Outdated
Comment thread packages/docsearch-css/src/sidepanel.css
Comment thread packages/docsearch-css/src/sidepanel.css Outdated
Comment thread packages/docsearch-css/src/sidepanel.css Outdated
Comment thread examples/demo-react/src/App.tsx Outdated
@haydenhoang

haydenhoang commented Aug 7, 2026

Copy link
Copy Markdown
Collaborator Author

Thanks for the detailed review @tharropoulos! I've addressed the comments and pushed the updates. Let me know if anything else needs adjustment.

@tharropoulos tharropoulos left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

thanks for the quick turnaround. one thing to settle before merge is the --fix converting media queries to range syntax (width <= 768px), which needs chrome 104 / safari 16.4 / firefox 102. between that and the prefix removals it's probably worth adding autoprefixer and browserslist to build-css.js so compat is explicit, postcss is already in the pipeline there

Comment thread examples/demo-react/src/App.tsx Outdated
Comment thread examples/demo-react/src/App.tsx
@haydenhoang

Copy link
Copy Markdown
Collaborator Author

I added autoprefixer and browserslist, and also added @csstools/postcss-media-minmax so we can continue to use the modern media query range syntax and it will be converted back to min/max-width syntax during the CSS build.

Browserslist is explicitly set to > 0.5%, last 2 versions, Firefox ESR, not dead, this is the current defaults.

Also updated workpace yarn to v4.18.0 and setnpmMinimalAgeGate: 3d

@tharropoulos

Copy link
Copy Markdown
Collaborator

:shipit: 🙌

@tharropoulos
tharropoulos merged commit c3523e2 into typesense:v4 Aug 11, 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