updated the styling

This commit is contained in:
Beverly Nguyen
2025-10-16 14:58:27 -07:00
parent 3e5bc0917c
commit a89163ce28

View File

@@ -26,24 +26,39 @@
<div id="message"></div>
</div>
<div id="totalMessageTable" class="margin-bottom-3"></div>
<div class="grid-row">
<div class="grid-col-12 tablet:grid-col-6">
<div class="usa-card margin-bottom-3">
<div class="usa-card__container">
<div class="usa-card__body padding-2">
<p class="margin-0">
<strong>Services:</strong> {{ total_services }} (Live: {{ live_services }} - Trial: {{ trial_services }} - Suspended: {{ suspended_services }})
</p>
<p class="margin-0">
<strong>Agreement:</strong> Jan 1 - Dec 31
</p>
<div class="grid-row margin-bottom-3 maxw-tablet">
<div class="grid-col-12 tablet:grid-col-6 margin-bottom-2 tablet:margin-bottom-0 tablet:padding-right-1">
<div class="usa-summary-box height-full" role="region">
<div class="usa-summary-box__body">
<div class="usa-summary-box__text">
<div class="display-flex flex-align-end">
<div class="flex-1">
<div class="text-base-dark text-uppercase font-sans-3xs text-ls-1 margin-bottom-05">Total Services</div>
<div class="font-sans-xl text-bold text-primary-darker line-height-sans-1">{{ total_services }}</div>
</div>
<div class="text-base-dark font-body-2xs line-height-sans-3">
<span class="text-success-dark text-bold">{{ live_services }}</span> Live
<span class="margin-left-1 text-warning-dark text-bold">{{ trial_services }}</span> Trial
<span class="margin-left-1 text-base-dark text-bold">{{ suspended_services }}</span> Suspended
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-col-12 tablet:grid-col-6 tablet:padding-left-1">
<div class="usa-summary-box height-full" role="region">
<div class="usa-summary-box__body">
<div class="usa-summary-box__text">
<div class="text-base-dark text-uppercase font-sans-3xs text-ls-1 margin-bottom-05">Agreement Period</div>
<div class="font-sans-xl text-bold text-primary-darker">Jan 1 - Dec 31</div>
</div>
</div>
</div>
</div>
</div>
<div class="margin-top-5 margin-bottom-5">
<div class="margin-bottom-5">
<h2 class="font-heading-lg">What is a service?</h2>
<p class="usa-body">
When you join Notify, you're added to a service. This is your organization's workspace for sending text messages and emails. Within your service, you can: