From 4f66b32769c7956edc408c276dcf06d7e2a38924 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@resider.pl>
Date: Tue, 26 Sep 2023 14:27:54 +0200
Subject: [PATCH 1/3] feat: Chart UI improvements

---
 src/lib/chart/HudRow.svelte               |  2 +-
 src/lib/chart/ReserveInterestChart.svelte | 11 ++++++-----
 src/lib/chart/chart.css                   |  4 +++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/lib/chart/HudRow.svelte b/src/lib/chart/HudRow.svelte
index 8cb68990f..dd7701eae 100644
--- a/src/lib/chart/HudRow.svelte
+++ b/src/lib/chart/HudRow.svelte
@@ -21,7 +21,7 @@ Use in conjunction with HudMetric to display chart HUD (heads-up-display) data.
 	.hud-row {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--space-ss);
+		gap: var(--space-sm);
 		font: var(--hud-font, var(--f-ui-xs-roman));
 		letter-spacing: var(--hud-letter-spacing, var(--f-ui-xs-spacing, normal));
 		padding-block: var(--space-xxxs);
diff --git a/src/lib/chart/ReserveInterestChart.svelte b/src/lib/chart/ReserveInterestChart.svelte
index 82f2fecc7..12719fd96 100644
--- a/src/lib/chart/ReserveInterestChart.svelte
+++ b/src/lib/chart/ReserveInterestChart.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" context="module">
 	const rateTypes = {
-		supply_apr: { label: 'Supply APR', color: 'slateblue' },
-		stable_borrow_apr: { label: 'Stable Borrow APR', color: 'darkorange' },
+		supply_apr: { label: 'Supply APR', color: 'deeppink' },
+		stable_borrow_apr: { label: 'Stable Borrow APR', color: 'aqua' },
 		variable_borrow_apr: { label: 'Variable Borrow APR', color: 'gray' }
 	} as const;
 
@@ -118,9 +118,10 @@
 
 <style lang="postcss">
 	.reserve-interest-rate-hud {
-		background: hsla(var(--hsl-box), var(--a-box-a));
-		display: inline-block;
-		padding: var(--space-xs) var(--space-sl);
+		background: hsla(var(--hsla-box-3));
+		display: inline-grid;
+		gap: var(--space-ss);
+		padding: var(--space-md);
 
 		h3 {
 			margin: 0;
diff --git a/src/lib/chart/chart.css b/src/lib/chart/chart.css
index d81b477c3..f52d6357c 100644
--- a/src/lib/chart/chart.css
+++ b/src/lib/chart/chart.css
@@ -38,7 +38,7 @@
 .stx_xaxis,
 .stx-float-date,
 .stx-float-price {
-	font: var(--f-ui-xs-roman);
+	font: var(--f-ui-sm-medium);
 	letter-spacing: var(--f-ui-xs-spacing, normal);
 }
 
@@ -58,8 +58,10 @@
 }
 
 .stx-float-date {
+	border-radius: var(--radius-xs);
 	width: auto;
 	min-width: 5rem;
+	padding: var(--space-sm);
 }
 
 .stx-panel-title {

From df158def213f152050c187ab4f0224fc3f7f3a5c Mon Sep 17 00:00:00 2001
From: Ken Kunz <kennethkunz@gmail.com>
Date: Tue, 26 Sep 2023 14:08:32 -0500
Subject: [PATCH 2/3] revert chart colors (aqua lacks contrast on light-mode)

---
 src/lib/chart/ReserveInterestChart.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/chart/ReserveInterestChart.svelte b/src/lib/chart/ReserveInterestChart.svelte
index 12719fd96..a8d6cd40a 100644
--- a/src/lib/chart/ReserveInterestChart.svelte
+++ b/src/lib/chart/ReserveInterestChart.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" context="module">
 	const rateTypes = {
-		supply_apr: { label: 'Supply APR', color: 'deeppink' },
-		stable_borrow_apr: { label: 'Stable Borrow APR', color: 'aqua' },
+		supply_apr: { label: 'Supply APR', color: 'mediumslateblue' },
+		stable_borrow_apr: { label: 'Stable Borrow APR', color: 'darkorange' },
 		variable_borrow_apr: { label: 'Variable Borrow APR', color: 'gray' }
 	} as const;
 

From 4fc4e39cf0dd8ba2bab3037a39845786b3ff655e Mon Sep 17 00:00:00 2001
From: Ken Kunz <kennethkunz@gmail.com>
Date: Tue, 26 Sep 2023 14:09:18 -0500
Subject: [PATCH 3/3] use consistent HUD style on pair candle chart

---
 src/lib/chart/PairCandleChart.svelte | 29 ++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/lib/chart/PairCandleChart.svelte b/src/lib/chart/PairCandleChart.svelte
index caf833581..5e2c5401c 100644
--- a/src/lib/chart/PairCandleChart.svelte
+++ b/src/lib/chart/PairCandleChart.svelte
@@ -104,16 +104,18 @@ Display trading pair candles (ohlc+v) charts, with attached quoteFeed for chart
 		{@const priceChangePct = priceChangeAmt / cursor.data.Open}
 		{@const direction = Math.sign(priceChangeAmt)}
 
-		<HudRow>
-			<HudMetric label="O" value={formatForHud(cursor.data.Open)} {direction} />
-			<HudMetric label="H" value={formatForHud(cursor.data.High)} {direction} />
-			<HudMetric label="L" value={formatForHud(cursor.data.Low)} {direction} />
-			<HudMetric label="C" value={formatForHud(cursor.data.Close)} {direction} />
-			<HudMetric value={formatForHud(priceChangeAmt)} {direction} />
-			<HudMetric value={formatPriceChange(priceChangePct)} {direction} />
-		</HudRow>
-
-		<slot name="hud-row-volume" {cursor} formatter={formatForHud} />
+		<div class="pair-candle-chart-hud">
+			<HudRow>
+				<HudMetric label="O" value={formatForHud(cursor.data.Open)} {direction} />
+				<HudMetric label="H" value={formatForHud(cursor.data.High)} {direction} />
+				<HudMetric label="L" value={formatForHud(cursor.data.Low)} {direction} />
+				<HudMetric label="C" value={formatForHud(cursor.data.Close)} {direction} />
+				<HudMetric value={formatForHud(priceChangeAmt)} {direction} />
+				<HudMetric value={formatPriceChange(priceChangePct)} {direction} />
+			</HudRow>
+
+			<slot name="hud-row-volume" {cursor} formatter={formatForHud} />
+		</div>
 	{/if}
 
 	{#if !hasData}
@@ -127,6 +129,13 @@ Display trading pair candles (ohlc+v) charts, with attached quoteFeed for chart
 </ChartIQ>
 
 <style lang="postcss">
+	.pair-candle-chart-hud {
+		background: hsla(var(--hsla-box-3));
+		display: inline-grid;
+		gap: var(--space-ss);
+		padding: var(--space-md);
+	}
+
 	.no-chart-data {
 		max-width: min(65ch, 90vw);
 		margin-top: 2rem;