From 25492bc6f8bb1beb9dc1e739fa1177ee9620e68f Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 24 Dec 2024 21:25:09 +0100
Subject: [PATCH] update layout

---
 src/lib/components/HoverStockChart.svelte   |  7 +-
 src/routes/earnings-calendar/+page.svelte   | 82 ++-------------------
 src/routes/etf/[tickerID]/+layout.svelte    |  4 +-
 src/routes/hedge-funds/+page.svelte         |  8 +-
 src/routes/market-mover/+layout.svelte      | 63 +---------------
 src/routes/market-news/+layout.svelte       | 82 +--------------------
 src/routes/options-flow/+page.svelte        |  4 +-
 src/routes/politicians/+page.svelte         | 10 +--
 src/routes/stocks/[tickerID]/+layout.svelte |  4 +-
 9 files changed, 26 insertions(+), 238 deletions(-)

diff --git a/src/lib/components/HoverStockChart.svelte b/src/lib/components/HoverStockChart.svelte
index ee30ee42..aff31359 100644
--- a/src/lib/components/HoverStockChart.svelte
+++ b/src/lib/components/HoverStockChart.svelte
@@ -164,7 +164,6 @@
       chart &&
       typeof window !== "undefined"
     ) {
-
       chart?.timeScale()?.fitContent();
     }
   });
@@ -183,12 +182,14 @@
         >
       </HoverCard.Trigger>
     </div>
-    <HoverCard.Content class=" w-96 bg-[#2A2E39] border border-gray-600">
+    <HoverCard.Content
+      class=" w-96 bg-secondary border border-gray-500 shadow-lg"
+    >
       <div class="flex justify-between space-x-4 w-full text-white">
         <div class="space-y-1 w-full">
           <!--Hover Stock Chart-->
           <label
-            class=" text-sm flex flex-row items-center justify-start bg-[#2A2E39]"
+            class=" text-sm flex flex-row items-center justify-start bg-secondary"
           >
             <div class="flex flex-col items-start w-full">
               <div class=" flex flex-col items-start pb-1">
diff --git a/src/routes/earnings-calendar/+page.svelte b/src/routes/earnings-calendar/+page.svelte
index ee8150c9..5830b78c 100644
--- a/src/routes/earnings-calendar/+page.svelte
+++ b/src/routes/earnings-calendar/+page.svelte
@@ -9,9 +9,9 @@
   } from "date-fns";
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
 
@@ -349,7 +349,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4 lg:pr-5">
+        <main class="w-full lg:pr-5">
           <div class="mb-6 border-b-[2px]">
             <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
               Earnings Calendar
@@ -605,19 +605,10 @@
                       </table>
                     </div>
                   {:else}
-                    <div
-                      class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-[1rem]"
-                    >
-                      <svg
-                        class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
-                        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
-                      >
-                      No Earnings reports available for the day.
+                    <div class="mt-5 mb-3">
+                      <Infobox
+                        text=" No Earnings reports available for the day."
+                      />
                     </div>
                   {/if}
                 {/if}
@@ -625,67 +616,6 @@
             </div>
           </div>
         </main>
-
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href={"/pricing"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <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
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools.
-                </span>
-              </a>
-            </div>
-          {/if}
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/dividends-calendar"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Stay updated on upcoming Dividends in the stock market.
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/economic-calendar"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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">
-                  Economic Events
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Stay updated on upcoming Economic Events worldwide.
-              </span>
-            </a>
-          </div>
-        </aside>
       </div>
     </div>
   </div>
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index 3104ad20..4d4904cb 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -497,12 +497,12 @@
             </div>
             <!--End Mobile Navbar-->
 
-            <div class="pt-14 sm:pt-0 w-full max-w-7xl px-3 sm:px-0">
+            <div class="pt-14 sm:pt-0 w-full px-3 sm:px-0">
               <div
                 class="md:flex md:justify-between md:divide-x md:divide-slate-800"
               >
                 <!-- Main content -->
-                <div class="pb-12 md:pb-20 w-full max-w-7xl">
+                <div class="pb-12 md:pb-20 w-full">
                   <div class="md:pr-6 lg:pr-10">
                     <!-----Start-Header-CandleChart-Indicators------>
 
diff --git a/src/routes/hedge-funds/+page.svelte b/src/routes/hedge-funds/+page.svelte
index 25604b58..25298cd4 100644
--- a/src/routes/hedge-funds/+page.svelte
+++ b/src/routes/hedge-funds/+page.svelte
@@ -110,10 +110,10 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-xl 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 pb-40 px-3"
 >
-  <body class="w-full max-w-6xl overflow-hidden m-auto">
-    <div class="text-sm sm:text-[1rem] breadcrumbs ml-4 sm:ml-0">
+  <body class="w-full overflow-hidden m-auto">
+    <div class="text-sm sm:text-[1rem] breadcrumbs">
       <ul>
         <li><a href="/" class="text-gray-300">Home</a></li>
         <li class="text-gray-300">Hedge Funds</li>
@@ -161,7 +161,7 @@
 
             <div class="w-full m-auto mt-4">
               <div
-                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 sm:gap-5"
+                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-5"
               >
                 {#each displayList as item}
                   <a
diff --git a/src/routes/market-mover/+layout.svelte b/src/routes/market-mover/+layout.svelte
index 6577c6d7..07e35da2 100644
--- a/src/routes/market-mover/+layout.svelte
+++ b/src/routes/market-mover/+layout.svelte
@@ -65,7 +65,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4 lg:pr-5">
+        <main class="w-full lg:pr-5">
           <h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
             Market Mover
           </h1>
@@ -91,67 +91,6 @@
 
           <ScrollToTop />
         </main>
-
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href={"/pricing"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <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
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools.
-                </span>
-              </a>
-            </div>
-          {/if}
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/analysts"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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">
-                  Top Analyst
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Get the latest top Wall Street analyst ratings.
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/politicians"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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">
-                  Congress Trading
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Get the latest top Congress trading insights.
-              </span>
-            </a>
-          </div>
-        </aside>
       </div>
     </div>
   </div>
diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index 9eb61fb9..3a79c341 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -53,7 +53,7 @@
       <div
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
-        <main class="w-full lg:w-3/4 lg:pr-5">
+        <main class="w-full lg:pr-5">
           <h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
             {activeIdx === 0
               ? "All Stocks News"
@@ -81,86 +81,6 @@
 
           <ScrollToTop />
         </main>
-
-        <aside class="hidden lg:block relative fixed w-1/4 ml-4">
-          {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
-            <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-            >
-              <a
-                href={"/pricing"}
-                class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-              >
-                <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
-                  </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-                </div>
-                <span class="text-white p-3 ml-3 mr-3">
-                  Upgrade now for unlimited access to all data and tools.
-                </span>
-              </a>
-            </div>
-          {/if}
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/earnings-calendar"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Get the latest Earnings of companies
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/dividends-calendar"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Stay updated on upcoming Dividends in the stock market.
-              </span>
-            </a>
-          </div>
-
-          <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
-          >
-            <a
-              href={"/economic-calendar"}
-              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
-            >
-              <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">
-                  Economic Events
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
-              </div>
-              <span class="text-white p-3 ml-3 mr-3">
-                Stay updated on upcoming Economic Events worldwide.
-              </span>
-            </a>
-          </div>
-        </aside>
       </div>
     </div>
   </div>
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index 144c6e48..b1627042 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -863,9 +863,9 @@
 
 <body class="overflow-y-auto">
   <section
-    class="w-full max-w-screen sm:max-w-7xl xl:max-w-7xl flex justify-center items-center bg-[#09090B] pb-20"
+    class="w-full max-w-screen sm:max-w-7xl xl:max-w-screen-2xl flex justify-center items-center bg-[#09090B] pb-20"
   >
-    <div class="w-full m-auto px-3 min-h-screen">
+    <div class="w-full m-auto min-h-screen">
       <!--
         <div class="text-sm sm:text-[1rem] breadcrumbs mb-5">
           <ul>
diff --git a/src/routes/politicians/+page.svelte b/src/routes/politicians/+page.svelte
index d44681ca..f2886c2a 100644
--- a/src/routes/politicians/+page.svelte
+++ b/src/routes/politicians/+page.svelte
@@ -180,9 +180,9 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-xl 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 pb-40 px-3"
 >
-  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li>
       <li class="text-gray-300">Politicians</li>
@@ -191,9 +191,7 @@
 
   <body class="w-full overflow-hidden m-auto">
     {#if isLoaded}
-      <section
-        class="w-full overflow-hidden m-auto sm:mt-10 px-0 sm:px-3 mt-10"
-      >
+      <section class="w-full overflow-hidden m-auto sm:mt-10 mt-10">
         <div
           class="p-3 sm:p-0 flex justify-center w-full m-auto overflow-hidden"
         >
@@ -261,7 +259,7 @@
 
               <div class="w-full m-auto mt-4">
                 <div
-                  class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 sm:gap-5"
+                  class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-5"
                 >
                   {#each displayList as item}
                     <a
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 04878925..48250ebd 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -573,12 +573,12 @@
             </div>
             <!--End Mobile Navbar-->
 
-            <div class="pt-14 sm:pt-0 w-full max-w-7xl px-3 sm:px-0">
+            <div class="pt-14 sm:pt-0 w-full px-3 sm:px-0">
               <div
                 class="md:flex md:justify-between md:divide-x md:divide-slate-800"
               >
                 <!-- Main content -->
-                <div class="pb-12 md:pb-20 w-full max-w-7xl">
+                <div class="pb-12 md:pb-20 w-full">
                   <div class="md:pr-6 lg:pr-10">
                     <!-----Start-Header-CandleChart-Indicators------>