From 4a65bb75a0a86877dde51720518731c0d6ed32c5 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 8 Aug 2024 22:50:40 +0200
Subject: [PATCH] ui fixes

---
 .../stocks/[tickerID]/insider/+page.svelte    | 90 +++----------------
 .../insider/congress-trading/+page.svelte     | 28 +++---
 2 files changed, 27 insertions(+), 91 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 30ae3b93..273d9b3d 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -135,6 +135,7 @@ const handleMessage = async (event) => {
           boundaryGap: false,
           data: dates,
           axisLabel: {
+            color: '#fff',
               formatter: function (value) {
                   // Assuming dates are in the format 'yyyy-mm-dd'
                   const dateParts = value.split('-');
@@ -148,6 +149,7 @@ const handleMessage = async (event) => {
         {
           type: 'value',
           axisLabel: {
+            color: '#fff',
             formatter: '${value}',
           },
           splitLine: {
@@ -499,14 +501,14 @@ onMount(async() => {
                     {/if}
 
 
-                      <div class="hidden sm:flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4">
+                      <div class="flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll no-scrollbar">
                           <table class="table table-sm table-pin-rows table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                             <thead>
                               <tr class="bg-[#09090B] shadow-md">
                                 <th class="text-start bg-[#09090B] text-white text-sm sm:font-medium">
                                   Person
                                 </th>
-                                <th class="text-end bg-[#09090B] hidden sm:table-cell text-white text-sm sm:font-medium">
+                                <th class="text-end bg-[#09090B] text-white text-sm sm:font-medium">
                                   Transaction Date
                                 </th>
                                 <th class="text-end bg-[#09090B]  text-white text-sm sm:font-medium">
@@ -520,26 +522,26 @@ onMount(async() => {
                             </thead>
                             <tbody>
                               {#each (data?.user?.tier === 'Pro' ? insiderTradingList : insiderTradingList?.slice(0,3)) as item, index}
-                              <tr class="text-gray-200 odd:bg-[#27272A] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                              <tr class="text-white odd:bg-[#27272A] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
       
-                                <td class="text-gray-200 border-b border-[#09090B]">
+                                <td class="text-white text-sm sm:text-[1rem] border-b border-[#09090B] whitespace-nowrap">
                                   <div class="flex flex-col">
-                                    <span class="text-white">{formatString(item?.reportingName)?.replace('/de/','')}</span>
-                                    <span class="text-white text-xs">{extractOfficeInfo(item?.typeOfOwner)}</span>
+                                    <span class="">{formatString(item?.reportingName)?.replace('/de/','')}</span>
+                                    <span class="text-sm sm:text-[1rem]">{extractOfficeInfo(item?.typeOfOwner)}</span>
                                   </div>
                                 </td>
       
-                                  <td class="text-end hidden sm:table-cell text-xs sm:text-sm text-white border-b border-[#09090B]">
+                                  <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                       {new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                   </td>
 
-                                  <td class="text-end text-xs sm:text-sm text-white border-b border-[#09090B]">
+                                  <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                       {abbreviateNumber(item?.securitiesTransacted)}
                                   </td>
-                                  <td class="text-end text-xs sm:text-sm text-white border-b border-[#09090B]">
+                                  <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                     ${item?.price?.toFixed(2)}
                                   </td>
-                                  <td class="font-medium text-end sm:text-sm text-white border-b border-[#09090B]">
+                                  <td class="font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                     {#if item?.transactionType === 'Bought'}
                                       <span class="text-[#10DB06]">Bought</span>
                                     {:else if item?.transactionType === 'Grant'}
@@ -558,73 +560,7 @@ onMount(async() => {
                           </table>
                       </div>
 
-                      <div class="relative sm:hidden w-full">
-                        {#each insiderTradingList as item}
-                          <div class="bg-[#09090B] border border-slate-800 shadow-lg rounded-lg h-auto pb-4 pl-2 pr-4 pt-4 mb-7">
-                              <div class="flex flex-row items-center">
-                                <label class="flex flex-col ml-2 w-40">
-                                  <span class="text-white fónt-medium">Name</span>
-                                  <span class="text-slate-300 text-sm">{formatString(item?.reportingName)?.replace('/de/','')}</span>
-                                </label>
-    
-                                <div class="flex flex-col justify-end items-end ml-auto">
-                                  <span class="font-medium text-slate-300 text-end">Position</span>
-                                  <span class="text-white text-opacity-[0.8] text-sm text-end">
-                                    {extractOfficeInfo(item?.typeOfOwner)}
-                                  </span>
-                                </div>
-                              </div>
-                              <div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
-    
-                              <div class="flex flex-row items-center">
-                                <div class="flex flex-col ml-3 w-40">
-                                  <span class="font-medium text-slate-300">Transaction Date</span>
-                                  <span class="text-slate-300 text-sm">
-                                    {new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
-                                  </span>
-                                </div>
-    
-                                <div class="flex flex-col justify-end items-end ml-auto">
-                                  <span class="font-medium text-slate-300 text-ends">Price</span>
-                                  <span class="text-white text-sm text-end">
-                                    ${item?.price?.toFixed(2)}
-                                  </span>
-                                </div>
-                              </div>
-    
-                              <div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
-    
-                              <div class="flex flex-row items-center">
-                                <div class="flex flex-col ml-3 w-40">
-                                  <span class="font-medium text-slate-300">Shares</span>
-                                  <span class="text-slate-300 text-sm font-medium">
-                                    {abbreviateNumber(item?.securitiesTransacted)}
-                                  </span>
-                                </div>
-    
-                                <div class="flex flex-col justify-end items-end ml-auto">
-                                  <span class="font-medium text-slate-300 text-ends">Type</span>
-                                  <span class="text-white text-end font-medium">
-                                    {#if item?.transactionType === 'Bought'}
-                                      <span class="text-[#10DB06]">Bought</span>
-                                    {:else if item?.transactionType === 'Grant'}
-                                      <span class="text-[#8f95a1]">Grant</span>
-                                    {:else if item?.transactionType === 'Sold'}
-                                      <span class="text-[#FF2F1F]">Sold</span>
-                                    {:else if item?.transactionType === 'Exercise'}
-                                      <span class="text-[#F8901E]">Exercise</span>
-                                    {:else if item?.transactionType === 'n/a'}
-                                      <span class="text-gray-300">n/a</span>
-                                    {/if}
-                                  </span>
-                                </div>
-                              </div>
-    
-    
-                          </div>
-                        {/each}
-
-                      </div>
+                
 
                       {#if rawData?.length >= 20 && data?.user?.tier === 'Pro'}
                       <label on:click={backToTop} class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full">
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index 5be66d09..9513b609 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -215,7 +215,7 @@ isLoaded = true;
                           <!--Start Buy/Sell-->  
                           <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
                             <div class="flex flex-col items-start">
-                                <span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Buy/Sell</span>
+                                <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Buy/Sell</span>
                                 <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
                                   {buySellRatio?.toFixed(3)}
                                 </span>
@@ -232,7 +232,7 @@ isLoaded = true;
                                 </svg>
                                 <!-- Percentage Text -->
                                 <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                  <span class="text-center text-white text-sm">{buySellRatio?.toFixed(2)}</span>
+                                  <span class="text-center text-white text-sm sm:text-[1rem]">{buySellRatio?.toFixed(2)}</span>
                                 </div>
                               </div>
                             <!-- End Circular Progress -->
@@ -242,7 +242,7 @@ isLoaded = true;
                         <!--Start Dem/Rep-->  
                         <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
                           <div class="flex flex-col items-start">
-                              <span class="font-semibold text-gray-200 text-sm sm:text-[rem] ">Dem/Rep</span>
+                              <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Dem/Rep</span>
                               <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
                                 {partyRatio?.toFixed(3)}
                               </span>
@@ -259,7 +259,7 @@ isLoaded = true;
                               </svg>
                               <!-- Percentage Text -->
                               <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
-                                <span class="text-center text-white text-sm">{partyRatio?.toFixed(2)}</span>
+                                <span class="text-center text-white text-sm sm:text-[1rem]">{partyRatio?.toFixed(2)}</span>
                               </div>
                             </div>
                           <!-- End Circular Progress -->
@@ -271,7 +271,7 @@ isLoaded = true;
                       <!--End Widget-->
 
 
-                      <label on:click={changeStructure} class="sm:hidden w-24 sm:ml-3 mr-2 sm:mr-0 cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duration-100 transition ease-in-out px-4 py-2 rounded-lg shadow-md">
+                      <label on:click={changeStructure} class="sm:hidden w-24 sm:ml-3 mr-2 sm:mr-0 cursor-pointer bg-[#27272A] px-4 py-2 rounded-lg shadow-md">
                         <span class="m-auto mr-0.5 text-white text-sm">
                           Switch To: {displayStructure}
                         </span>
@@ -279,17 +279,17 @@ isLoaded = true;
   
 
                       {#if displayStructure === 'Card'}
-                      <div class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4">
+                      <div class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
                         <table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                           <thead>
                             <tr class="bg-[#09090B]">
                               <th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
                                 Person
                               </th>
-                              <th class="shadow-md text-end bg-[#09090B]  hidden sm:table-cell text-white text-sm font-semibold">
+                              <th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
                                 Transaction Date
                               </th>
-                              <th class="shadow-md text-end bg-[#09090B]  text-white text-sm font-semibold">
+                              <th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
                                 Amount
                               </th>
                               <th class="shadow-md text-white font-semibold text-end text-sm">Type</th>
@@ -299,27 +299,27 @@ isLoaded = true;
                             {#each senateTradingList as item}
                             <tr on:click={() => goto(`/politicians/${item?.id}`)} class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
     
-                              <td class="text-gray-200 pb-3 border-b border-b-[#09090B]">
+                              <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]">
                                 <div class="flex flex-row items-center">
                                   <div class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party === 'Republican' ? 'bg-[#98272B]' : item?.party === 'Democratic' ? 'bg-[#295AC7]' : 'bg-[#4E2153]'} flex items-center justify-center">
                                     <img style="clip-path: circle(50%);" class="avatar rounded-full w-7 sm:w-9" src={item?.image} loading="lazy"/>
                                   </div>
                                   <div class="flex flex-col ml-3">
-                                    <span class="text-white">{item?.representative?.replace('_',' ')}</span>
-                                    <span class="text-white text-opacity-60">{item?.party}</span>
+                                    <span class="">{item?.representative?.replace('_',' ')}</span>
+                                    <span class="">{item?.party}</span>
                                   </div>
                                 </div>
                                 <!--{item?.firstName} {item?.lastName}-->
                               </td>
     
-                                <td class="text-end hidden sm:table-cell text-xs sm:text-sm text-white border-b border-b-[#09090B]">
+                                <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
                                     {new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                 </td>
 
-                                <td class="text-end text-xs sm:text-sm text-white border-b border-b-[#09090B]">
+                                <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
                                     {item?.amount}
                                 </td>
-                                <td class="text-start text-end text-sm text-white border-b border-b-[#09090B]">
+                                <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
                                   {#if item?.type === 'Bought'}
                                     <span class="text-[#10DB06]">Bought</span>
                                   {:else if item?.type === 'Sold'}