fix(ui): make close button in drawer transparent (#95330)

paddings are aligned taking the internal button padding into account:

<img width="1015" height="252" alt="Screenshot 2025-07-11 at 15 57 07"
src="https://github.com/user-attachments/assets/a9a73cd6-bf77-461f-876e-79d95eabc6dc"
/>

Biggest difference is now that the button has a more prominent text
color, as I’ve removed all custom color overwrites. It’s just a standard
`transparent` button now


| before | after |
|--------|--------|
| <img width="1137" height="252" alt="Screenshot 2025-07-11 at 15 53 26"
src="https://github.com/user-attachments/assets/871c71ec-99bc-4853-bb34-a58577b2e549"
/> | <img width="1015" height="252" alt="Screenshot 2025-07-11 at 15 56
15"
src="https://github.com/user-attachments/assets/c182e4f8-a595-4b1a-8293-0ed3b440be4b"
/> |
| <img width="1137" height="252" alt="Screenshot 2025-07-11 at 15 53 48"
src="https://github.com/user-attachments/assets/61b4ce12-9fea-4246-a415-48766c773041"
/> | <img width="1137" height="252" alt="Screenshot 2025-07-11 at 15 52
17"
src="https://github.com/user-attachments/assets/6cd5c43f-1997-419a-b3c8-b88e571937af"
/> |

Author: TkDodo

static/app/components/globalDrawer/components.tsx

@@ -129,19 +129,23 @@ export function DrawerHeader({
   const {onClose} = useDrawerContentContext();
 
   return (
-    <Header ref={ref} className={className}>
+    <Header
+      ref={ref}
+      className={className}
+      hideCloseButton={hideCloseButton}
+      hideBar={hideBar}
+    >
       {!hideCloseButton && (
         <Fragment>
-          <CloseButton
-            priority="link"
+          <Button
+            priority="transparent"
             size="xs"
-            borderless
             aria-label={t('Close Drawer')}
             icon={<IconClose />}
             onClick={onClose}
           >
             {t('Close')}
-          </CloseButton>
+          </Button>
           {!hideBar && <HeaderBar />}
         </Fragment>
       )}
@@ -150,28 +154,25 @@ export function DrawerHeader({
   );
 }
 
-const CloseButton = styled(Button)`
-  color: ${p => p.theme.subText};
-  &:hover {
-    color: ${p => p.theme.textColor};
-  }
-`;
-
 const HeaderBar = styled('div')`
   margin: 0 ${space(2)};
+  margin-left: ${space(1)};
   border-right: 1px solid ${p => p.theme.border};
 `;
 
-const Header = styled('header')`
+const Header = styled('header')<{hideBar?: boolean; hideCloseButton?: boolean}>`
   position: sticky;
   top: 0;
   z-index: ${p => p.theme.zIndex.drawer + 1};
   background: ${p => p.theme.background};
   justify-content: flex-start;
   display: flex;
+  gap: ${p => (p.hideBar ? space(1) : 0)};
   padding: ${space(1.5)};
   box-shadow: ${p => p.theme.border} 0 1px;
-  padding-left: 24px;
+  padding-left: ${p => (p.hideCloseButton ? '24px' : space(2))};
+  padding-top: ${p => (p.hideCloseButton ? space(1.5) : space(0.75))};
+  padding-bottom: ${p => (p.hideCloseButton ? space(1.5) : space(0.75))};
 `;
 
 export const DrawerBody = styled('aside')`