fix(toolbar): Do not import Button into toolbar

getsentry · Nov 16, 2024 · c3e1c6d · c3e1c6d
1 parent aaa1fa6
commit c3e1c6d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/static/app/components/devtoolbar/components/featureFlags/customOverride.tsx b/static/app/components/devtoolbar/components/featureFlags/customOverride.tsx
@@ -1,6 +1,7 @@
 import {useContext, useState} from 'react';
+import {css} from '@emotion/react';
 
-import {Button} from 'sentry/components/button';
+import {resetButtonCss} from 'sentry/components/devtoolbar/styles/reset';
 import Input from 'sentry/components/input';
 import Switch from 'sentry/components/switchButton';
 import {IconAdd} from 'sentry/icons';
@@ -59,9 +60,18 @@ export default function CustomOverride({
         }}
         css={{background: 'white'}}
       />
-      <Button size="xs" type="submit" css={{width: '28px'}} disabled={!name.length}>
+      <button
+        type="submit"
+        css={[
+          resetButtonCss,
+          css`
+            width: 28px;
+          `,
+        ]}
+        disabled={!name.length}
+      >
         <IconAdd />
-      </Button>
+      </button>
     </form>
   );
 }
diff --git a/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx b/static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx
@@ -1,6 +1,6 @@
 import {type Dispatch, Fragment, type SetStateAction, useState} from 'react';
+import {css} from '@emotion/react';
 
-import {Button} from 'sentry/components/button';
 import {resetButtonCss, resetFlexRowCss} from 'sentry/components/devtoolbar/styles/reset';
 import Input from 'sentry/components/input';
 import {PanelTable} from 'sentry/components/panels/panelTable';
@@ -203,9 +203,13 @@ function FlagTable({prefilter, searchTerm}: {prefilter: Prefilter; searchTerm: s
             {display: 'block', textAlign: 'center'},
           ]}
         >
-          <Button
-            size="xs"
-            css={{width: '100%'}}
+          <button
+            css={[
+              resetButtonCss,
+              css`
+                width: 100%;
+              `,
+            ]}
             onClick={() => {
               clearOverrides();
             }}
@@ -222,7 +226,7 @@ function FlagTable({prefilter, searchTerm}: {prefilter: Prefilter; searchTerm: s
             >
               <IconClose isCircled size="xs" /> Remove All
             </span>
-          </Button>
+          </button>
         </div>
       )}
     </span>