From 4c42b9745f6d015be8f3c3c8ae9989cf807317e1 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 28 Aug 2024 13:01:52 +0200
Subject: [PATCH] ui fixes

---
 src/lib/components/Footer.svelte              |   2 +
 src/routes/market-news/+layout.svelte         |  88 ++++++++++---
 src/routes/market-news/+page.svelte           |   4 +-
 src/routes/market-news/general/+page.svelte   |   2 +-
 src/routes/politicians/flow-data/+page.svelte | 118 +++++++++++++-----
 5 files changed, 162 insertions(+), 52 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index f89e5c60..ab9b2291 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -54,9 +54,11 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
             <a href="/pricing" class="no-underline hover:underline text-gray-300  sm:hover:text-purple-400">Pricing</a>
           </li>
+          <!--
           <li class="mt-2 inline-block mr-2 md:block md:mr-0" >
             <a href="/changelog" class="no-underline hover:underline text-gray-300  sm:hover:text-purple-400">Changelog</a>
           </li>
+          -->
         </ul>
       </div>
 
diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index ee1b18e1..e31ed8b9 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -1,8 +1,10 @@
 <script lang='ts'>
 import logo from '$lib/images/news_logo.png'
 import ScrollToTop from '$lib/components/ScrollToTop.svelte';
+import ArrowLogo from "lucide-svelte/icons/move-up-right";
+import { goto } from '$app/navigation';
 
-
+export let data;
 let displaySection = 'stock'
 
 
@@ -17,23 +19,24 @@ let displaySection = 'stock'
 
 
 
-<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
-
-  <!--
-  <div class="text-sm breadcrumbs ml-4">
+<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
+          
+  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
     <ul>
-      <li><a href="/" class="text-gray-300">Home</a></li> 
+      <li><a href="/" class="text-gray-300">Home</a></li>
       <li class="text-gray-300">Market News</li>
     </ul>
   </div>
-  -->
+          
+  <div class="w-full overflow-hidden m-auto mt-5">
+    
+    <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+        <div class="relative flex justify-center items-start overflow-hidden w-full">
 
-    <div class="flex justify-center w-full m-auto h-full overflow-hidden mb-40">
-        <div class="relative flex justify-center items-center overflow-hidden">
-            <main>
-  
-  
-              <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">
+
+            <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 -->
@@ -83,7 +86,7 @@ let displaySection = 'stock'
   
 
 
-                <div class="ml-4 w-full mb-2" >
+                <div class="w-full mb-2" >
                   <ul class="pr-4 sm:pr-0 w-full font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2">
                     <li class="cursor-pointer flex flex-col items-center text-xl">
                       <a href='/market-news' on:click={() => displaySection = 'stock'} class="px-3 font-medium text-gray-400 sm:hover:text-white {displaySection === 'stock' ? 'text-white ' : 'bg-[#09090B]'}" >
@@ -111,11 +114,64 @@ let displaySection = 'stock'
                 
             </main>
 
-        </div>
+            <aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+              
+              {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+              <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                  <div 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>
+                  </div>
+              </div>
+              {/if}
+
+              <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                  <div 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">
+                      Wallstreet 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>
+                  </div>
+              </div>
+
+              <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                  <div 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>
+                  </div>
+              </div>
+
+            </aside>
+
+      </div>
     </div>
-  </section>
+
   
+  </div>
+      
+      
   
+</section>
+    
   
   
   
\ No newline at end of file
diff --git a/src/routes/market-news/+page.svelte b/src/routes/market-news/+page.svelte
index a25529a7..79aa87cc 100644
--- a/src/routes/market-news/+page.svelte
+++ b/src/routes/market-news/+page.svelte
@@ -96,7 +96,7 @@ function checkIfYoutubeVideo(link) {
 </svelte:head>
 
 
-<section class="w-full max-w-5xl overflow-hidden m-auto mt-10">
+<section class="w-full  overflow-hidden m-auto mt-10">
   
   <div class="flex justify-center w-full m-auto overflow-hidden">
       <div class="relative flex justify-center items-center overflow-hidden">
@@ -105,7 +105,7 @@ function checkIfYoutubeVideo(link) {
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                       {#if news.length !== 0}
                       {#each news as item}
-                          <div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[430px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
+                          <div class="flex flex-col w-full mt-5 bg-[#141417] shadow-lg h-auto sm:h-[450px] xl:h-[430px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
                             {#if videoId = checkIfYoutubeVideo(item.url)}
                                 <iframe
                                     class="w-full h-60 rounded-none sm:rounded-lg"
diff --git a/src/routes/market-news/general/+page.svelte b/src/routes/market-news/general/+page.svelte
index 5970a6b8..ad3d8242 100644
--- a/src/routes/market-news/general/+page.svelte
+++ b/src/routes/market-news/general/+page.svelte
@@ -71,7 +71,7 @@
   
   
   
-<section class="w-full max-w-5xl overflow-hidden m-auto mt-10">
+<section class="w-full overflow-hidden m-auto mt-10">
   
   <div class="flex justify-center w-full m-auto overflow-hidden">
       <div class="relative flex justify-center items-center overflow-hidden">
diff --git a/src/routes/politicians/flow-data/+page.svelte b/src/routes/politicians/flow-data/+page.svelte
index 141a0945..2eb0a068 100644
--- a/src/routes/politicians/flow-data/+page.svelte
+++ b/src/routes/politicians/flow-data/+page.svelte
@@ -10,6 +10,8 @@
   import { onMount } from 'svelte';
   import defaultLogo from '$lib/images/stocks/logo/default_logo.png';
 	import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
+
   //  import * as XLSX from 'xlsx';
 
   export let data;
@@ -287,27 +289,8 @@
   
   
   
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  let charNumber = 40;
-  $: {
-      if ($screenWidth < 640)
-      {
-        charNumber = 20;
-      }
-      else {
-        charNumber = 40;
-      }
-    }
-    
+
+  $: charNumber = $screenWidth < 640 ? 20 : 40;
   
   
   $: {
@@ -365,17 +348,25 @@
   
   
   
-    <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
-      <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
-        <ul>
-          <li><a href="/" class="text-gray-300">Home</a></li> 
-          <li class="text-gray-300">Congress Flow</li>
-        </ul>
-      </div>
-    
-  
-        <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">
+  <section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
+          
+    <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+      <ul>
+        <li><a href="/" class="text-gray-300">Home</a></li>
+        <li class="text-gray-300">Congress Flow</li>
+      </ul>
+    </div>
+            
+    <div class="w-full overflow-hidden m-auto mt-5">
+      
+      <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+          <div 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>
@@ -669,7 +660,68 @@
           
           
       
-  </section>
+</main>
+
+
+<aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+
+  {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+  <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div 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>
+      </div>
+  </div>
+  {/if}
+
+  <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div 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">
+          Wallstreet 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>
+      </div>
+  </div>
+
+  <div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+      <div 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>
+      </div>
+  </div>
+
+</aside>
+
+</div>
+</div>
+
+
+</div>
+
+
+
+</section>
+
+