From 7caf65e34525decb4621d15a3899cca7efbca45d Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 28 Dec 2024 22:43:39 +0100
Subject: [PATCH] ui fix

---
 src/routes/list/dividend/[slug]/+page.svelte  | 25 ++++++-------------
 .../list/highest-income-tax/+page.svelte      | 21 ++++------------
 src/routes/list/highest-revenue/+page.svelte  | 21 ++++------------
 src/routes/list/most-employees/+page.svelte   | 21 ++++------------
 src/routes/list/most-ftd-shares/+page.svelte  | 22 ++++------------
 5 files changed, 28 insertions(+), 82 deletions(-)

diff --git a/src/routes/list/dividend/[slug]/+page.svelte b/src/routes/list/dividend/[slug]/+page.svelte
index 08d2df88..a9057f06 100644
--- a/src/routes/list/dividend/[slug]/+page.svelte
+++ b/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
-    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>
+  <Infobox {text} />
 
   <!-- Page wrapper -->
   <Table
diff --git a/src/routes/list/highest-income-tax/+page.svelte b/src/routes/list/highest-income-tax/+page.svelte
index 18515d1d..1a1661c1 100644
--- a/src/routes/list/highest-income-tax/+page.svelte
+++ b/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
-    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
-    >
-
-    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>
+  <Infobox
+    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."
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getData} {defaultList} />
diff --git a/src/routes/list/highest-revenue/+page.svelte b/src/routes/list/highest-revenue/+page.svelte
index 323b24aa..d47c5e99 100644
--- a/src/routes/list/highest-revenue/+page.svelte
+++ b/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
-    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
-    >
-
-    These are the biggest U.S. companies ranked by total revenue or sales over
+  <Infobox
+    text="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.
-  </div>
+    can be publicly traded on the stock exchange."
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getData} {defaultList} />
diff --git a/src/routes/list/most-employees/+page.svelte b/src/routes/list/most-employees/+page.svelte
index 6daf843b..dfa1d662 100644
--- a/src/routes/list/most-employees/+page.svelte
+++ b/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
-    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
-    >
-
-    These are the biggest U.S. companies ranked by the total number of
+  <Infobox
+    text="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.
-  </div>
+    America and listed on the stock market."
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getData} {defaultList} />
diff --git a/src/routes/list/most-ftd-shares/+page.svelte b/src/routes/list/most-ftd-shares/+page.svelte
index 60bbade0..afeb7559 100644
--- a/src/routes/list/most-ftd-shares/+page.svelte
+++ b/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
-    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
-    >
-
-    These are the biggest U.S. companies ranked by failed-to-deliver (FTD)
+  <Infobox
+    text="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.
-  </div>
+    volume, showing their significance in overall trading."
+  />
 
   <!-- Page wrapper -->
   <Table {data} rawData={data?.getData} {defaultList} />