diff --git a/frontend/src/container/BillingContainer/BillingContainer.styles.scss b/frontend/src/container/BillingContainer/BillingContainer.styles.scss index e4c7deec06..2bc41d89e6 100644 --- 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 index e366f068b2..449474a429 100644 --- 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 ? ( - + <> + +
+ Note: Billing metrics are updated once every 24 hours. +
+ ) : (