Fix geosolutions-it#10954 Update the style of the square buttons and add border radius in all buttons, inputs, selectors (geosolutions-it#11425)

---------

Co-authored-by: allyoucanmap <stefano.bovio@geosolutionsgroup.com>

Author: subashtiwari1010

docs/developer-guide/mapstore-migration-guide.md

@@ -79,6 +79,16 @@ As part of improving the authentication rules to make dynamic request configurat
 | `header` | `headers: { ... }` |
 | `browserWithCredentials` | `withCredentials: true` |
 
+### Replace square-button-md and square-button-sm with square-button class
+
+The CSS classes `square-button-md` and `square-button-sm` have been deprecated and replaced by the unified `square-button` class. Update your custom components and themes to use the new class name.
+
+```diff
+- <Button className="square-button-md">Action</Button>
+- <Button className="square-button-sm">Action</Button>
++ <Button className="square-button">Action</Button>
+```
+
 ### Replace filterAllowedCRS and additionalCRS with availableProjections
 
 As part of extending the functionalities of the CRS selector, we have deprecated the use of `filterAllowedCRS` and `additionalCRS` in favor of new configuration `availableProjections`. The new configuration provides the support to add both filterAllowedCRS and additionalCRS in a single configuration. The configuration in `localConfig.json` should be updated as follow:

web/client/components/I18N/LangBar.jsx

@@ -42,7 +42,7 @@ class LangBar extends React.Component {
                     pullRight
                     noCaret
                     id={this.props.id}
-                    className="square-button-md _border-transparent"
+                    className="square-button _border-transparent"
                     title={
                         <FlagButton
                             componentAsButton={false}

web/client/components/TOC/TOCItemsSettings.jsx

@@ -91,7 +91,7 @@ const TOCItemSettings = (props) => {
                             {ToolbarComponent ?
                                 <ToolbarComponent buttons={toolbarButtons}/>
                                 : <Toolbar
-                                    btnDefaultProps={{ bsStyle: 'primary', className: 'square-button-md' }}
+                                    btnDefaultProps={{ bsStyle: 'primary', className: 'square-button' }}
                                     buttons={toolbarButtons}/>}
                         </Col>
                     </Row>,

web/client/components/TOC/fragments/LayerFields/Fields.jsx

@@ -40,7 +40,7 @@ const Fields = ({fields = [], onLoadFields = () => {}, onChange = () => {}, onCl
         className="layer-fields"
         header={<div key="row-header" className="layer-fields-header">
             <div key="row-toolbar" className="layer-fields-toolbar">
-                <Toolbar key="toolbar" btnDefaultProps={{ className: 'square-button-md', bsStyle: 'primary', disabled: loading }}
+                <Toolbar key="toolbar" btnDefaultProps={{ className: 'square-button', bsStyle: 'primary', disabled: loading }}
                     buttons={[{
                         glyph: 'refresh',
                         disabled: loading,
@@ -53,7 +53,7 @@ const Fields = ({fields = [], onLoadFields = () => {}, onChange = () => {}, onCl
                             disabled={loading}
                             bsStyle="primary"
                             confirmContent={<Message msgId="layerProperties.fields.clearCustomizationConfirm"/>}
-                            className="square-button-md"
+                            className="square-button"
                             onClick={() => onClear()}>
                             <Glyphicon
                                 glyph="clear-brush" />

web/client/components/TOC/fragments/settings/Display.jsx

@@ -174,7 +174,7 @@ export default class extends React.Component {
                                 <Button
                                     disabled={!!this.state.formatLoading}
                                     tooltipId="layerProperties.format.refresh"
-                                    className="square-button-md no-border format-refresh"
+                                    className="square-button no-border format-refresh"
                                     onClick={() => {this.onFormatOptionsFetch(this.props.element?.url);}}
                                     key="format-refresh">
                                     <Glyphicon glyph="refresh" />

web/client/components/TOC/fragments/settings/VisibilityLimitsForm.jsx

@@ -260,7 +260,7 @@ function VisibilityLimitsForm({
                 <div style={{ flex: 1 }}>{title}</div>
                 <Toolbar
                     btnDefaultProps={{
-                        className: 'square-button-md no-border'
+                        className: 'square-button no-border'
                     }}
                     buttons={[
                         {

web/client/components/TOC/fragments/settings/WMSCacheOptions.jsx

@@ -303,7 +303,7 @@ function WMSCacheOptions({
                             ? 'layerProperties.updateTileGrids'
                             : 'layerProperties.checkAvailableTileGridsInfo'
                         }
-                        className="square-button-md no-border format-refresh"
+                        className="square-button no-border format-refresh"
                         onClick={() => {
                             onTileMatrixSetsFetch({ ...layer, force: true }).then((value) => handleOnChange(value, layer.tileGridStrategy !== 'custom'));
                         }}
@@ -319,7 +319,7 @@ function WMSCacheOptions({
                         active={layer.tileGridStrategy === 'custom'}
                         glyph={layer.tileGridStrategy === 'custom' ? 'grid-custom' : 'grid-regular'}
                         bsStyle={layer.tileGridStrategy === 'custom' ? 'success' : 'primary'}
-                        className="square-button-md"
+                        className="square-button"
                         onClick={() => {
                             const newTileGridStrategy = layer.tileGridStrategy !== 'custom'
                                 ? 'custom'

web/client/components/TOC/fragments/settings/__tests__/ThematicLayer-test.jsx

@@ -228,7 +228,7 @@ describe('test ThematicLayer module component', () => {
         expect(domNode).toExist();
         expect(document.getElementsByClassName('thematic_layer').length).toBe(1);
         expect(document.getElementsByClassName('thematic_layer')[0].childNodes.length).toBe(1);
-        expect(domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button-sm')).toExist();
+        expect(domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button')).toExist();
     });
 
     it('tests ThematicLayer component with configured thematic thema style admin buttons for no admin', () => {
@@ -238,7 +238,7 @@ describe('test ThematicLayer module component', () => {
         expect(domNode).toExist();
         expect(document.getElementsByClassName('thematic_layer').length).toBe(1);
         expect(document.getElementsByClassName('thematic_layer')[0].childNodes.length).toBe(1);
-        expect(domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button-sm')).toNotExist();
+        expect(domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button')).toNotExist();
     });
 
     it('tests ThematicLayer component with configured thematic thema style toggle configuration', () => {
@@ -254,7 +254,7 @@ describe('test ThematicLayer module component', () => {
         expect(domNode).toExist();
         expect(document.getElementsByClassName('thematic_layer').length).toBe(1);
         expect(document.getElementsByClassName('thematic_layer')[0].childNodes.length).toBe(1);
-        const cfgButton = domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button-sm');
+        const cfgButton = domNode.getElementsByClassName('mapstore-switch-panel')[0].querySelector('button.square-button');
         TestUtils.Simulate.click(cfgButton);
         expect(spyConfigurationChange.calls.length).toBe(2);
     });

web/client/components/TOC/fragments/settings/__tests__/VisibilityLimitsForm-test.jsx

@@ -93,7 +93,7 @@ describe('VisibilityLimitsForm', () => {
             />, document.getElementById('container'));
         });
         expect(document.querySelector('.ms-visibility-limits-form')).toBeTruthy();
-        const buttons = document.querySelectorAll('.square-button-md');
+        const buttons = document.querySelectorAll('.square-button');
         expect(buttons.length).toBe(1);
     });
 

web/client/components/TOC/fragments/template/MetadataTemplate.jsx

@@ -49,7 +49,7 @@ class MetadataTemplate extends React.Component {
                 {content}
                 <Button
                     style={{margin: '4px 0 0 4px'}}
-                    className="square-button-md no-border"
+                    className="square-button no-border"
                     onClick={() => collapsePanel(id, !this.state.collapsed[id])}>
                     <Glyphicon glyph={this.state.collapsed[id] ? 'plus' : 'minus'}/>
                 </Button>