Replace Gap and FlexBox with new spacing components

packages/client/src/client/App/Analytics/ProfitAndLoss/LastPosition.tsx

@@ -2,7 +2,7 @@ import { bind } from "@react-rxjs/core"
 import { map } from "rxjs/operators"
 import { useTheme } from "styled-components"
 
-import { FlexBox } from "@/client/components/FlexBox"
+import { Stack } from "@/client/components/Stack"
 import { Typography } from "@/client/components/Typography"
 import { formatAsWholeNumber } from "@/client/utils/formatNumber"
 import { history$ } from "@/services/analytics"
@@ -19,7 +19,7 @@ export const LastPosition = () => {
 
   return (
     <Typography variant="Text md/Regular">
-      <FlexBox>
+      <Stack alignItems="center">
         USD
         <Typography
           style={{
@@ -35,7 +35,7 @@ export const LastPosition = () => {
         >
           {lastPosStr}
         </Typography>
-      </FlexBox>
+      </Stack>
     </Typography>
   )
 }

packages/client/src/client/App/Analytics/ProfitAndLoss/ProfitAndLoss.tsx

@@ -1,24 +1,21 @@
 import { merge } from "rxjs"
 import styled from "styled-components"
 
-import { FlexBox } from "@/client/components/FlexBox"
 import { AnalyticsSectionLayout } from "@/client/components/layout/AnalyticsSectionLayout"
+import { Stack } from "@/client/components/Stack"
 import { Typography } from "@/client/components/Typography"
 
 import { LastPosition, lastPosition$ } from "./LastPosition"
 import { LineChart, lineChart$ } from "./LineChart"
 
-const ProfitAndLossFlexBox = styled(FlexBox)`
+const ProfitAndLossFlexBox = styled(Stack)`
   flex: 1;
-  justifycontent: space-between;
 `
 
 export const ProfitAndLoss = () => (
   <AnalyticsSectionLayout
     Header={
-      <ProfitAndLossFlexBox
-        style={{ flex: 1, justifyContent: "space-between" }}
-      >
+      <ProfitAndLossFlexBox justifyContent="space-between" alignItems="center">
         <Typography variant="Text lg/Regular">Profit &amp; Loss</Typography>
         <LastPosition />
       </ProfitAndLossFlexBox>

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardFooter.tsx

@@ -100,7 +100,7 @@ export const CardFooter = ({
     (quote) => quote.state.type === ACCEPTED_QUOTE_STATE,
   )?.dealerId
   return (
-    <CardFooterWrapper>
+    <CardFooterWrapper alignItems="center" justifyContent="center" padding="md">
       {state === RfqState.Open ? (
         <LiveFooterContent
           rfqId={id}

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CardHeader.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react"
 
-import { FlexBox } from "@/client/components/FlexBox"
+import { Stack } from "@/client/components/Stack"
 import { Typography } from "@/client/components/Typography"
 import { Direction } from "@/generated/TradingGateway"
 import { useCreditInstrumentById } from "@/services/credit"
@@ -28,7 +28,7 @@ export const CardHeader = memo(function CardHeader({
   const instrument = useCreditInstrumentById(instrumentId)
 
   return (
-    <FlexBox>
+    <Stack alignItems="center">
       {isBuy(direction) && (
         <DirectionLabel direction={direction} terminated={terminated}>
           <Typography
@@ -60,6 +60,6 @@ export const CardHeader = memo(function CardHeader({
           </Typography>
         </DirectionLabel>
       )}
-    </FlexBox>
+    </Stack>
   )
 })

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/NoRfqsScreen/NoRfqsScreen.tsx

@@ -1,8 +1,7 @@
 import { FC } from "react"
 import styled from "styled-components"
 
-import { FlexBox } from "@/client/components/FlexBox"
-import { Gap } from "@/client/components/Gap"
+import { Stack } from "@/client/components/Stack"
 import { Typography } from "@/client/components/Typography"
 
 import { RfqsTab, useSelectedRfqsTab } from "../../selectedRfqsTab"
@@ -13,11 +12,9 @@ import { NoLiveRfqsIcon } from "./svgs/NoLiveRfqsIcon"
 import { NoRfqsIcon } from "./svgs/NoRfqsIcon"
 import { IconProps } from "./svgs/types"
 
-const Wrapper = styled(FlexBox)`
+const Wrapper = styled(Stack)`
   width: 100%;
   height: 100%;
-  flex-direction: column;
-  justify-content: center;
 `
 
 function getTitleForTab(tab: RfqsTab) {
@@ -75,12 +72,11 @@ export const NoRfqsScreen = () => {
   const IconComponent = getIconComponent(selectedRfqsTab)
 
   return (
-    <Wrapper>
+    <Wrapper direction="column" justifyContent="center">
       <IconComponent />
-      <Typography variant="Text lg/Semibold">
+      <Typography variant="Text lg/Semibold" marginBottom="xs">
         {getTitleForTab(selectedRfqsTab)}
       </Typography>
-      <Gap height="xs" />
       <Typography
         variant="Text md/Regular"
         color="Colors/Text/text-tertiary (600)"

packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx

@@ -1,6 +1,6 @@
 import styled, { css, DefaultTheme, keyframes } from "styled-components"
 
-import { FlexBox } from "@/client/components/FlexBox"
+import { Stack } from "@/client/components/Stack"
 import { Typography } from "@/client/components/Typography"
 import { Direction } from "@/generated/TradingGateway"
 
@@ -76,11 +76,7 @@ export const NoRfqsWrapper = styled.div`
 
 // Card Footer
 
-export const CardFooterWrapper = styled(FlexBox)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing.md};
+export const CardFooterWrapper = styled(Stack)`
   background: ${({ theme }) =>
     theme.color["Colors/Background/bg-secondary_subtle"]};
   color: ${({ theme }) =>

packages/client/src/client/App/Credit/SellSide/SellSideRfqGrid/SellSideRfqGrid.tsx

@@ -1,9 +1,9 @@
 import styled from "styled-components"
 
-import { FlexBox } from "@/client/components/FlexBox"
 import { Region } from "@/client/components/layout/Region"
 import { Loader } from "@/client/components/Loader"
 import Logo from "@/client/components/logos/AdaptiveLogo"
+import { Stack } from "@/client/components/Stack"
 import { TabBar } from "@/client/components/TabBar"
 import { Typography } from "@/client/components/Typography"
 import { Direction } from "@/generated/TradingGateway"
@@ -29,11 +29,9 @@ export interface RfqRow {
 
 export type RfqRowKey = keyof RfqRow
 
-const Banner = styled(FlexBox)`
+const Banner = styled(Stack)`
   background-color: ${({ theme }) =>
     theme.color["Colors/Background/bg-secondary"]};
-  padding: ${({ theme }) => theme.spacing.md};
-  gap: ${({ theme }) => theme.spacing.md};
   height: 24px;
 `
 
@@ -45,7 +43,7 @@ export const SellSideRfqGrid = () => {
       fallback={<Loader ariaLabel="Loading RFQ queue.." />}
       Header={
         <>
-          <Banner>
+          <Banner padding="md" gap="md">
             <Logo withText={false} size={1} />
             <Typography
               variant="Text sm/Regular"

packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTicket.styles.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components"
 
-import { FlexBox } from "@/client/components/FlexBox"
+import { Stack } from "@/client/components/Stack"
 
 export const SellSideWrapper = styled.div`
   z-index: 1;
@@ -23,11 +23,9 @@ export const NoSelectHeader = styled.div`
     theme.color["Colors/Background/bg-secondary"]};
 `
 
-export const NoSelectedMessage = styled(FlexBox)`
+export const NoSelectedMessage = styled(Stack)`
   flex: 1 1 auto;
   text-align: center;
-  flex-direction: column;
-  justify-content: center;
   background-color: ${({ theme }) =>
     theme.color["Colors/Background/bg-tertiary"]};
 `

packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTicket.tsx

@@ -31,7 +31,7 @@ const SellSideTradeTicketInner = () => {
             No RFQ Selected
           </Typography>
         </NoSelectHeader>
-        <NoSelectedMessage>
+        <NoSelectedMessage direction="column" justifyContent="center">
           <Typography
             variant="Text sm/Regular"
             color="Colors/Text/text-primary (900)"

packages/client/src/client/App/Credit/SellSide/SellSideTradeTicket/SellSideTradeTicketParameters.tsx

@@ -1,7 +1,6 @@
 import { PropsWithChildren, useEffect, useRef } from "react"
 
 import { TextInput } from "@/client/components/Form/TextInput"
-import { Gap } from "@/client/components/Gap"
 import { Typography } from "@/client/components/Typography"
 import { truncatedDecimalNumberFormatter } from "@/client/utils"
 import {
@@ -43,10 +42,10 @@ const Parameter = ({
     <Typography
       variant="Text sm/Medium"
       color="Colors/Text/text-secondary (700)"
+      marginBottom="sm"
     >
       {label}
     </Typography>
-    <Gap height="sm" />
     {value && <Typography variant="Text sm/Regular">{value}</Typography>}
     {children}
   </div>

packages/client/src/client/App/Footer/Aeron.tsx

@@ -1,22 +1,24 @@
 import styled from "styled-components"
 
-import { FlexBox } from "@/client/components/FlexBox"
 import { AeronLogo } from "@/client/components/logos/AeronLogo"
+import { Stack } from "@/client/components/Stack"
 import { Typography } from "@/client/components/Typography"
 import { AERON } from "@/client/constants"
 
-const AeronLogoWrapper = styled(FlexBox)`
+const AeronLogoWrapper = styled(Stack)`
   margin-right: auto;
-  align-items: flex-start;
-  gap: ${({ theme }) => theme.spacing.xs};
   cursor: pointer;
   svg {
     fill: ${({ theme }) => theme.color["Colors/Text/text-primary (900)"]};
   }
 `
 
 export const Aeron = () => (
-  <AeronLogoWrapper onClick={() => window.open(AERON)}>
+  <AeronLogoWrapper
+    alignItems="flex-start"
+    gap="xs"
+    onClick={() => window.open(AERON)}
+  >
     <Typography
       variant="Text xs/Regular"
       color="Colors/Text/text-quaternary (500)"

packages/client/src/client/App/Footer/ContactUsButton/ContactUs.tsx

@@ -1,22 +1,23 @@
 import { PropsWithChildren } from "react"
 
-import { Gap } from "@/client/components/Gap"
 import { Typography } from "@/client/components/Typography"
 import { EMAIL, WEBSITE } from "@/client/constants"
 
 import { ContactUsContentResolver, Link } from "./styled"
 
 const Row = ({ children }: PropsWithChildren) => (
   <>
-    <Typography variant="Text sm/Regular">{children}</Typography>
-    <Gap height="sm" />
+    <Typography variant="Text sm/Regular" paddingBottom="sm">
+      {children}
+    </Typography>
   </>
 )
 
 export const ContactUs = () => (
   <ContactUsContentResolver>
-    <Typography variant="Text lg/Regular">Contact us</Typography>
-    <Gap height="md" />
+    <Typography variant="Text lg/Regular" paddingBottom="md">
+      Contact us
+    </Typography>
     <Row>2nd floor, 1 Lackington St, London, EC2A 1AL</Row>
     <Row>+44 203 725 6000</Row>
     <Row>530 7th Avenue, New York</Row>
@@ -28,10 +29,10 @@ export const ContactUs = () => (
       onClick={() => {
         window.open(`mailto:${EMAIL}`)
       }}
+      paddingBottom="xs"
     >
-      <Typography>{EMAIL}</Typography>
+      {EMAIL}
     </Link>
-    <Gap height="xs" />
 
     <Link
       variant="Text sm/Regular underlined"

packages/client/src/client/App/Footer/ContactUsButton/FollowUs.tsx

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from "react"
 
-import { Gap } from "@/client/components/Gap"
 import { Typography } from "@/client/components/Typography"
 import { SOCIAL_ADDRESSES, SocialPlatform } from "@/client/constants"
 
@@ -17,10 +16,10 @@ const Row = ({
       variant="Text sm/Regular underlined"
       color="Component colors/Utility/Blue dark/utility-blue-dark-500"
       onClick={onClick}
+      paddingBottom="md"
     >
       {children}
     </Link>
-    <Gap height="md" />
   </>
 )
 export const FollowUs = () => {
@@ -33,8 +32,9 @@ export const FollowUs = () => {
 
   return (
     <ContactUsContentResolver>
-      <Typography variant="Text lg/Regular">Follow us on</Typography>
-      <Gap height="sm" />
+      <Typography variant="Text lg/Regular" paddingBottom="sm">
+        Follow us on
+      </Typography>
       <Row label="LinkedIn" onClick={onClick("LinkedIn")}>
         linkedin.com/company/{<br />}adaptive-consulting-ltd/
       </Row>

packages/client/src/client/App/Footer/StatusButton/StatusButton.tsx

@@ -1,4 +1,3 @@
-import { Gap } from "@/client/components/Gap"
 import { Typography } from "@/client/components/Typography"
 import { ConnectionStatus, useConnectionStatus } from "@/services/connection"
 
@@ -15,8 +14,7 @@ export const StatusButtonInner = ({ status }: { status: ConnectionStatus }) => {
   return (
     <Root>
       <StatusCircle status={appStatus} />
-      <Gap width="xs" />
-      <Typography variant="Text sm/Regular">
+      <Typography variant="Text sm/Regular" paddingTop="xs">
         {appStatus[0].toUpperCase() + appStatus.slice(1).toLowerCase()}
       </Typography>
     </Root>

packages/client/src/client/App/Header/PWA/PWAInstallModal.tsx

@@ -1,5 +1,4 @@
 import { Button } from "@/client/components/Button"
-import { Gap } from "@/client/components/Gap"
 import { AppleShareIcon } from "@/client/components/icons"
 import { Modal } from "@/client/components/Modal"
 import { Typography } from "@/client/components/Typography"
@@ -13,10 +12,9 @@ interface InstallModalProps {
 export const PWAInstallModal = ({ closeModal }: InstallModalProps) => (
   <Modal shouldShow>
     <ModalWrapper>
-      <Typography variant="Display sm/Regular">
+      <Typography variant="Display sm/Regular" paddingBottom="lg">
         Install Reactive Trader
       </Typography>
-      <Gap height="lg" />
       <Typography
         variant="Text sm/Regular"
         color="Colors/Text/text-secondary (700)"
@@ -26,14 +24,14 @@ export const PWAInstallModal = ({ closeModal }: InstallModalProps) => (
       <Typography
         variant="Text sm/Regular"
         color="Colors/Text/text-secondary (700)"
+        paddingBottom="md"
       >
         Tap{" "}
         <IconWrapper>
           <AppleShareIcon />
         </IconWrapper>{" "}
         from the browsers menu and select &quot;Add to Home Screen&quot;
       </Typography>
-      <Gap height="md" />
       <Button variant="outline" size="lg" onClick={closeModal}>
         Close
       </Button>