From eb15bca8c6585ae75ddae46ecf112b708158425e Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 29 Oct 2024 18:09:32 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/IndustryTable.svelte   |   4 +-
 src/routes/+layout.svelte                 |  17 +-
 src/routes/+page.svelte                   |   5 +-
 src/routes/economic-calendar/+page.svelte |  85 +++-------
 src/routes/industry/+layout.svelte        | 182 ++++++++++------------
 src/routes/industry/+page.svelte          | 158 ++++++++++---------
 src/routes/industry/all/+page.svelte      |  17 +-
 src/routes/industry/sectors/+page.svelte  |   6 +-
 src/routes/ipos/+page.svelte              |  16 +-
 src/routes/list/+layout.svelte            |  10 +-
 10 files changed, 216 insertions(+), 284 deletions(-)

diff --git a/src/lib/components/IndustryTable.svelte b/src/lib/components/IndustryTable.svelte
index e4ee7625..aae917db 100644
--- a/src/lib/components/IndustryTable.svelte
+++ b/src/lib/components/IndustryTable.svelte
@@ -73,7 +73,7 @@
 
           <td
             class="{item?.avgChange1M >= 0
-              ? 'text-[#00FC50]'
+              ? "before:content-['+'] text-[#00FC50]"
               : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
           >
             {item?.avgChange1M?.toFixed(2) ?? "-"}%
@@ -81,7 +81,7 @@
 
           <td
             class="{item?.avgChange1Y >= 0
-              ? 'text-[#00FC50]'
+              ? "before:content-['+']  text-[#00FC50]"
               : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
           >
             {item?.avgChange1Y?.toFixed(2) ?? "-"}%
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bb2db8c5..71a223b9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -118,19 +118,10 @@
     $page.url.pathname.startsWith("/options-flow") ||
     $page.url.pathname.startsWith("/options-zero-dte") ||
     $page.url.pathname.startsWith("/login") ||
-    $page.url.pathname.startsWith("/register") ||
     $page.url.pathname.startsWith("/etf") ||
-    $page.url.pathname.startsWith("/stock-splits-calendar") ||
-    $page.url.pathname.startsWith("/dividends-calendar") ||
-    $page.url.pathname.startsWith("/earnings-calendar") ||
-    $page.url.pathname.startsWith("/market-mover") ||
-    $page.url.pathname.startsWith("/market-news") ||
     $page.url.pathname.startsWith("/portfolio") ||
     $page.url.pathname.startsWith("/hedge-funds") ||
-    $page.url.pathname.startsWith("/watchlist") ||
-    $page.url.pathname.startsWith("/community") ||
-    $page.url.pathname.startsWith("/stock-screener") ||
-    $page.url.pathname.startsWith("/price-alert");
+    $page.url.pathname.startsWith("/community");
 
   //$: hideSidebar = $page.url.pathname.startsWith('/contact') || $page.url.pathname.startsWith('/imprint') || $page.url.pathname.startsWith('/privacy-policy') || $page.url.pathname.startsWith('/terms-of-use') || $page.url.pathname.startsWith('/about') || $page.url.pathname.startsWith('/community/create-post') || $page.url.pathname.startsWith('/login') || $page.url.pathname.startsWith('/register')
 
@@ -539,6 +530,8 @@ const handleTwitchMessage = (event) => {
                               >Economic Calendar</a
                             >
                           </Button>
+                          <!--
+
                           <Button
                             builders={[builder]}
                             type="submit"
@@ -549,7 +542,9 @@ const handleTwitchMessage = (event) => {
                               class="text-start w-full text-[1rem] text-white ml-4 mt-4"
                               >Stock Splits Calendar</a
                             >
+                             
                           </Button>
+                           -->
                         </div>
                       </Sheet.Close>
                     </Accordion.Content>
@@ -1045,11 +1040,13 @@ const handleTwitchMessage = (event) => {
                             class="text-[1rem] text-white ml-4 mt-4"
                             >Economic Calendar</a
                           >
+                          <!--
                           <a
                             href="/stock-splits-calendar"
                             class="text-[1rem] text-white ml-4 mt-4"
                             >Stock Splits Calendar</a
                           >
+                            -->
                         </div>
                       </Accordion.Content>
                     </Accordion.Item>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7398f778..b83a0505 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -214,10 +214,9 @@
       </div>
 
       <h1
-        class="hidden sm:block text-3xl lg:text-5xl text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto"
+        class="hidden sm:block text-3xl lg:text-4xl text-white font-bold text-center mb-10 relative w-fit flex justify-center m-auto"
       >
-        Stock Analysis for
-        <span class="italic text-[#FBCE3C]">Data Freaks</span>
+        Clear & <span class="italic text-[#FBCE3C]">Simple</span> Market Insight.
       </h1>
 
       <h1
diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index 35af7dcf..f7e54af1 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -197,9 +197,9 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
 >
-  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4 sm:ml-0">
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li>
       <li class="text-gray-300">Economic Calendar</li>
@@ -212,60 +212,10 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
-              <!-- Start Column -->
-              <div>
-                <div class="flex flex-row justify-center items-center">
-                  <h1
-                    class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
-                  >
-                    Economic Calendar
-                  </h1>
-                </div>
-
-                <span
-                  class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
-                >
-                  Stay updated on upcoming Economic Events worldwide.
-                </span>
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div
-                class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
-              >
-                <svg
-                  class="w-36 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-0">
-                  <img class="w-24 ml-5" src={logo} alt="logo" loading="lazy" />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
+          <div class="mb-6 border-b-[2px]">
+            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+              Economic Calendar
+            </h1>
           </div>
 
           <!-- Page wrapper -->
@@ -370,7 +320,7 @@
               </div>
 
               <div
-                class="flex flex-row items-center w-fit m-auto sm:m-0 pt-6 pb-3"
+                class="flex flex-row items-center w-full sm:w-fit m-auto sm:m-0 pt-6 pb-3"
               >
                 <div
                   class="grid grid-cols-2 sm:grid-cols-3 gap-y-3 sm:gap-y-0 gap-x-2.5 lg:grid-cols-3 w-full mt-3"
@@ -379,7 +329,7 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
+                        class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                       >
                         <span class="truncate text-white">Filter Country</span>
                         <svg
@@ -444,7 +394,7 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
+                        class="border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
                       >
                         <span class="truncate text-white"
                           >Filter Importance</span
@@ -529,7 +479,7 @@
                   {#if filterList?.length !== 0}
                     <Button
                       on:click={() => handleReset()}
-                      class="w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out  flex flex-row justify-start items-center px-3 py-2 text-white rounded-lg truncate"
+                      class="w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out  flex flex-row justify-start items-center px-3 py-2 text-white rounded-md truncate"
                     >
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -556,6 +506,11 @@
                 {#each filterList?.length === 0 ? weekday : weekdayFiltered as day, index}
                   {#if index === selectedWeekday}
                     {#if day?.length !== 0}
+                      <h2 class="font-semibold text-white text-xl mt-5">
+                        {formattedWeekday[index]?.split(", ")[1]} · {day?.length}
+                        Events
+                      </h2>
+
                       <div class="w-full overflow-x-scroll no-scrollbar">
                         <table
                           class="table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
@@ -602,7 +557,7 @@
                                 <td
                                   class="text-white text-sm sm:text-[1rem] border-b-[#09090B]"
                                 >
-                                  <label class="p-1.5 rounded-lg">
+                                  <label class="p-1.5 rounded-md">
                                     {item?.time}
                                   </label>
                                 </td>
@@ -745,7 +700,7 @@
                       </div>
                     {:else}
                       <div
-                        class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
+                        class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"
                       >
                         <svg
                           class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
@@ -777,7 +732,7 @@
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
                   <h2 class="text-start text-xl font-semibold text-white ml-3">
-                    Pro Subscription 🔥
+                    Pro Subscription
                   </h2>
                   <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
                 </div>
@@ -797,7 +752,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Earnings Calendar 🌟
+                  Earnings Calendar
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
@@ -816,7 +771,7 @@
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Dividend Calendar 💸
+                  Dividend Calendar
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
diff --git a/src/routes/industry/+layout.svelte b/src/routes/industry/+layout.svelte
index 238d216b..ec3c1d7b 100644
--- a/src/routes/industry/+layout.svelte
+++ b/src/routes/industry/+layout.svelte
@@ -1,128 +1,110 @@
-<script lang='ts'>
-  import { numberOfUnreadNotification } from '$lib/store';
-  import { page } from '$app/stores';
-
-    export let data;
-
-
+<script lang="ts">
+  import { numberOfUnreadNotification } from "$lib/store";
+  import { page } from "$app/stores";
 
+  export let data;
 
   function handleMode(i) {
     activeIdx = i;
-
   }
-  
+
   const tabs = [
-      {
-        title: "Overview",
-      },
-      {
-        title: "Sectors",
-      },
-      {
-        title: "Industries",
-      },
-    ];
-  
-let activeIdx = 0;
+    {
+      title: "Overview",
+    },
+    {
+      title: "Sectors",
+    },
+    {
+      title: "Industries",
+    },
+  ];
+
+  let activeIdx = 0;
 
   // Subscribe to the $page store to reactively update the activeIdx based on the URL
-  $: if ($page.url.pathname === '/industry') {
+  $: if ($page.url.pathname === "/industry") {
     activeIdx = 0;
-  } else if ($page.url.pathname.startsWith('/industry/sectors')) {
+  } else if ($page.url.pathname.startsWith("/industry/sectors")) {
     activeIdx = 1;
-  } else if ($page.url.pathname.startsWith('/industry/all')) {
+  } else if ($page.url.pathname.startsWith("/industry/all")) {
     activeIdx = 2;
   }
-
 </script>
-        
-
 
 <svelte:head>
-  <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Industry · stocknear</title>
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Industry
+    · stocknear</title
+  >
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
 
-  <meta name="description" content="Lists of stocks industry and sectors.">
+  <meta name="description" content="Lists of stocks industry and sectors." />
   <!-- Other meta tags -->
-  <meta property="og:title" content="Industry · stocknear"/>
-  <meta property="og:description" content="Lists of stocks industry and sectors.">
-  <meta property="og:type" content="website"/>
+  <meta property="og:title" content="Industry · stocknear" />
+  <meta
+    property="og:description"
+    content="Lists of stocks industry and sectors."
+  />
+  <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content="Industry · stocknear"/>
-  <meta name="twitter:description" content="Lists of stocks industry and sectors.">
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Industry · stocknear" />
+  <meta
+    name="twitter:description"
+    content="Lists of stocks industry and sectors."
+  />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
-    
-    
-          
-<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40">
-            
-            <div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
-                <ul>
-                  <li><a href="/" class="text-gray-300">Home</a></li> 
-                  <li><span class="text-gray-300">Industry</span></li>
-                </ul>
-            </div>
 
+<section
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
+>
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
+    <ul>
+      <li><a href="/" class="text-gray-300">Home</a></li>
+      <li><span class="text-gray-300">Industry</span></li>
+    </ul>
+  </div>
 
+  <div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
+    <div class="mb-6">
+      <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+        Stock Sectors & Industries
+      </h1>
+    </div>
 
-        
-        <div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B]  lg:px-10 overflow-hidden">
-        
-        
-            <!--Start Top Winners/Losers-->
-            <div class="flex flex-col justify-center items-center">
-              
-              <div class="ml-4 sm:ml-2 text-start w-full text-white mb-1 text-2xl sm:text-3xl font-semibold">
-                Stock Sectors & Industries
-              </div>
-    
-              <div class="border-b mt-2 border-blue-400 w-full mb-7" />
-                <div class="ml-4 sm:ml-0 w-full mb-4">
-                    <div class="bg-[#313131] w-fit relative mr-auto flex flex-wrap items-center justify-center rounded sm:rounded-lg p-1 -mt-3">
-                    {#each tabs as item, i}
-                    <a href={i === 0 ? '/industry' : i === 1 ? '/industry/sectors' : '/industry/all'}
-                        on:click={() => handleMode(i)}
-                        class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
-                        ? 'z-0'
-                        : ''} "
-                    >
-                        {#if activeIdx === i}
-                            <div
-                            class="absolute inset-0 rounded-lg bg-purple-600"
-                            ></div>
-                        {/if}
-                        <span class="relative text-[1rem] block font-semibold duration-200 text-white">
-                            {item.title}
-                        </span>
-                    </a>
-                    {/each}
-                    </div>
-                </div>
+    <nav class="border-b-[2px] overflow-x-scroll whitespace-nowrap mb-5">
+      <ul
+        class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
+      >
+        {#each tabs as item, i}
+          <a
+            href={i === 0
+              ? "/industry"
+              : i === 1
+                ? "/industry/sectors"
+                : "/industry/all"}
+            on:click={() => handleMode(i)}
+            class="p-2 px-5 cursor-pointer {activeIdx === i
+              ? 'text-white bg-[#27272A] sm:hover:bg-opacity-[0.95]'
+              : 'text-gray-400 sm:hover:text-white sm:hover:bg-[#27272A] sm:hover:bg-opacity-[0.95]'}"
+          >
+            {item.title}
+          </a>
+        {/each}
+      </ul>
+    </nav>
 
-              <div class="flex justify-center w-full m-auto overflow-hidden">
-      
-            <main class="w-full">
-              <slot />
-            </main>
-
-          
-
-            </div>
-
-
-          
-          </div>
-    
-    
-        </div>
-     
-        
-        </section>
-        
-        
\ No newline at end of file
+    <div class="w-full flex flex-col justify-center items-center">
+      <div class="flex justify-center w-full m-auto overflow-hidden">
+        <main class="w-full">
+          <slot />
+        </main>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/industry/+page.svelte b/src/routes/industry/+page.svelte
index 90d0ab8c..a2d678b2 100644
--- a/src/routes/industry/+page.svelte
+++ b/src/routes/industry/+page.svelte
@@ -1,106 +1,114 @@
-<script lang='ts'>
-import { screenWidth } from '$lib/store';
-import IndustryTable from '$lib/components/IndustryTable.svelte';
-import { industryList, sectorList } from '$lib/utils';
-import { goto } from '$app/navigation';
+<script lang="ts">
+  import { screenWidth } from "$lib/store";
+  import IndustryTable from "$lib/components/IndustryTable.svelte";
+  import { industryList, sectorList } from "$lib/utils";
+  import { goto } from "$app/navigation";
 
-export let data;
-let rawData = data?.getSectorIndustryOverview;
+  export let data;
+  let rawData = data?.getSectorIndustryOverview;
 
-const sectorNavigation = [
+  const sectorNavigation = [
     {
-        title: 'Financial Services',
-        link: '/list/financial-sector'
+      title: "Financial Services",
+      link: "/list/financial-sector",
     },
     {
-        title: 'Finance',
-        link: '/list/financial-sector'
+      title: "Finance",
+      link: "/list/financial-sector",
     },
     {
-        title: 'Healthcare',
-        link: '/list/healthcare-sector'
+      title: "Healthcare",
+      link: "/list/healthcare-sector",
     },
     {
-        title: 'Technology',
-        link: '/list/technology-sector'
+      title: "Technology",
+      link: "/list/technology-sector",
     },
     {
-        title: 'Industrials',
-        link: '/list/industrials-sector'
+      title: "Industrials",
+      link: "/list/industrials-sector",
     },
     {
-        title: 'Energy',
-        link: '/list/energy-sector'
+      title: "Energy",
+      link: "/list/energy-sector",
     },
     {
-        title: 'Utilities',
-        link: '/list/utilities-sector'
+      title: "Utilities",
+      link: "/list/utilities-sector",
     },
     {
-        title: 'Consumer Cyclical',
-        link: '/list/consumer-cyclical-sector'
+      title: "Consumer Cyclical",
+      link: "/list/consumer-cyclical-sector",
     },
     {
-        title: 'Real Estate',
-        link: '/list/real-estate-sector'
+      title: "Real Estate",
+      link: "/list/real-estate-sector",
     },
     {
-        title: 'Basic Materials',
-        link: '/list/basic-materials-sector'
+      title: "Basic Materials",
+      link: "/list/basic-materials-sector",
     },
     {
-        title: 'Communication Services',
-        link: '/list/communication-services-sector'
+      title: "Communication Services",
+      link: "/list/communication-services-sector",
     },
     {
-        title: 'Consumer Defensive',
-        link: '/list/consumer-defensive-sector'
+      title: "Consumer Defensive",
+      link: "/list/consumer-defensive-sector",
     },
-]
-
-
-
-
-$: charNumber = $screenWidth < 640 ? 20 : 30;
+  ];
 
+  $: charNumber = $screenWidth < 640 ? 20 : 30;
 </script>
-    
-    <section class="w-full overflow-hidden m-auto px-2 sm:px-0">
-            
-          
-        <div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg 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="#a474f6" 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.
+
+<section class="w-full overflow-hidden m-auto">
+  <div
+    class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg 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="#a474f6"
+        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">
+    <!-- Content area -->
+    <div class="w-full">
+      {#each sectorList as sector}
+        <div class="mt-4">
+          <a
+            href={sectorNavigation?.find((item) => item?.title === sector)
+              ?.link}
+            class=" cursor-pointer text-white 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"
+              style="max-width:40px"
+              ><path
+                fill-rule="evenodd"
+                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                clip-rule="evenodd"
+              ></path></svg
+            >
+          </a>
         </div>
-    
-      
-        
-          <!-- Page wrapper -->
-          <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-      
-              
-        
-              <!-- Content area -->
-              <div class="w-full">
-                {#each sectorList as sector}
-                <div class="mt-4">
-                    <a href={sectorNavigation?.find(item => item?.title === sector)?.link} class=" cursor-pointer text-white 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" style="max-width:40px"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    </a>
-                </div>
-                    
-                    <div class="border-t border-gray-600 mt-5 "/>
 
-                    <IndustryTable charNumber = {charNumber} industryList = {rawData[sector]} />
-                    <div class="border-t border-gray-600 mt-5"/>
-                {/each}
-    
-                  
-          </div>
+        <div class="border-t border-gray-600 mt-5" />
 
-          
-      
-      </section>
-      
-      
-    
\ No newline at end of file
+        <IndustryTable {charNumber} industryList={rawData[sector]} />
+        <div class="border-t border-gray-600 mt-5" />
+      {/each}
+    </div>
+  </div>
+</section>
diff --git a/src/routes/industry/all/+page.svelte b/src/routes/industry/all/+page.svelte
index cb337b86..da9b582f 100644
--- a/src/routes/industry/all/+page.svelte
+++ b/src/routes/industry/all/+page.svelte
@@ -5,21 +5,10 @@
   export let data;
   let rawData = data?.getIndustryOverview;
 
-  function formatFilename(industryName) {
-    // Replace spaces with hyphens
-    let formattedName = industryName?.replace(/ /g, "-");
-    // Replace "&" with "and"
-    formattedName = formattedName?.replace(/&/g, "and");
-    // Remove any extra hyphens (e.g., from consecutive spaces)
-    formattedName = formattedName?.replace(/-{2,}/g, "-");
-    // Convert to lowercase for consistency
-    return "/list/industry/" + formattedName?.toLowerCase();
-  }
-
   $: charNumber = $screenWidth < 640 ? 20 : 30;
 </script>
 
-<section class="w-full overflow-hidden m-auto px-2 sm:px-0">
+<section class="w-full overflow-hidden m-auto">
   <!-- Page wrapper -->
   <div class="flex justify-center w-full m-auto h-full overflow-hidden">
     <!-- Content area -->
@@ -101,7 +90,7 @@
 
               <td
                 class="{item?.avgChange1M >= 0
-                  ? 'text-[#00FC50]'
+                  ? "before:content-['+']  text-[#00FC50]"
                   : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
               >
                 {item?.avgChange1M?.toFixed(2) ?? "-"}%
@@ -109,7 +98,7 @@
 
               <td
                 class="{item?.avgChange1Y >= 0
-                  ? 'text-[#00FC50]'
+                  ? "before:content-['+']  text-[#00FC50]"
                   : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
               >
                 {item?.avgChange1Y?.toFixed(2) ?? "-"}%
diff --git a/src/routes/industry/sectors/+page.svelte b/src/routes/industry/sectors/+page.svelte
index 684e8539..8dcda460 100644
--- a/src/routes/industry/sectors/+page.svelte
+++ b/src/routes/industry/sectors/+page.svelte
@@ -60,7 +60,7 @@
   $: charNumber = $screenWidth < 640 ? 20 : 30;
 </script>
 
-<section class="w-full overflow-hidden m-auto px-2 sm:px-0">
+<section class="w-full overflow-hidden m-auto">
   <!-- Page wrapper -->
   <div class="flex justify-center w-full m-auto h-full overflow-hidden">
     <!-- Content area -->
@@ -144,7 +144,7 @@
 
               <td
                 class="{item?.avgChange1M >= 0
-                  ? 'text-[#00FC50]'
+                  ? "before:content-['+']  text-[#00FC50]"
                   : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
               >
                 {item?.avgChange1M?.toFixed(2) ?? "-"}%
@@ -152,7 +152,7 @@
 
               <td
                 class="{item?.avgChange1Y >= 0
-                  ? 'text-[#00FC50]'
+                  ? "before:content-['+']  text-[#00FC50]"
                   : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
               >
                 {item?.avgChange1Y?.toFixed(2) ?? "-"}%
diff --git a/src/routes/ipos/+page.svelte b/src/routes/ipos/+page.svelte
index 46c37d41..448413a6 100644
--- a/src/routes/ipos/+page.svelte
+++ b/src/routes/ipos/+page.svelte
@@ -85,10 +85,9 @@
             </tr>
           </thead>
           <tbody>
-            {#each ipoList as item, index}
+            {#each ipoList as item}
               <tr
-                on:click={() => goto("/stocks/" + item?.symbol)}
-                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
               >
                 <td
                   class="text-white text-sm sm:text-[1rem] text-start border-b-[#09090B] whitespace-nowrap"
@@ -102,9 +101,14 @@
                 </td>
 
                 <td
-                  class="whitespace-nowrap text-blue-400 text-sm sm:text-[1rem] text-start border-b-[#09090B]"
+                  class="whitespace-nowrap text-sm sm:text-[1rem] text-start border-b-[#09090B]"
                 >
-                  {item?.symbol}
+                  <a
+                    href={"/stocks/" + item?.symbol}
+                    class="sm:hover:text-white text-blue-400"
+                  >
+                    {item?.symbol}
+                  </a>
                 </td>
 
                 <td
@@ -118,7 +122,7 @@
                 <td
                   class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
                 >
-                  {item?.ipoPrice !== null ? "$" + item?.ipoPrice : "-"}
+                  {item?.ipoPrice !== null ? item?.ipoPrice : "-"}
                 </td>
 
                 <td
diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte
index d43aa03d..e5b10403 100644
--- a/src/routes/list/+layout.svelte
+++ b/src/routes/list/+layout.svelte
@@ -218,9 +218,9 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
 >
-  <div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li>
       {#if $page.url.pathname.startsWith("/list/industry")}
@@ -240,9 +240,7 @@
     </ul>
   </div>
 
-  <div
-    class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden"
-  >
+  <div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] overflow-hidden">
     <!--Start Top Winners/Losers-->
     <div class="flex flex-col justify-center items-center">
       <div class="ml-2 text-start w-full text-white mb-2">
@@ -255,7 +253,7 @@
         {/each}
       </div>
 
-      <div class="border-b mt-2 border-blue-400 w-full mb-7" />
+      <div class="border-b-[2px] mt-2 w-full mb-7" />
 
       <div class="flex justify-center w-full m-auto overflow-hidden">
         <main class="w-full lg:w-3/4 lg:pr-10">