Update health advice page design

Per Figma design
dxw · Dec 18, 2024 · 40b4682 · 40b4682
1 parent 8eb71dd
commit 40b4682
Show file tree

Hide file tree

Showing 4 changed files with 268 additions and 215 deletions.
diff --git a/app/assets/stylesheets/health-advice-page.scss b/app/assets/stylesheets/health-advice-page.scss
@@ -1,47 +1,57 @@
-.advice-table {
-  border-collapse: collapse;
-  margin-bottom: 1rem;
-
-  th,
-  td {
-    border-left: 1px solid white;
-    border-top: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    padding: 0.25rem 0.5rem;
-
-    &:first-child {
-      border-left: none;
+#health-advice {
+  details {
+    border-top: 1px solid var(--border-color);
+
+    &:last-of-type {
+      border-bottom: 1px solid var(--border-color);
     }
   }
 
-  thead {
-    background-color: #6b7280;
-    padding: 1rem 0;
-    color: white;
+  .advice-table {
+    border-collapse: collapse;
+    margin-bottom: 1rem;
+
+    th,
+    td {
+      border-left: 1px solid white;
+      border-top: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+      padding: 0.25rem 0.5rem;
 
-    th {
-      font-weight: normal;
+      &:first-child {
+        border-left: none;
+      }
     }
-  }
 
-  tr.levels {
-    font-weight: bold;
-    text-align: center;
-    border: 1px solid #ccc;
-    border-width: 1px 0;
-    background: var(--main-colour-light);
+    thead {
+      background-color: #6b7280;
+      padding: 1rem 0;
+      color: white;
 
-    td:first-child {
-      text-align: left;
-      background: var(--main-colour-lightest);
+      th {
+        font-weight: normal;
+      }
     }
-  }
 
-  h3 {
-    font-size: 1.25rem;
-  }
+    tr.levels {
+      font-weight: bold;
+      text-align: center;
+      border: 1px solid #ccc;
+      border-width: 1px 0;
+      background: var(--main-colour-light);
+
+      td:first-child {
+        text-align: left;
+        background: var(--main-colour-lightest);
+      }
+    }
+
+    h3 {
+      font-size: 1.25rem;
+    }
 
-  h4 {
-    font-weight: bold;
+    h4 {
+      font-weight: bold;
+    }
   }
 }
diff --git a/app/assets/stylesheets/margins-padding.scss b/app/assets/stylesheets/margins-padding.scss
@@ -20,6 +20,11 @@
     margin-right: $i * 0.5rem;
   }
 
+  .mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .my-#{$i} {
     margin-top: $i * 0.5rem;
     margin-bottom: $i * 0.5rem;

diff --git a/app/assets/stylesheets/text-block.scss b/app/assets/stylesheets/text-block.scss
@@ -152,6 +152,8 @@ details {
 
   &[open] {
     summary {
+      background: #f5f5f5;
+
       button {
         &::before {
           transform: rotate(180deg);