From cf79e700bc903b993fc56f685f1bbf56b61c08c2 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 11 Mar 2025 00:26:49 +0100
Subject: [PATCH] update ipo page

---
 src/routes/ipos/+layout.svelte              | 26 ++++-----
 src/routes/ipos/+page.svelte                | 10 ++--
 src/routes/ipos/[slug]/+page.svelte         | 61 ++++++++-------------
 src/routes/ipos/news/+page.svelte           | 42 ++++++++------
 src/routes/market-news/+page.svelte         |  8 ++-
 src/routes/market-news/general/+page.svelte |  8 ++-
 6 files changed, 78 insertions(+), 77 deletions(-)

diff --git a/src/routes/ipos/+layout.svelte b/src/routes/ipos/+layout.svelte
index 6c9bb16c..ce388a9e 100644
--- a/src/routes/ipos/+layout.svelte
+++ b/src/routes/ipos/+layout.svelte
@@ -67,18 +67,20 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:pr-5">
-          <h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
+          <h1 class="mb-6 text-2xl sm:text-3xl font-bold">
             {activeIdx === 0 ? "Recent IPOs" : "IPO News"}
           </h1>
 
-          <nav class=" border-b-[2px] overflow-x-auto whitespace-nowrap">
-            <ul class="flex flex-row items-center w-full text-lg text-white">
+          <nav
+            class=" border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
+          >
+            <ul class="flex flex-row items-center w-full text-lg">
               {#each tabs as item, i}
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-primary/90 font-semibold'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                    ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                    : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
                 >
                   {item.title}
                 </a>
@@ -87,18 +89,16 @@
           </nav>
 
           {#if activeIdx === 0}
-            <nav class=" overflow-x-auto whitespace-nowrap">
-              <ul
-                class="flex flex-row items-center w-full text-[1rem] text-white"
-              >
+            <nav class="overflow-x-auto whitespace-nowrap">
+              <ul class="flex flex-row items-center w-full text-[1rem]">
                 {#each ["Latest", "2025", "2024", "2023", "2022", "2021", "2020", "2019"] as item}
                   {#if item !== "Latest"}
                     <a
                       href={`/ipos/${item}`}
                       on:click={() => (displaySection = item)}
                       class="p-2 px-5 cursor-pointer {displaySection === item
-                        ? 'text-white bg-primary/90'
-                        : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                        ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                        : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
                     >
                       {item}
                     </a>
@@ -107,8 +107,8 @@
                       href={`/ipos`}
                       on:click={() => (displaySection = item)}
                       class="p-2 px-5 cursor-pointer {displaySection === item
-                        ? 'text-white bg-primary/90'
-                        : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                        ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                        : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
                     >
                       {item}
                     </a>
diff --git a/src/routes/ipos/+page.svelte b/src/routes/ipos/+page.svelte
index c4c46453..d5b50ba5 100644
--- a/src/routes/ipos/+page.svelte
+++ b/src/routes/ipos/+page.svelte
@@ -39,7 +39,7 @@
 />
 
 <div class="w-full overflow-hidden m-auto mt-5">
-  <h2 class="text-white text-xl font- text-start mt-5 w-full font-semibold">
+  <h2 class=" text-xl font- text-start mt-5 w-full font-semibold">
     Last {rawData?.length} IPOs
   </h2>
   <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
@@ -60,11 +60,11 @@
       <aside class="hidden lg:block relative fixed w-1/4">
         {#if ipoNews?.length !== 0}
           <div
-            class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
           >
             <div class="p-4 text-sm">
-              <h3 class="text-xl text-white font-bold mb-3">IPO News</h3>
-              <ul class="text-white">
+              <h3 class="text-xl font-bold mb-3">IPO News</h3>
+              <ul class="">
                 {#each ipoNews?.slice(0, 10) as item}
                   <li class="mb-3 last:mb-1">
                     {item?.timestamp}
@@ -79,7 +79,7 @@
               </ul>
               <a
                 href={`/ipos/news`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
               >
                 More IPO News
               </a>
diff --git a/src/routes/ipos/[slug]/+page.svelte b/src/routes/ipos/[slug]/+page.svelte
index 7662c653..39a217d6 100644
--- a/src/routes/ipos/[slug]/+page.svelte
+++ b/src/routes/ipos/[slug]/+page.svelte
@@ -59,42 +59,33 @@
       <main class="w-full lg:w-3/4 lg:pr-10">
         <div class="flex flex-col justify-center items-center">
           {#if rawData?.length !== 0}
-            <h2
-              class="text-white text-xl font- text-start mt-5 w-full font-semibold"
-            >
+            <h2 class=" text-xl font- text-start mt-5 w-full font-semibold">
               {rawData?.length} IPOs
             </h2>
             <div class="w-full overflow-x-auto">
               <table
-                class="mt-5 table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto overflow-hidden"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
               >
-                <thead class="bg-default">
+                <thead class="text-muted dark:text-white">
                   <tr>
-                    <th class="text-white font-semibold text-sm text-start"
-                      >IPO Date</th
-                    >
-                    <th class="text-white font-semibold text-sm text-start"
-                      >Symbol</th
-                    >
-                    <th class="text-white font-semibold text-sm">Name</th>
-                    <th class="text-white font-semibold text-end text-sm"
-                      >IPO Price</th
-                    >
-                    <th class="text-white font-semibold text-end text-sm"
+                    <th class=" font-semibold text-sm text-start">IPO Date</th>
+                    <th class=" font-semibold text-sm text-start">Symbol</th>
+                    <th class=" font-semibold text-sm">Name</th>
+                    <th class=" font-semibold text-end text-sm">IPO Price</th>
+                    <th class=" font-semibold text-end text-sm"
                       >Current Price</th
                     >
-                    <th class="text-white font-semibold text-end text-sm"
-                      >Return Since</th
+                    <th class=" font-semibold text-end text-sm">Return Since</th
                     >
                   </tr>
                 </thead>
                 <tbody>
                   {#each ipoList as item}
                     <tr
-                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b-[#09090B]"
+                      class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
                     >
                       <td
-                        class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
+                        class=" text-sm sm:text-[1rem] whitespace-nowrap text-start whitespace-nowrap"
                       >
                         {new Date(item?.ipoDate)?.toLocaleString("en-US", {
                           month: "short",
@@ -105,7 +96,7 @@
                       </td>
 
                       <td
-                        class="text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
+                        class="text-sm sm:text-[1rem] whitespace-nowrap text-start whitespace-nowrap"
                       >
                         <a
                           href={"/stocks/" + item?.symbol}
@@ -115,10 +106,8 @@
                         </a>
                       </td>
 
-                      <td
-                        class="text-gray-200 border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
-                      >
-                        <span class="text-white"
+                      <td class=" whitespace-nowrap text-sm sm:text-[1rem]">
+                        <span class=""
                           >{item?.name?.length > charNumber
                             ? formatString(item?.name?.slice(0, charNumber)) +
                               "..."
@@ -127,35 +116,33 @@
                       </td>
 
                       <td
-                        class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
+                        class=" text-sm sm:text-[1rem] whitespace-nowrap text-end"
                       >
                         {item?.ipoPrice !== null ? item?.ipoPrice : "n/a"}
                       </td>
 
-                      <td
-                        class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
-                      >
+                      <td class="  text-sm sm:text-[1rem] text-end">
                         {item?.currentPrice !== null
                           ? item?.currentPrice
                           : "n/a"}
                       </td>
 
                       <td
-                        class="text-white border-b-[#09090B] text-end flex flex-row items-center justify-end"
+                        class="  text-end flex flex-row items-center justify-end"
                       >
                         {#if item?.return >= 0 && item?.return !== null}
                           <span
-                            class="inline-block text-[#00FC50] text-sm sm:text-[1rem] whitespace-nowrap"
+                            class="inline-block text-green-600 dark:text-[#00FC50] text-sm sm:text-[1rem] whitespace-nowrap"
                             >+{abbreviateNumber(item?.return)}%</span
                           >
                         {:else if item?.return < 0 && item?.return !== null}
                           <span
-                            class="inline-block text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap"
+                            class="inline-block text-red-600 dark:text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap"
                             >{abbreviateNumber(item?.return)}%
                           </span>
                         {:else}
                           <span
-                            class="inline-block text-white text-sm sm:text-[1rem] whitespace-nowrap"
+                            class="inline-block text-sm sm:text-[1rem] whitespace-nowrap"
                           >
                             n/a
                           </span>
@@ -179,11 +166,11 @@
       <aside class="hidden lg:block relative fixed w-1/4">
         {#if ipoNews?.length !== 0}
           <div
-            class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
           >
             <div class="p-4 text-sm">
-              <h3 class="text-xl text-white font-bold mb-3">IPO News</h3>
-              <ul class="text-white">
+              <h3 class="text-xl font-bold mb-3">IPO News</h3>
+              <ul class="">
                 {#each ipoNews?.slice(0, 10) as item}
                   <li class="mb-3 last:mb-1">
                     {item?.timestamp}
@@ -198,7 +185,7 @@
               </ul>
               <a
                 href={`/ipos/news`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
               >
                 More IPO News
               </a>
diff --git a/src/routes/ipos/news/+page.svelte b/src/routes/ipos/news/+page.svelte
index 30438a6a..e11e9bfb 100644
--- a/src/routes/ipos/news/+page.svelte
+++ b/src/routes/ipos/news/+page.svelte
@@ -89,14 +89,14 @@
           <div class="grid grid-cols-1 gap-y-3">
             {#if news?.length !== 0}
               {#each news as item, index}
-                <div class="w-full flex flex-col bg-default rounded-md m-auto">
-                  {#if checkIfYoutubeVideo(item.link)}
+                <div class="w-full flex flex-col rounded-md m-auto">
+                  {#if checkIfYoutubeVideo(item?.link)}
                     {#if showVideo[index]}
                       <!-- Show the YouTube iframe when the user clicks play -->
                       <div class="w-full aspect-video mb-4">
                         <iframe
-                          class="w-full h-full rounded-md border border-gray-800"
-                          src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item.link)}`}
+                          class="w-full h-full rounded-md border border-gray-300 dark:border-gray-800"
+                          src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item?.link)}`}
                           frameborder="0"
                           allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                           allowfullscreen
@@ -108,7 +108,7 @@
                         <div class="mb-3 sm:order-3 lg:pr-2">
                           <div
                             class="group relative block cursor-pointer bg-black bg-cover bg-[center_50%] object-contain after:block after:pb-[56.25%] after:content-[''] rounded-sm focus:outline-hidden focus:ring-2 focus:ring-blue-brand_light focus:ring-offset-2"
-                            style="background-image: url({item?.img});"
+                            style="background-image: url({item?.image});"
                             tabindex="0"
                             on:click={() => handlePlayClick(index)}
                           >
@@ -120,17 +120,19 @@
                       </div>
                     {/if}
                     <div class="mt-3 w-full">
-                      <h3 class="text-sm text-white/80 truncate mb-2">
-                        {item}
+                      <h3
+                        class="text-sm text-muted dark:text-white/80 truncate mb-2"
+                      >
+                        {item?.timestamp}
                       </h3>
                       <a
                         href={item?.link}
                         rel="noopener noreferrer"
                         target="_blank"
-                        class="text-lg sm:text-xl font-bold text-white"
+                        class="text-lg sm:text-xl font-bold"
                       >
                         {item?.title}
-                        <p class="text-white text-sm mt-2 font-normal">
+                        <p class=" text-sm mt-2 font-normal">
                           {item?.description?.length > 200
                             ? item?.description?.slice(0, 200) + "..."
                             : item?.description}
@@ -144,7 +146,7 @@
                         href={item?.link}
                         rel="noopener noreferrer"
                         target="_blank"
-                        class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
+                        class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-300 dark:border-gray-800 rounded-md"
                       >
                         <div class="shrink-0 m-auto">
                           <img
@@ -156,17 +158,19 @@
                         </div>
                       </a>
                       <div class="mt-3 sm:mt-0 w-full">
-                        <h3 class="text-sm text-white/80 truncate mb-2">
+                        <h3
+                          class="text-sm text-muted dark:text-white/80 truncate mb-2"
+                        >
                           {item?.timestamp}
                         </h3>
                         <a
                           href={item?.url}
                           rel="noopener noreferrer"
                           target="_blank"
-                          class="text-lg sm:text-xl font-bold text-white"
+                          class="text-lg sm:text-xl font-bold"
                         >
                           {item?.title}
-                          <p class="text-white text-sm mt-2 font-normal">
+                          <p class=" text-sm mt-2 font-normal">
                             {item?.description?.length > 200
                               ? item?.description?.slice(0, 200) + "..."
                               : item?.description}
@@ -176,7 +180,9 @@
                     </div>
                   {/if}
                 </div>
-                <hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
+                <hr
+                  class="border-gray-300 dark:border-gray-600 w-full m-auto mt-5 mb-5"
+                />
               {/each}
             {/if}
           </div>
@@ -185,11 +191,11 @@
       <aside class="hidden lg:block relative fixed w-1/4">
         {#if marketNews?.length !== 0}
           <div
-            class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-2 mt-4 cursor-pointer bg-inherit"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
           >
             <div class="p-4 text-sm">
-              <h3 class="text-xl text-white font-bold mb-3">Stocks News</h3>
-              <ul class="text-white">
+              <h3 class="text-xl font-bold mb-3">IPO News</h3>
+              <ul class="">
                 {#each marketNews?.slice(0, 10) as item}
                   <li class="mb-3 last:mb-1">
                     {formatDate(item?.publishedDate)} ago -
@@ -205,7 +211,7 @@
               </ul>
               <a
                 href={`/market-news`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-5 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
               >
                 More Stocks News
               </a>
diff --git a/src/routes/market-news/+page.svelte b/src/routes/market-news/+page.svelte
index 8d87e864..863c7a0c 100644
--- a/src/routes/market-news/+page.svelte
+++ b/src/routes/market-news/+page.svelte
@@ -121,7 +121,9 @@
                       </div>
                     {/if}
                     <div class="mt-3 w-full">
-                      <h3 class="text-sm text-white/80 truncate mb-2">
+                      <h3
+                        class="text-sm text-muted dark:text-white/80 truncate mb-2"
+                      >
                         {formatDate(item?.publishedDate)} &#183; {item?.site}
                       </h3>
                       <a
@@ -157,7 +159,9 @@
                         </div>
                       </a>
                       <div class="mt-3 sm:mt-0 w-full">
-                        <h3 class="text-sm text-white/80 truncate mb-2">
+                        <h3
+                          class="text-sm text-muted dark:text-white/80 truncate mb-2"
+                        >
                           {formatDate(item?.publishedDate)} &#183; {item?.site}
                         </h3>
                         <a
diff --git a/src/routes/market-news/general/+page.svelte b/src/routes/market-news/general/+page.svelte
index c0bdb47f..e9b2274a 100644
--- a/src/routes/market-news/general/+page.svelte
+++ b/src/routes/market-news/general/+page.svelte
@@ -121,7 +121,9 @@
                       </div>
                     {/if}
                     <div class="mt-3 w-full">
-                      <h3 class="text-sm text-white/80 truncate mb-2">
+                      <h3
+                        class="text-sm text-muted dark:text-white/80 truncate mb-2"
+                      >
                         {formatDate(item?.publishedDate)} &#183; {item?.site}
                       </h3>
                       <a
@@ -157,7 +159,9 @@
                         </div>
                       </a>
                       <div class="mt-3 sm:mt-0 w-full">
-                        <h3 class="text-sm text-white/80 truncate mb-2">
+                        <h3
+                          class="text-sm text-muted dark:text-white/80 truncate mb-2"
+                        >
                           {formatDate(item?.publishedDate)} &#183; {item?.site}
                         </h3>
                         <a