WIP styling

src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss

@@ -29,9 +29,14 @@ $letter-space--xs: .0125em;
    @include sr-only;
  }
 
+ * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
  h1 {
   @include typeset('sans', '2xl', 2);
-  margin: 0 0 units(1);
+  margin: 0 0 units(2);
  }
 
  h2 {
@@ -43,7 +48,7 @@ $letter-space--xs: .0125em;
     margin-top: units(2);
   }
  }
- 
+
 .register-form-step h3 {
   color: color('primary-dark');
   letter-spacing: $letter-space--xs;
@@ -92,9 +97,9 @@ a.breadcrumb__back {
     .usa-icon {
        flex-shrink: 0;
        //align lock body to x-height
-       margin: units('2px') units(1) 0 0; 
+       margin: units('2px') units(1) 0 0;
     }
-  }  
+  }
 }
 
 .stepnav {
@@ -109,11 +114,41 @@ a.breadcrumb__back {
   font-weight: font-weight('semibold');
 }
 
-footer {
+section.dashboard {
-  //Workaround because USWDS units jump from 10 to 15
+  background-color: color('white');
-  margin-top: units(10) + units(2);
+  border: 1px solid color('base-lighter');
+  border-radius: 4px;
+  padding: 0 units(2) units(3);
+  margin-top: units(5);
+
+  h2 {
+    padding-bottom: units(3);
+  }
+
+  p {
+    margin-bottom: 0;
+  }
 }
 
+#wrapper {
+  background-color: color('primary-lightest');
+}
+
+main {
+  //Workaround because USWDS units jump from 10 to 15
+  padding-bottom: units(10) + units(2);
+  padding-top: units(5);
+}
+
+footer {
+  border-top: 1px solid color('primary-darker');
+}
+
+.usa-footer__secondary-section {
+  background-color: color('primary-lightest');
+}
+
+
 abbr[title] {
   // workaround for underlining abbr element
   border-bottom: none;

src/registrar/assets/sass/_theme/_uswds-theme.scss

@@ -26,8 +26,15 @@ in the form $setting: value,
   /*----------------------------
   # Banner Settings
   -----------------------------*/
-  $theme-banner-background-color: "primary-darker",
+  $theme-banner-background-color: "primary-dark",
-  $theme-banner-link-color: "primary-lighter",
+  $theme-banner-link-color: default,
+
+  /*
+  # Footer Settings
+  */
+  $theme-identifier-background-color: 'primary-darker',
+  $theme-identifier-identity-domain-color: 'base-lighter',
+  $theme-identifier-secondary-link-color: 'base-lighter',
 
 
   /*----------------------------

src/registrar/templates/base.html

@@ -128,11 +128,11 @@
       <div class="usa-navbar">
         {% block logo %}
         <div class="usa-logo" id="extended-logo">
-          <em class="usa-logo__text">
+           <img
-            <a href="{% url 'home' %}" title="Home" aria-label="Home">
+                src="{% static 'img/dottedgov-round.svg' %}"
-              {% block site_name %}Home{% endblock %}
+                alt="Home"
-            </a>
+                width="48px"
-          </em>
+              />
         </div>
         {% endblock %}
         <button type="button" class="usa-menu-btn">Menu</button>

src/registrar/templates/home.html

@@ -1,59 +1,77 @@
 {% extends 'base.html' %}
 
 {% block title %} Hello {% endblock %}
-{% block hero %}
-<section class="usa-hero">
-  <div class="usa-grid">
-    <div class="usa-hero-callout usa-section-dark">
-      <h1>
-        <span class="usa-hero-callout-alt">Welcome to the .gov registrar</span>
-      </h1>
-    </div>
-</section>
-{% endblock %}
 
 {% block content %}
 <main id="main-content" class="grid-container">
-<p>This is the .gov registrar.</p>
 
 {% if user.is_authenticated %}
+{# complete logged in page together here #}
 
-{% if domain_applications %}
+<h1>Manage your domains</h2>
-<h2>Your domain applications</h2>
+
-<table class="usa-table usa-table--borderless">
+<p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
+
+<section class="dashboard">
+	<h2>Registered domains</h2>
+	{% if domains %}
+		{% for domain in domains %}
+		{{ domain }}
+		{% endfor %}
+	{% else %}
+		You don't have any registered domains yet
+	{% endif %}
+</section>
+
+<section class="dashboard">
+  <h2>Active domain requests</h2>
+  {% if domain_applications %}
+  <table class="usa-table usa-table--borderless">
   <caption class="sr-only">Your domain applications</caption>
   <thead>
     <tr>
-      <th>Name</th>
+    <th>Name</th>
-      <th>Status</th>
+    <th>Status</th>
     </tr>
   </thead>
   <tbody>
     {% for application in domain_applications %}
-      <tr>
+    <tr>
-        <th>
+      <th>
-          <a href="{% url 'edit-application' application.pk %}">
+      <a href="{% url 'edit-application' application.pk %}">
-            {{ application.requested_domain.name|default:"New domain request" }}
+        {{ application.requested_domain.name|default:"New domain request" }}
-          </a>
+      </a>
-        </th>
+      </th>
-        <td>{{ application.status }}</td>
+      <td>{{ application.status }}</td>
-      </tr>
+    </tr>
     {% endfor %}
   </tbody>
-</table>
+  </table>
+ {% else %}
+   <p>You don't have any active domain requests right now</p> 
+ {% endif %}
+
+<p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
+</section>
+
+<section class="dashboard">
+  <h2>Archived domains</h2>
+  {% if archived_domains %}
+    {% for domain in archived_domains %}
+      {{ domain }}
+    {% endfor %}
+ {% else %}
+   <p>You don't have any archived domains</p> 
+ {% endif %}
+</section>
+{% else %} {# not user.is_authenticated #}
+{# complete logged out page here #}
+
+<p><a class="usa-button" href="{% url 'login' %}">
+Sign in
+</a></p>
+
 {% endif %}
 
-<p><a href="{% url 'application:' %}" class="usa-button">Apply</a></p>
-
-<p><a href="{% url 'edit-profile' %}">Edit profile</a></p>
-
-{% if user.is_staff %}
-<p><a href="{% url 'admin:index' %}">CISA admin panel</a></p>
-{% endif %}
-
-<p><a href="{% url 'logout' %}">Click here to log out.</a></p>
-{% else %}
-<p><a href="{% url 'login' %}">Click here to log in.</a></p>
-{% endif %}
 </main>
 {% endblock %}

src/registrar/templates/includes/footer.html

@@ -16,7 +16,7 @@
                 class="usa-footer__logo-img"
                 src="{% static 'img/dottedgov-round.svg' %}"
                 alt="dot gov registrar logo"
-                width="50px"
+                width="64px"
               />
             </div>
           </div>