Fix modal styles and remove unused hooks (#7615)

AudiusProject · Feb 16, 2024 · 8004f92 · 8004f92
1 parent 25a83fd
commit 8004f92
Show file tree

Hide file tree

Showing 9 changed files with 8 additions and 115 deletions.
diff --git a/packages/harmony/src/components/modal/Modal.module.css b/packages/harmony/src/components/modal/Modal.module.css
@@ -2,7 +2,7 @@
 
 :global(.bgModal) {
   background-color: rgba(0, 0, 0, 0.6);
-  z-index: 9999;
+  z-index: calc(var(--harmony-layer-modal) - 1);
   position: fixed;
   opacity: 0;
   top: 0;

diff --git a/packages/harmony/src/components/modal/Modal.tsx b/packages/harmony/src/components/modal/Modal.tsx
@@ -17,9 +17,7 @@ import ReactDOM from 'react-dom'
 import { animated, useTransition } from 'react-spring'
 import { useEffectOnce } from 'react-use'
 
-import { useClickOutside } from 'hooks/useClickOutside'
-
-import { useHotkeys, useScrollLock } from '../../hooks'
+import { useHotkeys, useScrollLock, useClickOutside } from '../../hooks'
 import { IconClose } from '../../icons'
 
 import styles from './Modal.module.css'
@@ -348,7 +346,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
                                 className={styles.dismissButton}
                                 onClick={onClose}
                               >
-                                <IconClose />
+                                <IconClose color='subdued' size='s' />
                               </div>
                             )}
                             <div

diff --git a/packages/harmony/src/components/modal/ModalHeader.tsx b/packages/harmony/src/components/modal/ModalHeader.tsx
@@ -46,6 +46,8 @@ export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
             aria-label='dismiss dialog'
             className={cn(styles.dismissButton, dismissButtonClassName)}
             icon={IconClose}
+            color='subdued'
+            size='s'
             onClick={handleClose}
           />
         ) : null}

diff --git a/packages/harmony/src/index.ts b/packages/harmony/src/index.ts
@@ -7,6 +7,7 @@ import './foundations/color/semantic.css'
 import './foundations/motion/motion.css'
 import './foundations/corner-radius/corner-radius.css'
 import './foundations/shadows/shadows.css'
+import './foundations/layers/layers.css'
 
 export * from './foundations'
 export * from './components'

diff --git a/packages/stems/src/hooks/useClickOutside.ts b/packages/stems/src/hooks/useClickOutside.ts
diff --git a/packages/stems/src/hooks/useHotKeys.ts b/packages/stems/src/hooks/useHotKeys.ts
diff --git a/packages/stems/src/hooks/useScrollLock.ts b/packages/stems/src/hooks/useScrollLock.ts
diff --git a/packages/stems/src/index.ts b/packages/stems/src/index.ts
@@ -38,10 +38,6 @@ export {
   TokenValueSliderProps
 } from './components/TokenValueSlider'
 
-export { useClickOutside } from './hooks/useClickOutside'
-export { useScrollLock } from './hooks/useScrollLock'
-export { useMediaQueryListener } from './hooks/useMediaQueryListener'
-
 export {
   MarkdownViewer,
   MarkdownViewerProps

diff --git a/packages/web/src/hooks/useScrollLock.ts b/packages/web/src/hooks/useScrollLock.ts
@@ -1,4 +1,4 @@
-import { useScrollLock as stemsScrollLock } from '@audius/stems'
+import { useScrollLock as harmonyScrollLock } from '@audius/harmony'
 import { useDispatch } from 'react-redux'
 
 import {
@@ -17,7 +17,7 @@ const useScrollLock = (
   const dispatch = useDispatch()
   increment = increment ?? (() => dispatch(incrementScrollCount()))
   decrement = decrement ?? (() => dispatch(decrementScrollCount()))
-  stemsScrollLock(lock, increment, decrement)
+  harmonyScrollLock(lock, increment, decrement)
 }
 
 export default useScrollLock