Merge pull request #599 from tradingstrategy-ai/design-system-139-len…

…ding-reserve-chart Lending Reserve Chart UI improvements
tradingstrategy-ai · Sep 26, 2023 · 4a6a817 · 4a6a817
2 parents 9ba05be + 4fc4e39
commit 4a6a817
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git 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/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;

diff --git a/src/lib/chart/ReserveInterestChart.svelte b/src/lib/chart/ReserveInterestChart.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
 	const rateTypes = {
-		supply_apr: { label: 'Supply APR', color: 'slateblue' },
+		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;
@@ -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
@@ -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 {