Improve geoblock modal layout (#992)

* Styling for the json editor component

* improve color

* Tab container buttons to switch between editors

* improve validate button

* Improve layout of the geoblock build modal

* text overflow for block in sidebar

* Fix height of the modal container

src/data_management/geoblocks/buildComponents/GeoBlockBuildModal.module.css

@@ -1,8 +1,34 @@
 .MainContainer {
-  height: calc(100% - 60px);
+  height: 100%;
   margin: 20px 40px;
+  display: grid;
+  grid-template-rows: 40px 1fr 60px;
+}
+
+.TabContainer {
+  display: grid;
+  grid-template-columns: 200px 200px;
+  grid-auto-rows: minmax(40px, 40px);
+}
+
+.TabContainer > div {
+  opacity: 0.34;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: #FFFFFF;
+  padding: 0;
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  position: relative;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-header);
+  border-radius: 10px 10px 0 0;
+  box-shadow: 6px 0px 5px #00000029;
+  cursor: pointer;
+}
+.TabContainer > div:nth-child(2) {
+  box-shadow: none;
+  border-radius: 10px 10px 0 0;
+}
+.SelectedTab {
+  opacity: 1 !important;
 }

src/data_management/geoblocks/buildComponents/GeoBlockBuildModal.tsx

@@ -59,6 +59,23 @@ function GeoBlockBuildModal (props: MyProps & DispatchProps) {
       }}
     >
       <div className={styles.MainContainer}>
+        <div className={styles.TabContainer}>
+            <div
+                className={geoBlockView === 'json' ? styles.SelectedTab : undefined}
+                onClick={() => {
+                  const geoBlockSource = convertElementsToGeoBlockSource(elements, source, setSource);
+                  if (geoBlockSource) setGeoBlockView('json');
+                }}
+            >
+                JSON Editor
+            </div>
+            <div
+                className={geoBlockView === 'visual' ? styles.SelectedTab : undefined}
+                onClick={() => setGeoBlockView('visual')}
+            >
+                Visual Editor
+            </div>
+        </div>
         {geoBlockView === 'json' ? (
           <GeoBlockJsonComponent
             source={source}
@@ -70,53 +87,45 @@ function GeoBlockBuildModal (props: MyProps & DispatchProps) {
             setElements={setElements}
           />
         )}
-        <div className={`${formStyles.ButtonContainer} ${formStyles.FixedButtonContainer}`}>
+        <div className={formStyles.ButtonContainer}>
           <button
             className={`${buttonStyles.Button} ${buttonStyles.LinkCancel}`}
             onClick={props.handleClose}
           >
             Close
           </button>
-          <button
-            className={buttonStyles.NewButton}
-            onClick={() => {
-              if (geoBlockView === 'visual') {
-                const geoBlockSource = convertElementsToGeoBlockSource(elements, source, setSource);
-                if (geoBlockSource) setGeoBlockView('json');
-              } else {
-                setGeoBlockView('visual');
-              };
-            }}
-          >
-            {geoBlockView === 'visual' ? 'JSON Editor' : 'Visual Editor'}
-          </button>
-          <button
-            className={buttonStyles.NewButton}
-            onClick={() => {
-              if (geoBlockView === 'visual') {
-                const geoBlockSource = convertElementsToGeoBlockSource(elements, source, setSource);
-                if (geoBlockSource) dryFetchGeoBlockForValidation(props.uuid, geoBlockSource, props.formValues);
-              } else {
-                dryFetchGeoBlockForValidation(props.uuid, source, props.formValues);
-              };
-            }}
-          >
-            Validate
-          </button>
-          <SubmitButton
-            onClick={() => {
-              if (geoBlockView === 'visual') {
-                const geoBlockSource = convertElementsToGeoBlockSource(elements, source, setSource);
-                if (geoBlockSource) {
-                  props.onChange(geoBlockSource);
+          <div>
+            <button
+              className={buttonStyles.NewButton}
+              onClick={() => {
+                if (geoBlockView === 'visual') {
+                  const geoBlockSource = convertElementsToGeoBlockSource(elements, source, setSource);
+                  if (geoBlockSource) dryFetchGeoBlockForValidation(props.uuid, geoBlockSource, props.formValues);
+                } else {
+                  dryFetchGeoBlockForValidation(props.uuid, source, props.formValues);
+                };
+              }}
+              style={{
+                marginRight: 20
+              }}
+            >
+              Check Validation
+            </button>
+            <SubmitButton
+              onClick={() => {
+                if (geoBlockView === 'visual') {
+                  const geoBlockSource = convertElementsToGeoBlockSource(elements, source, setSource);
+                  if (geoBlockSource) {
+                    props.onChange(geoBlockSource);
+                    props.handleClose();
+                  };
+                } else {
+                  props.onChange(source);
                   props.handleClose();
                 };
-              } else {
-                props.onChange(source);
-                props.handleClose();
-              };
-            }}
-          />
+              }}
+            />
+          </div>
         </div>
       </div>
     </ModalBackground>

src/data_management/geoblocks/buildComponents/GeoBlockJsonComponent.css

@@ -0,0 +1,8 @@
+#json-editor-container div.jsoneditor {
+  border: thin solid var(--color-header);
+}
+
+#json-editor-container div.jsoneditor-menu {
+  background-color: var(--color-header);
+  border: thin solid var(--color-header);
+}

src/data_management/geoblocks/buildComponents/GeoBlockJsonComponent.tsx

@@ -4,6 +4,7 @@ import { GeoBlockSource } from '../../../types/geoBlockType';
 import { JsonEditor } from 'jsoneditor-react';
 import 'jsoneditor-react/es/editor.min.css';
 import 'brace/mode/json';
+import './GeoBlockJsonComponent.css';
 
 interface MyProps {
   source: GeoBlockSource | null,
@@ -17,13 +18,12 @@ export const GeoBlockJsonComponent = (props: MyProps) => {
       name={'source'}
       value={source ? source : {}}
       onChange={e => setSource(e)}
-      allowedModes={['tree', 'code', 'text']}
+      mode={'code'}
+      allowedModes={['code', 'tree', 'text']}
       ace={ace}
-      htmlElementProps={{style: {
-        position: 'absolute',
-        width: '100%',
-        height: '90%'
-      }}}
+      htmlElementProps={{
+        id: 'json-editor-container'
+      }}
       history
       enableSort={false}
       enableTransform={false}

src/data_management/geoblocks/buildComponents/GeoBlockVisualComponent.tsx

@@ -161,9 +161,7 @@ const GeoBlockVisualFlow = (props: MyProps & DispatchProps) => {
       style={{
         display: 'grid',
         gridTemplateColumns: '1fr 150px',
-        columnGap: 10,
-        margin: '20px 0',
-        height: 720
+        columnGap: 10
       }}
     >
       <ReactFlow
@@ -172,8 +170,7 @@ const GeoBlockVisualFlow = (props: MyProps & DispatchProps) => {
         onElementsRemove={onElementsRemove}
         style={{
           position: 'relative',
-          border: '1px solid lightgrey',
-          borderRadius: 10
+          border: 'thin solid var(--color-header)'
         }}
         snapToGrid
         onEdgeUpdate={onEdgeUpdate}

src/data_management/geoblocks/buildComponents/blockComponents/SideBar.module.css

@@ -1,9 +1,8 @@
 .SideBar {
-  /* height: 600px; */
+  height: calc(100vh - 200px); /* without this, the overflow auto will not work */
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  position: relative;
 }
 
 .Block {
@@ -13,6 +12,8 @@
   border-radius: 5px;
   font-size: 12px;
   margin-bottom: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   cursor: pointer;
 }
 .Block:active {