Remove shadow scroll

NASA-IMPACT · Oct 4, 2023 · 403b887 · 403b887
1 parent 49d04c7
commit 403b887
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 36 deletions.
diff --git a/app/scripts/components/common/dropdown-scrollable.tsx b/app/scripts/components/common/dropdown-scrollable.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { glsp } from '@devseed-ui/theme-provider';
 import {
@@ -9,14 +9,14 @@ import {
   DropTitle
 } from '@devseed-ui/dropdown';
 
-import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
-
 /**
  * Override Dropdown styles to play well with the shadow scrollbar.
  */
 const DropdownWithScroll = styled(Dropdown)`
   padding: 0;
   overflow: hidden;
+  max-height: 320px;
+  overflow-y: auto;
 
   ${DropTitle} {
     margin: 0;
@@ -28,23 +28,12 @@ const DropdownWithScroll = styled(Dropdown)`
   }
 `;
 
-const shadowScrollbarProps = {
-  autoHeight: true,
-  autoHeightMax: 320
-};
-
-interface DropdownScrollableProps extends DropdownProps {
-  children?: ReactNode;
-}
-
-export default forwardRef<DropdownRef, DropdownScrollableProps>(
+export default forwardRef<DropdownRef, DropdownProps>(
   function DropdownScrollable(props, ref) {
     const { children, ...rest } = props;
     return (
       <DropdownWithScroll ref={ref} {...rest}>
-        <ShadowScrollbar scrollbarsProps={shadowScrollbarProps}>
-          {children}
-        </ShadowScrollbar>
+        {children}  
       </DropdownWithScroll>
     );
   }

diff --git a/app/scripts/components/common/mapbox/layer-legend.tsx b/app/scripts/components/common/mapbox/layer-legend.tsx
@@ -252,17 +252,11 @@ export function LayerLegend(
       )}
       renderBody={() => (
         <LegendBody>
-          <ShadowScrollbar
-            scrollbarsProps={{
-              autoHeight: true,
-              autoHeightMin: 32,
-              autoHeightMax: 120
-            }}
-          >
+
             <div className='scroll-inner'>
               {description || <p>No info available for this layer.</p>}
             </div>
-          </ShadowScrollbar>
+
         </LegendBody>
       )}
     />

diff --git a/app/scripts/components/common/mapbox/map-options/index.tsx b/app/scripts/components/common/mapbox/map-options/index.tsx
@@ -21,8 +21,6 @@ import { MapOptionsProps } from './types';
 import { projectionsList } from './utils';
 import { BASEMAP_STYLES } from './basemaps';
 
-import { ShadowScrollbarImproved as ShadowScrollbar } from '$components/common/shadow-scrollbar-improved';
-
 const DropHeader = styled.div`
   padding: ${glsp()};
   box-shadow: inset 0 -1px 0 0 ${themeVal('color.base-100a')};
@@ -143,7 +141,7 @@ function MapOptions(props: MapOptionsProps) {
         <DropTitle>Map options</DropTitle>
       </DropHeader>
       <DropBody>
-        <ShadowScrollbar scrollbarsProps={shadowScrollbarProps}>
+
           <ContentGroup>
             <ContentGroupHeader>
               <ContentGroupTitle>Style</ContentGroupTitle>
@@ -258,7 +256,7 @@ function MapOptions(props: MapOptionsProps) {
               </DropMenu>
             </ContentGroupBody>
           </ContentGroup>
-        </ShadowScrollbar>
+
       </DropBody>
     </MapOptionsDropdown>
   );

diff --git a/app/scripts/components/common/page-header.tsx b/app/scripts/components/common/page-header.tsx
@@ -214,6 +214,9 @@ const GlobalNavInner = styled.div`
 const GlobalNavHeader = styled.div`
   padding: ${variableGlsp(1)};
   box-shadow: inset 0 -1px 0 0 ${themeVal('color.surface-200a')};
+  ${media.largeUp`
+    display: none;
+  `}
 `;
 
 const GlobalNavTitle = styled(Heading).attrs({
@@ -225,16 +228,16 @@ const GlobalNavTitle = styled(Heading).attrs({
 
 export const GlobalNavActions = styled.div`
   align-self: start;
+  ${media.largeUp`
+    display: none;
+  `}
 `;
 
 export const GlobalNavToggle = styled(Button)`
   z-index: 2000;
 `;
 
-const GlobalNavBody = styled(ShadowScrollbar).attrs({
-  topShadowVariation: 'dark',
-  bottomShadowVariation: 'dark'
-})`
+const GlobalNavBody = styled.div`
   display: flex;
   flex: 1;
 
@@ -339,6 +342,10 @@ function PageHeader() {
 
   useEffect(() => {
     // Close global nav when media query changes.
+    // NOTE: isMediumDown is returning document.body's width, not the whole window width
+    // which conflicts with how mediaquery decides the width. 
+    // JSX element susing isMediumDown is also protected with css logic because of this.
+    // ex. Look at GlobalNavActions 
     if (!isMediumDown) setGlobalNavRevealed(false);
   }, [isMediumDown]);
 

diff --git a/app/scripts/components/common/page-local-nav.js b/app/scripts/components/common/page-local-nav.js
@@ -17,7 +17,6 @@ import {
 import { reveal } from '@devseed-ui/animation';
 import { Overline } from '@devseed-ui/typography';
 import { DropMenu, DropMenuItem } from '@devseed-ui/dropdown';
-import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
 
 import DropdownScrollable from './dropdown-scrollable';
 
@@ -57,7 +56,7 @@ const LocalBreadcrumb = styled.ol`
   }
 `;
 
-const NavBlock = styled(ShadowScrollbar)`
+const NavBlock = styled.div`
   display: flex;
   align-items: center;
   flex-flow: row nowrap;

diff --git a/app/scripts/components/common/shadow-scrollbar-improved.tsx b/app/scripts/components/common/shadow-scrollbar-improved.tsx
@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ShadowScrollbar } from '@devseed-ui/shadow-scrollbar';
 
+// Moving away from this component because of the issue
+// https://github.com/NASA-IMPACT/veda-ui/issues/682#issuecomment-1747334303
 export const ShadowScrollbarImproved = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof ShadowScrollbar>
@@ -29,7 +31,6 @@ export const ShadowScrollbarImproved = React.forwardRef<
     ...(scrollbarsProps ?? {}),
     autoHide
   };
-
   return (
     <ShadowScrollbar
       ref={ref}

diff --git a/app/scripts/styles/panel.tsx b/app/scripts/styles/panel.tsx
@@ -103,7 +103,7 @@ export const PanelToggle = styled(Button)`
   left: calc(100% + ${variableGlsp()});
 `;
 
-export const PanelBody = styled(ShadowScrollbar)`
+export const PanelBody = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;