Added soft borders to both visualizations

VizerISD · Mar 2, 2023 · 0ca1e64 · 0ca1e64
1 parent 9bf2006
commit 0ca1e64
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/src/components/Asset/AssetContent/IndividualUseVisualization.tsx b/src/components/Asset/AssetContent/IndividualUseVisualization.tsx
@@ -81,8 +81,15 @@ export default function IndividualUseVisualization({
   return (
     <div>
       <svg width={width} height={height}>
-        <LinearGradient id="stroke" from="#58dfff" to="#ffffff" />
-        <rect fill="url('#stroke')" width="100%" height="100%" rx={14} />
+        <LinearGradient id="stroke" from="#e6faff" to="#ffffff" />
+        <rect
+          fill="url('#stroke')"
+          strokeWidth={1}
+          stroke="#e2e2e2"
+          width="100%"
+          height="100%"
+          rx={4}
+        />
         <Group top={verticalMargin / 2}>
           {[...ids.keys()].slice(0, maxBarAmount).map((d) => {
             const address = d

diff --git a/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx b/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx
@@ -158,8 +158,15 @@ export default withTooltip<TimelineProps, Order>(
     return (
       <div>
         <svg width={width} height={height}>
-          <LinearGradient id="stroke" from="#ff00a5" to="#999999" />
-          <rect fill="url('#stroke')" width="100%" height="100%" rx={14} />
+          <LinearGradient id="stroke" from="#e6faff" to="#ffffff" />
+          <rect
+            fill="url('#stroke')"
+            strokeWidth={1}
+            stroke="#e2e2e2"
+            width="100%"
+            height="100%"
+            rx={4}
+          />
           {initialOrders.map((order: Order, i) => {
             return (
               <Group top={height / 4} key={`filtered-dot-${i}`}>

diff --git a/src/components/Asset/AssetContent/index.tsx b/src/components/Asset/AssetContent/index.tsx
@@ -50,13 +50,11 @@ export default function AssetContent({
 
         <div className={styles.transactionHistory}>
           <h3>Transaction History Visualization</h3>
-          <div>
-            <TransactionHistoryVisualization
-              width={1125}
-              height={400}
-              events={true}
-            />
-          </div>
+          <TransactionHistoryVisualization
+            width={1125}
+            height={400}
+            events={true}
+          />
         </div>
 
         <div>