Browse Source

ref(dashboards): Remove `surface400` usage (#43622)

Set out to remove `surface400` from `OpenWidgetViewerButton`, since the
color is being deprecated
(https://github.com/getsentry/sentry/pull/43616). Ended up removing the
whole styled component in favor of a combination of styling props on
`Button` that delivers equivalent results.

**Before:**
<img width="100" alt="Screenshot 2023-01-24 at 10 33 09 AM"
src="https://user-images.githubusercontent.com/44172267/214378598-a09656ce-0992-4819-844e-73220b723fbc.png">


**After:**
<img width="100" alt="Screenshot 2023-01-24 at 10 32 49 AM"
src="https://user-images.githubusercontent.com/44172267/214378543-a66f75cb-dfcb-4735-94c6-05dcbbc34935.png">
Vu Luong 2 years ago
parent
commit
0be3e6d5b0
1 changed files with 6 additions and 16 deletions
  1. 6 16
      static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx

+ 6 - 16
static/app/views/dashboards/widgetCard/widgetCardContextMenu.tsx

@@ -124,10 +124,10 @@ function WidgetCardContextMenu({
                   position="bottom-end"
                   disabledKeys={[...disabledKeys, 'preview']}
                 />
-                <OpenWidgetViewerButton
+                <Button
                   aria-label={t('Open Widget Viewer')}
-                  priority="link"
-                  size="zero"
+                  borderless
+                  size="xs"
                   icon={<IconExpand size="xs" />}
                   onClick={() => {
                     (seriesData || tableData) &&
@@ -257,10 +257,10 @@ function WidgetCardContextMenu({
                 position="bottom-end"
                 disabledKeys={[...disabledKeys]}
               />
-              <OpenWidgetViewerButton
+              <Button
                 aria-label={t('Open Widget Viewer')}
-                priority="link"
-                size="zero"
+                borderless
+                size="xs"
                 icon={<IconExpand size="xs" />}
                 onClick={() => {
                   setData({
@@ -296,16 +296,6 @@ const StyledDropdownMenuControl = styled(DropdownMenu)`
   }
 `;
 
-const OpenWidgetViewerButton = styled(Button)`
-  padding: ${space(0.75)} ${space(1)};
-  color: ${p => p.theme.textColor};
-  &:hover {
-    color: ${p => p.theme.textColor};
-    background: ${p => p.theme.surface400};
-    border-color: transparent;
-  }
-`;
-
 const SampledTag = styled(Tag)`
   margin-right: ${space(0.5)};
 `;