Move :global table css to app.css and bug fix

Author: MikeLister

src/app.css

@@ -76,3 +76,15 @@ code {
   height: 100%;
   width: 100%;
 }
+[aria-sort="ascending"].govuk-table__header .top-triangle {
+  fill: #222;
+}
+[aria-sort="ascending"].govuk-table__header .bottom-triangle {
+  fill: #bcbcbd;
+}
+[aria-sort="descending"].govuk-table__header .top-triangle {
+  fill: #bcbcbd;
+}
+[aria-sort="descending"].govuk-table__header .bottom-triangle {
+  fill: #222;
+}

src/lib/components/data-vis/table/Table.svelte

@@ -144,7 +144,7 @@
               class={`govuk-table__header ${column.dataType === "number" ? "govuk-table__header--numeric" : ""}`}
               title={metaData[column.key].explainer}
               aria-sort={sortState.column !== column.key
-                ? "not-sorted"
+                ? "none"
                 : sortState.column === column.key &&
                     sortState.order === "descending"
                   ? "descending"
@@ -232,17 +232,4 @@
     border-radius: 10%;
     padding: 6px;
   }
-
-  :global([aria-sort="ascending"].govuk-table__header .top-triangle) {
-    fill: #222;
-  }
-  :global([aria-sort="ascending"].govuk-table__header .bottom-triangle) {
-    fill: #bcbcbd;
-  }
-  :global([aria-sort="descending"].govuk-table__header .top-triangle) {
-    fill: #bcbcbd;
-  }
-  :global([aria-sort="descending"].govuk-table__header .bottom-triangle) {
-    fill: #222;
-  }
 </style>

src/lib/components/ui/Button.svelte

@@ -138,10 +138,12 @@
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
+            class="top-triangle"
             d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
             fill="currentColor"
           ></path>
           <path
+            class="bottom-triangle"
             d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
             fill="currentColor"
           ></path>