fix(js): Use more named icon sizes (#42609)

static/app/components/assigneeSelector.tsx

@@ -102,7 +102,7 @@ function AssigneeSelector({noDropdown, ...props}: AssigneeSelectorProps) {
           </TooltipWrapper>
         }
       >
-        <StyledIconUser data-test-id="unassigned" size="20px" color="gray400" />
+        <StyledIconUser data-test-id="unassigned" size="md" color="gray400" />
       </Tooltip>
     );
   }

static/app/components/questionTooltip.tsx

@@ -5,14 +5,14 @@ import {IconQuestion} from 'sentry/icons';
 import type {Color, IconSize} from 'sentry/utils/theme';
 
 type ContainerProps = {
-  size: IconSize | string;
+  size: IconSize;
   className?: string;
 };
 
 const QuestionIconContainer = styled('span')<ContainerProps>`
   display: inline-block;
-  height: ${p => p.theme.iconSizes[p.size] ?? p.size};
-  line-height: ${p => p.theme.iconSizes[p.size] ?? p.size};
+  height: ${p => p.theme.iconSizes[p.size]};
+  line-height: ${p => p.theme.iconSizes[p.size]};
 
   & svg {
     transition: 120ms opacity;
@@ -26,7 +26,7 @@ const QuestionIconContainer = styled('span')<ContainerProps>`
 `;
 
 type QuestionProps = {
-  size: string;
+  size: IconSize;
   title: React.ReactNode;
   className?: string;
   color?: Color;

static/app/components/sidebar/sidebarDropdown/index.tsx

@@ -77,7 +77,7 @@ const SidebarDropdown = ({
       />
     ) : (
       <SentryLink to="/">
-        <IconSentry size="32px" />
+        <IconSentry size="xl" />
       </SentryLink>
     );
 

static/app/components/teamSelector.tsx

@@ -38,7 +38,7 @@ const unassignedOption = {
   value: null,
   label: (
     <UnassignedWrapper>
-      <StyledIconUser size="20px" />
+      <StyledIconUser size="md" />
       {t('Unassigned')}
     </UnassignedWrapper>
   ),

static/app/utils/discover/fieldRenderers.tsx

@@ -581,7 +581,7 @@ const SPECIAL_FIELDS: SpecialFields = {
             <NumberContainer>
               <Count value={count} />
             </NumberContainer>
-            <UserIcon size="20" />
+            <UserIcon size="md" />
           </FlexContainer>
         );
       }

static/app/utils/integrationUtil.tsx

@@ -34,6 +34,8 @@ import {
 } from 'sentry/utils/analytics/integrations';
 import makeAnalyticsFunction from 'sentry/utils/analytics/makeAnalyticsFunction';
 
+import {IconSize} from './theme';
+
 const mapIntegrationParams = analyticsParams => {
   // Reload expects integration_status even though it's not relevant for non-sentry apps
   // Passing in a dummy value of published in those cases
@@ -196,8 +198,10 @@ export const safeGetQsParam = (param: string) => {
   }
 };
 
-export const getIntegrationIcon = (integrationType?: string, size?: string) => {
-  const iconSize = size || 'md';
+export const getIntegrationIcon = (
+  integrationType?: string,
+  iconSize: IconSize = 'md'
+) => {
   switch (integrationType) {
     case 'asana':
       return <IconAsana size={iconSize} />;

static/app/views/alerts/list/rules/row.tsx

@@ -238,7 +238,7 @@ function RuleListRow({
     value: '',
     label: () => (
       <MenuItemWrapper>
-        <StyledIconUser size="20px" />
+        <StyledIconUser size="md" />
         {t('Unassigned')}
       </MenuItemWrapper>
     ),
@@ -293,7 +293,7 @@ function RuleListRow({
     />
   ) : (
     <Tooltip isHoverable skipWrapper title={t('Unassigned')}>
-      <StyledIconUser size="20px" color="gray400" />
+      <StyledIconUser size="md" color="gray400" />
     </Tooltip>
   );
 

static/app/views/auth/layout.tsx

@@ -61,7 +61,7 @@ const AuthSidebar = styled('div')`
 const SentryButton = styled(
   (p: Omit<React.ComponentPropsWithoutRef<typeof Link>, 'to'>) => (
     <Link to="/" {...p}>
-      <IconSentry size="24px" />
+      <IconSentry size="lg" />
     </Link>
   )
 )`

static/app/views/organizationStats/teamInsights/teamIssuesAge.tsx

@@ -143,7 +143,7 @@ class TeamIssuesAge extends AsyncComponent<Props, State> {
             <RightAligned key="events">{t('Events')}</RightAligned>,
             <RightAligned key="users">{t('Users')}</RightAligned>,
             <RightAligned key="age">
-              {t('Age')} <IconArrow direction="down" size="12px" color="gray300" />
+              {t('Age')} <IconArrow direction="down" size="xs" color="gray300" />
             </RightAligned>,
           ]}
           isLoading={loading}

static/app/views/organizationStats/teamInsights/teamIssuesBreakdown.tsx

@@ -180,8 +180,7 @@ class TeamIssuesBreakdown extends AsyncComponent<Props, State> {
                     <AlignRight key={action}>{action}</AlignRight>
                   )),
                   <AlignRight key="total">
-                    {t('total')}{' '}
-                    <IconArrow direction="down" size="12px" color="gray300" />
+                    {t('total')} <IconArrow direction="down" size="xs" color="gray300" />
                   </AlignRight>,
                 ]}
                 isLoading={loading}