changed primary color scheme and color of graphs

VizerISD · Feb 18, 2023 · 8e69301 · 8e69301
1 parent 3f91f4c
commit 8e69301
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 24 deletions.
diff --git 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 (
     <div>
       <svg width={width} height={height}>
-        <LinearGradient id="stroke" from="#ff00a5" to="#999999" />
+        <LinearGradient id="stroke" from="#58dfff" to="#ffffff" />
         <rect fill="url('#stroke')" width="100%" height="100%" rx={14} />
         <Group top={verticalMargin / 2}>
           {[...ids.keys()].map((d) => {
@@ -87,15 +87,15 @@ 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}`)
                   }}
                 />
                 <text
                   x={xScale(address) + barWidth / 2}
                   y={yMax - barHeight}
-                  fill="white"
+                  fill="#3499d3"
                   fontSize={12}
                   dx={'-2'}
                   dy={'-.33em'}
@@ -111,17 +111,17 @@ export default function IndividualUseVisualization({
             top={-10}
             scale={yScale}
             numTicks={5}
-            stroke="#ffffff"
-            tickStroke="#ffffff"
+            stroke="#02346d"
+            tickStroke="#02346d"
             tickLabelProps={() => axisLeftTickLabelProps}
             label="# of Transactions"
           />
           <AxisBottom
             top={285}
             scale={xScale}
             numTicks={20}
-            stroke="#ffffff"
-            tickStroke="#ffffff"
+            stroke="#02346d"
+            tickStroke="#02346d"
             label="Wallet Addresses"
           />
         </Group>

diff --git 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<TimelineProps, Order>(
                   r={parseFloat(order.amount) * 5}
                   cx={xBrushScale(getDate(order))}
                   cy={yBrushScale(getY(order))}
-                  stroke="rgba(33,33,33,0.5)"
+                  stroke="#297aa8"
+                  fill="#3499d3"
                 />
               </Group>
             )
@@ -178,8 +179,8 @@ export default withTooltip<TimelineProps, Order>(
             top={height / 4 + 30}
             scale={xBrushScale}
             numTicks={5}
-            stroke="#ffffff"
-            tickStroke="#ffffff"
+            stroke="#02346d"
+            tickStroke="#02346d"
             tickLabelProps={() => axisBottomTickLabelProps}
           />
           <Group top={70}>
@@ -205,7 +206,7 @@ export default withTooltip<TimelineProps, Order>(
               onClick={() => setFilteredOrders(orders)}
               selectedBoxStyle={{
                 fill: `url(#${'brush_pattern'})`,
-                stroke: 'black'
+                stroke: 'white'
               }}
               useWindowMoveEvents
               renderBrushHandle={(props) => <BrushHandle {...props} />}
@@ -219,8 +220,8 @@ export default withTooltip<TimelineProps, Order>(
                   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<TimelineProps, Order>(
             top={(4 * height) / 7 + 30}
             scale={xScale}
             numTicks={5}
-            stroke="#ffffff"
-            tickStroke="#ffffff"
+            stroke="#02346d"
+            tickStroke="#02346d"
             tickLabelProps={() => axisBottomTickLabelProps}
           />
         </svg>

diff --git 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 */