Update styles to match latest design system discussion

i-dot-ai · May 16, 2024 · d209bdd · d209bdd
1 parent 552d5d2
commit d209bdd
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 100 deletions.
diff --git a/django_app/frontend/i-ai.scss → django_app/frontend/iai.scss b/django_app/frontend/i-ai.scss → django_app/frontend/iai.scss
@@ -21,9 +21,6 @@
     display: none;
 }
 .govuk-header__content {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
     padding-left: 0;
     width: 100%;
 }
@@ -38,35 +35,42 @@
 .govuk-header__navigation {
     margin-bottom: 0;
 }
+.govuk-header__navigation-list {
+    margin-top: 0.75rem;
+}
+@media (min-width: 769px) {
+    .govuk-header__content {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+    }
+    .govuk-header__navigation-list {
+        margin-top: 0;
+    }
+}
 
 /* BUTTON */
 .govuk-button {
-    background-color: var(--product-colour);
     border: 0;
     border-radius: var(--border-radius);
     box-shadow: none;
-    color: white;
     padding: 13px 12px 12px 12px;
 }
-.govuk-button--secondary {
-    background-color: transparent;
-    border: 2px solid var(--product-colour);
-    color: var(--product-colour) !important;
-}
 
 /* FOOTER */
 .govuk-footer {
-    padding-top: 0.75rem;
+    padding-top: 1.75rem;
 }
 .govuk-footer__meta-item {
     margin-bottom: 0;
 }
-.govuk-footer__meta-custom { /* temp - for Built by i.AI */
-    display: none;
-}
 .govuk-footer__copyright-logo {
-    background-image: url('/static/govuk-assets/i-dot-ai-Official-Logo.svg');
-    margin-bottom: -1rem;
+    background-image: none;
+    padding-top: 0.5rem;
+}
+.govuk-footer__copyright-logo img {
+    height: 5.25rem;
+    width: 7rem;
 }
 
 /* LINKS */
@@ -76,8 +80,6 @@
 
 /* NOTIFICATION BANNER */
 .govuk-notification-banner {
-    background-color: var(--product-colour);
-    border-color: var(--product-colour);
     border-radius: var(--border-radius);
 }
 .govuk-notification-banner__content {
@@ -86,9 +88,6 @@
 }
 
 /* PHASE BANNER */
-.govuk-phase-banner {
-    display: none;
-}
 .govuk-phase-banner__content__tag {
     background-color: var(--product-colour);
     font-weight: 700;
@@ -97,33 +96,7 @@
     text-transform: uppercase;
 }
 
-/* TEXTAREA */
-.govuk-textarea {
-    border-color: var(--product-colour);
-    border-radius: var(--border-radius);
-}
-
-/** NEW COMPONENTS **/
-/* BOX OUT */
-.iai-box-out {
-    background-color: #f3f2f1;
-    border: 1px solid #b1b4b6;
+/* INPUT, TEXTAREA */
+.govuk-input, .govuk-textarea {
     border-radius: var(--border-radius);
-    padding: 1rem;
 }
-
-/* NEW MESSAGE */
-.iai-new-message {
-    align-items: flex-end;
-    display: flex;
-    gap: 0.5rem;
-}
-.iai-new-message .govuk-form-group {
-    margin: 0;
-    width: 100%;
-}
-.iai-new-message textarea, .iai-new-message button {
-    height: 4rem;
-    margin: 0;
-}
-
diff --git a/django_app/frontend/js/i-ai.js b/django_app/frontend/js/i-ai.js
diff --git a/django_app/frontend/readme.md b/django_app/frontend/readme.md
@@ -0,0 +1,4 @@
+# SASS Compilation (if not using django-compressor)
+
+`npm install -g sass`
+`sass style.scss style.css -w`
diff --git a/django_app/frontend/style.css.map b/django_app/frontend/style.css.map
diff --git a/django_app/frontend/style.scss b/django_app/frontend/style.scss
@@ -66,7 +66,9 @@ $redbox-red: #A50202;
 
 /* Chat page */
 .iai-chat-message {
-  background-color: #b1b4b6;
+  background-color: #f3f2f1;
+  border: 1px solid #b1b4b6;
+  border-radius: var(--border-radius);
   padding: 1rem;
 }
 .iai-chat-message--ai {
@@ -96,6 +98,25 @@ $redbox-red: #A50202;
   text-align: left;
 }
 
+.iai-new-message textarea {
+  margin-bottom: 0.5rem;
+}
+.iai-new-message .govuk-form-group {
+  margin: 0;
+  width: 100%;
+}
+@media (min-width: 769px) {
+  .iai-new-message {
+    align-items: flex-end;
+    display: flex;
+    gap: 0.5rem;
+  }
+  .iai-new-message textarea, .iai-new-message button {
+    height: 4rem;
+    margin: 0;
+  }
+}
+
 .iai-response-feedback {
   display: none;
   position: relative;
@@ -147,4 +168,4 @@ $redbox-red: #A50202;
   display: block;
 }
 
-@import "./i-ai.scss";
+@import "./iai.scss";
diff --git a/django_app/redbox_app/templates/base.html b/django_app/redbox_app/templates/base.html
@@ -48,9 +48,14 @@
         </a>
       </div>
       <div class="govuk-header__content">
-        <a href="{{url('homepage')}}" class="govuk-header__link govuk-header__service-name">
-          Redbox Copilot
-        </a>
+        <div class="iai-header__service-name-container">
+          <a href="{{url('homepage')}}" class="govuk-header__link govuk-header__service-name">
+            Redbox Copilot
+          </a>
+          <strong class="govuk-tag govuk-phase-banner__content__tag">
+            Beta
+          </strong>
+        </div>
         <nav aria-label="Menu" class="govuk-header__navigation">
           <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
             Menu
@@ -81,6 +86,7 @@
 
 
   {# Phase banner #}
+  {#
   <div class="govuk-width-container">
     <div class="govuk-phase-banner">
       <p class="govuk-phase-banner__content">
@@ -93,6 +99,7 @@
       </p>
     </div>
   </div>
+  #}
 
   <main class="govuk-main-wrapper" id="main-content" role="main">
     {% block content %}
@@ -123,7 +130,7 @@ <h2 class="govuk-visually-hidden">Support links</h2>
             </li>
           </ul>
           <div class="govuk-footer__meta-custom">
-            Built by <a href="https://ai.gov.uk" class="govuk-footer__link">i.AI</a>
+            This is a new service – your <a class="govuk-link" href="#feedback">feedback</a> will help us to improve it.
           </div>
           <svg
             aria-hidden="true"
@@ -146,20 +153,14 @@ <h2 class="govuk-visually-hidden">Support links</h2>
           </span>
         </div>
         <div class="govuk-footer__meta-item">
-          <a
-            class="govuk-footer__link govuk-footer__copyright-logo"
-            href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
-            © Crown copyright
+          <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://ai.gov.uk">
+            <img src="/static/govuk-assets/iai-logo.svg" alt="Incubator for Artificial Intelligence" loading="lazy"/>
           </a>
         </div>
       </div>
     </div>
   </footer>
 
-  {% compress js %}
-    <script src="{{ static('js/i-ai.js') }}"></script>
-  {% endcompress %}
-
 </body>
 
 </html>