From 642a9e11a4194a8eb2b8f948f75170a0141e0c4c Mon Sep 17 00:00:00 2001 From: Sam Holleworth Date: Fri, 8 Nov 2024 16:33:19 +0000 Subject: [PATCH] feat: trade table progress --- .../src/client/App/Analytics/Analytics.tsx | 2 +- .../client/App/Analytics/AnalyticsCore.tsx | 2 +- .../src/client/App/Analytics/styled.tsx | 2 - .../Credit/CreditRfqs/CreditRfqsHeader.tsx | 3 +- .../App/LiveRates/MainHeader/MainHeader.tsx | 5 +-- .../client/src/client/App/LiveRates/Tiles.tsx | 3 +- .../App/Trades/GridRegion/TableHeadCell.tsx | 2 +- .../App/Trades/GridRegion/TradesGridInner.tsx | 3 +- .../client/App/Trades/GridRegion/styled.ts | 23 +++++++--- .../src/client/App/Trades/TradesFooter.tsx | 24 +++++------ .../App/Trades/TradesHeader/ExcelButton.tsx | 43 +++---------------- .../App/Trades/TradesHeader/QuickFilter.tsx | 35 ++++++++------- .../App/Trades/TradesHeader/TradesHeader.tsx | 4 +- packages/client/src/client/Web/MainLayout.tsx | 11 +++-- .../client/components/Region/RegionLayout.tsx | 1 - .../components/Region/RegionWrapper.tsx | 3 +- .../client/src/client/components/Resizer.tsx | 14 ++---- .../client/components/TabBar/TabBar.styled.ts | 4 +- .../src/client/components/TabBar/TabBar.tsx | 11 +++-- .../src/client/components/icons/FilterAdd.tsx | 27 ++++++++++++ .../client/components/icons/FilterEdit.tsx | 27 ++++++++++++ .../src/client/components/icons/Import.tsx | 28 ++++++++++++ 22 files changed, 166 insertions(+), 111 deletions(-) create mode 100644 packages/client/src/client/components/icons/FilterAdd.tsx create mode 100644 packages/client/src/client/components/icons/FilterEdit.tsx create mode 100644 packages/client/src/client/components/icons/Import.tsx diff --git a/packages/client/src/client/App/Analytics/Analytics.tsx b/packages/client/src/client/App/Analytics/Analytics.tsx index b19412ad33..7242f938f5 100644 --- 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 index 8cba4ac8ac..a52ece3694 100644 --- 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 index 453a63e474..94768fc38d 100644 --- 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 index 6b324ae2e4..540fd8d966 100644 --- 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} ), - size: "sm", }, ] diff --git a/packages/client/src/client/App/LiveRates/MainHeader/MainHeader.tsx b/packages/client/src/client/App/LiveRates/MainHeader/MainHeader.tsx index 62d9c7e587..76dfbab9f9 100644 --- a/packages/client/src/client/App/LiveRates/MainHeader/MainHeader.tsx +++ b/packages/client/src/client/App/LiveRates/MainHeader/MainHeader.tsx @@ -40,13 +40,12 @@ export const MainHeader = () => { const tileView = useSelectedTileView(getInitView()) const options = [ALL_CURRENCIES, ...currencies] - const actions: TabBarActionConfig[] = [ + const actions: TabBarActionConfig = [ { name: "toggleTileView", inner: , active: tileView === TileView.Analytics, onClick: onToggleSelectedView, - size: "sm", }, ] @@ -54,7 +53,6 @@ export const MainHeader = () => { actions.push({ name: "tearOut", inner: , - size: "sm", }) } @@ -62,7 +60,6 @@ export const MainHeader = () => { actions.push({ name: "limitChecker", inner: , - size: "sm", }) } diff --git a/packages/client/src/client/App/LiveRates/Tiles.tsx b/packages/client/src/client/App/LiveRates/Tiles.tsx index 7c865d2819..641c695f2f 100644 --- 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 index 3d28dc9903..1777f5ead8 100644 --- 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 index 7532ce85a0..476cf4cae9 100644 --- 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 index 274f12882c..d457cd4f16 100644 --- 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 index 10ecceb6fc..c9406d7466 100644 --- 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], number>( (trades$: Observable) => { return trades$.pipe(map((trades) => trades.length)) @@ -39,9 +37,9 @@ export const TradesFooter = () => { return ( - +
Displaying rows {displayRows} of {totalRows} - +
) } diff --git a/packages/client/src/client/App/Trades/TradesHeader/ExcelButton.tsx b/packages/client/src/client/App/Trades/TradesHeader/ExcelButton.tsx index d793bf9d80..33f305188e 100644 --- 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 = () => ( - - - - - - - - - -) - 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" > - + ) } diff --git a/packages/client/src/client/App/Trades/TradesHeader/QuickFilter.tsx b/packages/client/src/client/App/Trades/TradesHeader/QuickFilter.tsx index 0e0a97a575..18977411b7 100644 --- 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" > quickFilterInput.current?.focus()}> - { const items: string[] = [title] - const actions: TabBarActionConfig[] = [ + const actions: TabBarActionConfig = [ { name: "excel", inner: , - size: "sm", }, { name: "filter", @@ -40,7 +39,6 @@ export const TradesHeader = ({ actions.push({ name: "tearOut", inner: , - size: "sm", }) } diff --git a/packages/client/src/client/Web/MainLayout.tsx b/packages/client/src/client/Web/MainLayout.tsx index 1f43d5f969..27fb212aff 100644 --- a/packages/client/src/client/Web/MainLayout.tsx +++ b/packages/client/src/client/Web/MainLayout.tsx @@ -5,8 +5,9 @@ import { Footer } from "@/client/App/Footer" import Header from "@/client/App/Header" const Wrapper = styled("div")` + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-primary"]}; width: 100%; - background-color: ${({ theme }) => theme.core.darkBackground}; overflow: hidden; margin: 0 auto; display: flex; @@ -23,8 +24,12 @@ const AppLayoutRoot = styled.div` display: grid; grid-template-rows: auto 1fr auto; - background-color: ${({ theme }) => theme.core.darkBackground}; - color: ${({ theme }) => theme.core.textColor}; + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-primary"]}; + color: ${({ theme }) => + theme.newTheme.color["Colors/Text/text-primary (900)"]}; + border: ${({ theme }) => + `${theme.newTheme.spacing.sm} ${theme.newTheme.color["Colors/Background/bg-primary"]} solid`}; ` const MainWrapper = styled.div` display: flex; diff --git a/packages/client/src/client/components/Region/RegionLayout.tsx b/packages/client/src/client/components/Region/RegionLayout.tsx index 5e3a9c5767..eb06f17669 100644 --- a/packages/client/src/client/components/Region/RegionLayout.tsx +++ b/packages/client/src/client/components/Region/RegionLayout.tsx @@ -13,7 +13,6 @@ const BodyWrapper = styled.div` flex: 1; display: flex; flex-direction: column; - padding: 0 ${({ theme }) => theme.newTheme.spacing.lg}; ` export interface RegionLayoutProps { diff --git a/packages/client/src/client/components/Region/RegionWrapper.tsx b/packages/client/src/client/components/Region/RegionWrapper.tsx index e655398a10..b2f2273faa 100644 --- a/packages/client/src/client/components/Region/RegionWrapper.tsx +++ b/packages/client/src/client/components/Region/RegionWrapper.tsx @@ -6,7 +6,8 @@ import { WithChildren } from "@/client/utils/utilityTypes" const Background = styled.div` height: 100%; user-select: none; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; background: ${({ theme }) => theme.newTheme.color["Colors/Background/bg-primary_alt"]}; ` diff --git a/packages/client/src/client/components/Resizer.tsx b/packages/client/src/client/components/Resizer.tsx index a6d9900a3e..71ee18b9b8 100644 --- a/packages/client/src/client/components/Resizer.tsx +++ b/packages/client/src/client/components/Resizer.tsx @@ -20,21 +20,15 @@ const ResizableContent = styled.div` const Bar = styled.div<{ show?: boolean }>` display: ${({ show }) => (show ? "block" : "none")}; - background-color: ${({ theme }) => theme.core.textColor}; - box-shadow: - 0 -0.125rem 0 0 ${({ theme }) => theme.core.textColor}, - 0 0.125rem 0 0 ${({ theme }) => theme.core.textColor}; + background-color: ${({ theme }) => + theme.newTheme.color["Colors/Background/bg-primary"]}; + cursor: row-resize; - opacity: 0.1; z-index: 1; - height: 0.25rem; + height: ${({ theme }) => theme.newTheme.spacing.sm}; width: 100%; &:hover { - box-shadow: - 0 -0.125rem 0 0 ${({ theme }) => theme.core.textColor}, - 0 0.125rem 0 0 ${({ theme }) => theme.core.textColor}; - opacity: 0.3; transition: all 200ms ease-in-out; } diff --git a/packages/client/src/client/components/TabBar/TabBar.styled.ts b/packages/client/src/client/components/TabBar/TabBar.styled.ts index f20486ba5e..b57a15361a 100644 --- a/packages/client/src/client/components/TabBar/TabBar.styled.ts +++ b/packages/client/src/client/components/TabBar/TabBar.styled.ts @@ -31,7 +31,7 @@ const TabText = styled.li(({ theme }) => ({ ...theme.newTheme.textStyles["Text md/Semibold"], })) -export const Tab = styled(TabText)<{ active: boolean }>` +export const Tab = styled(TabText)<{ active: boolean; isStatic?: boolean }>` height: 100%; width: ${({ theme }) => theme.newTheme.spacing["9xl"]}; display: flex; @@ -49,7 +49,7 @@ export const Tab = styled(TabText)<{ active: boolean }>` active ? theme.newTheme.color["Colors/Background/bg-primary_alt"] : "none"}; &:hover { - cursor: pointer; + cursor: ${({ isStatic }) => (isStatic ? undefined : "pointer")}; } ` diff --git a/packages/client/src/client/components/TabBar/TabBar.tsx b/packages/client/src/client/components/TabBar/TabBar.tsx index 4874d0dd2e..2403f96901 100644 --- a/packages/client/src/client/components/TabBar/TabBar.tsx +++ b/packages/client/src/client/components/TabBar/TabBar.tsx @@ -8,19 +8,21 @@ import { Tab, } from "./TabBar.styled" -export interface TabBarActionConfig { +interface TabBarActionConfigItem { name: string inner: JSX.Element active?: boolean - size: "sm" | "lg" + size?: "sm" | "lg" onClick?: () => void } +export type TabBarActionConfig = TabBarActionConfigItem[] + interface TabBarProps { items: T[] activeItem: T handleItemOnClick?: (item: T) => void - actions?: TabBarActionConfig[] + actions?: TabBarActionConfig } export const TabBar = ({ @@ -38,6 +40,7 @@ export const TabBar = ({ key={item} onClick={() => handleItemOnClick?.(item)} data-testid={`tabItem-${item}`} + isStatic={items.length < 2} > {item} @@ -50,7 +53,7 @@ export const TabBar = ({ key={name} active={!!active} onClick={onClick} - size={size} + size={size || "sm"} data-testid={`action-${name}`} > {inner} diff --git a/packages/client/src/client/components/icons/FilterAdd.tsx b/packages/client/src/client/components/icons/FilterAdd.tsx new file mode 100644 index 0000000000..53636b1e36 --- /dev/null +++ b/packages/client/src/client/components/icons/FilterAdd.tsx @@ -0,0 +1,27 @@ +import { SVGAttributes } from "react" + +export const FilterAdd = ({ width, height, fill }: SVGAttributes) => ( + + + + + + +) diff --git a/packages/client/src/client/components/icons/FilterEdit.tsx b/packages/client/src/client/components/icons/FilterEdit.tsx new file mode 100644 index 0000000000..9bb4f8f52c --- /dev/null +++ b/packages/client/src/client/components/icons/FilterEdit.tsx @@ -0,0 +1,27 @@ +import { SVGAttributes } from "react" + +export const FilterEdit = ({ + width = 16, + height = 16, + fill, +}: SVGAttributes) => ( + + + + + +) diff --git a/packages/client/src/client/components/icons/Import.tsx b/packages/client/src/client/components/icons/Import.tsx new file mode 100644 index 0000000000..e6c927d447 --- /dev/null +++ b/packages/client/src/client/components/icons/Import.tsx @@ -0,0 +1,28 @@ +import { SVGAttributes } from "react" + +export const Import = ({ + height = 18, + width = 18, + fill, +}: SVGAttributes) => ( + + + + + +)