chore: add note on data refresh in billing (#5938)

* chore: add note on data refresh in billing * chore: add a class name and move these inline styles to the scss file * chore: add light mode
SigNoz · Sep 18, 2024 · 0077714 · 0077714
1 parent 723c31f
commit 0077714
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/frontend/src/container/BillingContainer/BillingContainer.styles.scss b/frontend/src/container/BillingContainer/BillingContainer.styles.scss
@@ -50,6 +50,13 @@
 			align-items: center;
 		}
 	}
+
+	.billing-update-note {
+		text-align: left;
+		font-size: 13px;
+		color: var(--bg-vanilla-200);
+		margin-top: 16px;
+	}
 }
 
 .ant-skeleton.ant-skeleton-element.ant-skeleton-active {
@@ -75,5 +82,9 @@
 				}
 			}
 		}
+
+		.billing-update-note {
+			color: var(--bg-ink-200);
+		}
 	}
 }
diff --git a/frontend/src/container/BillingContainer/BillingContainer.tsx b/frontend/src/container/BillingContainer/BillingContainer.tsx
@@ -348,7 +348,12 @@ export default function BillingContainer(): JSX.Element {
 	const BillingUsageGraphCallback = useCallback(
 		() =>
 			!isLoading && !isFetchingBillingData ? (
-				<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
+				<>
+					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
+					<div className="billing-update-note">
+						Note: Billing metrics are updated once every 24 hours.
+					</div>
+				</>
 			) : (
 				<Card className="empty-graph-card" bordered={false}>
 					<Spinner size="large" tip="Loading..." height="35vh" />