Skip to content

Comments

Update the css for the new button and border radius design#2387

Merged
allyoucanmap merged 6 commits intoGeoNode:masterfrom
subashtiwari1010:update/UI-styles
Feb 24, 2026
Merged

Update the css for the new button and border radius design#2387
allyoucanmap merged 6 commits intoGeoNode:masterfrom
subashtiwari1010:update/UI-styles

Conversation

@subashtiwari1010
Copy link

Related tasks

Fixes #2386

Describe this PR

This PR updates the submodule to include the new designs for the buttons and border radius. It removes some of the overrides made to the variables from the MapStore.

@subashtiwari1010 subashtiwari1010 added this to the 5.1.0 milestone Feb 9, 2026
@subashtiwari1010 subashtiwari1010 added enhancement New feature or request master labels Feb 9, 2026
@gemini-code-assist
Copy link

Summary of Changes

Hello @subashtiwari1010, 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 focuses on modernizing the GeoNode client's user interface by integrating updated design specifications for buttons and border radii. This is primarily achieved through an update to the MapStore2 submodule, which provides the new design assets. To ensure a cohesive look and reduce maintenance overhead, custom CSS variable overrides for border-radius and button/icon sizing within the GeoNode theme have been removed, allowing the application to leverage the default styling provided by the updated MapStore2. This streamlines the styling process and promotes visual consistency across the application.

Highlights

  • MapStore2 Submodule Update: The MapStore2 submodule has been updated to a newer commit (from 6e8e5156f05fb1b1d946ce49dfc985573d2623f8 to 254227e05317e1fa43a960d2852096492f07c931), bringing in the latest designs for buttons and border radii.
  • Removed Custom CSS Overrides: Custom overrides for @border-radius-base, @border-radius-large, @border-radius-small, @icon-size, @square-btn-size, @icon-size-md, and @square-btn-medium-size have been removed from the GeoNode theme. This change allows the project to inherit these values directly from the updated MapStore, reducing custom styling and ensuring consistency.
  • Standardized Border Radius Usage: Several LESS files (_map-viewers-catalog.less, _metadata.less, _resource-details.less) have been updated to use the @border-radius-base variable, aligning their border-radius values with the theme's standardized approach.
  • Button Styling Updates: The LayerDetailViewer.jsx component now applies a square-button class to its button, and DetailsThumbnail.jsx adds a btn-group class to a FlexBox containing buttons, indicating specific styling adjustments for button components.

🧠 New Feature in Public Preview: You can now enable Memory 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.

Changelog
  • geonode_mapstore_client/client/MapStore2
    • Updated the MapStore2 submodule to commit 254227e05317e1fa43a960d2852096492f07c931.
  • geonode_mapstore_client/client/js/plugins/LayerDetailViewer.jsx
    • Added className="square-button" to the Button component.
  • geonode_mapstore_client/client/js/plugins/ResourceDetails/components/DetailsThumbnail.jsx
    • Added btn-group class to the FlexBox component wrapping ButtonWithToolTip.
  • geonode_mapstore_client/client/themes/geonode/less/_bootstrap-variables.less
    • Removed custom definitions for @border-radius-base, @border-radius-large, and @border-radius-small.
  • geonode_mapstore_client/client/themes/geonode/less/_map-viewers-catalog.less
    • Changed hardcoded border-radius: 0.25rem; to use @border-radius-base.
  • geonode_mapstore_client/client/themes/geonode/less/_metadata.less
    • Updated border-radius: 4px; to border-radius: @border-radius-base; in .field-object-properties and .field-group.
  • geonode_mapstore_client/client/themes/geonode/less/_resource-details.less
    • Changed hardcoded border-radius: 4px; to use @border-radius-base in .gn-upload-area.
  • geonode_mapstore_client/client/themes/geonode/less/ms-theme.less
    • Removed custom definitions for @icon-size, @square-btn-size, @icon-size-md, and @square-btn-medium-size.
Activity
  • No specific activity (comments, reviews, or progress updates) has been recorded for this pull request yet.
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 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 counter productive. 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.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

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.

Copy link

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

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 updates the MapStore submodule and adjusts the local styles to align with the new designs for buttons and border radius. The changes primarily involve removing local overrides for CSS variables like border-radius and button sizes, allowing the application to inherit these styles from MapStore. Additionally, hardcoded border-radius values have been replaced with the @border-radius-base variable for better consistency and maintainability. The changes are well-aligned with the PR's goal and represent a good step towards better style integration with MapStore. The code looks clean and the changes are correct.

@subashtiwari1010 subashtiwari1010 marked this pull request as ready for review February 9, 2026 14:24
@subashtiwari1010 subashtiwari1010 marked this pull request as draft February 9, 2026 14:30
Copy link
Member

@anup39 anup39 left a comment

Choose a reason for hiding this comment

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

@subashtiwari1010 I have checked all the buttons and looks fine to me. There is a minor change we can do in one place. These button I think do not require border radius .

Select Files and Add from URL

Image

@allyoucanmap allyoucanmap merged commit 89fa40c into GeoNode:master Feb 24, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request master

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Review CSS border radius and button sizes based on recent update on MapStore

3 participants