Preapps sidebar styling

app/assets/stylesheets/sidebar.scss

@@ -3,7 +3,7 @@
 }
 
 body:has(.bops-fullwidth-container) {
-  $sidebar-width: 300px;
+  $sidebar-width: 320px;
   height: 100vh;
   margin: 0;
   overflow: hidden;
@@ -27,10 +27,26 @@ body:has(.bops-fullwidth-container) {
     }
 
     .bops-sidebar {
-      padding: 15px;
-      border-right: 1px solid $govuk-border-colour;
+      padding: 20px;
+      border-right: 1px solid #8eb8dc;
       overflow-y: auto;
       height: 100%;
+      background-color: #f4f8fb;
+      @include govuk-font($size: 16);
+
+      .govuk-link {
+        @include govuk-font($size: 16);
+        text-decoration: none;
+
+        &:visited {
+          color: $govuk-link-colour;
+        }
+
+        &:active,
+        &[aria-current="page"] {
+          color: #0b0c0c;
+        }
+      }
     }
   }
 
@@ -77,14 +93,22 @@ body:has(.bops-fullwidth-container) {
   display: flex;
   align-items: center;
   gap: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2);
+  border-bottom: 1px solid #8eb8dc;
+}
+
+.bops-sidebar ul h3 {
+  @include govuk-font($size: 16);
+  font-weight: normal !important;
+  color: $govuk-secondary-text-colour;
 }
 
 .bops-sidebar__task-icon {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   line-height: 0;
 }

app/views/shared/icons/_action_required.html.erb

@@ -1,5 +1,5 @@
-<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Warning">
-  <rect x="2" y="2" width="60" height="60" rx="16" fill="#fff5c7" />
-  <rect x="29" y="12" width="6" height="30" rx="3" fill="#6b5e00" />
-  <circle cx="32" cy="48" r="3" fill="#6b5e00" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Action required">
+  <circle cx="12" cy="12" r="12" fill="#fff5c7" />
+  <rect x="10.5" y="5" width="3" height="10" rx="1.5" fill="#6b5e00" />
+  <circle cx="12" cy="18" r="1.5" fill="#6b5e00" />
 </svg>

app/views/shared/icons/_cannot_start.html.erb

@@ -1,13 +1,9 @@
-<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0" y="0" width="64" height="64" fill="transparent" />
-
-  <rect x="8" y="8" width="48" height="48" rx="6" ry="6"
-        fill="none" stroke="#AAAAAA" stroke-width="1.5"
-        stroke-dasharray="3 2.2" stroke-linecap="butt" />
-
-  <rect x="22.5" y="28.8" width="19" height="14" rx="3" ry="3" fill="#888888" />
-
-  <path d="M 25.5 28.8 C 25.5 22.4 28.5 20.8 32 20.8" stroke="#888888" stroke-width="2.5" fill="none" stroke-linecap="round" />
-  <path d="M 38.5 28.8 C 38.5 22.4 35.5 20.8 32 20.8" stroke="#888888" stroke-width="2.5" fill="none" stroke-linecap="round" />
-
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Cannot start">
+  <circle cx="12" cy="12" r="11" fill="none" stroke="#AAAAAA" stroke-width="2" stroke-dasharray="4 3" />
+  <rect x="8" y="12" width="8" height="6" rx="1" fill="#888888" />
+  <path d="M9.5 12 C9.5 9 10.5 8 12 8 C13.5 8 14.5 9 14.5 12"
+        stroke="#888888"
+        stroke-width="2"
+        fill="none"
+        stroke-linecap="round" />
 </svg>

app/views/shared/icons/_completed.html.erb

@@ -1,9 +1,9 @@
-<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Completed">
-  <rect x="2" y="2" width="60" height="60" rx="12" fill="#2c6ebd" />
-  <path d="M20 34 L28 42 L44 26"
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Completed">
+  <circle cx="12" cy="12" r="12" fill="#1d70b8" />
+  <path d="M8 12.5 L10.5 15 L16 9.5"
         fill="none"
         stroke="#ffffff"
-        stroke-width="7"
+        stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round" />
 </svg>

app/views/shared/icons/_in_progress.html.erb

@@ -1,14 +1,14 @@
-<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arrow right">
-  <rect x="2" y="2" width="60" height="60" rx="16" fill="#dbe6f4" />
-  <path d="M18 32 H44"
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="In progress">
+  <circle cx="12" cy="12" r="12" fill="#dbe6f4" />
+  <path d="M7 12 H16"
         fill="none"
         stroke="#1f4d7a"
-        stroke-width="6.5"
+        stroke-width="3"
         stroke-linecap="round" />
-  <path d="M44 32 L36 24 M44 32 L36 40"
+  <path d="M13 8 L17 12 L13 16"
         fill="none"
         stroke="#1f4d7a"
-        stroke-width="6.5"
+        stroke-width="3"
         stroke-linecap="round"
         stroke-linejoin="round" />
 </svg>

app/views/shared/icons/_not_started.html.erb

@@ -1,10 +1,3 @@
-<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0" y="0" width="64" height="64" fill="transparent" />
-
-  <rect x="8" y="8" width="48" height="48" rx="6" ry="6"
-        fill="none"
-        stroke="#AAAAAA"
-        stroke-width="1.5"
-        stroke-dasharray="4 3"
-        stroke-linecap="round" />
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Not started">
+  <circle cx="12" cy="12" r="12" fill="#bbd4ea" />
 </svg>