fix: style changes based on holaplex theme design review

Author: kespinola

packages/@holaplexui-playground/styles/globals.css

@@ -125,8 +125,12 @@ a {
   @apply flex flex-col gap-4;
 }
 
+.modal-scrim {
+  @apply bg-gray-800 bg-opacity-40;
+}
+
 .modal-panel {
-  @apply flex flex-col bg-white h-full transform !overflow-visible align-middle transition-all overflow-y-auto rounded-md shadow-md max-h-screen max-w-md sm:h-auto sm:max-w-lg;
+  @apply flex z-20 flex-col bg-white h-full transform !overflow-visible align-middle transition-all overflow-y-auto rounded-md shadow-md max-h-screen max-w-md sm:h-auto sm:max-w-lg;
 }
 
 .modal-close {

packages/@holaplexui-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [

packages/@holaplexui-react/src/components/Modal.tsx

@@ -28,7 +28,7 @@ export function Modal(props: ModalProps) {
           <div
             className={clsx(
               'fixed inset-0 z-40',
-              'bg-gray-800 bg-opacity-40',
+              'modal-scrim',
               'transition-opacity duration-500 ease-in-out',
               'flex flex-col items-center justify-center',
               {

packages/@holaplexui-react/src/components/Popover.tsx

@@ -55,7 +55,7 @@ export function PopoverBox({
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
-              className={clsx('absolute z-20 w-auto', 'popover-panel')}
+              className={clsx('absolute w-auto', 'popover-panel')}
             >
               <div className="overflow-hidden popover-content">
                 <>