flex: codemod simple flex usage

static/app/components/actions/archive.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {openModal} from 'sentry/actionCreators/modal';
 import {openConfirmModal} from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
@@ -331,12 +333,12 @@ function ArchiveActions({
           />
         )}
         menuTitle={
-          <MenuWrapper>
+          <Flex justify="between" align="center">
             {t('Archive')}
             <StyledExternalLink href="https://docs.sentry.io/product/issues/states-triage/#archive">
               {t('Read the docs')}
             </StyledExternalLink>
-          </MenuWrapper>
+          </Flex>
         }
         items={dropdownItems}
         isDisabled={disabled}
@@ -358,12 +360,6 @@ const DropdownTrigger = styled(Button)`
   border-left: none;
 `;
 
-const MenuWrapper = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
 const StyledExternalLink = styled(ExternalLink)`
   font-weight: ${p => p.theme.fontWeight.normal};
 `;

static/app/components/events/autofix/autofixChanges.tsx

@@ -279,9 +279,9 @@ export function AutofixChanges({
         <ChangesContainer>
           <HeaderWrapper>
             <HeaderText>
-              <HeaderIconWrapper ref={iconCodeRef}>
+              <Flex justify="center" align="center" ref={iconCodeRef}>
                 <IconCode size="md" color="blue400" />
-              </HeaderIconWrapper>
+              </Flex>
               {t('Code Changes')}
               <Button
                 size="zero"
@@ -491,12 +491,6 @@ const HeaderWrapper = styled('div')`
   gap: ${space(1)};
 `;
 
-const HeaderIconWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const BottomDivider = styled('div')`
   border-top: 1px solid ${p => p.theme.innerBorder};
   margin-top: ${p => p.theme.space.xl};

static/app/components/events/autofix/autofixRootCause.tsx

@@ -526,9 +526,9 @@ function AutofixRootCauseDisplay({
         <CustomRootCausePadding>
           <HeaderWrapper>
             <HeaderText>
-              <IconWrapper ref={iconFocusRef}>
+              <Flex justify="center" align="center" ref={iconFocusRef}>
                 <IconFocus size="md" color="pink400" />
-              </IconWrapper>
+              </Flex>
               {t('Custom Root Cause')}
             </HeaderText>
           </HeaderWrapper>
@@ -558,9 +558,9 @@ function AutofixRootCauseDisplay({
     <CausesContainer>
       <HeaderWrapper>
         <HeaderText>
-          <IconWrapper ref={iconFocusRef}>
+          <Flex justify="center" align="center" ref={iconFocusRef}>
             <IconFocus size="md" color="pink400" />
-          </IconWrapper>
+          </Flex>
           {t('Root Cause')}
           <Button
             size="zero"
@@ -700,12 +700,6 @@ const HeaderWrapper = styled('div')`
   flex-wrap: wrap;
 `;
 
-const IconWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const HeaderText = styled('div')`
   font-weight: ${p => p.theme.fontWeight.bold};
   font-size: ${p => p.theme.fontSize.lg};

static/app/components/events/autofix/autofixSolution.tsx

@@ -2,6 +2,8 @@ import React, {useCallback, useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 import {AnimatePresence, motion, type MotionNodeAnimationOptions} from 'framer-motion';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {addErrorMessage, addLoadingMessage} from 'sentry/actionCreators/indicator';
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
@@ -516,9 +518,9 @@ function AutofixSolutionDisplay({
         <CustomSolutionPadding>
           <HeaderWrapper>
             <HeaderText>
-              <HeaderIconWrapper ref={iconFixRef}>
+              <Flex justify="center" align="center" ref={iconFixRef}>
                 <IconFix size="sm" color="green400" />
-              </HeaderIconWrapper>
+              </Flex>
               {t('Custom Solution')}
             </HeaderText>
           </HeaderWrapper>
@@ -544,9 +546,9 @@ function AutofixSolutionDisplay({
     <SolutionContainer ref={containerRef}>
       <HeaderWrapper>
         <HeaderText>
-          <HeaderIconWrapper ref={iconFixRef}>
+          <Flex justify="center" align="center" ref={iconFixRef}>
             <IconFix size="md" color="green400" />
-          </HeaderIconWrapper>
+          </Flex>
           {t('Solution')}
           <Button
             size="zero"
@@ -740,12 +742,6 @@ const CustomSolutionPadding = styled('div')`
   padding: ${space(1)} ${space(0.25)} ${space(2)} ${space(0.25)};
 `;
 
-const HeaderIconWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const InstructionsInputWrapper = styled('form')`
   display: flex;
   position: relative;

static/app/components/events/contexts/contextCard.tsx

@@ -1,7 +1,8 @@
 import {useTheme} from '@emotion/react';
-import styled from '@emotion/styled';
 import startCase from 'lodash/startCase';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import type {ContextValue} from 'sentry/components/events/contexts';
 import {
@@ -114,7 +115,7 @@ export default function ContextCard({
     <KeyValueData.Card
       contentItems={contentItems}
       title={
-        <Title>
+        <Flex justify="between" align="center">
           <div>{getContextTitle({alias, type, value})}</div>
           <div style={{minWidth: 14}}>
             <ErrorBoundary customComponent={null}>
@@ -129,15 +130,9 @@ export default function ContextCard({
               })}
             </ErrorBoundary>
           </div>
-        </Title>
+        </Flex>
       }
       sortAlphabetically
     />
   );
 }
-
-const Title = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;

static/app/components/events/eventCustomPerformanceMetrics.tsx

@@ -2,6 +2,8 @@ import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {Location} from 'history';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {SectionHeading} from 'sentry/components/charts/styles';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import Panel from 'sentry/components/panels/panel';
@@ -162,9 +164,9 @@ function EventCustomPerformanceMetric({
     <StyledPanel>
       <div>
         <div>{name}</div>
-        <ValueRow>
+        <Flex align="center">
           <Value>{rendered}</Value>
-        </ValueRow>
+        </Flex>
       </div>
       <StyledDropdownMenuControl
         items={[
@@ -212,11 +214,6 @@ const Container = styled('div')`
   margin-bottom: ${space(4)};
 `;
 
-const ValueRow = styled('div')`
-  display: flex;
-  align-items: center;
-`;
-
 const Value = styled('span')`
   font-size: ${p => p.theme.fontSize.xl};
 `;

static/app/components/events/eventStatisticalDetector/eventComparison/eventDisplay.tsx

@@ -2,6 +2,8 @@ import {useEffect, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
@@ -205,7 +207,7 @@ function EventDisplay({
   return (
     <EventDisplayContainer>
       <div>
-        <StyledControlBar>
+        <Flex justify="between">
           <StyledEventControls>
             <CompactSelect
               size="sm"
@@ -262,7 +264,7 @@ function EventDisplay({
               />
             </NavButtons>
           </div>
-        </StyledControlBar>
+        </Flex>
         <ComparisonContentWrapper>
           <Link to={fullEventTarget}>
             <MinimapContainer>
@@ -309,11 +311,6 @@ const ButtonLabelWrapper = styled('span')`
   grid-template-columns: 1fr auto;
 `;
 
-const StyledControlBar = styled('div')`
-  display: flex;
-  justify-content: space-between;
-`;
-
 const StyledEventControls = styled('div')`
   display: flex;
   align-items: center;

static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx

@@ -3,6 +3,8 @@ import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 import type {LocationDescriptor} from 'history';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {Link} from 'sentry/components/core/link';
@@ -569,7 +571,7 @@ function DifferentialFlamegraphChangedFunctionsTitle(props: {
   title: string;
 }) {
   return (
-    <DifferentialFlamegraphChangedFunctionsTitleContainer>
+    <Flex justify="between" align="center">
       <DifferentialFlamegraphChangedFunctionsTitleText>
         <div>{props.title}</div>
         <DifferentialFlamegraphChangedFunctionsSubtitleText>
@@ -592,16 +594,10 @@ function DifferentialFlamegraphChangedFunctionsTitle(props: {
           aria-label={t('Next page')}
         />
       </ButtonBar>
-    </DifferentialFlamegraphChangedFunctionsTitleContainer>
+    </Flex>
   );
 }
 
-const DifferentialFlamegraphChangedFunctionsTitleContainer = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
 const DifferentialFlamegraphChangedFunctionsTitleText = styled('div')`
   font-weight: ${p => p.theme.fontWeight.bold};
   flex: 1;

static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/index.tsx

@@ -1,6 +1,8 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {INTERNAL_SOURCE} from 'sentry/components/events/interfaces/debugMeta/debugImageDetails/utils';
 import type {ImageCandidate} from 'sentry/types/debugImage';
 import type {Organization} from 'sentry/types/organization';
@@ -36,9 +38,9 @@
 
   return (
     <Fragment>
-      <Column>
+      <Flex align="center">
         <StatusTooltip candidate={candidate} hasReprocessWarning={hasReprocessWarning} />
-      </Column>
+      </Flex>
 
       <InformationColumn>
         <Information
@@ -67,16 +69,11 @@
 
 export default Candidate;
 
-const Column = styled('div')`
-  display: flex;
-  align-items: center;
-`;
-
 const InformationColumn = styled(Column)`
   flex-direction: column;
   align-items: flex-start;
 `;
 
 const ActionsColumn = styled(Column)`
   justify-content: flex-end;
 `;

static/app/components/events/interfaces/frame/deprecatedLine.tsx

@@ -3,6 +3,8 @@
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {openModal} from 'sentry/actionCreators/modal';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Button} from 'sentry/components/core/button';
@@ -204,7 +206,7 @@
         >
           {isExpandable ? <InteractionStateLayer /> : null}
           <DefaultLineTitleWrapper isInAppFrame={data.inApp}>
-            <LeftLineTitle>
+            <Flex align="center">
               <div>
                 <LeadHint
                   nextFrame={nextFrame}
@@ -220,7 +222,7 @@
                   isPotentiallyThirdParty={isPotentiallyThirdPartyFrame(data, event)}
                 />
               </div>
-            </LeftLineTitle>
+            </Flex>
           </DefaultLineTitleWrapper>
           <DefaultLineTagWrapper>
             <RepeatsIndicator timesRepeated={timesRepeated} />
@@ -384,12 +386,7 @@
   font-style: ${p => (p.isInAppFrame ? '' : 'italic')};
 `;
 
-const LeftLineTitle = styled('div')`
-  display: flex;
-  align-items: center;
-`;
-
 const RepeatedContent = styled(LeftLineTitle)`
   justify-content: center;
 `;