Merge pull request #2370 from AdaptiveConsulting/tile

Restyle Tiles

Author: SHolleworth

packages/client/e2e/fx-spot-tile.spec.ts

@@ -35,6 +35,9 @@ test.describe("Spot Tile", () => {
 
       await tilePage.locator("[data-testid='Sell-EURUSD']").click()
 
+      // Wait for execution delay to end
+      await expect(tilePage.locator("[data-testid='trade-id']")).toBeVisible()
+
       const tradeId = await tilePage
         .locator("[data-testid='trade-id']")
         .innerText()
@@ -52,7 +55,7 @@ test.describe("Spot Tile", () => {
 
       const greenConfirmation = tilePage
         .locator("div[role='dialog']")
-        .getByText(/You bought/)
+        .getByText(/You Bought/)
       await expect(greenConfirmation).toBeVisible()
     })
   })
@@ -165,7 +168,7 @@ test.describe("Spot Tile", () => {
       const tileState2 = await tilePage.evaluate(() =>
         window.localStorage.getItem("selectedView"),
       )
-      expect(tileState2).toBe("Analytics")
+      expect(tileState2).toBe("Chart")
       await expect(
         tilePage.locator("[data-testid='tile-graph']").nth(0),
       ).toBeVisible()

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

@@ -66,16 +66,6 @@ export const QuotesContainer = styled.div`
     theme.color["Colors/Background/bg-primary"]};
 `
 
-export const NoRfqsWrapper = styled.div`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`
-
-// Card Footer
-
 export const CardFooterWrapper = styled(Stack)`
   background: ${({ theme }) =>
     theme.color["Colors/Background/bg-secondary_subtle"]};
@@ -86,16 +76,6 @@ export const CardFooterWrapper = styled(Stack)`
   }
 `
 
-export const AcceptedCardState = styled.div`
-  flex: 1;
-  display: flex;
-  align-items: center;
-
-  svg {
-    margin-right: ${({ theme }) => theme.spacing.md};
-  }
-`
-
 export const FooterButton = styled.button`
   background-color: ${({ theme }) =>
     theme.color["Colors/Background/bg-tertiary"]};

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

@@ -3,7 +3,7 @@ import { PropsWithChildren } from "react"
 import { Typography } from "@/client/components/Typography"
 import { EMAIL, WEBSITE } from "@/client/constants"
 
-import { ContactUsContentResolver, Link } from "./styled"
+import { ContactUsContentResolver } from "./styled"
 
 const Row = ({ children }: PropsWithChildren) => (
   <>
@@ -23,28 +23,29 @@ export const ContactUs = () => (
     <Row>530 7th Avenue, New York</Row>
     <Row>+1 929 205 4900</Row>
 
-    <Link
+    <Typography
+      as="a"
+      href={`mailto:${EMAIL}`}
       variant="Text sm/Regular underlined"
       color="Component colors/Utility/Blue dark/utility-blue-dark-500"
-      onClick={() => {
-        window.open(`mailto:${EMAIL}`)
-      }}
       paddingBottom="xs"
     >
       {EMAIL}
-    </Link>
+    </Typography>
 
-    <Link
+    <Typography
+      as="a"
+      href={WEBSITE}
+      target="_blank"
       variant="Text sm/Regular underlined"
       color="Component colors/Utility/Blue dark/utility-blue-dark-500"
       onClick={() => {
         window.gtag("event", "outbound_click", {
           destination: WEBSITE,
         })
-        window.open(WEBSITE)
       }}
     >
       www.weareadaptive.com
-    </Link>
+    </Typography>
   </ContactUsContentResolver>
 )

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

@@ -3,47 +3,40 @@ import { PropsWithChildren } from "react"
 import { Typography } from "@/client/components/Typography"
 import { SOCIAL_ADDRESSES, SocialPlatform } from "@/client/constants"
 
-import { ContactUsContentResolver, Link } from "./styled"
+import { ContactUsContentResolver } from "./styled"
 
 const Row = ({
   children,
   label,
-  onClick,
-}: PropsWithChildren<{ onClick: () => void; label: string }>) => (
+}: PropsWithChildren<{ label: SocialPlatform }>) => (
   <>
     <Typography variant="Text md/Regular">{label}</Typography>
-    <Link
+    <Typography
+      as="a"
+      href={SOCIAL_ADDRESSES[label]}
+      target="_blank"
       variant="Text sm/Regular underlined"
       color="Component colors/Utility/Blue dark/utility-blue-dark-500"
-      onClick={onClick}
       paddingBottom="md"
+      onClick={() => {
+        window.gtag("event", "outbound_click", {
+          destination: SOCIAL_ADDRESSES[label],
+        })
+      }}
     >
       {children}
-    </Link>
+    </Typography>
   </>
 )
 export const FollowUs = () => {
-  const onClick = (social: SocialPlatform) => () => {
-    window.gtag("event", "outbound_click", {
-      destination: SOCIAL_ADDRESSES[social],
-    })
-    window.open(SOCIAL_ADDRESSES[social])
-  }
-
   return (
     <ContactUsContentResolver>
-      <Typography variant="Text lg/Regular" paddingBottom="sm">
-        Follow us on
-      </Typography>
-      <Row label="LinkedIn" onClick={onClick("LinkedIn")}>
+      <Typography variant="Text lg/Regular">Follow us on</Typography>
+      <Row label="LinkedIn">
         linkedin.com/company/{<br />}adaptive-consulting-ltd/
       </Row>
-      <Row label="Twitter" onClick={onClick("Twitter")}>
-        @WeAreAdaptive
-      </Row>
-      <Row label="Github" onClick={onClick("Github")}>
-        github.com/adaptiveConsulting
-      </Row>
+      <Row label="Twitter">@WeAreAdaptive</Row>
+      <Row label="Github">github.com/adaptiveConsulting</Row>
     </ContactUsContentResolver>
   )
 }

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

@@ -1,7 +1,6 @@
 import styled from "styled-components"
 
 import Popup from "@/client/components/Popup"
-import { Typography } from "@/client/components/Typography"
 
 const buttonHeight = "2rem"
 
@@ -19,8 +18,4 @@ const ContactUsContent = styled.div`
 export const LogoWrapper = styled.div`
   padding: 1rem 0.5rem 0 0.5rem;
 `
-
-export const Link = styled(Typography)`
-  cursor: pointer;
-`
 export const ContactUsContentResolver = ContactUsContent

packages/client/src/client/App/LiveRates/LiveRatesHeader/LiveRatesHeader.tsx

@@ -44,7 +44,7 @@ export const LiveRatesHeader = () => {
     {
       name: "toggleTileView",
       inner: <ChartIcon />,
-      active: tileView === TileView.Analytics,
+      active: tileView === TileView.Chart,
       onClick: onToggleSelectedView,
     },
   ]

packages/client/src/client/App/LiveRates/LiveRatesHeader/__tests__/MainHeader.test.tsx

@@ -101,23 +101,23 @@ describe("MainHeader", () => {
     await renderComponent()
 
     expect(screen.getByTestId("tile-EURUSD").textContent).toBe(
-      "IsAnalytics: true",
+      "ShowingChart: true",
     )
 
     act(() => {
       fireEvent.click(screen.getByTestId("action-toggleTileView"))
     })
 
     expect(screen.getByTestId("tile-EURUSD").textContent).toBe(
-      "IsAnalytics: false",
+      "ShowingChart: false",
     )
 
     act(() => {
       fireEvent.click(screen.getByTestId("action-toggleTileView"))
     })
 
     expect(screen.getByTestId("tile-EURUSD").textContent).toBe(
-      "IsAnalytics: true",
+      "ShowingChart: true",
     )
   })
 })

packages/client/src/client/App/LiveRates/Tile/ExecutionResponse/Pending.tsx

@@ -5,12 +5,6 @@ import { CenteringContainer } from "@/client/components/CenteringContainer"
 import { OverlayDiv } from "@/client/components/OverlayDiv"
 import { Typography } from "@/client/components/Typography"
 
-const PendingContainer = styled(OverlayDiv)`
-  // Solution to stack flex child ontop of another, height is not respected in safari
-  // margin-left: -100%;
-  position: absolute;
-`
-
 const PendingPill = styled("div")`
   display: flex;
   gap: ${({ theme }) => theme.spacing.sm};
@@ -22,7 +16,7 @@ const PendingPill = styled("div")`
 
 export const Pending = () => {
   return (
-    <PendingContainer>
+    <OverlayDiv>
       <CenteringContainer>
         <PendingPill>
           <AdaptiveLoader
@@ -35,6 +29,6 @@ export const Pending = () => {
           <Typography variant="Text md/Bold">Executing</Typography>
         </PendingPill>
       </CenteringContainer>
-    </PendingContainer>
+    </OverlayDiv>
   )
 }