ui fixes

src/lib/components/DividendAnnouncement.svelte

@@ -83,8 +83,8 @@
                   rawData?.dividendPrior -
                   1 >
                 0
-                  ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                  ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                  : 'text-[#FF2F1F]'}"
+                  : 'text-red-600 dark:text-[#FF2F1F]'}"
               >
                 {(
                   (rawData?.dividend / rawData?.dividendPrior - 1) *

src/lib/components/HoverStockChart.svelte

@@ -207,8 +207,9 @@
               <p>
                 Current Price: {stockChartData?.price?.toFixed(2)} (<span
                   class="text-xs {change >= 0
-                    ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                    ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                    : 'text-[#FF2F1F]'}">{change?.toFixed(2)}</span
+                    : 'text-red-600 dark:text-[#FF2F1F]'}"
+                  >{change?.toFixed(2)}</span
                 >)
               </p>
               <p>

src/lib/components/IndustryTable.svelte

@@ -90,7 +90,7 @@
 
 <div class="w-full overflow-x-auto">
   <table
-    class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
+    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>
       <TableHeader {columns} {sortOrders} {sortData} />
@@ -99,12 +99,12 @@
       {#each displayList as item}
         <!-- row -->
         <tr
-          class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800"
+          class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
         >
           <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
             <a
               href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
-              class="sm:hover:underline sm:hover:underline-offset-4 text-white"
+              class="sm:hover:underline sm:hover:underline-offset-4"
             >
               {item?.industry?.length > charNumber
                 ? item?.industry?.slice(0, charNumber) + "..."
@@ -112,50 +112,42 @@
             </a>
           </td>
 
-          <td
+          <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-            class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-          >
             {item?.numStocks}
           </td>
 
-          <td
+          <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-            class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-          >
             {abbreviateNumber(item?.totalMarketCap) ?? "n/a"}
           </td>
 
-          <td
+          <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-            class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-          >
             {item?.avgDividendYield?.toFixed(2) ?? "n/a"}%
           </td>
 
-          <td
+          <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-            class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-          >
             {item?.pe?.toFixed(2) ?? "n/a"}
           </td>
 
           <td
             class="{item?.profitMargin >= 0
-              ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+              ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-              : 'text-[#FF2F1F]'}  text-sm sm:text-[1rem] whitespace-nowrap text-end"
+              : 'text-red-600 dark:text-[#FF2F1F]'}  text-sm sm:text-[1rem] whitespace-nowrap text-end"
           >
             {abbreviateNumber(item?.profitMargin)}%
           </td>
 
           <td
             class="{item?.avgChange1D >= 0
-              ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+              ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-              : 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
+              : 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
           >
             {item?.avgChange1D?.toFixed(2) ?? "n/a"}%
           </td>
 
           <td
             class="{item?.avgChange1Y >= 0
-              ? "before:content-['+']  text-[#00FC50]"
+              ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-              : 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
+              : 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
           >
             {item?.avgChange1Y?.toFixed(2) ?? "n/a"}%
           </td>

src/lib/components/Options/UnusualActivity.svelte

@@ -768,7 +768,7 @@
                     <span
                       class="inline-block px-2 {item?.optionType === 'Calls'
                         ? 'text-green-600 dark:text-[#00FC50]'
-                        : 'text-[#FF2F1F]'}"
+                        : 'text-red-600 dark:text-[#FF2F1F]'}"
                     >
                       {item?.optionType}
                     </span>
@@ -817,7 +817,7 @@
                     'Bullish'
                       ? 'text-green-600 dark:text-[#00FC50]'
                       : item?.sentiment === 'Bearish'
-                        ? 'text-[#FF2F1F]'
+                        ? 'text-red-600 dark:text-[#FF2F1F]'
                         : 'text-[#C8A32D]'} "
                   >
                     {item?.sentiment}

src/lib/components/PriceAnalysis.svelte

@@ -170,7 +170,8 @@
                   class="text-start text-[1rem] sm:text-lg font-semibold {priceSentiment ===
                   'Bullish'
                     ? 'text-[#37C97D]'
-                    : 'text-[#FF2F1F]'}">{priceSentiment}</span
+                    : 'text-red-600 dark:text-[#FF2F1F]'}"
+                  >{priceSentiment}</span
                 >
               </div>
             </div>
@@ -215,7 +216,7 @@
                         ? 'text-green-600 dark:text-[#00FC50]'
                         : r2Score >= 50
                           ? 'text-[#F8901E]'
-                          : 'text-[#FF2F1F]'}"
+                          : 'text-red-600 dark:text-[#FF2F1F]'}"
                       stroke-width="3"
                       stroke-dasharray="100"
                       stroke-dashoffset={100 - r2Score}
@@ -270,7 +271,7 @@
                         ? 'text-green-600 dark:text-[#00FC50]'
                         : mape <= 35
                           ? 'text-[#F8901E]'
-                          : 'text-[#FF2F1F]'}"
+                          : 'text-red-600 dark:text-[#FF2F1F]'}"
                       stroke-width="3"
                       stroke-dasharray="100"
                       stroke-dashoffset={100 - mape > 0 ? 100 - mape : 1}
@@ -299,7 +300,7 @@
           <span
             class="font-semibold {priceSentiment === 'Bullish'
               ? 'text-[#37C97D]'
-              : 'text-[#FF2F1F]'}">{priceSentiment}</span
+              : 'text-red-600 dark:text-[#FF2F1F]'}">{priceSentiment}</span
           >
           trend, suggesting that the future price is expected to {priceSentiment ===
           "Bullish"

src/lib/components/SentimentAnalysis.svelte

@@ -79,7 +79,7 @@
                     class="stroke-current {oneYearResult > 5
                       ? 'text-green-600 dark:text-[#00FC50]'
                       : oneYearResult < 5
-                        ? 'text-[#FF2F1F]'
+                        ? 'text-red-600 dark:text-[#FF2F1F]'
                         : 'text-white'} text-opacity-[0.7]"
                     stroke-width="3.5"
                     stroke-dasharray="100"
@@ -116,7 +116,7 @@
                         class="stroke-current {oneMonthResult > 5
                           ? 'text-green-600 dark:text-[#00FC50]'
                           : oneMonthResult < 5
-                            ? 'text-[#FF2F1F]'
+                            ? 'text-red-600 dark:text-[#FF2F1F]'
                             : 'text-white'} "
                         stroke-width="4"
                         stroke-dasharray="100"

src/lib/components/VaR.svelte

@@ -168,7 +168,7 @@
                     class="stroke-current {rating > 5
                       ? 'text-green-600 dark:text-[#00FC50]'
                       : rating < 5
-                        ? 'text-[#FF2F1F]'
+                        ? 'text-red-600 dark:text-[#FF2F1F]'
                         : 'text-white'} "
                     stroke-width="4"
                     stroke-dasharray="100"

src/routes/analysts/[slug]/+page.svelte

@@ -479,7 +479,7 @@
                                           'Sell',
                                           'Underperform',
                                         ]?.includes(item?.rating_current)
-                                      ? 'text-[#FF2F1F]'
+                                      ? 'text-red-600 dark:text-[#FF2F1F]'
                                       : 'text-gray-300'}"
                               >
                                 {item?.rating_current}
@@ -528,7 +528,7 @@
 
                           <td
                             class="{item?.upside >= 0 && item?.upside !== null
-                              ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                              ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                               : item?.upside < 0 && item?.upside !== null
                                 ? 'text-red-600 dark:text-[#FF2F1F]'
                                 : ''} text-end text-sm sm:text-[1rem] whitespace-nowrap"

src/routes/blog/+page.svelte

@@ -23,7 +23,7 @@
       >
         <main class="w-full">
           <div class="mb-6 border-b-[2px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+            <h1 class="mb-1 text-2xl sm:text-3xl font-bold">
               Stock Analysis Blog
             </h1>
           </div>
@@ -32,7 +32,7 @@
             {#if allBlogPosts?.length !== 0}
               {#each allBlogPosts as item}
                 <div
-                  class="flex flex-col overflow-hidden rounded border border-gray-700"
+                  class="shadow-sm sm:hover:shadow-lg flex flex-col overflow-hidden rounded border border-gray-300 dark:border-gray-700"
                 >
                   <div class="shrink-0">
                     <a href={"/blog/article/" + convertToSlug(item?.title)}
@@ -49,18 +49,16 @@
                     >
                   </div>
                   <div
-                    class="flex flex-1 flex-col justify-between bg-table p-4 sm:p-6"
+                    class="flex flex-1 flex-col justify-between bg-white dark:bg-table p-4 sm:p-6"
                   >
                     <div class="flex-1">
                       <a
                         href={"/blog/article/" + convertToSlug(item?.title)}
                         class="mt-2 block"
-                        ><h2
+                        ><h2 class="text-lg sm:text-xl font-semibold">
-                          class="text-lg sm:text-xl font-semibold text-white"
-                        >
                           {item?.title}
                         </h2>
-                        <p class="mt-3 text-sm text-white">
+                        <p class="mt-3 text-sm">
                           {item?.abstract.length > 250
                             ? item?.abstract?.slice(0, 250) + "..."
                             : item?.abstract}
@@ -68,7 +66,7 @@
                       >
                     </div>
                     <div class="mt-6 flex items-center">
-                      <div class="flex space-x-1 text-sm text-white">
+                      <div class="flex space-x-1 text-sm">
                         Published: <time datetime={item?.created} class="ml-1">
                           {new Date(item?.created)?.toLocaleString("en-US", {
                             month: "short",

src/routes/blog/article/[slug]/+page.svelte

@@ -21,7 +21,7 @@
 />
 
 <section
-  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3 text-white"
+  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="w-full overflow-hidden m-auto mt-5">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
@@ -33,7 +33,7 @@
               article?.id,
               article?.cover,
             )}
-            class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-800"
+            class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-300 dark:border-gray-800"
             loading="lazy"
             alt="Wallpaper"
           />
@@ -42,17 +42,15 @@
           <article
             class="z-5 relative mx-1 {article?.cover
               ? '-mt-10 lg:-mt-16'
-              : 'mt-5'} rounded-t-md bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
+              : 'mt-5'} rounded-t-md bg-white dark:bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
           >
             <header
-              class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
+              class="pb-3 border-b-[2px] border-muted dark:border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
             >
-              <h1
+              <h1 class="mb-3 text-2xl sm:text-3xl font-bold md:text-4xl">
-                class="mb-3 text-2xl sm:text-3xl font-bold text-white md:text-4xl"
-              >
                 {article?.title}
               </h1>
-              <div class="text-white">
+              <div class="">
                 <div>
                   Last Updated: {new Date(article?.updated)?.toLocaleString(
                     "en-US",

src/routes/etf/[tickerID]/+layout.svelte

@@ -753,7 +753,7 @@
                                 >
                                   <span
                                     class={displayLegend?.change >= 0
-                                      ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                                      ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                                       : "text-[#FF2F1F]"}
                                   >
                                     {displayLegend?.change}
@@ -797,8 +797,8 @@
                                   <div
                                     class="mt-1.5 block text-sm xs: sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >=
                                     0
-                                      ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                                      ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                                      : 'text-[#FF2F1F]'}"
+                                      : 'text-red-600 dark:text-[#FF2F1F]'}"
                                   >
                                     {prePostData?.changesPercentage?.toFixed(
                                       2,

src/routes/etf/[tickerID]/+page.svelte

@@ -746,7 +746,7 @@
                   >
                     <span
                       class={displayLegend?.graphChange >= 0
-                        ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                        ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                         : "text-[#FF2F1F]"}
                     >
                       {displayLegend?.graphChange ??

src/routes/etf/[tickerID]/history/+page.svelte

@@ -480,7 +480,7 @@
                                 ? "text-[#00FC50] before:content-['+'] "
                                 : item?.changesPercentage < 0 &&
                                     item?.changesPercentage !== null
-                                  ? 'text-[#FF2F1F]'
+                                  ? 'text-red-600 dark:text-[#FF2F1F]'
                                   : 'text-white'} text-end"
                             >
                               {item?.changesPercentage !== null

src/routes/index/[tickerID]/+layout.svelte

@@ -756,7 +756,7 @@
                                 >
                                   <span
                                     class={displayLegend?.change >= 0
-                                      ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                                      ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                                       : "text-[#FF2F1F]"}
                                   >
                                     {displayLegend?.change}
@@ -800,8 +800,8 @@
                                   <div
                                     class="mt-1.5 block text-sm xs: sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >=
                                     0
-                                      ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                                      ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                                      : 'text-[#FF2F1F]'}"
+                                      : 'text-red-600 dark:text-[#FF2F1F]'}"
                                   >
                                     {prePostData?.changesPercentage?.toFixed(
                                       2,

src/routes/index/[tickerID]/+page.svelte

@@ -747,7 +747,7 @@
                   >
                     <span
                       class={displayLegend?.graphChange >= 0
-                        ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                        ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                         : "text-[#FF2F1F]"}
                     >
                       {displayLegend?.graphChange ??

src/routes/index/[tickerID]/history/+page.svelte

@@ -476,7 +476,7 @@
                                 ? "text-[#00FC50] before:content-['+'] "
                                 : item?.changesPercentage < 0 &&
                                     item?.changesPercentage !== null
-                                  ? 'text-[#FF2F1F]'
+                                  ? 'text-red-600 dark:text-[#FF2F1F]'
                                   : 'text-white'} text-end"
                             >
                               {item?.changesPercentage !== null

src/routes/industry/+layout.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { numberOfUnreadNotification } from "$lib/store";
   import { page } from "$app/stores";
 
   export let data;
@@ -42,17 +41,17 @@
     </ul>
   </div>
 
-  <div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-default overflow-hidden">
+  <div class="mt-10 sm:mt-5 w-full m-auto mb-10 overflow-hidden">
     <div class="mb-6">
-      <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+      <h1 class="mb-1 text-2xl sm:text-3xl font-bold">
         Stock Sectors & Industries
       </h1>
     </div>
 
-    <nav class="border-b-[2px] overflow-x-auto whitespace-nowrap mb-5">
+    <nav
-      <ul
+      class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
-        class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
+    >
-      >
+      <ul class="flex flex-row items-center w-full text-[1rem] sm:text-lg">
         {#each tabs as item, i}
           <a
             href={i === 0
@@ -62,8 +61,8 @@
                 : "/industry/all"}
             on:click={() => handleMode(i)}
             class="p-2 px-5 cursor-pointer {activeIdx === i
-              ? 'text-white bg-primary/90'
+              ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
-              : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+              : '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>

src/routes/industry/+page.svelte

@@ -3,6 +3,7 @@
   import IndustryTable from "$lib/components/IndustryTable.svelte";
   import { industryList, sectorList, sectorNavigation } from "$lib/utils";
   import SEO from "$lib/components/SEO.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
   let rawData = data?.getSectorIndustryOverview;
@@ -16,21 +17,10 @@
 />
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-default sm:rounded-md h-auto p-5 mb-4"
+    text={`We categorize stocks into ${sectorList?.length} sectors and ${industryList?.length}
-  >
+    industries, based on the company's primary business activity.`}
-    <svg
+  />
-      class="w-5 h-5 inline-block sm:mr-2 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
-    >
-    We categorize stocks into {sectorList?.length} sectors and {industryList?.length}
-    industries, based on the company's primary business activity.
-  </div>
 
   <!-- Page wrapper -->
   <div class="flex justify-center w-full m-auto h-full overflow-hidden">
@@ -41,13 +31,13 @@
           <a
             href={sectorNavigation?.find((item) => item?.title === sector)
               ?.link}
-            class=" cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl"
+            class=" cursor-pointer sm:hover:underline font-semibold text-lg sm:text-xl"
           >
             Sector: {sector}
             <svg
               class="inline-block h-6 w-6 -mt-1"
               viewBox="0 0 20 20"
-              fill="white"
+              fill="currentColor"
               style="max-width:40px"
               ><path
                 fill-rule="evenodd"
@@ -58,10 +48,10 @@
           </a>
         </div>
 
-        <div class="border-t border-gray-600 mt-5" />
+        <div class="border-t border-gray-300 dark:border-gray-600 mt-5" />
 
         <IndustryTable {charNumber} industryList={rawData[sector]} />
-        <div class="border-t border-gray-600 mt-5" />
+        <div class="border-t border-gray-300 dark:border-gray-600 mt-5" />
       {/each}
     </div>
   </div>

src/routes/industry/all/+page.svelte

@@ -103,7 +103,7 @@
     <!-- Content area -->
     <div class="w-full overflow-x-auto">
       <table
-        class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
+        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>
           <TableHeader {columns} {sortOrders} {sortData} />
@@ -112,12 +112,12 @@
           {#each displayList as item}
             <!-- row -->
             <tr
-              class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800"
+              class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
             >
               <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
                 <a
                   href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
-                  class="sm:hover:underline sm:hover:underline-offset-4 text-white"
+                  class="sm:hover:underline sm:hover:underline-offset-4"
                 >
                   {item?.industry?.length > charNumber
                     ? item?.industry?.slice(0, charNumber) + "..."
@@ -125,50 +125,42 @@
                 </a>
               </td>
 
-              <td
+              <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-              >
                 {item?.numStocks}
               </td>
 
-              <td
+              <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-              >
                 {abbreviateNumber(item?.totalMarketCap) ?? "n/a"}
               </td>
 
-              <td
+              <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-              >
                 {item?.avgDividendYield?.toFixed(2) ?? "n/a"}%
               </td>
 
-              <td
+              <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-              >
                 {item?.pe?.toFixed(2) ?? "n/a"}
               </td>
 
               <td
                 class=" {item?.profitMargin >= 0
-                  ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                  ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                  : 'text-[#FF2F1F]'}   text-sm sm:text-[1rem] whitespace-nowrap text-end"
+                  : 'text-red-600 dark:text-[#FF2F1F]'}   text-sm sm:text-[1rem] whitespace-nowrap text-end"
               >
                 {abbreviateNumber(item?.profitMargin)}%
               </td>
 
               <td
                 class="{item?.avgChange1D >= 0
-                  ? "before:content-['+']  text-[#00FC50]"
+                  ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                  : 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                  : 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgChange1D?.toFixed(2) ?? "n/a"}%
               </td>
 
               <td
                 class="{item?.avgChange1Y >= 0
-                  ? "before:content-['+']  text-[#00FC50]"
+                  ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                  : 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                  : 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgChange1Y?.toFixed(2) ?? "n/a"}%
               </td>

src/routes/industry/sectors/+page.svelte

@@ -102,7 +102,7 @@
     <!-- Content area -->
     <div class="w-full overflow-x-auto">
       <table
-        class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
+        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>
           <TableHeader {columns} {sortOrders} {sortData} />
@@ -111,14 +111,14 @@
           {#each displayList as item}
             <!-- row -->
             <tr
-              class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800"
+              class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
             >
               <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
                 <a
                   href={sectorNavigation?.find(
                     (listItem) => listItem?.title === item?.sector,
                   )?.link}
-                  class="sm:hover:underline sm:hover:underline-offset-4 text-white"
+                  class="sm:hover:underline sm:hover:underline-offset-4"
                 >
                   {item?.sector?.length > charNumber
                     ? item?.sector?.slice(0, charNumber) + "..."
@@ -126,50 +126,42 @@
                 </a>
               </td>
 
-              <td
+              <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-              >
                 {item?.numStocks}
               </td>
 
-              <td
+              <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-              >
                 {abbreviateNumber(item?.totalMarketCap) ?? "n/a"}
               </td>
 
-              <td
+              <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-              >
                 {item?.avgDividendYield?.toFixed(2) ?? "n/a"}%
               </td>
 
-              <td
+              <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
-                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
-              >
                 {item?.pe?.toFixed(2) ?? "n/a"}
               </td>
 
               <td
                 class=" {item?.profitMargin >= 0
-                  ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                  ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                  : 'text-[#FF2F1F]'}   text-sm sm:text-[1rem] whitespace-nowrap text-end"
+                  : 'text-red-600 dark:text-[#FF2F1F]'}   text-sm sm:text-[1rem] whitespace-nowrap text-end"
               >
                 {abbreviateNumber(item?.profitMargin)}%
               </td>
 
               <td
                 class="{item?.avgChange1M >= 0
-                  ? "before:content-['+']  text-[#00FC50]"
+                  ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                  : 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                  : 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgChange1D?.toFixed(2) ?? "n/a"}%
               </td>
 
               <td
                 class="{item?.avgChange1Y >= 0
-                  ? "before:content-['+']  text-[#00FC50]"
+                  ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
-                  : 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                  : 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
               >
                 {item?.avgChange1Y?.toFixed(2) ?? "n/a"}%
               </td>

src/routes/insider-tracker/+page.svelte

@@ -269,7 +269,7 @@
                           class="text-sm sm:text-[1rem] whitespace-nowrap text-end {item?.changesPercentage >=
                           0
                             ? 'text-green-600 dark:text-[#00FC50]'
-                            : 'text-[#FF2F1F]'}"
+                            : 'text-red-600 dark:text-[#FF2F1F]'}"
                         >
                           {item?.changesPercentage > 0
                             ? "+"
@@ -287,7 +287,7 @@
                           'Buy'
                             ? 'text-green-600 dark:text-[#00FC50]'
                             : item?.transactionType === 'Sell'
-                              ? 'text-[#FF2F1F]'
+                              ? 'text-red-600 dark:text-[#FF2F1F]'
                               : 'text-[#E57C34]'}"
                         >
                           <div class="flex flex-row items-center justify-end">

src/routes/learning-center/+page.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
   import { getImageURL, convertToSlug } from "$lib/utils";
   import SEO from "$lib/components/SEO.svelte";
-  import Infobox from "$lib/components/Infobox.svelte";
+
   export let data;
 
   let allBlogPosts = data?.getAllBlogPost;
 </script>
 
 <SEO
-  title="Learning Center"
+  title="Stock
-  description="Learn and Understand the features and datasets of Stockner to better navigate the stock market."
+    Analysis Blog"
+  description="Get the latest blog post to understand and invest correctly into companies."
 />
 
 <section
@@ -22,21 +23,19 @@
       >
         <main class="w-full">
           <div class="mb-6 border-b-[2px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+            <h1 class="mb-1 text-2xl sm:text-3xl font-bold">
-              Learning Center
+              Stock Analysis Blog
             </h1>
           </div>
 
-          <div class="w-full grid grid-cols-1 sm:grid-cols-3 gap-y-5 sm:gap-5">
+          <div class="w-full grid grid-cols-1 sm:grid-cols-3 gap-y-5 gap-5">
             {#if allBlogPosts?.length !== 0}
               {#each allBlogPosts as item}
                 <div
-                  class="flex flex-col overflow-hidden rounded border border-gray-700"
+                  class="shadow-sm sm:hover:shadow-lg flex flex-col overflow-hidden rounded border border-gray-300 dark:border-gray-700"
                 >
                   <div class="shrink-0">
-                    <a
+                    <a href={"/blog/article/" + convertToSlug(item?.title)}
-                      href={"/learning-center/article/" +
-                        convertToSlug(item?.title)}
                       ><img
                         class="h-48 w-full object-cover"
                         src={getImageURL(
@@ -50,29 +49,25 @@
                     >
                   </div>
                   <div
-                    class="flex flex-1 flex-col justify-between bg-table p-3 sm:p-6"
+                    class="flex flex-1 flex-col justify-between bg-white dark:bg-table p-4 sm:p-6"
                   >
                     <div class="flex-1">
                       <a
-                        href={"/learning-center/article/" +
+                        href={"/blog/article/" + convertToSlug(item?.title)}
-                          convertToSlug(item?.title)}
+                        class="mt-2 block"
-                        class="block"
+                        ><h2 class="text-lg sm:text-xl font-semibold">
-                        ><h2
-                          class="text-lg sm:text-xl font-semibold text-white"
-                        >
                           {item?.title}
                         </h2>
-                        <p class="mt-3 text-sm text-white">
+                        <p class="mt-3 text-sm">
                           {item?.abstract.length > 250
                             ? item?.abstract?.slice(0, 250) + "..."
                             : item?.abstract}
                         </p></a
                       >
                     </div>
-                    <div class="mt-3 flex items-center">
+                    <div class="mt-6 flex items-center">
-                      <div class="flex space-x-1 text-sm text-white">
+                      <div class="flex space-x-1 text-sm">
-                        <span class="font-semibold">Published:</span>
+                        Published: <time datetime={item?.created} class="ml-1">
-                        <time datetime={item?.created} class="ml-1">
                           {new Date(item?.created)?.toLocaleString("en-US", {
                             month: "short",
                             day: "numeric",
@@ -82,24 +77,9 @@
                         >
                       </div>
                     </div>
-                    <div class="flex flex-col text-white mt-3">
-                      <div class="flex flex-wrap gap-x-2 gap-y-3">
-                        {#each item?.tags as tags}
-                          <label
-                            class="px-2 text-sm py-1 text-black rounded bg-white ml-0"
-                          >
-                            {tags}
-                          </label>
-                        {/each}
-                      </div>
-                    </div>
                   </div>
                 </div>
               {/each}
-            {:else}
-              <div class="w-full">
-                <Infobox text="No blog posts found" />
-              </div>
             {/if}
           </div>
         </main>

src/routes/learning-center/article/[slug]/+page.svelte

@@ -15,11 +15,13 @@
 <SEO
   title={article?.title}
   description={article?.abstract}
-  image={getImageURL(article?.collectionId, article?.id, article?.cover)}
+  image={article?.comver
+    ? getImageURL(article?.collectionId, article?.id, article?.cover)
+    : ""}
 />
 
 <section
-  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3 text-white"
+  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="w-full overflow-hidden m-auto mt-5">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
@@ -31,7 +33,7 @@
               article?.id,
               article?.cover,
             )}
-            class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-800"
+            class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-300 dark:border-gray-800"
             loading="lazy"
             alt="Wallpaper"
           />
@@ -40,17 +42,15 @@
           <article
             class="z-5 relative mx-1 {article?.cover
               ? '-mt-10 lg:-mt-16'
-              : 'mt-5'} rounded-t-md bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
+              : 'mt-5'} rounded-t-md bg-white dark:bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
           >
             <header
-              class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
+              class="pb-3 border-b-[2px] border-muted dark:border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
             >
-              <h1
+              <h1 class="mb-3 text-2xl sm:text-3xl font-bold md:text-4xl">
-                class="mb-3 text-2xl sm:text-3xl font-bold text-white md:text-4xl"
-              >
                 {article?.title}
               </h1>
-              <div class="text-white">
+              <div class="">
                 <div>
                   Last Updated: {new Date(article?.updated)?.toLocaleString(
                     "en-US",
@@ -73,57 +73,6 @@
           </article>
         </div>
       </main>
-      <aside class="hidden lg:block relative fixed w-1/4">
-        <div class="mt-5 lg:w-full">
-          <div class="flex flex-wrap gap-y-5 justify-center px-5">
-            {#if !data?.user}
-              <div
-                class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit lg:mx-0 lg:w-[300px] xl:w-[360px]"
-              >
-                <div class="space-y-6 p-6">
-                  <h4 class="text-xl font-semibold sm:text-2xl sm:font-bold">
-                    Stay informed in just 2 minutes
-                  </h4>
-                  <p class=" text-white lg:text-lg">
-                    Get a daily email with the top market-moving news in bullet
-                    point format, for Pro Members only.
-                  </p>
-                  <div>
-                    <a
-                      href="/register"
-                      class=" btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
-                    >
-                      <span class="text-[1rem]">Sign Up</span>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            {/if}
-            <a
-              href="/watchlist/stocks"
-              class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit sm:hover:bg-secondary transition ease-out duration-100 lg:mx-0 lg:w-[300px] xl:w-[360px]"
-            >
-              <div class="space-y-3 p-6">
-                <h4 class="text-xl font-semibold">Watchlist</h4>
-                <p class=" text-white lg:text-lg">
-                  Build your watchlist to keep track of their performance
-                </p>
-              </div>
-            </a>
-            <a
-              href="/analysts/top-stocks"
-              class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit sm:hover:bg-secondary transition ease-out duration-100 lg:mx-0 lg:w-[300px] xl:w-[360px]"
-            >
-              <div class="space-y-3 p-6">
-                <h4 class="text-xl font-semibold">Top Stocks</h4>
-                <p class=" text-white lg:text-lg">
-                  Get the latest Top Wall Street Analyst Ratings
-                </p>
-              </div>
-            </a>
-          </div>
-        </div>
-      </aside>
     </div>
   </div>
 </section>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
   import Table from "$lib/components/Table/Table.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -16,17 +17,15 @@
 </script>
 
 <section class="w-full overflow-hidden m-auto">
-  <div
+  <Infobox
-    class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
+    text={`The industry has a total of ${rawData?.length} stocks, with a combined market
-  >
+    cap of ${abbreviateNumber(totalMarketCap)} and a total revenue of ${abbreviateNumber(
-    The industry has a total of {rawData?.length} stocks, with a combined market
-    cap of {abbreviateNumber(totalMarketCap)} and a total revenue of {abbreviateNumber(
       totalRevenue,
-    )}.
+    )}.`}
-  </div>
+  />
 
   <div
-    class="mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+    class="shadow-sm mt-4 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
   >
     <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
       <div class="flex items-center justify-between sm:block">

src/routes/market-flow/+page.svelte

@@ -706,7 +706,7 @@
                           class="text-sm sm:text-[1rem] {item?.changesPercentage >=
                           0
                             ? "text-[#00FC50] before:content-['+'] "
-                            : 'text-[#FF2F1F]'} text-end"
+                            : 'text-red-600 dark:text-[#FF2F1F]'} text-end"
                         >
                           {item?.changesPercentage}%
                         </td>

src/routes/market-flow/sector-flow/+page.svelte

@@ -810,7 +810,7 @@
                           class="text-sm sm:text-[1rem] {item?.changesPercentage >=
                           0
                             ? "text-[#00FC50] before:content-['+'] "
-                            : 'text-[#FF2F1F]'} text-end"
+                            : 'text-red-600 dark:text-[#FF2F1F]'} text-end"
                         >
                           {item?.changesPercentage}%
                         </td>

src/routes/stocks/[tickerID]/+page.svelte

@@ -756,7 +756,7 @@
                   >
                     <span
                       class={displayLegend?.graphChange >= 0
-                        ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                        ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                         : "text-[#FF2F1F]"}
                     >
                       {displayLegend?.graphChange ??

src/routes/stocks/[tickerID]/forecast/+page.svelte

@@ -842,22 +842,22 @@
                       ><td class="py-[3px] text-left lg:py-0.5">Change</td>
                       <td
                         class={lowChange > 0
-                          ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                          ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                           : "text-[#FF2F1F]"}>{lowChange}%</td
                       >
                       <td
                         class={avgChange > 0
-                          ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                          ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                           : "text-[#FF2F1F]"}>{avgChange}%</td
                       >
                       <td
                         class={medianChange > 0
-                          ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                          ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                           : "text-[#FF2F1F]"}>{medianChange}%</td
                       >
                       <td
                         class={highChange > 0
-                          ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                          ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                           : "text-[#FF2F1F]"}>{highChange}%</td
                       ></tr
                     ></tbody

src/routes/stocks/[tickerID]/forecast/ai/+page.svelte

@@ -364,7 +364,7 @@
                         )
                           ? 'text-green-600 dark:text-[#00FC50]'
                           : ['Strong Sell', 'Sell']?.includes(consensusRating)
-                            ? 'text-[#FF2F1F]'
+                            ? 'text-red-600 dark:text-[#FF2F1F]'
                             : 'text-[#fff]'}">{consensusRating}</span
                       >
                     </div>
@@ -405,22 +405,22 @@
                         ><td class="py-[3px] text-left lg:py-0.5">Change</td>
                         <td
                           class={lowChange > 0
-                            ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                            ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                             : "text-[#FF2F1F]"}>{lowChange}%</td
                         >
                         <td
                           class={avgChange > 0
-                            ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                            ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                             : "text-[#FF2F1F]"}>{avgChange}%</td
                         >
                         <td
                           class={medianChange > 0
-                            ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                            ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                             : "text-[#FF2F1F]"}>{medianChange}%</td
                         >
                         <td
                           class={highChange > 0
-                            ? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
+                            ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
                             : "text-[#FF2F1F]"}>{highChange}%</td
                         ></tr
                       ></tbody

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -450,7 +450,7 @@
                             : ['Strong Sell', 'Sell']?.includes(
                                   item?.rating_current,
                                 )
-                              ? 'text-[#FF2F1F]'
+                              ? 'text-red-600 dark:text-[#FF2F1F]'
                               : ''}"
                       >
                         {item?.rating_current}

src/routes/stocks/[tickerID]/history/+page.svelte

@@ -475,7 +475,7 @@
                               ? "text-[#00FC50] before:content-['+'] "
                               : item?.changesPercentage < 0 &&
                                   item?.changesPercentage !== null
-                                ? 'text-[#FF2F1F]'
+                                ? 'text-red-600 dark:text-[#FF2F1F]'
                                 : 'text-white'} text-end"
                           >
                             {item?.changesPercentage !== null

src/routes/stocks/[tickerID]/metrics/+page.svelte

@@ -141,7 +141,7 @@
                         class="text-sm sm:text-[1rem] text-end {growthValue > 0
                           ? 'text-green-600 dark:text-[#00FC50]'
                           : growthValue < 0
-                            ? 'text-[#FF2F1F]'
+                            ? 'text-red-600 dark:text-[#FF2F1F]'
                             : 'text-white'}  border-b border-gray-800"
                       >
                         {growthValue > 0 ? "+" : ""}{growthValue !== null &&
@@ -216,7 +216,7 @@
                           0
                             ? 'text-green-600 dark:text-[#00FC50]'
                             : growthValue < 0
-                              ? 'text-[#FF2F1F]'
+                              ? 'text-red-600 dark:text-[#FF2F1F]'
                               : 'text-white'}  border-b border-gray-800"
                         >
                           {growthValue > 0 ? "+" : ""}{growthValue !== null &&
@@ -293,7 +293,7 @@
                           0
                             ? 'text-green-600 dark:text-[#00FC50]'
                             : growthValue < 0
-                              ? 'text-[#FF2F1F]'
+                              ? 'text-red-600 dark:text-[#FF2F1F]'
                               : 'text-white'}  border-b border-gray-800"
                         >
                           {growthValue > 0 ? "+" : ""}{growthValue !== null &&

src/routes/watchlist/options/+page.svelte

@@ -320,7 +320,7 @@
                           class="text-sm sm:text-[1rem] {item?.put_call ===
                           'Calls'
                             ? 'text-green-600 dark:text-[#00FC50]'
-                            : 'text-[#FF2F1F]'} text-start"
+                            : 'text-red-600 dark:text-[#FF2F1F]'} text-start"
                         >
                           {item?.put_call}
                         </td>
@@ -330,7 +330,7 @@
                           'Bullish'
                             ? 'text-green-600 dark:text-[#00FC50]'
                             : item?.sentiment === 'Bearish'
-                              ? 'text-[#FF2F1F]'
+                              ? 'text-red-600 dark:text-[#FF2F1F]'
                               : 'text-[#C6A755]'} text-start"
                         >
                           {item?.sentiment}