fix(map): design qa [EP-2999] (#193)

* feat(map): metric download functionality [EP-1328] * feat(map): metric download functionality [EP-1328] * feat(map): metric download functionality [EP-1328] * fix(map): metric download bugs [EP-2998, EP-2997] * fix(map): design qa [EP-2999] * fix(map): design qa [EP-2999]
natgeosociety · Oct 5, 2020 · 33ba60c · 33ba60c
1 parent aa9e4d4
commit 33ba60c
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@kunukn/react-collapse": "^2.2.9",
     "@loadable/component": "^5.6.1",
-    "@natgeosociety/marapp-uikit": "^1.0.10",
+    "@natgeosociety/marapp-uikit": "^1.0.11",
     "assert": "^2.0.0",
     "axios": "^0.18.0",
     "axios-cache-adapter": "^2.3.0",

diff --git a/packages/earth-admin/src/pages-client/organization.tsx b/packages/earth-admin/src/pages-client/organization.tsx
@@ -21,7 +21,7 @@ import { Link } from 'gatsby';
 import { JSHINT } from 'jshint';
 import React, { useEffect } from 'react';
 
-import { isValidGroup, isSuperAdmin, Spinner } from '@marapp/earth-shared';
+import { isSuperAdmin, isValidGroup, Spinner } from '@marapp/earth-shared';
 
 import { useAuth0 } from '@app/auth/auth0';
 import { BASE_URL } from '@app/config';

diff --git a/packages/earth-map/src/components/map/component.tsx b/packages/earth-map/src/components/map/component.tsx
@@ -27,7 +27,7 @@ import React, { useContext } from 'react';
 import isEqual from 'react-fast-compare';
 import { APP_ABOUT } from 'theme';
 
-import { Map, UserMenu, Spinner } from '@marapp/earth-shared';
+import { Map, Spinner, UserMenu } from '@marapp/earth-shared';
 
 import BasemapComponent from '../basemap';
 import MapControls from './controls';

diff --git a/packages/earth-map/src/components/widget/download/component.tsx b/packages/earth-map/src/components/widget/download/component.tsx
@@ -43,20 +43,15 @@ const WidgetDownload = (props: IMetric) => {
 
   return (
     <div className="ng-position-relative marapp-qa-downloaddropdown" ref={closeOnClickOutside}>
-      <Tooltip
-        placement="top"
-        overlay={<span>Download metric</span>}
-        overlayClassName="c-rc-tooltip -default"
-        mouseLeaveDelay={0}
-      >
-        <i
-          className={classNames('ng-c-cursor-pointer ng-dropdown-button marapp-qa-actiondownload', {
-            'ng-icon-angle-up ng-dropdown-button-open': showDropdown,
-            'ng-icon-angle-down': !showDropdown,
-          })}
-          onClick={(e) => setShowDropdown(!showDropdown)}
-        />
-      </Tooltip>
+      <i
+        className={classNames(
+          'ng-c-cursor-pointer ng-toolbar-button ng-icon-download-outline marapp-qa-actiondownload',
+          {
+            'ng-dropdown-button-open': showDropdown,
+          }
+        )}
+        onClick={(e) => setShowDropdown(!showDropdown)}
+      />
 
       <div className={classNames('ng-ep-download-dropdown', { 'ng-display-block': showDropdown })}>
         <p className="ng-text-display-s ng-padding-medium-horizontal ng-padding-vertical ng-margin-remove">

diff --git a/packages/earth-map/src/components/widget/download/styles.scss b/packages/earth-map/src/components/widget/download/styles.scss
@@ -51,19 +51,4 @@
   }
 }
 
-.ng-dropdown-button {
-  align-items: center;
-  font-size: 12px;
-  justify-content: center;
-  display: flex;
-  height: 40px;
-  width: 40px;
-}
-
-.ng-dropdown-button-open {
-  background: $marapp-gray-1;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
-  border-radius: 20px;
-  color: $marapp-gray-8;
-}
 
diff --git a/packages/earth-map/src/components/widget/toolbar/component.tsx b/packages/earth-map/src/components/widget/toolbar/component.tsx
@@ -56,25 +56,23 @@ class WidgetToolbarComponent extends PureComponent<any, any> {
         className={`marapp-qa-widgettoolbar c-widget-toolbar ng-flex
          ng-flex-middle ng-margin-left ${classNames}`}
       >
-        <div className="ng-margin-right">
-          <Tooltip
-            placement="top"
-            overlay={<span>Info</span>}
-            overlayClassName="c-rc-tooltip -default"
-            mouseLeaveDelay={0}
-          >
-            <button
-              className={classnames({
-                '-active': !!activeInfo,
-              })}
-              type="button"
-              onClick={onInfo}
-            >
-              <i className="ng-icon-info-circle" />
-            </button>
-          </Tooltip>
-        </div>
         <WidgetDownload data={data} />
+        <Tooltip
+          placement="top"
+          overlay={<span>Info</span>}
+          overlayClassName="c-rc-tooltip -default"
+          mouseLeaveDelay={0}
+        >
+          <button
+            className={classnames('ng-toolbar-button', {
+              '-active': !!activeInfo,
+            })}
+            type="button"
+            onClick={onInfo}
+          >
+            <i className="ng-icon-info-circle" />
+          </button>
+        </Tooltip>
       </div>
     );
   }

diff --git a/packages/earth-map/src/components/widget/toolbar/styles.scss b/packages/earth-map/src/components/widget/toolbar/styles.scss
@@ -16,3 +16,18 @@
   CONDITIONS OF ANY KIND, either express or implied. See the License for the
   specific language governing permissions and limitations under the License.
 */
+@import '~styles/config';
+
+.ng-toolbar-button {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  height: 40px;
+  width: 40px;
+
+  &:hover, &.ng-toolbar-button-open {
+    background: $marapp-gray-7;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
+    border-radius: 20px;
+  }
+}
diff --git a/packages/earth-map/src/pages/earth/component.tsx b/packages/earth-map/src/pages/earth/component.tsx
@@ -16,18 +16,17 @@
   CONDITIONS OF ANY KIND, either express or implied. See the License for the
   specific language governing permissions and limitations under the License.
 */
-import React from 'react';
-
-import { Tab, Tabs } from 'components/tabs';
-import Header from 'components/header';
 import Fullscreen from 'components/fullscreen';
+import Header from 'components/header';
 import Layers from 'components/layers';
 import Map from 'components/map';
 import Place from 'components/place';
 import Places from 'components/places';
 import Sidebar from 'components/sidebar';
+import { Tab, Tabs } from 'components/tabs';
 import Url from 'components/url';
 import { EPanels } from 'modules/sidebar/model';
+import React from 'react';
 import { Icons as VizzIcons } from 'vizzuality-components';
 
 import { URL_PROPS } from './url';

diff --git a/yarn.lock b/yarn.lock
@@ -2743,10 +2743,10 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@natgeosociety/marapp-uikit@^1.0.10":
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/@natgeosociety/marapp-uikit/-/marapp-uikit-1.0.10.tgz#39034d9cb3df41aa87db2d2190ad482597277257"
-  integrity sha512-NRIl75Gnexz/txP6FwSd0+FsRHfO+l4/WGSaN1H+oex0oq4Tjl6HygW4HZ8cwpSbZJfeDMNMr8CWlXTrZ1ra2w==
+"@natgeosociety/marapp-uikit@^1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@natgeosociety/marapp-uikit/-/marapp-uikit-1.0.11.tgz#bce3573e29027a03bd684302a5c704520c980454"
+  integrity sha512-Lw1j1rJXGHZUPTVme9bMi83xySCVPICl3rXt+ZrV3yCrzFdyhv5G4WefAF2zH/vRlnxIVd/AmufoOXTZWtn+mA==
   dependencies:
     countup.js "1.8.5"
     jquery "2.2.1"