From c8ab7b4d159f3eb2462a167ed4d087654b79085f Mon Sep 17 00:00:00 2001
From: Iva Utikalova <iva.utikiv@gmail.com>
Date: Wed, 1 May 2024 23:25:59 +0200
Subject: [PATCH] playground fix

---
 .../components/PlaygroundBarConfig.tsx        | 26 ++++++---------
 .../components/PlaygroundBarData.tsx          | 26 +++++++--------
 .../components/PlaygroundBarGeojson.tsx       | 26 +++++++--------
 .../PlaygroundBarSearchDatasets.tsx           |  3 +-
 src/geovisto_demos/playground.css             | 33 ++++++++++++-------
 5 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/src/geovisto_demos/components/PlaygroundBarConfig.tsx b/src/geovisto_demos/components/PlaygroundBarConfig.tsx
index e5f2514..61967a5 100644
--- a/src/geovisto_demos/components/PlaygroundBarConfig.tsx
+++ b/src/geovisto_demos/components/PlaygroundBarConfig.tsx
@@ -1,8 +1,6 @@
 import React, {useState, useEffect} from "react";
 import {files, file} from "../api";
 import Select from "react-select";
-import Dropdown from 'react-dropdown';
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
 
 /* example of screen component with grid layout and card wrapper usage */
 
@@ -82,21 +80,17 @@ const PlaygroundBarConfig = (props) => {
                     onChange={handleChange}
                     className="select"
                 />
-                <div className="plagroundbar__buttons">
-                    <div className="choose-file">
-                        <label title="Import your config" className="custom-file-upload btn btn-default">
-                            <input type="file" 
-                                id={C_ID_input_config}
-                                accept=".json"
-                                size={3}
-                                className="btn btn-default"
-                            />
-                            Import
-                        </label>
-                    </div>
-
-                    <input id={C_ID_input_config_export} title="Export current config" type="submit" value="Export" className="btn btn-default btn-export"/>
+                <div className="choose-file">
+                    <label title="Import your config" className="custom-file-upload btn btn-default">
+                        <input type="file" 
+                            id={C_ID_input_config}
+                            accept=".json"
+                            size={3}
+                        />
+                        Import
+                    </label>
                 </div>
+                <input id={C_ID_input_config_export} title="Export current config" type="submit" value="Export" className="btn btn-default btn-export"/>
             </div>
         </div>
     );
diff --git a/src/geovisto_demos/components/PlaygroundBarData.tsx b/src/geovisto_demos/components/PlaygroundBarData.tsx
index 537e331..a016ba5 100644
--- a/src/geovisto_demos/components/PlaygroundBarData.tsx
+++ b/src/geovisto_demos/components/PlaygroundBarData.tsx
@@ -81,21 +81,19 @@ const PlaygroundBarData = (props) => {
                     className="select"
                 />
 
-                <div className="plagroundbar__buttons">
-                    <div className="choose-file">
-                        <label title="Import your data" className="custom-file-upload btn btn-default">
-                            <input type="file" 
-                                id={C_ID_input_data}
-                                accept=".json"
-                                size={3}
-                                className="btn btn-default"
-                            />
-                            Import
-                        </label>
-                    </div>
-
-                    <input id={C_ID_input_data_export} title="Export current data" type="submit" value="Export" className="btn btn-default btn-export"/>
+                <div className="choose-file">
+                    <label title="Import your data" className="custom-file-upload btn btn-default">
+                        <input type="file" 
+                            id={C_ID_input_data}
+                            accept=".json"
+                            size={3}
+                            className="btn btn-default"
+                        />
+                        Import
+                    </label>
                 </div>
+
+                <input id={C_ID_input_data_export} title="Export current data" type="submit" value="Export" className="btn btn-default btn-export"/>
             </div>
         </div>
     );
diff --git a/src/geovisto_demos/components/PlaygroundBarGeojson.tsx b/src/geovisto_demos/components/PlaygroundBarGeojson.tsx
index e33376f..04050bb 100644
--- a/src/geovisto_demos/components/PlaygroundBarGeojson.tsx
+++ b/src/geovisto_demos/components/PlaygroundBarGeojson.tsx
@@ -82,21 +82,19 @@ const PlaygroundBarGeojson = (props) => {
                     onChange={handleChange}
                     className="select"
                 />
-                <div className="plagroundbar__buttons">
-                    <div className="choose-file">
-                        <label title="Import your geojson" className="custom-file-upload btn btn-default">
-                            <input type="file" 
-                                id={C_ID_input_geojson}
-                                accept=".json"
-                                size={3}
-                                className="btn btn-default"
-                            />
-                            Import
-                        </label>
-                    </div>
-
-                    <input id={C_ID_input_geojson_export} title="Export current geojson" type="submit" value="Export" className="btn btn-default btn-export"/>
+                <div className="choose-file">
+                    <label title="Import your geojson" className="custom-file-upload btn btn-default">
+                        <input type="file" 
+                            id={C_ID_input_geojson}
+                            accept=".json"
+                            size={3}
+                            className="btn btn-default"
+                        />
+                        Import
+                    </label>
                 </div>
+
+                <input id={C_ID_input_geojson_export} title="Export current geojson" type="submit" value="Export" className="btn btn-default btn-export"/>
             </div>
         </div>
     );
diff --git a/src/geovisto_demos/components/PlaygroundBarSearchDatasets.tsx b/src/geovisto_demos/components/PlaygroundBarSearchDatasets.tsx
index 48de87a..fba9c80 100644
--- a/src/geovisto_demos/components/PlaygroundBarSearchDatasets.tsx
+++ b/src/geovisto_demos/components/PlaygroundBarSearchDatasets.tsx
@@ -65,7 +65,6 @@ const PlaygroundBarSearchDatasets = (props) => {
     return (
         <div className="demo-toolbar">
             <div className="data-container">
-                <span>Search dataset: </span>
                 <form onSubmit={handleSearchSubmit} className="search-form" title="Download dataset from ArcGIS HUB">
                 <Select 
                     id={"C_ID_select_geojson"}
@@ -73,7 +72,7 @@ const PlaygroundBarSearchDatasets = (props) => {
                     isLoading={isLoading}
                     options={search.options}
                     onInputChange={handleInputChange}
-                    placeholder="Search..."
+                    placeholder="Search and download dataset on ArcGIS HUB..."
                     onChange={handleChoose}
                     isClearable={true}
                     noOptionsMessage={() => 'No Datasets Found'}
diff --git a/src/geovisto_demos/playground.css b/src/geovisto_demos/playground.css
index 5976882..52f635a 100644
--- a/src/geovisto_demos/playground.css
+++ b/src/geovisto_demos/playground.css
@@ -15,8 +15,8 @@
 .demo-toolbar {
     width: 100%;
     font-size: 1rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    padding-left: 3px;
+    padding-right: 3px;
     background-color: var(--ifm-color-primary-lightest);
     color: var(--text-color);
 }
@@ -28,9 +28,13 @@
 .data-container {
     text-align: left;
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
     gap: 10px;
     transition: all .5s ease;
+    height: min-content;
+
 }
 
 .data-container.hidden {
@@ -38,6 +42,16 @@
 }
 
 
+.data-container .btn-export {
+    padding: 8px !important;
+    height: max-content;
+}
+
+.data-container .custom-file-upload {
+    padding: 8px !important;
+}
+
+
 .leaflet-tooltip-pane {
     z-index: 500;
 }
@@ -51,9 +65,7 @@
     padding-top: 10px;
 }
 
-.editors label {
-    font-size: 20px;
-}
+
 
 .editor {
     display: flex;
@@ -69,11 +81,6 @@
     margin-top: 2px;
 }
 
-.choose-file {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
 
 .file{
     flex-shrink: 2;
@@ -97,6 +104,7 @@ select {
 input[type="file"] {
     display: none;
 }
+
 .custom-file-upload {
     cursor: pointer;
 }
@@ -111,6 +119,9 @@ input[type="file"] {
 
 .select {
     color: black;
+    flex-grow: 2;
+    height: max-content;
+
 }