diff --git a/static/app/components/platformList.tsx b/static/app/components/platformList.tsx index 8e8de327bbe080..84414b7a1e9b5e 100644 --- a/static/app/components/platformList.tsx +++ b/static/app/components/platformList.tsx @@ -1,4 +1,3 @@ -import type {Theme} from '@emotion/react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; import {PlatformIcon} from 'platformicons'; @@ -62,41 +61,19 @@ function getOverlapWidth(size: number) { return Math.round(size / 4); } -const commonStyles = ({theme}: {theme: Theme}) => css` - cursor: default; - border-radius: ${theme.borderRadius}; - box-shadow: 0 0 0 1px ${theme.background}; - :hover { - z-index: 1; - } -`; - const PlatformIcons = styled('div')` display: flex; `; -const InnerWrapper = styled('div')` - display: flex; - position: relative; -`; - const StyledPlatformIcon = styled(PlatformIcon)` - ${p => commonStyles(p)}; -`; - -const Counter = styled('div')` - ${p => commonStyles(p)}; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - font-weight: ${p => p.theme.fontWeight.bold}; - font-size: ${p => p.theme.fontSize.xs}; - background-color: ${p => p.theme.gray200}; - color: ${p => p.theme.subText}; - padding: 0 1px; - position: absolute; - right: -1px; + cursor: default; + border-radius: ${p => p.theme.borderRadius}; + box-shadow: 0 0 0 1px ${p => p.theme.background}; + :hover { + z-index: 1; + } + height: ${p => p.size}px; + min-width: ${p => p.size}px; `; const Wrapper = styled('div')` @@ -111,13 +88,4 @@ const Wrapper = styled('div')` } `} } - - ${InnerWrapper} { - padding-right: ${p => p.size / 2 + 1}px; - } - - ${Counter} { - height: ${p => p.size}px; - min-width: ${p => p.size}px; - } `;