ref(ui): Use translucent borders & dark backdrop for <GlobalModal /> (#31090)

* ref(ui): Use translucent borders on <GlobalModal />

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

static/app/components/globalModal/components.tsx

@@ -31,6 +31,8 @@ const CloseButton = styled(Button)`
   right: 0;
   transform: translate(50%, -50%);
   border-radius: 50%;
+  border: none;
+  box-shadow: 0 0 0 1px ${p => p.theme.translucentBorder};
   background: ${p => p.theme.background};
   height: 24px;
   width: 24px;

static/app/components/globalModal/index.tsx

@@ -214,7 +214,7 @@ const fullPageCss = css`
 const Backdrop = styled('div')`
   ${fullPageCss};
   z-index: ${p => p.theme.zIndex.modal};
-  background: ${p => p.theme.gray500};
+  background: ${p => p.theme.black};
   will-change: opacity;
   transition: opacity 200ms;
   pointer-events: none;
@@ -250,8 +250,7 @@ const Content = styled('div')`
   padding: ${space(4)};
   background: ${p => p.theme.background};
   border-radius: 8px;
-  border: ${p => p.theme.modalBorder};
-  box-shadow: ${p => p.theme.modalBoxShadow};
+  box-shadow: 0 0 0 1px ${p => p.theme.translucentBorder}, ${p => p.theme.dropShadowHeavy};
 `;
 
 type State = {

static/app/utils/theme.tsx

@@ -191,16 +191,6 @@ const generateAliases = (colors: BaseColors) => ({
   innerBorder: colors.gray100,
   translucentInnerBorder: colors.translucentGray100,
 
-  /**
-   * Border around modals
-   */
-  modalBorder: 'none',
-
-  /**
-   * Box shadow on the modal
-   */
-  modalBoxShadow: 'none',
-
   /**
    * A color that denotes a "success", or something good
    */