fix: Multiple visual bugs on Org Switcher, Spinner

natgeosociety · Oct 2, 2020 · 5419b23 · 5419b23
1 parent c2ac57a
commit 5419b23
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 57 deletions.
diff --git a/packages/earth-admin/src/components/sidebar-select/sidebar-select/styles.scss b/packages/earth-admin/src/components/sidebar-select/sidebar-select/styles.scss
@@ -18,7 +18,6 @@
 */
 
 .ng-select {
-  z-index: 10;
   .ng-icon-directionup {
     margin-left: auto;
   }

diff --git a/packages/earth-shared/src/components/app-context-switcher/AppContextSwitcher.tsx b/packages/earth-shared/src/components/app-context-switcher/AppContextSwitcher.tsx
@@ -58,62 +58,64 @@ const AppContextSwitcher = (props: IProps) => {
   return (
     <div
       ref={closeOnClickOutside}
-      className="marapp-qa-context-switcher ng-app-context-switcher ng-padding-medium-horizontal ng-flex ng-position-relative ng-padding-small-top"
+      className="marapp-qa-context-switcher ng-app-context-switcher  ng-position-relative"
     >
-      {logo && (
-        <div className="logo-container marapp-qa-logo" onClick={closeDropdown}>
-          {logo}
-          {renderDropdown && <span className="ng-margin-small-horizontal ng-color-white">|</span>}
-        </div>
-      )}
-
-      {renderDropdown && (
-        <>
-          <div
-            onClick={toggleDropdown}
-            className="ng-c-cursor-pointer ng-flex ng-flex-middle ng-padding-horizontal ng-position-relative"
-          >
-            <div className="ng-text-display-s ng-text-weight-regular ng-color-white ng-margin-remove ng-org-name ng-padding-right">
-              {label}
-            </div>
-            <i
-              className={classnames({
-                'ng-icon ng-color-white': true,
-                'ng-icon-directionup': isOpen,
-                'ng-icon-directiondown': !isOpen,
-              })}
-            />
-            {checkedCount > 0 && <span className="ng-org-badge">{checkedCount}</span>}
+      <div className="ng-flex ng-padding-medium-horizontal ng-padding-small-top">
+        {logo && (
+          <div className="logo-container marapp-qa-logo" onClick={closeDropdown}>
+            {logo}
+            {renderDropdown && <span className="ng-margin-small-horizontal ng-color-white">|</span>}
           </div>
-
-          {isOpen && (
-            <>
-              <div className="overlay" onClick={closeDropdown} />
-              <ul className="marapp-qa-dropdown ng-ep-dropdown">
-                {Children.map(children, (child: any) => {
-                  if (!child) {
-                    return;
-                  }
-                  const isOptionElement = child.props.value;
-                  const selected = child.props.value === selectedValue;
-                  return isOptionElement
-                    ? cloneElement(child, {
-                        selected,
-                        onClick: (value: any) => {
-                          if (!selected) {
-                            setSelectedValue(value);
-                            onChange(value);
-                          }
-                          closeDropdown();
-                        },
-                      })
-                    : child;
+        )}
+
+        {renderDropdown && (
+          <>
+            <div
+              onClick={toggleDropdown}
+              className="ng-c-cursor-pointer ng-flex ng-flex-middle ng-padding-horizontal ng-position-relative"
+            >
+              <div className="ng-text-display-s ng-text-weight-regular ng-color-white ng-margin-remove ng-org-name ng-padding-right">
+                {label}
+              </div>
+              <i
+                className={classnames({
+                  'ng-icon ng-color-white': true,
+                  'ng-icon-directionup': isOpen,
+                  'ng-icon-directiondown': !isOpen,
                 })}
-              </ul>
-            </>
-          )}
-        </>
-      )}
+              />
+              {checkedCount > 0 && <span className="ng-org-badge">{checkedCount}</span>}
+            </div>
+
+            {isOpen && (
+              <>
+                <div className="overlay" onClick={closeDropdown} />
+                <ul className="marapp-qa-dropdown ng-ep-dropdown">
+                  {Children.map(children, (child: any) => {
+                    if (!child) {
+                      return;
+                    }
+                    const isOptionElement = child.props.value;
+                    const selected = child.props.value === selectedValue;
+                    return isOptionElement
+                      ? cloneElement(child, {
+                          selected,
+                          onClick: (value: any) => {
+                            if (!selected) {
+                              setSelectedValue(value);
+                              onChange(value);
+                            }
+                            closeDropdown();
+                          },
+                        })
+                      : child;
+                  })}
+                </ul>
+              </>
+            )}
+          </>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/packages/earth-shared/src/components/app-context-switcher/styles.scss b/packages/earth-shared/src/components/app-context-switcher/styles.scss
@@ -21,7 +21,11 @@
 
 .ng-app-context-switcher {
   user-select: none;
-  background-color: $marapp-gray-7;
+  z-index: 2;
+
+  > div {
+    background-color: $marapp-gray-7;
+  }
 
   .logo-container {
     height: 50px;

diff --git a/packages/earth-shared/src/components/spinner/styles.scss b/packages/earth-shared/src/components/spinner/styles.scss
@@ -40,7 +40,6 @@ $sizes: (
   left: 0;
   visibility: visible;
   opacity: 1;
-  z-index: 1000;
   padding: 10px;
 
   .spinner-border {

diff --git a/packages/earth-shared/src/hooks/index.ts b/packages/earth-shared/src/hooks/index.ts
@@ -19,7 +19,7 @@
 
 import { useEffect, useRef } from 'react';
 
-export function useDomWatcher(callback: () => {}, skip?: boolean): React.RefObject<any> {
+export function useDomWatcher(callback: () => any, skip?: boolean): React.RefObject<any> {
   const ref: React.RefObject<any> = useRef();
 
   useEffect(() => {