Use design system tokens in main.sccs

Author: swebberuk

manage_breast_screening/assets/sass/main.scss

@@ -83,38 +83,38 @@ a[href="#"] {
 
 .app-status-bar {
   background-color: #00386e;
-  color: #ffffff;
-  padding: 8px 0;
-  border-bottom: 1px solid #d8dde0;
+  color: $color_nhsuk-white;
+  padding: nhsuk-spacing(2) 0;
+  border-bottom: 1px solid nhsuk-colour("grey-4");
 }
 
 .app-status-bar a {
-  color: #ffffff;
+  color: $color_nhsuk-white;
 }
 .app-status-bar a:hover,
 .app-status-bar a:active {
-  color: #ffffff;
+  color: $color_nhsuk-white;
 }
 .app-status-bar a:focus {
-  color: #212b32;
+  color: $color_nhsuk-black;
 }
 
 .app-status-bar__row {
   display: flex;
   flex-wrap: wrap;
-  gap: 24px;
+  gap: nhsuk-spacing(4);
   align-items: center;
 }
 
 .app-status-bar__row + .app-status-bar__row {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  margin-top: nhsuk-spacing(2);
+  padding-top: nhsuk-spacing(2);
+  border-top: 1px solid rgba($color_nhsuk-white, 0.2);
 }
 
 .app-status-bar__item {
   display: flex;
-  gap: 8px;
+  gap: nhsuk-spacing(2);
   align-items: center;
 }
 

manage_breast_screening/mammograms/presenters/appointment_presenters.py

@@ -135,7 +135,7 @@ def show_status_bar_for(self, user):
     @property
     def tag_properties(self):
         return {
-            "classes": "nhsuk-tag--yellow nhsuk-u-margin-top-2",
+            "classes": "nhsuk-tag--yellow nhsuk-u-margin-left-1",
             "text": "Special appointment",
         }