feat: trade table progress

AdaptiveConsulting · Nov 8, 2024 · 642a9e1 · 642a9e1
1 parent 41ed9a4
commit 642a9e1
Show file tree

Hide file tree

Showing 22 changed files with 166 additions and 111 deletions.
diff --git a/packages/client/src/client/App/Analytics/Analytics.tsx b/packages/client/src/client/App/Analytics/Analytics.tsx
@@ -16,7 +16,7 @@ const AnalyticsWrapper = styled(RegionWrapper)<{
       ? ` @media ${hideIfMatches} {
        display: none;
        } `
-      : ""}
+      : ""};
 `
 
 analytics$.subscribe()

diff --git a/packages/client/src/client/App/Analytics/AnalyticsCore.tsx b/packages/client/src/client/App/Analytics/AnalyticsCore.tsx
@@ -17,7 +17,7 @@ const analytics$ = merge(pnL$, profitAndLoss$, positions$)
 
 const SuspenseOnStaleData = createSuspenseOnStale(isAnalyticsDataStale$)
 
-const actions: TabBarActionConfig[] = []
+const actions: TabBarActionConfig = []
 
 if (supportsTearOut) {
   actions.push({

diff --git a/packages/client/src/client/App/Analytics/styled.tsx b/packages/client/src/client/App/Analytics/styled.tsx
@@ -3,9 +3,7 @@ import styled from "styled-components"
 import { transparentColor } from "./globals/variables"
 
 export const AnalyticsStyle = styled.div<{ inExternalWindow?: boolean }>`
-  border-radius: 0.25rem;
   color: ${({ theme }) => theme.core.textColor};
-  background-color: ${({ theme }) => theme.core.lightBackground};
   ${({ inExternalWindow }) =>
     inExternalWindow
       ? `@media (min-width: 640px) {

diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqsHeader.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqsHeader.tsx
@@ -26,7 +26,7 @@ export const CreditRfqsHeader = () => {
   const rfqState = useSelectedRfqsTab()
   const executedRfqIds = useExecutedRfqIds()
 
-  const actions: TabBarActionConfig[] = [
+  const actions: TabBarActionConfig = [
     {
       name: "clearRfqs",
       inner: (
@@ -37,7 +37,6 @@ export const CreditRfqsHeader = () => {
           {ClearRfqsIcon}
         </ClearRfqsButton>
       ),
-      size: "sm",
     },
   ]
 

diff --git a/packages/client/src/client/App/LiveRates/MainHeader/MainHeader.tsx b/packages/client/src/client/App/LiveRates/MainHeader/MainHeader.tsx
@@ -40,29 +40,26 @@ export const MainHeader = () => {
   const tileView = useSelectedTileView(getInitView())
 
   const options = [ALL_CURRENCIES, ...currencies]
-  const actions: TabBarActionConfig[] = [
+  const actions: TabBarActionConfig = [
     {
       name: "toggleTileView",
       inner: <ChartIcon />,
       active: tileView === TileView.Analytics,
       onClick: onToggleSelectedView,
-      size: "sm",
     },
   ]
 
   if (supportsTearOut) {
     actions.push({
       name: "tearOut",
       inner: <TearOutComponent section="tiles" />,
-      size: "sm",
     })
   }
 
   if (isLimitCheckerRunning) {
     actions.push({
       name: "limitChecker",
       inner: <LimitCheckerIndicator />,
-      size: "sm",
     })
   }
 

diff --git a/packages/client/src/client/App/LiveRates/Tiles.tsx b/packages/client/src/client/App/LiveRates/Tiles.tsx
@@ -17,7 +17,8 @@ const PanelItems = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
   grid-gap: ${({ theme }) => theme.newTheme.spacing.md};
-  padding-top: ${({ theme }) => theme.newTheme.spacing.lg};
+  padding: ${({ theme }) => theme.newTheme.spacing.lg};
+  padding-bottom: 0;
 `
 
 export const [useFilteredCurrencyPairs, filteredCurrencyPairs$] = bind(

diff --git a/packages/client/src/client/App/Trades/GridRegion/TableHeadCell.tsx b/packages/client/src/client/App/Trades/GridRegion/TableHeadCell.tsx
@@ -28,7 +28,7 @@ const TableHeadCell = styled.div<{
   display: flex;
   flex-direction: ${({ headerFirst }) => (headerFirst ? "row" : "row-reverse")};
   align-items: center;
-  padding-right: ${({ numeric }) => (numeric ? "1.5rem;" : null)};
+  padding-right: ${({ numeric }) => (numeric ? "1.3rem;" : null)};
 
   svg {
     width: 0.675rem;

diff --git a/packages/client/src/client/App/Trades/GridRegion/TradesGridInner.tsx b/packages/client/src/client/App/Trades/GridRegion/TradesGridInner.tsx
@@ -51,6 +51,7 @@ const InnerElementType = forwardRef<
         ref={ref}
         style={{
           ...style,
+
           minWidth: `${fields.length * 6}rem`,
         }}
       >
@@ -90,7 +91,7 @@ const OuterElementType = forwardRef<
       {...rest}
       style={{
         ...style,
-        overflowX: "scroll",
+        overflowX: "auto",
       }}
     >
       {children}

diff --git a/packages/client/src/client/App/Trades/GridRegion/styled.ts b/packages/client/src/client/App/Trades/GridRegion/styled.ts
@@ -14,8 +14,10 @@ const TableText = styled.div(
 )
 
 export const Table = styled(TableText)`
-  flex: 1;
+  height: 100%;
   width: 100%;
+  margin: 0;
+  padding-left: ${({ theme }) => theme.newTheme.spacing.md};
   .visually-hidden {
     display: none;
   }
@@ -31,7 +33,7 @@ export const TableHeadRow = styled.div`
     theme.newTheme.color["Colors/Background/bg-primary_alt"]};
   z-index: 1;
 
-  padding: 4px;
+  padding: ${({ theme }) => theme.newTheme.spacing.sm};
 `
 
 export const highlightBackgroundColor = css`
@@ -48,6 +50,7 @@ export const TableBodyRow = styled.div<{
     theme.newTheme.color["Colors/Background/bg-primary"]};
   border-bottom: 1px solid
     ${({ theme }) => theme.newTheme.color["Colors/Background/bg-tertiary"]};
+
   &:hover {
     background-color: ${({ theme }) =>
       theme.newTheme.color["Colors/Background/bg-secondary"]};
@@ -76,7 +79,9 @@ export const TableBodyStrikeThrough = styled.div<{
   position: absolute;
   top: 50%;
   left: 0;
-  border-bottom: 1px solid red;
+  border-bottom: 1px solid
+    ${({ theme }) =>
+      theme.newTheme.color["Component colors/Utility/Error/utility-error-700"]};
   width: 100%;
 `
 
@@ -85,25 +90,29 @@ export const StatusIndicator = styled.div<{
 }>`
   width: 21px;
   border-left: 2px solid
-    ${({ status, theme: { accents } }) => {
+    ${({ status, theme }) => {
       if (
         status === TradeStatus.Done ||
         status === ACCEPTED_QUOTE_STATE ||
         status === LimitCheckStatus.Success
       )
-        return accents.positive.base
+        return theme.newTheme.color[
+          "Component colors/Utility/Success/utility-success-700"
+        ]
       else if (
         status === TradeStatus.Rejected ||
         status === REJECTED_WITH_PRICE_QUOTE_STATE ||
         status === REJECTED_WITHOUT_PRICE_QUOTE_STATE ||
         status === LimitCheckStatus.Failure
       ) {
-        return accents.negative.base
+        return theme.newTheme.color[
+          "Component colors/Utility/Error/utility-error-700"
+        ]
       }
       return "inherit"
     }};
 `
 
 export const StatusIndicatorSpacer = styled.div`
-  width: 21px;
+  width: ${({ theme }) => theme.newTheme.spacing["lg"]};
 `
diff --git a/packages/client/src/client/App/Trades/TradesFooter.tsx b/packages/client/src/client/App/Trades/TradesFooter.tsx
@@ -8,21 +8,19 @@ import { Trade } from "@/services/trades"
 import { useColDef, useTrades$ } from "./Context"
 import { useTableTrades } from "./TradesState"
 
-const TradesFooterStyled = styled("div")`
-  height: 2rem;
-  padding: 0.5rem 0 0.5rem 0.75rem;
-  font-size: 0.625rem;
-  line-height: 1rem;
+const TradeFooterText = styled.div(
+  ({ theme }) => theme.newTheme.textStyles["Text xs/Regular"],
+)
+
+const TradesFooterStyled = styled(TradeFooterText)`
+  display: flex;
+  color: ${({ theme }) => theme.newTheme.color["Colors/Text/text-disabled"]};
+  height: 30px;
+  padding-left: ${({ theme }) => theme.newTheme.spacing.xl};
   display: flex;
   align-items: center;
-  color: ${({ theme }) => theme.core.textColor};
-  background-color: ${({ theme }) => theme.core.lightBackground};
-  border-radius: 0 0 0.25rem 0.25rem;
 `
 
-const TradesFooterText = styled.span`
-  opacity: 0.6;
-`
 const [useTotalRows] = bind<[Observable<Trade[]>], number>(
   (trades$: Observable<Trade[]>) => {
     return trades$.pipe(map((trades) => trades.length))
@@ -39,9 +37,9 @@ export const TradesFooter = () => {
 
   return (
     <TradesFooterStyled>
-      <TradesFooterText data-qa="blotter__blotter-status-text">
+      <div data-qa="blotter__blotter-status-text">
         Displaying rows {displayRows} of {totalRows}
-      </TradesFooterText>
+      </div>
     </TradesFooterStyled>
   )
 }
diff --git a/packages/client/src/client/App/Trades/TradesHeader/ExcelButton.tsx b/packages/client/src/client/App/Trades/TradesHeader/ExcelButton.tsx
@@ -1,48 +1,15 @@
 import styled from "styled-components"
 
+import { Import } from "@/client/components/icons/Import"
 import { Trade } from "@/services/trades"
 
 import { useColDef, useColFields, useTrades$ } from "../Context"
 import { ColDef, useTableTrades } from "../TradesState"
 
-const ExcelIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="25"
-    viewBox="0 0 16 25"
-    className="svg-size"
-  >
-    <g fill="none" fillRule="evenodd">
-      <g fill="#FFF" className="svg-fill">
-        <path d="M11.278 9.198c.334.256.4.732.15 1.07l-4.713 6.374a.745.745 0 0 1-1.052.148.772.772 0 0 1-.15-1.072l4.713-6.373a.745.745 0 0 1 1.052-.147z" />
-        <path d="M5.663 9.198a.772.772 0 0 0-.15 1.07l4.713 6.374a.745.745 0 0 0 1.052.148.772.772 0 0 0 .15-1.072L6.715 9.345a.745.745 0 0 0-1.052-.147z" />
-      </g>
-      <path
-        className="svg-stroke"
-        fillRule="nonzero"
-        stroke="#FFF"
-        strokeWidth="1.949"
-        d="M1.355 5.876a.585.585 0 0 0-.38.548v12.152c0 .244.151.463.38.548l12.882 4.803a.585.585 0 0 0 .789-.548V1.621a.585.585 0 0 0-.79-.548L1.356 5.876z"
-      />
-    </g>
-  </svg>
-)
-
 const Button = styled("button")`
-  opacity: 0.59;
-  height: 100%;
-  .svg-fill {
-    fill: ${({ theme }) => theme.core.textColor};
-  }
-  .svg-stroke {
-    stroke: ${({ theme }) => theme.core.textColor};
-  }
-
-  margin: 5px;
-
-  .svg-size {
-    transform: scale(0.7);
+  svg {
+    fill: ${({ theme }) =>
+      theme.newTheme.color["Colors/Text/text-quaternary (500)"]};
   }
 `
 
@@ -89,7 +56,7 @@ export const ExcelButton = () => {
       onClick={() => downloadCsv(trades, colDef, colFields)}
       aria-label="Export to CSV"
     >
-      <ExcelIcon />
+      <Import />
     </Button>
   )
 }
diff --git a/packages/client/src/client/App/Trades/TradesHeader/QuickFilter.tsx b/packages/client/src/client/App/Trades/TradesHeader/QuickFilter.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useRef, useState } from "react"
-import { FaFilter, FaTimes } from "react-icons/fa"
+import { FaTimes } from "react-icons/fa"
 import styled from "styled-components"
 
+import { FilterEdit } from "@/client/components/icons/FilterEdit"
+
 import { onQuickFilterInput } from "../TradesState"
 
 const QuickFilterStyle = styled("div")`
@@ -13,25 +15,23 @@ const QuickFilterStyle = styled("div")`
 `
 
 const QuickFilterInput = styled("input")`
-  opacity: 0.59;
-  border: none;
-  color: ${({ theme }) => theme.core.textColor};
-  box-shadow: 0 0.0625rem 0 ${({ theme }) => theme.core.textColor};
+  color: ${({ theme }) =>
+    theme.newTheme.color["Colors/Text/text-primary (900)"]};
   width: 100%;
-  font-size: 0.75rem;
   height: 1.25rem;
-  padding: 0 0.875rem 0 0.375rem;
+  padding: 0 ${({ theme }) => theme.newTheme.spacing.sm};
   outline: none;
   user-select: text;
+  border-bottom: 1px solid
+    ${({ theme }) =>
+      theme.newTheme.color["Colors/Text/text-brand-primary (900)"]};
+  opacity: 0.5;
 
   &:hover {
     opacity: 1;
-    box-shadow: 0 0.0625rem 0 ${({ theme }) => theme.accents.primary.lighter};
   }
 
   &:focus {
-    box-shadow: 0 0.0625rem 0 ${({ theme }) => theme.accents.primary.base};
-    color: ${({ theme }) => theme.core.textColor};
     opacity: 1;
   }
 
@@ -42,21 +42,24 @@ const QuickFilterInput = styled("input")`
 `
 
 const QuickFilterIcon = styled("div")`
-  width: 0.875rem;
-  margin: 0 0.25rem;
-  opacity: 0.59;
   cursor: pointer;
+
+  svg {
+    fill: ${({ theme }) =>
+      theme.newTheme.color["Colors/Text/text-quaternary (500)"]};
+  }
 `
 
 const QuickFilterClearIcon = styled("i")`
   width: 0.6875rem;
   position: absolute;
-  right: 0.75rem;
+  right: 0;
 
   i {
     opacity: 0.59;
     cursor: pointer;
-    color: ${({ theme }) => theme.core.textColor};
+    color: ${({ theme }) =>
+      theme.newTheme.color["Colors/Text/text-primary (900)"]};
   }
 `
 
@@ -74,7 +77,7 @@ export const QuickFilter = () => {
       aria-label="Search by text across all trade fields"
     >
       <QuickFilterIcon onClick={() => quickFilterInput.current?.focus()}>
-        <FaFilter aria-hidden="true" />
+        <FilterEdit />
       </QuickFilterIcon>
       <QuickFilterInput
         ref={quickFilterInput}

diff --git a/packages/client/src/client/App/Trades/TradesHeader/TradesHeader.tsx b/packages/client/src/client/App/Trades/TradesHeader/TradesHeader.tsx
@@ -18,11 +18,10 @@ export const TradesHeader = ({
 }) => {
   const items: string[] = [title]
 
-  const actions: TabBarActionConfig[] = [
+  const actions: TabBarActionConfig = [
     {
       name: "excel",
       inner: <ExcelButton />,
-      size: "sm",
     },
     {
       name: "filter",
@@ -40,7 +39,6 @@ export const TradesHeader = ({
     actions.push({
       name: "tearOut",
       inner: <TearOutComponent section={section} />,
-      size: "sm",
     })
   }