Skip to content

feat: redesign UI — migrate from PicoCSS to Bootstrap 5 - #46

Merged
mroderick merged 4 commits into
mainfrom
feature/codebar-design-clean
Jul 19, 2026
Merged

feat: redesign UI — migrate from PicoCSS to Bootstrap 5#46
mroderick merged 4 commits into
mainfrom
feature/codebar-design-clean

Conversation

@mroderick

@mroderickmroderick commented Jul 14, 2026

Copy link
Copy Markdown
Collaborator

Summary

Redesign all pages of the codebar auth app using Bootstrap 5 with the codebar brand palette. Switches from PicoCSS to Bootstrap 5, adds custom brand CSS, and restructures components/routes to match.

imageimageimage

Commits

CommitMessage
4066a9dfeat: add Bootstrap 5 assets and codebar brand CSS
1f2d9f1feat: migrate UI components from PicoCSS to Bootstrap 5
9ec79e1refactor: update routes for Bootstrap component APIs

Changes

  • Layout: nav bar with codebar logo + "auth" wordmark, Open Sans font, data-bs-theme="auto" for dark mode
  • Home: centered welcome page with codebar logo mark for signed-out state; green success alert + profile/logout actions when signed in
  • Login: centered layout, full-width auth method buttons
  • Magic link: centered form with form-label + form-control
  • Profile: Bootstrap card with magenta header accent stripe, description list (dl.row) layout
  • Admin: Bootstrap table-hover with table-light head, responsive wrapper, inline form-select for role, "No users found" empty state
  • Alerts: custom brand variants (alert-cb-error, -success, -info)
  • Buttons: btn-cb-primary (Trust Blue), btn-outline-danger (logout), btn-outline-secondary (navigation links)
  • Navigation: links styled as outline-secondary buttons

Tests

161/161 passing. Removed FormSection export (no longer used),
default callbackURL in GitHub OAuth changed to /profile.

@mroderick
mroderickforce-pushed the feature/codebar-design-clean branch 2 times, most recently from c292321 to 10e3229CompareJuly 14, 2026 12:34
Comment threadsrc/app/components/layout.js Outdated
@mroderick
mroderick requested a review from tillJuly 16, 2026 14:51
@mroderick
mroderickforce-pushed the feature/codebar-design-clean branch from e95d9ad to 64bc1eeCompareJuly 18, 2026 12:56
@mroderick

mroderick commented Jul 18, 2026

Copy link
Copy Markdown
CollaboratorAuthor

I had to add an extra commit 89a2e16 to fix a mistake I made in #48, where I didn't properly verify that things work in Heroku.

In the new commit, we create a file that holds the version from SOURCE_VERSION during the post install step, as this is not available in the runtime environment 🤷

I tidied up the git history at the same time

@mroderick
mroderick marked this pull request as ready for review July 19, 2026 10:59
Create shared STATIC_VERSION module using HEROKU_RELEASE_VERSION,
falling back to 'dev' for local development. The runtime-dyno-metadata
Heroku lab feature provides HEROKU_RELEASE_VERSION at runtime.
Add Bootstrap 5.3 CSS and JS bundles, codebar brand stylesheet,
and logo assets (PNG + SVG). Configure fallow to ignore static
directory and eslint for static file patterns.
Replace PicoCSS colour classes with custom Bootstrap brand variants:
- Alerts: alert-cb-error, alert-cb-success, alert-cb-info
- Buttons: btn-cb-primary, btn-outline-danger (logout)
- Layout: nav bar with codebar logo + 'auth' wordmark, system font stack
- Cards: Bootstrap card with card-header-cb (magenta accent stripe)
- Tables: Bootstrap table-hover with table-light header row
- Home: centred welcome page with SVG logo for signed-out state
- Profile: description list (dl.row) layout inside card
- Login: centred layout with full-width auth method buttons
- Navigation: links styled as outline-secondary buttons
- All static asset URLs include version stamp via STATIC_VERSION
@mroderick
mroderickforce-pushed the feature/codebar-design-clean branch from 64bc1ee to 13cf5adCompareJuly 19, 2026 13:49
@mroderick

Copy link
Copy Markdown
CollaboratorAuthor

After incorporating the changes from #49, it still works

image

@mroderick
mroderick merged commit 9932d54 into mainJul 19, 2026
7 checks passed
@mroderick
mroderick deleted the feature/codebar-design-clean branch July 19, 2026 14:14
Sign up for freeto 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

@mroderick@till