Chore/bootstrap 5 by Br3nda · Pull Request #4813 · Growstuff/growstuff

Br3nda · 2026-09-20T08:20:47Z

What changed

The site's CSS now comes from Bootstrap 5.3.8. It used to come from material-sass, which is Bootstrap 4 with a Material skin.

Removed the material-sass gem and the material script.
Updated the bootstrap gem from 5.3.2 to 5.3.8. The gem also supplies the CSS now.
Rewrote _variables.scss for Bootstrap 5. It keeps the site colours and the lg and xl breakpoints.
Kept the old text size, line height, heading sizes and unstyled links.
Fixed the navbar logo and search box, which broke under Bootstrap 5.
Buttons look as before: raised by a shadow, no border, uppercase, 2px corners. Link buttons stay plain. A bare .btn is drawn raised with dark text, because it would otherwise look like a link.
Kept three even columns on the home page.
Matched the breadcrumb padding and divider.
Made cards white and raised again, with the old shadow.
Lightened the header menu links and darkened the breadcrumb links. Both were under the 4.5:1 contrast minimum.
Crop chips now have a soft green fill, border and dark green text, using Bootstrap's subtle success colours. They were solid brown-grey with white text.

Class names

Renamed Bootstrap 3 and 4 classes in the views, helpers and scripts.

text-left, text-right, float-left, float-right
ml-*, mr-*, pl-*, pr-*
badge-info and the other badge colours, badge-pill
font-weight-*, sr-only, dropdown-menu-right
form-group, btn-block, btn-xs, btn-default
col-xs-*, col-md-offset-*, row-fluid

Other markup changes:

The Bootstrap 3 style forms now use a .row per field, col-form-label and form-text.
.close buttons are now .btn-close.
alert-dismissable is now alert-dismissible.
form-inline, embed-responsive, input-group-prepend and media are replaced.
The garden card components from Quick planting addition form #4808 use the new names too.

Other fixes

Removed a duplicate Delete link that sat in the garden page body.
The crop wrangler spec now stubs GBIF. It raced a live request before.
Body text is near-black again. Links have no underline, and axe needs the contrast.
Fixed progress bars. Old Bootstrap 3 variables in _variables.scss made them 52px tall with a white track. They are now a thin strip on a neutral grey track.
Progress bars change colour with the planting's state: blue while growing, green while harvesting, amber when late, red when very late, grey when finished. Planting#progress_state decides, and the garden cards, planting progress and timeline bars all use it.
Fixed the like button. Bare badges are white in Bootstrap 5, so its heart and count were white on light grey.
Seed cards no longer draw an empty body and footer. Bootstrap 5 pads them into white bars.

What looks different

Progress bars are now coloured by state, and crop chips are light green. Everything else was matched to the old look and measurements.

Testing

Non-browser specs pass.
Every feature directory passes.
The garden, serializer and request specs were run again after merging dev.
Compared 15 pages before and after with screenshots.

Not changed

About 27 class names in the views have no CSS. They had none before either. The static error pages are untouched.

The CSS came from the material-sass gem, a Bootstrap 4 based Material Design skin, while the JavaScript already came from the bootstrap gem (Bootstrap 5). Import the bootstrap gem's SCSS instead and drop material-sass and its 'material' script. Bootstrap 5 reads its settings from variables defined before it is imported, so _variables.scss now sets the theme colours (primary/success green, secondary blue, and so on), body colours, font and the site's own breakpoints (lg 1200px, xl 1800px) in Bootstrap's terms, in place of the Material colour maps. media-breakpoint-down(xs) is media-breakpoint-down(sm) in Bootstrap 5. Class names from Bootstrap 3 and 4 that no longer exist are renamed in the commits that follow. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

text-left/right -> text-start/end, float-left/right -> float-start/end, ml-/mr-/pl-/pr- -> ms-/me-/ps-/pe-, border-left/right -> border-start/end, dropdown-menu-left/right -> dropdown-menu-start/end, font-weight-* -> fw-*, font-italic -> fst-italic and sr-only -> visually-hidden. Bootstrap 5 dropped text-justify, so the site keeps a one-line rule for it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

badge-info/success/... -> text-bg-info/success/..., which set the background and a readable text colour together, and badge-pill -> rounded-pill. The site's own badge-late, badge-harvest and similar hooks are unchanged. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

col-xs-N -> col-N, col-md-offset-N -> offset-md-N, row-fluid -> row, btn-block -> w-100, btn-xs -> btn-sm, form-group -> mb-3 (Bootstrap 5 dropped form-group), and btn-default (Bootstrap 3) -> btn-outline-secondary. The three helpers that combined btn-default with btn-secondary keep just btn-secondary. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

.close with a times character -> .btn-close (which draws its own cross), with an aria-label on each. The alert helper said alert-dismissable, Bootstrap 3's spelling; Bootstrap 5 needs alert-dismissible for the close button's spacing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

The label-beside-input forms (label col-md-2, input col-md-8) relied on form-horizontal and form-group acting as a row. Each field wrapper is now a real .row.mb-3, labels are col-form-label, help text is form-text, and the leftover form-horizontal and form-actions classes, which do nothing in Bootstrap 5, are dropped. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…ents form-inline -> flex utilities, embed-responsive -> ratio ratio-16x9, input-group-prepend wrapper removed (Bootstrap 5 puts the addon directly in the group), and media/media-body -> d-flex/flex-grow-1. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Bootstrap 5 differs from the old Material skin in a few defaults that change how every page looks: 1rem body text (the site uses 0.875rem), a 1.5 line height (1.428572), underlined links, and much larger display-* headings (the home page heading was 56px, not 34px). Set them back through Bootstrap's variables. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

The brand image was unbounded (the old skin capped the brand at 2.25rem) and the search input collapsed to nothing inside its shrink-to-fit parent. Restore the navbar's minimum height and padding, cap the brand, and give the search group a minimum width. A .btn with no colour variant is plain text in Bootstrap 5 and read as a link; give it the btn-outline-secondary look. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

The planting, harvest and activity columns were .col-xl-4.col. Bootstrap 4 wrapped the next row after three even columns at every width below the site's xl breakpoint; Bootstrap 5's .col let the seeds column squeeze onto the same row. Say what was meant: full width on phones, thirds from md up. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

A .dropdown-divider and a dropdown-item Delete link sat in the page body, outside any dropdown, duplicating the Delete in the Actions menu. With the menu open the page has two visible Delete links, and the 'Delete garden' spec, which clicks 'Actions' and then 'Delete', finds both. The Actions menu already has the garden's Delete. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Links are not underlined, so axe's link-in-text-block rule needs enough contrast between a link and the text around it. The old skin's body text was near black (rgba(0, 0, 0, 0.87)); the brown I had used gave 2.28:1 against the link green, below the 3:1 minimum, and failed two accessibility specs. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Typing a scientific name makes the page ask GBIF for suggestions after jQuery UI's 300ms delay. Whether that request lands before Save navigates away is a race the test only usually won, and when it lost, VCR blocked the real request and failed the spec. Answer the suggestion with a double instead. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

The cards from #4808 still used Bootstrap 4 names: .close with a times sign (now .btn-close), sr-only (now visually-hidden), badge-info (now text-bg-info), and dropdown-menu-right next to dropdown-menu-end (only -end is needed). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Bootstrap 5's cards have a thin border, a grey header and a transparent body, so the page background showed through. Set the card variables to white, no border, a 2px radius and the old three-layer shadow, and keep the line under the header. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Bootstrap's dark navbar draws menu links at 55% white, which on the brown navbar is 4.47:1, just under the 4.5:1 minimum. Use 85% white (white on hover). The breadcrumb links were grey in the old skin and are now the link green, 4.12:1 on the beige page; make them a darker grey again. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

_variables.scss still set $progress-height: 5em, $progress-bar-color and $progress-bg: white, Bootstrap 3 variables the old skin ignored. Bootstrap 5 reads them, which made every progress bar 52px tall with an invisible white track. Set the height to 0.875rem (as the old bar was), the track to a lighter green and the bar to the site green, and drop the border-bottom trick that drew the old bar. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

The chips were solid brown-grey pills with white text, so a row of crops read as a row of dark blobs, and they competed with the blue status badges. Use Bootstrap 5.3's subtle success colours instead: a light green fill and border with dark green text. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Bootstrap 5 makes the text of a .badge white; Bootstrap 4 left it alone. The like button's heart and count sit in a bare badge on a pale button, so they were white on light grey. Set $badge-color to inherit, as before. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

The card always rendered a .card-body and a .card-footer. A seed with no details left them empty, and Bootstrap 5 pads them into white bars under the photo. Draw each only when it has something in it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Bootstrap 5 buttons are flat with a border. Draw them as the old skin did: no border, a Material shadow that deepens while pressed, 2px corners, medium weight and uppercase. Link buttons stay plain. A bare .btn is drawn raised with dark text instead of borrowing the outline style. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Blue while growing, green while harvesting, amber when late, red when very late, grey when finished. The track is now neutral grey so every colour reads against it. Planting#progress_state decides, and the garden cards, planting progress and timeline bars use it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Copilot

Copilot review overview

🟡 Changes recommended

Concrete rendering and styling regressions remain in the photo form, modal layout, finished progress color, and Bootstrap JavaScript asset setup.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1 · 3

Open (4)

Invalid Haml submit helper syntax breaks photo edit page compilation · New
Manifest uses obsolete bootstrap-sprockets entry point · New
Finished progress bars use blue instead of neutral grey · New
Modal close button appears left of the title · New

What changed in this PR

Migrates the site's styling from Material Sass to Bootstrap 5.3.8, including Sass variables, view classes, React components, and planting progress indicators.

Changes:

Replaces Material Sass dependencies and updates Bootstrap styling.
Renames Bootstrap classes across views, forms, modals, and components.
Adds planting progress states and updates related tests.

File	Description
`spec/serializers/garden_card_serializer_spec.rb`	Tests serialized progress state.
`spec/models/planting_spec.rb`	Tests planting progress states.
`spec/helpers/application_helper_spec.rb`	Updates alert-class expectations.
`spec/features/crops/crop_wranglers_spec.rb`	Stubs GBIF requests.
`Gemfile.lock`	Updates Bootstrap dependencies.
`Gemfile`	Removes Material Sass.
`app/views/timeline/_photos.html.haml`	Migrates media layout classes.
`app/views/shared/buttons/_edit.haml`	Updates edit button styling.
`app/views/shared/buttons/_delete.haml`	Updates delete button styling.
`app/views/shared/_flash_messages.html.haml`	Migrates dismiss button markup.
`app/views/seeds/show.html.haml`	Migrates badge classes.
`app/views/seeds/index.html.haml`	Migrates badge classes.
`app/views/seeds/_modal.html.haml`	Migrates modal close button.
`app/views/seeds/_form.html.haml`	Updates form spacing and alignment.
`app/views/seeds/_facts.html.haml`	Updates button styling.
`app/views/seeds/_card.html.haml`	Updates card structure and classes.
`app/views/scientific_names/show.html.haml`	Updates button styling.
`app/views/scientific_names/index.html.haml`	Updates action buttons.
`app/views/scientific_names/_form.html.haml`	Migrates form layout.
`app/views/posts/show.html.haml`	Updates float utilities.
`app/views/posts/_preview.haml`	Updates font-weight utilities.
`app/views/posts/_form.html.haml`	Updates help text and alignment.
`app/views/posts/_actions.html.haml`	Updates dropdown alignment.
`app/views/plantings/show.html.haml`	Migrates grid, badge, and spacing classes.
`app/views/plantings/index.html.haml`	Migrates badge classes.
`app/views/plantings/_timeline.html.haml`	Adds state-colored progress bars.
`app/views/plantings/_quick_actions.haml`	Updates dropdown alignment.
`app/views/plantings/_progress.html.haml`	Adds state-colored progress bars.
`app/views/plantings/_photos.haml`	Updates alignment utilities.
`app/views/plantings/_modal.html.haml`	Migrates modal markup.
`app/views/plantings/_form.html.haml`	Updates form alignment.
`app/views/plantings/_failed_modal.html.haml`	Migrates modal and alignment classes.
`app/views/plantings/_badges.html.haml`	Migrates badge classes.
`app/views/plantings/_actions.html.haml`	Updates form spacing.
`app/views/plant_parts/show.html.haml`	Updates action buttons.
`app/views/plant_parts/index.html.haml`	Updates action buttons.
`app/views/places/_search_form.html.haml`	Migrates inline form layout.
`app/views/photos/edit.html.haml`	Updates form spacing.
`app/views/photos/_actions.html.haml`	Updates dropdown alignment.
`app/views/messages/_form.haml`	Updates help text and alignment.
`app/views/members/show.html.haml`	Migrates badges, widths, and grid classes.
`app/views/members/nearby.html.haml`	Migrates search form layout.
`app/views/members/finish_signup.haml`	Updates form spacing and help text.
`app/views/members/_member.haml`	Updates border utilities.
`app/views/members/_map.html.haml`	Updates alignment utility.
`app/views/members/_follow_buttons.haml`	Replaces block-button utility.
`app/views/layouts/modal.html.haml`	Migrates modal close button.
`app/views/layouts/application.html.haml`	Replaces screen-reader utility.
`app/views/layouts/_menu.haml`	Migrates spacing and badges.
`app/views/layouts/_header.html.haml`	Updates navbar spacing.
`app/views/layouts/_footer.html.haml`	Updates footer alignment and badge.
`app/views/home/index.html.haml`	Updates home grid and buttons.
`app/views/home/community_gardens.html.haml`	Updates responsive visibility.
`app/views/home/_releases.html.haml`	Replaces block-button utility.
`app/views/home/_plantings.html.haml`	Updates alignment and badges.
`app/views/home/_members.html.haml`	Updates alignment and button width.
`app/views/home/_harvests.html.haml`	Migrates badge class.
`app/views/home/_discuss.html.haml`	Updates typography and buttons.
`app/views/home/_blurb.html.haml`	Replaces block-button utility.
`app/views/home/_activities.html.haml`	Migrates badge class.
`app/views/harvests/show.html.haml`	Migrates grid classes.
`app/views/harvests/index.html.haml`	Migrates badge classes.
`app/views/harvests/_modal.html.haml`	Migrates modal markup.
`app/views/harvests/_form.html.haml`	Updates help text and alignment.
`app/views/harvests/_card.html.haml`	Migrates pill and float classes.
`app/views/gardens/show.html.haml`	Updates grid and removes duplicate delete action.
`app/views/gardens/index.html.haml`	Migrates badge class.
`app/views/gardens/_overview.html.haml`	Migrates responsive grid classes.
`app/views/gardens/_form.html.haml`	Updates help text and alignment.
`app/views/garden_types/_form.html.haml`	Migrates form layout.
`app/views/garden_types/_actions.html.haml`	Updates alignment utility.
`app/views/garden_collaborators/index.html.haml`	Updates border utilities.
`app/views/garden_collaborators/_form.html.haml`	Updates form alignment.
`app/views/forums/show.html.haml`	Updates action button styling.
`app/views/forums/index.html.haml`	Updates new-forum button.
`app/views/forums/_form.html.haml`	Updates form alignment.
`app/views/devise/unlocks/new.html.haml`	Replaces block-button utility.
`app/views/devise/sessions/new.html.haml`	Replaces block-button utility.
`app/views/devise/registrations/new.html.haml`	Replaces block-button utility.
`app/views/devise/registrations/_edit_profile.html.haml`	Migrates profile form layout.
`app/views/devise/registrations/_edit_password.html.haml`	Migrates password form layout.
`app/views/devise/registrations/_edit_email.html.haml`	Migrates email form layout.
`app/views/devise/registrations/_edit_apps.html.haml`	Removes legacy form class.
`app/views/devise/registrations/_delete.html.haml`	Migrates deletion form layout.
`app/views/devise/passwords/new.html.haml`	Replaces block-button utility.
`app/views/devise/passwords/edit.html.haml`	Migrates password form layout.
`app/views/devise/confirmations/new.html.haml`	Migrates confirmation form layout.
`app/views/crops/show.html.haml`	Migrates video and badge markup.
`app/views/crops/search.html.haml`	Replaces screen-reader utility.
`app/views/crops/_tiny.html.haml`	Migrates warning badge class.
`app/views/crops/_search_bar.haml`	Migrates navbar search layout.
`app/views/crops/_scientific_names.html.haml`	Migrates badges and buttons.
`app/views/crops/_posts.html.haml`	Updates post button styling.
`app/views/crops/_plantings.html.haml`	Updates alignment and button width.
`app/views/crops/_info.haml`	Migrates warning badge class.
`app/views/crops/_harvests.html.haml`	Updates alignment and button width.
`app/views/crops/_form.html.haml`	Updates form help text and spacing.
`app/views/crops/_find_seeds.html.haml`	Updates alignment and badges.
`app/views/crops/_alternate_names.html.haml`	Updates alignment and buttons.
`app/views/conversations/show.html.haml`	Updates alignment utilities.
`app/views/conversations/index.haml`	Migrates badges and delete button.
`app/views/comments/_single.html.haml`	Updates border utility.
`app/views/comments/_form.html.haml`	Migrates form and alignment classes.
`app/views/alternate_names/show.html.haml`	Updates action button.
`app/views/alternate_names/index.html.haml`	Updates action buttons.
`app/views/alternate_names/_form.html.haml`	Migrates form layout.
`app/views/admin/roles/index.html.haml`	Updates action buttons.
`app/views/admin/members/index.html.haml`	Migrates input-group markup.
`app/views/admin/crops/index.html.haml`	Updates spacing utility.
`app/views/activities/show.html.haml`	Migrates grid and spacing classes.
`app/views/activities/index.html.haml`	Migrates badge classes.
`app/views/activities/_form.html.haml`	Updates help text and alignment.
`app/serializers/garden_card_serializer.rb`	Serializes progress state.
`app/models/concerns/predict_planting.rb`	Defines progress-state logic.
`app/javascript/components/PlantSomethingModal.jsx`	Replaces hidden-content utility.
`app/javascript/components/PlantingRow.jsx`	Displays state-colored progress bars.
`app/javascript/components/Modal.jsx`	Migrates close button markup.
`app/javascript/components/GardenCards.jsx`	Migrates alert close button.
`app/javascript/components/ActionsMenu.jsx`	Removes obsolete dropdown class.
`app/helpers/buttons_helper.rb`	Updates default button styles.
`app/helpers/application_helper.rb`	Updates dismissible alert class.
`app/assets/stylesheets/overrides.scss`	Adds Bootstrap 5 visual overrides.
`app/assets/stylesheets/application.scss`	Imports Bootstrap 5.
`app/assets/stylesheets/_variables.scss`	Rewrites Bootstrap theme variables.
`app/assets/stylesheets/_crops.scss`	Updates crop chips and responsive styles.
`app/assets/javascripts/crops.js.coffee`	Updates dynamic form help classes.
`app/assets/javascripts/application.js`	Removes the Material script.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Br3nda · 2026-09-21T05:45:35Z

 // = require bootstrap-sprockets
 // = require bootstrap-datepicker


This one isn't a bug, so no change. bootstrap-sprockets is the Bootstrap 5.3.8 gem's own Sprockets entry point (assets/javascripts/bootstrap-sprockets.js), and it requires the Bootstrap 5 plugins including dropdown, modal, offcanvas, tooltip and popover. The data-bs-* dropdowns and modals work with it in the running app.

🤖 Generated with Claude Code

'.= f.submit' is not valid Haml, so the page raised a syntax error. Add a request spec that renders it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

--bs-secondary is the site's dark blue here, so finished plantings had a blue bar rather than the grey the progress colours call for. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

In Bootstrap 5 the close button has an auto left margin, so before the title it sat beside it instead of at the right edge. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Br3nda and others added 16 commits September 20, 2026 18:00

Match the old breadcrumb padding and divider

136ceb1

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Update bootstrap to 5.3.8

2c4a4ad

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Merge dev into chore/bootstrap-5

2989daf

Br3nda marked this pull request as draft September 20, 2026 08:21

Br3nda and others added 10 commits September 20, 2026 20:26

Merge dev into chore/bootstrap-5

ae3579d

Br3nda marked this pull request as ready for review September 20, 2026 09:40

Br3nda mentioned this pull request Sep 20, 2026

Convert navbar to Bootstrap 5.1 offcanvas menu #4182

Draft

Br3nda requested a review from CloCkWeRX September 20, 2026 10:50

Br3nda requested a lite review from Copilot September 21, 2026 03:45

Copilot started reviewing on behalf of Br3nda September 21, 2026 03:45 View session

Copilot AI reviewed Sep 21, 2026

View reviewed changes

Br3nda and others added 3 commits September 21, 2026 17:40

Fix the photo edit page's save button, which wouldn't compile

809b213

'.= f.submit' is not valid Haml, so the page raised a syntax error. Add a request spec that renders it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Colour finished progress bars grey, not the site's blue

8be74ee

--bs-secondary is the site's dark blue here, so finished plantings had a blue bar rather than the grey the progress colours call for. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Put the generic modal's close button after its title

781723e

In Bootstrap 5 the close button has an auto left margin, so before the title it sat beside it instead of at the right edge. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Navigation Menu

Uh oh!

Chore/bootstrap 5 - #4813

Chore/bootstrap 5#4813
Br3nda wants to merge 29 commits into
devfrom
chore/bootstrap-5

Br3nda commented Sep 20, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Br3nda Sep 21, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		// = require bootstrap-sprockets
		// = require bootstrap-datepicker

Uh oh!

Conversation

Br3nda commented Sep 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed

Class names

Other fixes

What looks different

Testing

Not changed

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Br3nda Sep 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Br3nda commented Sep 20, 2026 •

edited

Loading