Merge pull request #826 from cisagov/rjm/795-admin-css

Django admin CSS (and some copy edits)

src/registrar/assets/sass/_theme/_admin.scss

@@ -1,3 +1,159 @@
+@use "cisa_colors" as *;
+@use "uswds-core" as *;
+
+// We'll use Django's CSS vars: https://docs.djangoproject.com/en/4.2/ref/contrib/admin/#theming-support 
+// and assign USWDS theme vars whenever possible
+// If needed (see below), we'll use the USWDS hex value
+// As a last resort, we'll use CISA colors to supplement the palette
+:root,
+html[data-theme="light"] {
+    --primary: #{$theme-color-primary};
+    --secondary: #{$theme-color-primary-darkest};
+    --accent: #{$theme-color-accent-cool};
+    // --primary-fg: #fff;
+
+    // USWDS theme vars that are set to a token, such as #{$theme-color-base-darker}
+    // would interpolate to 'gray-cool-70' and output invalid CSS, so we use the hex
+    // source value instead: https://designsystem.digital.gov/design-tokens/color/system-tokens/
+    --body-fg: #3d4551;
+    // --body-bg: #fff;
+    --body-quiet-color: #{$theme-color-base-dark};
+    // --body-loud-color: #000;
+
+    --header-color: var( --primary-fg);
+    --header-branding-color:  var( --primary-fg);
+    // --header-bg: var(--secondary);
+    // --header-link-color: var(--primary-fg);
+
+    --breadcrumbs-fg: #{$theme-color-accent-cool-lightest};
+    // --breadcrumbs-link-fg: var(--body-bg);
+    --breadcrumbs-bg: #{$theme-color-primary-dark};
+
+    // #{$theme-link-color} would interpolate to 'primary', so we use the source value instead
+    --link-fg: #{$theme-color-primary};
+    --link-hover-color: #{$theme-color-primary-darker};
+    // $theme-link-visited-color - violet-70v
+    --link-selected-fg: #54278f;
+
+    --hairline-color: #{$dhs-gray-15};
+    // $theme-color-base-lightest - gray-5
+    --border-color: #f0f0f0;
+
+    --error-fg: #{$theme-color-error};
+
+    --message-success-bg: #{$theme-color-success-lighter};
+    // $theme-color-warning-lighter - yellow-5
+    --message-warning-bg: #faf3d1;
+    --message-error-bg: #{$theme-color-error-lighter};
+
+    --darkened-bg: #{$dhs-gray-15}; /* A bit darker than --body-bg */
+    --selected-bg: var(--border-color); /* E.g. selected table cells */
+    --selected-row: var(--message-warning-bg);
+
+    // --button-fg: #fff;
+    // --button-bg: var(--secondary);
+    --button-hover-bg: #{$theme-color-primary-darker};
+    --default-button-bg: #{$theme-color-primary-dark};
+    --default-button-hover-bg: #{$theme-color-primary-darkest};
+    // #{$theme-color-base} - 'gray-cool-50'
+    --close-button-bg: #71767a;
+    // #{$theme-color-base-darker} - 'gray-cool-70'
+    --close-button-hover-bg: #3d4551;
+    --delete-button-bg: #{$theme-color-error};
+    --delete-button-hover-bg: #{$theme-color-error-dark};
+
+    // --object-tools-fg: var(--button-fg);
+    // --object-tools-bg: var(--close-button-bg);
+    // --object-tools-hover-bg: var(--close-button-hover-bg);
+}
+
+// Fold dark theme settings into our main CSS
+// https://docs.djangoproject.com/en/4.2/ref/contrib/admin/#theming-support > dark theme note
+@media (prefers-color-scheme: dark) {
+    :root,
+    html[data-theme="dark"] {
+      // Edit the primary to meet accessibility requ.  
+      --primary: #23485a;
+      --primary-fg: #f7f7f7;
+  
+      --body-fg: #eeeeee;
+      --body-bg: #121212;
+      --body-quiet-color: #e0e0e0;
+      --body-loud-color: #ffffff;
+  
+      --breadcrumbs-link-fg: #e0e0e0;
+      --breadcrumbs-bg: var(--primary);
+  
+      --link-fg: #81d4fa;
+      --link-hover-color: #4ac1f7;
+      --link-selected-fg: #6f94c6;
+  
+      --hairline-color: #272727;
+      --border-color: #353535;
+  
+      --error-fg: #e35f5f;
+      --message-success-bg: #006b1b;
+      --message-warning-bg: #583305;
+      --message-error-bg: #570808;
+  
+      --darkened-bg: #212121;
+      --selected-bg: #1b1b1b;
+      --selected-row: #00363a;
+  
+      --close-button-bg: #333333;
+      --close-button-hover-bg: #666666;
+    }
+
+    // Dark mode django (bug due to scss cascade) and USWDS tables
+    body,
+    .change-list .usa-table,
+    .change-list .usa-table--striped tbody tr:nth-child(odd) td {
+        color: var(--body-fg)!important;
+    }
+}
+
+// Firefox needs this to be specifically set
+html[data-theme="dark"] {
+    body,
+    .change-list .usa-table,
+    .change-list .usa-table--striped tbody tr:nth-child(odd) td {
+        color: var(--body-fg)!important;
+    }
+}
+
+#branding h1 a:link, #branding h1 a:visited {
+    color: var(--primary-fg);
+}
+
+#branding h1,
+h1, h2, h3 {
+    font-weight: font-weight('bold');
+}
+
+table > caption > a {
+    font-weight: font-weight('bold');
+    text-transform: none;
+}
+
+.change-list {
+    .usa-table--striped tbody tr:nth-child(odd) td,
+    .usa-table--striped tbody tr:nth-child(odd) th,
+    .usa-table td,
+    .usa-table th {
+        background-color: transparent;
+    }
+}
+
+#nav-sidebar {
+    padding-top: 20px;
+}
+
+// 'Delete button' layout bug
+.submit-row a.deletelink {
+    height: auto!important;
+}
+
+// Keep th from collapsing 
 .min-width-25 {
     min-width: 25px;
 }

src/registrar/templates/admin/base_site.html

@@ -3,7 +3,9 @@
 
 {% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
 
-{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}" />{% endblock %}
+{% block extrastyle %}{{ block.super }}
+<link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}" />
+{% endblock %}
 
 {% block branding %}
 <h1 id="site-name"><a href="{% url 'admin:index' %}">.gov admin</a></h1>

src/registrar/templates/admin/change_list_results.html

@@ -13,7 +13,7 @@ Load our custom filters to extract info from the django generated markup.
 {% endif %}
 {% if results %}
 <div class="results override-change_list_results">
-<table id="result_list">
+<table id="result_list" class="usa-table usa-table--borderless usa-table--striped">
 <thead>
 <tr>
 

src/registrar/templates/emails/status_change_action_needed.txt

@@ -1,7 +1,7 @@
 {% autoescape off %}{# In a text file, we don't want to have HTML entities escaped #}
 Hi {{ application.submitter.first_name }}.
 
-Your .gov domain request requires a follow-up action to help with our review.
+We've identified an action needed to complete the review of your .gov domain request.
 
 DOMAIN REQUESTED: {{ application.requested_domain.name }}
 REQUEST RECEIVED ON: {{ application.updated_at|date }}
@@ -19,11 +19,10 @@ might add to the wait time. Learn more about withdrawing your request.
 
 NEXT STEPS
 
-- You will receive a separate email from one of our analysts that provides details 
-about the action needed from you. You may need to update your application or 
-provide additional information. 
+- You will receive a separate email from our team that provides details about the action needed. 
+You may need to update your application or provide additional information.
 
-- If you do not receive a separate email with these details, please contact us:
+- If you do not receive a separate email with these details within one business day, please contact us:
 <https://forms.office.com/pages/responsepage.aspx?id=bOfNPG2UEkq7evydCEI1SqHke9Gh6wJEl3kQ5EjWUKlUQzRJWDlBNTBCQUxTTzBaNlhTWURSSTBLTC4u>
 
 

src/registrar/templates/emails/status_change_action_needed_subject.txt

@@ -1 +1 @@
-Your .gov domain request requires a follow-up action
+Action needed for your .gov domain request

src/registrar/tests/test_admin.py

@@ -192,8 +192,8 @@ class TestDomainApplicationAdmin(TestCase):
 
         # Assert or perform other checks on the email details
         expected_string = (
-            "Your .gov domain request requires a follow-up action "
-            "to help with our review."
+            "We've identified an action needed to complete the "
+            "review of your .gov domain request."
         )
         self.assertEqual(from_email, settings.DEFAULT_FROM_EMAIL)
         self.assertEqual(to_email, EMAIL)