clean up summary boxes

This commit is contained in:
Rachid Mrad 2025-01-13 15:43:37 -05:00
parent 7dbb9de3b9
commit 0e9d69a26f
No known key found for this signature in database
11 changed files with 56 additions and 93 deletions

View file

@ -516,10 +516,6 @@ input[type=submit].button--dja-toolbar:focus, input[type=submit].button--dja-too
max-width: 68ex;
}
.usa-summary-box__dhs-color {
color: $dhs-blue-70;
}
details.dja-detail-table {
display: inline-table;
background-color: var(--body-bg);
@ -812,21 +808,6 @@ div.dja__model-description{
text-decoration: underline !important;
}
//-- Override some styling for the USWDS summary box (per design guidance for ticket #2055)
// Keep it scoped to admin.scss
.dashboard {
.usa-summary-box {
background: #{$dhs-blue-10};
border-color: #{$dhs-blue-30};
max-width: 72ex;
word-wrap: break-word;
}
.usa-summary-box h3 {
color: #{$dhs-blue-60};
}
}
.module caption, .inline-group h2 {
text-transform: capitalize;
}

View file

@ -129,16 +129,6 @@ grid column to the max-width of the searchbar, which was calculated to be 33rem.
word-break: break-word;
}
.dotgov-status-box {
background-color: color('primary-lightest');
border-color: color('accent-cool-lighter');
}
.dotgov-status-box--action-need {
background-color: color('warning-lighter');
border-color: color('warning');
}
footer {
border-top: 1px solid color('primary-darker');
}

View file

@ -1,17 +1,12 @@
// USWDS override to basically match the header size to a standard h3 size
// This get complicated because USWDS sets a size on the container then a relative
// size on the header. We'll need to reset the container size, override the header size,
// then 'fix' the content size.
@use "uswds-core" as *;
.usa-summary-box {
font-size: 1rem;
.usa-summary-box__heading {
// 1.17em / 18.72px
@include typeset('sans', 'sm', 6);
}
p, li, dd {
// 1.06rem / 16.96px
@include typeset('sans', 'sm', 5);
}
background-color: color('primary-lightest');
border-color: color('accent-cool-lighter');
}
.usa-summary-box--action-needed {
background-color: color('warning-lighter');
border-color: color('warning');
}

View file

@ -10,17 +10,19 @@ address,
max-width: measure(5);
}
h1, h2, h3, h4, h5, h6 {
color: color('primary-darker');
}
h1 {
@include typeset('sans', '2xl', 2);
margin: 0 0 units(2);
color: color('primary-darker');
}
h2 {
font-weight: font-weight('semibold');
line-height: line-height('heading', 3);
margin: units(4) 0 units(1);
color: color('primary-darker');
}
.header--body {

View file

@ -8,7 +8,7 @@
aria-labelledby="summary-box-description"
>
<div class="usa-summary-box__body">
<h3 class="usa-summary-box__heading usa-summary-box__dhs-color" id="summary-box-description">
<h3 class="usa-summary-box__heading" id="summary-box-description">
When a domain is deleted:
</h3>
<div class="usa-summary-box__text">

View file

@ -9,7 +9,7 @@
aria-labelledby="summary-box-description"
>
<div class="usa-summary-box__body">
<h3 class="usa-summary-box__heading usa-summary-box__dhs-color" id="summary-box-description">
<h3 class="usa-summary-box__heading">
When a domain is deleted:
</h3>
<div class="usa-summary-box__text">

View file

@ -23,19 +23,15 @@
<div class="margin-top-4 tablet:grid-col-10">
<h2 class="text-bold text-primary-dark domain-name-wrap">{{ domain.name }}</h2>
<div
class="usa-summary-box dotgov-status-box padding-bottom-0 margin-top-3 padding-left-2{% if not domain.is_expired %}{% if domain.state == domain.State.UNKNOWN or domain.state == domain.State.DNS_NEEDED %} dotgov-status-box--action-need{% endif %}{% endif %}"
class="usa-summary-box padding-y-2 margin-bottom-1"
role="region"
aria-labelledby="summary-box-key-information"
>
<div class="usa-summary-box__body">
<p class="usa-summary-box__heading font-sans-md margin-bottom-0"
id="summary-box-key-information"
<div class="usa-summary-box__text padding-top-0"
>
<span class="text-bold text-primary-darker">
Status:
</span>
<span class="text-primary-darker">
<p class="font-sans-md margin-y-0 text-primary-darker">
<strong>Status:</strong>
{# UNKNOWN domains would not have an expiration date and thus would show 'Expired' #}
{% if domain.is_expired and domain.state != domain.State.UNKNOWN %}
Expired
@ -46,9 +42,10 @@
{% else %}
{{ domain.state|title }}
{% endif %}
</span>
</p>
{% if domain.get_state_help_text %}
<div class="padding-top-1 text-primary-darker">
<p class="margin-y-0 text-primary-darker">
{% if has_domain_renewal_flag and domain.is_expiring and is_domain_manager %}
This domain will expire soon. <a href="/not-available-yet">Renew to maintain access.</a>
{% elif has_domain_renewal_flag and domain.is_expiring and is_portfolio_user %}
@ -56,13 +53,11 @@
{% else %}
{{ domain.get_state_help_text }}
{% endif %}
</div>
{% endif %}
</p>
{% endif %}
</div>
</div>
</div>
<br>
{% include "includes/domain_dates.html" %}

View file

@ -33,17 +33,17 @@
<form class="usa-form usa-form--text-width" method="post">
{% csrf_token %}
{% if has_dnssec_records %}
<div
class="usa-summary-box dotgov-status-box padding-top-0"
class="usa-summary-box "
role="region"
aria-labelledby="Important notes on disabling DNSSEC"
>
<div class="usa-summary-box__body">
<p class="usa-summary-box__heading font-sans-md margin-bottom-0"
id="summary-box-key-information"
>
<h2>To fully disable DNSSEC </h2>
<h2 class="usa-summary-box__heading"
>To fully disable DNSSEC</h2>
<div class="usa-summary-box__text">
<ul class="usa-list">
<li>Click “Disable DNSSEC” below.</li>
<li>Wait until the Time to Live (TTL) expires on your DNSSEC records managed by your DNS hosting provider. This is often less than 24 hours, but confirm with your provider.</li>
@ -51,6 +51,8 @@
</ul>
<p><strong>Warning:</strong> If you disable DNSSEC at your DNS hosting provider before TTL expiration, this may cause your domain to appear offline.</p>
</div>
</div>
</div>
<h2>DNSSEC is enabled on your domain</h2>
<a
@ -60,7 +62,7 @@
data-open-modal
>Disable DNSSEC</a
>
{% else %}
<div id="enable-dnssec">
<div class="usa-alert usa-alert--info">
<div class="usa-alert__body">
@ -69,7 +71,7 @@
</div>
<a href="{% url 'domain-dns-dnssec-dsdata' pk=domain.id %}" class="usa-button">Enable DNSSEC</a>
</div>
{% endif %}
</form>
<div

View file

@ -1,12 +1,12 @@
{% load url_helpers %}
<h2 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold" >
<h2 class="margin-top-0 margin-bottom-2 text-semibold" >
Next steps in this process
</h2>
<p>We received your .gov domain request. Our next step is to review your request. This usually takes 30 business days. Well email you if we have questions and when we complete our review. <a class="usa-link" rel="noopener noreferrer" target="_blank" href="{% public_site_url 'contact' %}">Contact us with any questions</a>.</p>
{% if show_withdraw_text %}
<h2 class="margin-top-0 margin-bottom-2 text-primary-darker text-semibold">
<h2 class="margin-top-0 margin-bottom-2 text-semibold">
Need to make changes?
</h2>

View file

@ -12,7 +12,7 @@
Your contact information
</h3>
<div class="usa-summary-box__text">
<ul>
<ul class="usa-list">
<li>Full name: <b>{{ user.get_formatted_name }}</b></li>
<li>Organization email: <b>{{ user.email }}</b></li>
<li>Title or role in your organization: <b>{{ user.title }}</b></li>

View file

@ -39,22 +39,20 @@
{% block status_summary %}
<div
class="usa-summary-box dotgov-status-box margin-top-3 padding-left-2"
class="usa-summary-box margin-top-3 padding-y-2 margin-bottom-1"
role="region"
aria-labelledby="summary-box-key-information"
>
<div class="usa-summary-box__body">
<p class="usa-summary-box__heading font-sans-md margin-bottom-0"
id="summary-box-key-information"
<div class="usa-summary-box__text padding-top-0"
>
<span class="text-bold text-primary-darker">
Status:
</span>
<p class="font-sans-md margin-y-0 text-primary-darker">
<strong>Status:</strong>
{{ DomainRequest.get_status_display|default:"ERROR Please contact technical support/dev" }}
</p>
</div>
</div>
<br>
</div>
{% endblock status_summary %}
{% block status_metadata %}
@ -142,7 +140,7 @@
<div class="grid-col maxw-fit-content desktop:grid-offset-2 ">
{% block request_summary_header %}
<h2 class="text-primary-darker"> Summary of your domain request </h2>
<h2> Summary of your domain request </h2>
{% endblock request_summary_header%}
{% block request_summary %}