fix(modal): fix styles to follow design guide

components/modal/modal-title.tsx

@@ -32,7 +32,7 @@ const ModalTitle: React.FC<ModalTitleProps> = React.memo(({
           justify-content: center;
           align-items: center;
           word-break: break-word;
-          text-transform: uppercase;
+          text-transform: capitalize;
           color: ${theme.palette.foreground};
         }
       `}</style>

components/modal/modal-wrapper.tsx

@@ -28,7 +28,7 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = React
         {children}
         <style jsx>{`
         .wrapper {
-          max-width: 90%;
+          max-width: 85%;
           width: ${width};
           overflow: hidden;
           display: flex;
@@ -39,6 +39,7 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = React
           color: ${theme.palette.foreground};
           border-radius: ${theme.layout.radius};
           padding: ${theme.layout.gap};
+          box-shadow: ${theme.expressiveness.shadowLarge};
           opacity: 0;
           transform: translate3d(0px, -40px, 0px);
           transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;

components/shared/backdrop.tsx

@@ -48,13 +48,16 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(({
           height: 100vh;
           width: 100vw;
           overflow: auto;
-          z-index: 2000;
+          z-index: 1000;
         }
         
         .content {
           display: flex;
           align-items: center;
           justify-content: center;
+          position: relative;
+          z-index: 1001;
+          outline: none;
         }
         
         .offset {
@@ -72,10 +75,10 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(({
           width: 100%;
           height: 100%;
           opacity: ${theme.expressiveness.portalOpacity};
-          background-color: ${theme.palette.foreground};
+          background-color: black;
           transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
           pointer-events: none;
-          z-index: -1;
+          z-index: 1000;
         }
       `}</style>
       </div>

components/styles/themes/dark.ts

@@ -48,7 +48,7 @@ export const expressiveness: ZeitUIThemesExpressiveness = {
   shadowSmall: '0 0 0 1px #333',
   shadowMedium: '0 0 0 1px #333',
   shadowLarge: '0 0 0 1px #333',
-  portalOpacity: 0.25,
+  portalOpacity: 0.75,
 }
 
 export const layout: ZeitUIThemesLayout = {