geosolutions-it#11994: UI Review (geosolutions-it#12010)

* geosolutions-it#11994: UI Review
- fixing UI issue in upload map template
- fix UI issue in camera position for 3D
- fix UI issue in navbar beside the search tool

* - set background of navbar contaier to be white

Author: mahmoudadel54

web/client/components/resources/forms/Metadata.jsx

@@ -81,7 +81,7 @@ class Metadata extends React.Component {
 
     render() {
         const title = get(this.props.resource, 'attributes.title', "");
-        return (<form ref="metadataForm" onSubmit={this.handleSubmit}>
+        return (<form ref="metadataForm" className="d-grid" onSubmit={this.handleSubmit}>
             <FormGroup>
                 <ControlLabel>{this.props.nameFieldText}</ControlLabel>
                 <FormControl

web/client/plugins/CameraPosition/CameraPosition.jsx

@@ -48,8 +48,8 @@ const CameraPositionButton = connect((state) => ({
     glyphicon: "camera",
     btnConfig: { className: 'square-button' },
     style: {
-        height: '25px',
-        width: '25px'
+        height: '22px',
+        width: '22px'
     }
 }), { showCameraPosition, hideCameraPosition }, (stateProps, dispatchProps) => {
     return { ...stateProps, onClick: () => {

web/client/themes/default/less/common.less

@@ -468,4 +468,6 @@ div:has(.security-popup-dialog) .modal-backdrop.in {
       border-bottom-right-radius: @border-radius-base;
     }
   }
-  
+.d-grid{
+    display: grid;
+}

web/client/themes/default/less/map-footer.less

@@ -152,6 +152,9 @@
        overflow: hidden;
        font-size: 11px;
    }
+   #mapstore-cameraposition{
+    height: 25px;
+   }
 }
 
 .ms-prj-selector {

web/client/themes/default/less/navbar.less

@@ -10,7 +10,11 @@
 // Theme
 // **************
 
-// #ms-components-theme(@theme-vars) {}
+#ms-components-theme(@theme-vars) {
+    #mapstore-navbar-container {
+        .background-color-var(@theme-vars[main-bg], true);
+    }
+}
 
 // **************
 // Layout
@@ -61,7 +65,7 @@ ol {
 }
 
 #mapstore-navbar-container {
-    height: @square-btn-size;
+    height: 40px;
     .nav {
         &.pull-left {
             display: flex;
@@ -77,5 +81,7 @@ ol {
             }
         }
     }
-
+     .dropdown > button{
+        margin: 5px;
+     }
 }