diff --git a/src/components/Asset/AssetContent/IndividualUseVisualization.tsx b/src/components/Asset/AssetContent/IndividualUseVisualization.tsx index 9eb7e3b50a..4be22c68e1 100644 --- a/src/components/Asset/AssetContent/IndividualUseVisualization.tsx +++ b/src/components/Asset/AssetContent/IndividualUseVisualization.tsx @@ -33,7 +33,7 @@ const axisLeftTickLabelProps = { fontFamily: 'Arial', fontSize: 10, textAnchor: 'end' as const, - fill: '#ffffff' + fill: '#02346d' } export default function IndividualUseVisualization({ @@ -70,7 +70,7 @@ export default function IndividualUseVisualization({ return (
- + {[...ids.keys()].map((d) => { @@ -87,7 +87,7 @@ export default function IndividualUseVisualization({ y={barY} width={barWidth} height={barHeight} - fill="rgba(180, 40, 180, 1)" + fill="#3499d3" onClick={() => { if (events) alert(`Wallet Address: ${address}`) }} @@ -95,7 +95,7 @@ export default function IndividualUseVisualization({ axisLeftTickLabelProps} label="# of Transactions" /> @@ -120,8 +120,8 @@ export default function IndividualUseVisualization({ top={285} scale={xScale} numTicks={20} - stroke="#ffffff" - tickStroke="#ffffff" + stroke="#02346d" + tickStroke="#02346d" label="Wallet Addresses" /> diff --git a/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx b/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx index 118a87448a..5bce042640 100644 --- a/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx +++ b/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx @@ -27,12 +27,12 @@ const tooltipStyles = { } const axisBottomTickLabelProps = { - dx: '-0.25em', + dx: '1.5em', dy: '0.25em', fontFamily: 'Arial', - fontSize: 10, + fontSize: 15, textAnchor: 'end' as const, - fill: '#ffffff' + fill: '#02346d' } export type TimelineProps = { @@ -168,7 +168,8 @@ export default withTooltip( r={parseFloat(order.amount) * 5} cx={xBrushScale(getDate(order))} cy={yBrushScale(getY(order))} - stroke="rgba(33,33,33,0.5)" + stroke="#297aa8" + fill="#3499d3" /> ) @@ -178,8 +179,8 @@ export default withTooltip( top={height / 4 + 30} scale={xBrushScale} numTicks={5} - stroke="#ffffff" - tickStroke="#ffffff" + stroke="#02346d" + tickStroke="#02346d" tickLabelProps={() => axisBottomTickLabelProps} /> @@ -205,7 +206,7 @@ export default withTooltip( onClick={() => setFilteredOrders(orders)} selectedBoxStyle={{ fill: `url(#${'brush_pattern'})`, - stroke: 'black' + stroke: 'white' }} useWindowMoveEvents renderBrushHandle={(props) => } @@ -219,8 +220,8 @@ export default withTooltip( r={parseFloat(order.amount) * 5} cx={xScale(getDate(order))} cy={yScale(getY(order))} - stroke="rgba(33,33,33,0.5)" - fill={tooltipData === order ? 'white' : '#000000'} + stroke="#297aa8" + fill={tooltipData === order ? 'white' : '#3499d3'} onMouseOver={() => { const top = height - 110 const left = xScale(getDate(order)) @@ -240,8 +241,8 @@ export default withTooltip( top={(4 * height) / 7 + 30} scale={xScale} numTicks={5} - stroke="#ffffff" - tickStroke="#ffffff" + stroke="#02346d" + tickStroke="#02346d" tickLabelProps={() => axisBottomTickLabelProps} /> diff --git a/src/stylesGlobal/_variables.css b/src/stylesGlobal/_variables.css index 3d67114cf0..8e5f73b9ef 100644 --- a/src/stylesGlobal/_variables.css +++ b/src/stylesGlobal/_variables.css @@ -1,9 +1,9 @@ :root { --brand-white: #ffffff; --brand-black: #141414; - --brand-pink: #ff4092; - --brand-purple: #7b1173; - --brand-violet: #e000cf; + --brand-pink: #58dfff; + --brand-purple: #02346d; + --brand-violet: #3499d3; --brand-grey-darker: #201f1f; --brand-grey-dark: #303030; @@ -12,14 +12,14 @@ --brand-grey-lighter: #e2e2e2; --brand-grey-dimmed: #f7f7f7; - --brand-gradient: linear-gradient(to right bottom, #7b1173, #ff4092); + --brand-gradient: linear-gradient(to right bottom, #02346d, #58dfff); --brand-alert-green: #5fb359; --brand-alert-red: #d80606; --brand-alert-orange: #b35f36; --brand-alert-yellow: #eac146; - --color-primary: #ff4092; + --color-primary: #58dfff; --color-secondary: #8b98a9; /* Only use these vars for most color referencing for easy light/dark mode */