From e94986fdc0492b9c89ba439772c71c023e748b59 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 11 Aug 2024 19:17:03 +0200
Subject: [PATCH] ui fix

---
 .../stocks/[tickerID]/analyst/+page.svelte    | 20 ++++++-------
 .../stocks/[tickerID]/dividends/+page.svelte  |  4 +--
 .../stocks/[tickerID]/insider/+page.svelte    | 30 +++++++++----------
 .../stocks/[tickerID]/news/+page.svelte       |  2 +-
 4 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/analyst/+page.svelte b/src/routes/stocks/[tickerID]/analyst/+page.svelte
index be7b58ab..d3dd6ee0 100644
--- a/src/routes/stocks/[tickerID]/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/analyst/+page.svelte
@@ -277,18 +277,18 @@ changeTab(0)
                             <table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                                 <thead class="">
                                   <tr class="">
-                                    <td class="text-white font-semibold text-sm text-start">Analyst</td>
-                                    <td class="text-white font-semibold text-sm text-start">Rating</td>
-                                    <td class="text-white font-semibold text-sm text-end">Date</td>
+                                    <td class="text-white font-semibold text-[1rem] text-start">Analyst</td>
+                                    <td class="text-white font-semibold text-[1rem] text-start">Rating</td>
+                                    <td class="text-white font-semibold text-[1rem] text-end">Date</td>
                                   </tr>
                                 </thead>
                                 <tbody>
                                   {#each (data?.user?.tier === 'Pro' ? historyList : historyList?.slice(0,3)) as item,index}
                                   <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="cursor-pointer {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'odd:bg-[#27272A]'} border-b-[#09090B]  {index+1 === historyList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
-                                    <td class="text-sm text-start">
+                                    <td class="text-sm sm:text-[1rem] whitespace-nowrap text-start">
                                       <div class="flex flex-col items-start">
-                                        <span class="text-blue-400 font-medium">{item?.analyst_name} </span>
-                                        <span class="text-white text-opacity-80">{item?.analyst?.length > 15 ? item?.analyst?.slice(0,15) + '...' : item?.analyst}</span>
+                                        <span class="text-blue-400">{item?.analyst_name} </span>
+                                        <span class="text-white">{item?.analyst?.length > 15 ? item?.analyst?.slice(0,15) + '...' : item?.analyst}</span>
                                         
                                             <div class="flex flex-row items-center mt-1">
                                               {#each Array.from({ length: 5 }) as _, i}
@@ -303,7 +303,7 @@ changeTab(0)
                                                     {/if}
                                                 {/each}
                                           
-                                                <span class="ml-1 text-xs text-gray-400">
+                                                <span class="ml-1 text-sm">
                                                     ({item?.analystScore !== null ? item?.analystScore : 0})
                                                 </span>
                                             
@@ -312,13 +312,13 @@ changeTab(0)
                                         
                                     </td>
                 
-                                    <td class="text-sm text-center text-white">
+                                    <td class="text-sm sm:text-[1rem] whitespace-nowrap text-center text-white">
                                         <div class="flex flex-col items-start">
                                             <span class="text-[1rem] font-medium {['Strong Buy', 'Buy']?.includes(item?.rating_current) ? 'text-[#10DB06]' : item?.rating_current === 'Hold' ? 'text-[#FF7070]' : ['Strong Sell','Sell']?.includes(item?.rating_current) ? 'text-[#FF2F1F]' : ''}"> 
                                                 {item?.rating_current}
                                             </span>
                                             <span class="font-medium text-white">{item?.action_company?.replace('Initiates Coverage On','Initiates')}</span>
-                                            <div class="flex flex-row items-center text-sm">
+                                            <div class="flex flex-row items-center">
                                                 {#if Math?.ceil(item?.adjusted_pt_prior) !== 0}
                                                 <span class="text-gray-100 font-normal">${Math?.ceil(item?.adjusted_pt_prior)}</span>
                                                 <svg class="w-3 h-3 ml-1 mr-1 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12h16m0 0l-6-6m6 6l-6 6"/></svg>
@@ -330,7 +330,7 @@ changeTab(0)
                                         </div>
                                     </td>
                   
-                                  <td class="text-white text-end font-medium text-sm sm:w-auto">
+                                  <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap">
                                     <div class="flex flex-col items-end">
                                       {#if latestInfoDate(item?.date)}
                                         <label class="bg-[#2D4F8A] text-white font-medium text-xs rounded-lg px-2 py-0.5 ml-3 mb-1">
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 872626df..158ad4fd 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -178,7 +178,7 @@ onMount(async() => {
 
           
     <section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
-        <div class="flex justify-center m-auto h-full overflow-hidden">
+        <div class="flex h-full overflow-hidden">
             <div class="relative flex justify-center items-center overflow-hidden">
                   <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
                         <div class="mb-6">
@@ -187,7 +187,7 @@ onMount(async() => {
                             </h1>
     
                               
-                        <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
+                        <div class="text-white text-center p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm: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="#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>
 
                           
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 273d9b3d..265037ae 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -319,12 +319,12 @@ onMount(async() => {
                         </div>
                         
                         {#if insiderTradingList?.length !== 0}
-                        <div class="text-white text-md text-center m-auto w-full pb-3">
+                        <div class="text-white text-[1rem] text-center m-auto w-full pb-3">
                           We can divide four types of insider transactions:
                         
                           <div class="flex flex-row items-center justify-center">
                             Buy, Sell, 
-                            <label for="grantInfo" class="ml-1 cursor-pointer font-medium text-gray-300">
+                            <label for="grantInfo" class="ml-1 cursor-pointer font-medium">
                               Grant
                             </label>
                             <InfoModal
@@ -332,7 +332,7 @@ onMount(async() => {
                               content={"A stock grant occurs when a company compensates an employee by offering them equity, or when an insider gifts shares. In essence, the company grants ownership of shares, or an insider transfers shares. These grants may involve common stock shares, preferred shares, or another class of shares."}
                               id={"grantInfo"}
                             />,
-                            <label for="exerciseInfo" class="ml-1 cursor-pointer font-medium text-gray-300">
+                            <label for="exerciseInfo" class="ml-1 cursor-pointer font-medium">
                               Exercise
                             </label>
                             <InfoModal
@@ -410,7 +410,7 @@ onMount(async() => {
                         <!--Start Put/Call-->  
                         <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-md h-20">
                           <div class="flex flex-col items-start">
-                              <span class="font-medium text-gray-200 text-xs sm:text-sm">Buy/Sell</span>
+                              <span class="font-medium 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>
@@ -427,7 +427,7 @@ onMount(async() => {
                               </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-xs sm: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 -->
@@ -437,7 +437,7 @@ onMount(async() => {
                       <!--Start Call Flow-->  
                       <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-md h-20">
                         <div class="flex flex-col items-start">
-                            <span class="font-medium text-gray-200 text-xs sm:text-sm">Bought Shares</span>
+                            <span class="font-medium text-gray-200 text-sm sm:text-[1rem]">Bought Shares</span>
                             <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
                               {new Intl.NumberFormat("en", {
                                 minimumFractionDigits: 0,
@@ -457,7 +457,7 @@ onMount(async() => {
                           </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-xs sm:text-sm">{buySharesPercentage}%</span>
+                            <span class="text-center text-white text-sm sm:text-[1rem]">{buySharesPercentage}%</span>
                           </div>
                         </div>
                         <!-- End Circular Progress -->
@@ -466,7 +466,7 @@ onMount(async() => {
                       <!--Start Put Flow-->  
                       <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-md h-20">
                         <div class="flex flex-col items-start">
-                            <span class="font-medium text-gray-200 text-xs sm:text-sm">Sold Shares</span>
+                            <span class="font-medium text-gray-200 text-sm sm:text-[1rem]">Sold Shares</span>
                             <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
                               {new Intl.NumberFormat("en", {
                                 minimumFractionDigits: 0,
@@ -486,7 +486,7 @@ onMount(async() => {
                           </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-xs sm:text-sm">{soldSharesPercentage}%</span>
+                            <span class="text-center text-white text-sm sm:text-[1rem]">{soldSharesPercentage}%</span>
                           </div>
                         </div>
                         <!-- End Circular Progress -->
@@ -505,19 +505,19 @@ onMount(async() => {
                           <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">
+                                <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
                                   Person
                                 </th>
-                                <th class="text-end bg-[#09090B] text-white text-sm sm:font-medium">
+                                <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
                                   Transaction Date
                                 </th>
-                                <th class="text-end bg-[#09090B]  text-white text-sm sm:font-medium">
+                                <th class="text-end bg-[#09090B]  text-white text-[1rem] font-semibold">
                                   Shares
                                 </th>
-                                <th class="text-end bg-[#09090B]  text-white text-sm sm:font-medium">
+                                <th class="text-end bg-[#09090B]  text-white text-[1rem] font-semibold">
                                   Price
                                 </th>
-                                <th class="text-white sm:font-semibold text-end text-sm">Type</th>
+                                <th class="text-white font-semibold text-end text-[1rem]">Type</th>
                               </tr>
                             </thead>
                             <tbody>
@@ -527,7 +527,7 @@ onMount(async() => {
                                 <td class="text-white text-sm sm:text-[1rem] border-b border-[#09090B] whitespace-nowrap">
                                   <div class="flex flex-col">
                                     <span class="">{formatString(item?.reportingName)?.replace('/de/','')}</span>
-                                    <span class="text-sm sm:text-[1rem]">{extractOfficeInfo(item?.typeOfOwner)}</span>
+                                    <span class="text-sm">{extractOfficeInfo(item?.typeOfOwner)}</span>
                                   </div>
                                 </td>
       
diff --git a/src/routes/stocks/[tickerID]/news/+page.svelte b/src/routes/stocks/[tickerID]/news/+page.svelte
index 8ce39db1..58f0e90e 100644
--- a/src/routes/stocks/[tickerID]/news/+page.svelte
+++ b/src/routes/stocks/[tickerID]/news/+page.svelte
@@ -145,7 +145,7 @@ function loadMoreData() {
 
 
                           {:else}
-                          <div class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+                          <div class="border border-gray-800 text-center w-full max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium 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>      
                             No news article published yet!
                           </div>