Use stems for modals everywhere!

package.json

@@ -6,8 +6,8 @@
   "version": "0.23.0",
   "private": true,
   "dependencies": {
-    "@audius/libs": "1.0.16",
-    "@audius/stems": "0.2.12",
+    "@audius/libs": "^1.0.16",
+    "@audius/stems": "0.3.1",
     "@optimizely/optimizely-sdk": "^4.0.0",
     "@reduxjs/toolkit": "^1.3.2",
     "@sentry/browser": "^5.10.2",

src/components/action-sheet-modal/ActionSheetModal.module.css

@@ -1,3 +1,7 @@
+.modalBodyStyle {
+  width: 100%;
+}
+
 .container > div {
   height: 56px;
   display: flex;

src/components/action-sheet-modal/ActionSheetModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import { Anchor, Modal } from '@audius/stems'
 
-import Modal, { Anchor } from 'components/general/AudiusModal'
 import cn from 'classnames'
 
 import styles from './ActionSheetModal.module.css'
@@ -35,6 +35,7 @@ const ActionSheetModal = ({
 
   return (
     <Modal
+      bodyClassName={styles.modalBodyStyle}
       onClose={onClose}
       isOpen={isOpen}
       anchor={Anchor.BOTTOM}

src/components/artist/ArtistPopover.module.css

@@ -1,3 +1,7 @@
+.overlayStyle {
+  z-index: 20000;
+}
+
 /* Remove the default antd popover arrow */
 .overlayStyle > :global(.ant-popover-content) > :global(.ant-popover-arrow) {
   display: none;

src/components/artist/UserListModal.js

@@ -1,8 +1,8 @@
 import React from 'react'
+import { Modal } from '@audius/stems'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
-import Modal from 'components/general/Modal'
 import FollowButton from 'components/general/FollowButton'
 import ArtistChip from 'components/artist/ArtistChip'
 import { push as pushRoute } from 'connected-react-router'
@@ -30,9 +30,13 @@ export const UserListModal = props => {
   return (
     <Modal
       title={props.title}
-      width={360}
-      visible={props.visible}
+      showTitleHeader
+      bodyClassName={styles.modalBody}
+      isOpen={props.visible}
       onClose={props.onClose}
+      titleClassName={styles.modalTitle}
+      headerContainerClassName={styles.modalHeader}
+      showDismissButton
     >
       <SimpleBar
         scrollableNodeProps={{ id: simpleBarId }}

src/components/artist/UserListModal.module.css

@@ -1,4 +1,22 @@
+.modalBody {
+  max-width: 360px;
+  width: 100%;
+}
+
+.modalHeader {
+  margin: 0px 16px;
+}
+
+.modalTitle {
+  color: var(--neutral-light-4);
+  font-size: var(--font-l);
+  font-weight: var(--font-heavy);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
 .scrollable {
+  margin: 16px;
   min-height: 0;
   max-height: 690px;
   height: 100%;