Skip to content

chore: upgrade to bootstrap 5#808

Open
eduardosmaniotto wants to merge 10 commits into
MUnique:masterfrom
eduardosmaniotto:chore/bootstrap-5
Open

chore: upgrade to bootstrap 5#808
eduardosmaniotto wants to merge 10 commits into
MUnique:masterfrom
eduardosmaniotto:chore/bootstrap-5

Conversation

@eduardosmaniotto

Copy link
Copy Markdown
Contributor

Summary

Upgrades Bootstrap 4.6.1 → 5.3.8 and refactors CSS/SCSS layer to remove bare-element @extend of Bootstrap classes, replacing them with explicit classes in Razor markup. Hardcoded color values are replaced with CSS custom properties.

Most of the diff is related to replacing the library, not actual code changes.

Changes

  • Bootstrap 4 → 5 — swapped bootstrap-4.6.1/ for bootstrap-5.3.8/ in shared styles; rebuilt shared.css
  • Removed bare-element @extend — SCSS no longer uses @extend .btn, @extend .table, @extend .form-control, @extend .btn-sm, or @extend of utility classes on bare elements (button, table, form input, th input, tbody button). These are now applied as explicit class="..." attributes in Razor markup
  • Removed bare-table CSS reset for QuickGrid — the old table { @extend .table; } rule was removed; QuickGrid tables instead use explicit .table classes where needed and .quickgrid-scoped styles for padding and zebra striping
  • Removed bare-select/button extends — SCSS no longer forces Bootstrap form-control/btn classes on every <select> or <button>; each component declares its own classes
  • Direct Bootstrap classes in Razor — all <table>, <button>, <input>, <select> elements throughout the admin panel, map, shared components, and forms now carry explicit class="..." attributes
  • CSS custom properties — hardcoded colors (#0366d6, #ff0, #f7f7f7, #d6d5d5, #0087ff, #dc3545, etc.) replaced with --omu-* variables or Bootstrap CSS variables (var(--bs-*))
  • Migrated theme.cssTheme.scss — converted the existing plain-CSS theme file into a SCSS module. All --omu-* design tokens are now driven by SCSS maps ($omu-light, $omu-dark) and emitted via a @mixin omu-theme-vars under :root / [data-theme="dark"].
  • Dark mode improvementsform-select dropdown arrow uses a light-colored SVG via --bs-form-select-bg-img override; form-control::placeholder color set explicitly; sidebar nav-link color overridden to prevent [data-theme="dark"] a:not(.btn) from forcing blue on sidebar links
  • Media query breakpoints — standardised to Bootstrap md boundary (768px / 767.98px)
  • Dead code removalMap.scss deleted (.livemap grid overridden by scoped Map.razor.css); unused Bootstrap variable overrides, lds-roller spinner, duplicate #blazor-error-ui, commented-out rules removed from Common.scss, Main.scss
  • Sidebar dropdown — Game Configuration submenu toggles via Blazor @onclick (no Bootstrap JS); dropdown uses default display: none with .showdisplay: block; position: relative; width: 100%; caret rotates via ::after transition. Responsive breakpoint for sidebar collapse aligned to 768px

@gemini-code-assist

Copy link
Copy Markdown

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request modernizes the project's frontend by upgrading to Bootstrap 5.3.8. The changes focus on improving maintainability and styling consistency by moving away from implicit SCSS @extend patterns toward explicit class-based styling in Razor components. Additionally, the introduction of CSS custom properties and a new SCSS-based theme system enhances support for theming and dark mode.

Highlights

  • Bootstrap Upgrade: Upgraded Bootstrap from 4.6.1 to 5.3.8, requiring significant CSS/SCSS refactoring.
  • CSS/SCSS Refactoring: Removed bare-element @extend directives in favor of explicit class application in Razor markup, and replaced hardcoded colors with CSS custom properties.
  • Theme System: Migrated theme.css to a SCSS module with support for light/dark themes via CSS variables.
  • UI Cleanup: Standardized media query breakpoints, removed dead code, and improved sidebar dropdown functionality.
New Features

🧠 You can now enable Memory (public preview) to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Code Review

This pull request upgrades the project's styling from Bootstrap 4 to Bootstrap 5.3.8, introduces a dark mode theme, and updates various Blazor components to use modern utility classes. The code review identified several actionable improvements: adding type="button" to a Cancel button in ModalObjectSelection.razor to prevent accidental form submissions, correcting an excessively large margin class (me-5 instead of me-1) in EditConfigGrid.razor, adding @onclick:stopPropagation to nested <details> elements inside labels to prevent event bubbling, and replacing standard HTML onclick attributes with Blazor's @onclick directive in PasswordHashField.razor.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread src/Web/Shared/Components/Form/Modal/ModalObjectSelection.razor Outdated
Comment thread src/Web/AdminPanel/Pages/EditConfigGrid.razor Outdated
Comment thread src/Web/Shared/Components/Form/InvasionSpawnTable.razor Outdated
Comment thread src/Web/Shared/Components/Form/FieldLabel.razor Outdated
Comment thread src/Web/Shared/Components/Form/PasswordHashField.razor Outdated
Comment thread src/Web/Shared/Components/Form/PasswordHashField.razor Outdated
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.

1 participant