ui fix

src/routes/list/dividend/[slug]/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
+  import { page } from "$app/stores";
 
   export let data;
 
@@ -19,26 +21,15 @@
     { name: "Dividend Yield", rule: "dividendYield" },
     { name: "Years", rule: "years" },
   ];
+
+  $: text =
+    $page?.url?.pathname === "/list/dividend/dividend-kings"
+      ? "Dividend kings are companies that have been raising their dividend payments every year for 50 or more years. This is a list of all the dividend kings on the US stock market."
+      : "Dividend aristocrats are companies in the S&P500 index that have been raising their dividends every year for 25 or more years. This is a list of all the dividend aristocrats.";
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox {text} />
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    Dividend Kings are companies that have been raising their dividend payments
-    every year for 50 or more years. This is a list of all the dividend kings on
-    the US stock market.
-  </div>
 
   <!-- Page wrapper -->
   <Table

src/routes/list/highest-income-tax/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -12,22 +13,10 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+    text=" These are the biggest public companies in the US, sorted by how much they
-  >
+    paid in corporate income taxes in the past 12 months."
-    <svg
+  />
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    These are the biggest public companies in the US, sorted by how much they
-    paid in corporate income taxes in the past 12 months.
-  </div>
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getData} {defaultList} />

src/routes/list/highest-revenue/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -12,23 +13,11 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+    text="These are the biggest U.S. companies ranked by total revenue or sales over
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    These are the biggest U.S. companies ranked by total revenue or sales over
     the past 12 months. It includes companies based in the United States that
-    can be publicly traded on the stock exchange.
+    can be publicly traded on the stock exchange."
-  </div>
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getData} {defaultList} />

src/routes/list/most-employees/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -12,23 +13,11 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+    text="These are the biggest U.S. companies ranked by the total number of
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    These are the biggest U.S. companies ranked by the total number of
     employees, updated daily. These are companies based in the United States of
-    America and listed on the stock market.
+    America and listed on the stock market."
-  </div>
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getData} {defaultList} />

src/routes/list/most-ftd-shares/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Table from "$lib/components/Table/Table.svelte";
-
+  import Infobox from "$lib/components/Infobox.svelte";
   export let data;
 
   const defaultList = [
@@ -12,23 +12,11 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
+    text="These are the biggest U.S. companies ranked by failed-to-deliver (FTD)
-  >
-    <svg
-      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      ><path
-        fill="#fff"
-        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-      /></svg
-    >
-
-    These are the biggest U.S. companies ranked by failed-to-deliver (FTD)
     shares, updated daily. 'Relative FTD' compares FTD shares to average trading
-    volume, showing their significance in overall trading.
+    volume, showing their significance in overall trading."
-  </div>
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getData} {defaultList} />