From 558e42e499e0e7049b3e41c2e54ea77787cef9cf Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 17 Aug 2024 00:42:07 +0200
Subject: [PATCH] ui fix

---
 src/lib/components/InfoModal.svelte           |  1 -
 .../etf/[tickerID]/options/+page.svelte       | 98 +++++++-----------
 .../stocks/[tickerID]/analyst/+page.svelte    | 99 +++++++------------
 .../stocks/[tickerID]/insider/+page.svelte    |  7 +-
 .../stocks/[tickerID]/options/+page.svelte    | 98 +++++++-----------
 5 files changed, 107 insertions(+), 196 deletions(-)

diff --git a/src/lib/components/InfoModal.svelte b/src/lib/components/InfoModal.svelte
index 4aa2dc29..b00b973b 100644
--- a/src/lib/components/InfoModal.svelte
+++ b/src/lib/components/InfoModal.svelte
@@ -4,7 +4,6 @@
 export let title;
 export let content;
 export let id;
-export let hide = false;
 </script>
   
 
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 7b06d7d5..d86218a4 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -389,85 +389,55 @@ $: {
                           
                         <div class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
                           <div class="p-4 bp:p-5 sm:p-6">
-                              <div class="text-sm font-normal text-default xs:text-base">
-                                Total Volume
-                                  <span class="relative" role="tooltip">
-                                      <label for="totaVolume" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                          <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                              <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                          </svg>
-                                      </label>
-                                      <InfoModal
-                                        title={"Total Volume"}
-                                        content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
-                                        id={"totaVolume"}
-                                        hide={true}
-                                      />
-                                  </span> 
-                              </div> 
+                            <label for="totaVolume" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                              Total Volume
+                              <InfoModal
+                              title={"Total Volume"}
+                              content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
+                              id={"totaVolume"}
+                            />
+                            </label>
+                               
                               <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
                                 {displayTotalVolume}
                               </div> 
                           </div>
                           <div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
-                              <div class="text-sm font-normal text-default xs:text-base">
-                                Total OI 
-                                  <span class="relative" role="tooltip">
-                                      <label for="totalOpenInterest" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                          <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                              <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                          </svg>
-                                      </label>
-                                      <InfoModal
-                                        title={"Total OI"}
-                                        content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
-                                        id={"totalOpenInterest"}
-                                        hide={true}
-                                      />
-                                  </span> 
-                              </div> 
+                            <label for="totalOpenInterest" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                              Total OI 
+                              <InfoModal
+                              title={"Total OI"}
+                              content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
+                              id={"totalOpenInterest"}
+                            />
+                            </label>
                               <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
                                 {displayTotalOpenInterest}
                               </div> 
                           </div>
                           <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
-                              <div class="text-sm font-normal text-default xs:text-base">
-                                P/C Ratio
-                                  <span class="relative" role="tooltip">
-                                      <label for="putCallRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                          <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                              <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                          </svg>
-                                      </label>
-                                      <InfoModal
-                                        title={"P/C Ratio"}
-                                        content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
-                                        id={"putCallRatio"}
-                                        hide={true}
-                                        />
-                                  </span> 
-                              </div> 
+                            <label for="putCallRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                              P/C Ratio
+                              <InfoModal
+                              title={"P/C Ratio"}
+                              content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
+                              id={"putCallRatio"}
+                              />
+                            </label> 
                               <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
                                 {putCallRatio !== 'Infinity' ? putCallRatio : '> 1'}
                               </div> 
                           </div>
                           <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
-                              <div class="text-sm font-normal text-default xs:text-base">
-                                OI P/C Ratio
-                                  <span class="relative" role="tooltip">
-                                      <label for="openInteresteRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                          <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                              <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                          </svg>
-                                      </label>
-                                        <InfoModal
-                                          title={"OI P/C Ratio"}
-                                          content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
-                                          id={"openInteresteRatio"}
-                                          hide ={true}
-                                          />
-                                  </span> 
-                              </div> 
+                            <label for="openInteresteRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                              OI P/C Ratio
+                              <InfoModal
+                                title={"OI P/C Ratio"}
+                                content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
+                                id={"openInteresteRatio"}
+                                />
+                            </label>   
+   
                               <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
                                 {putCallOpenInterestRatio !== 'Infinity' ? putCallOpenInterestRatio : '> 1'}
                               </div> 
diff --git a/src/routes/stocks/[tickerID]/analyst/+page.svelte b/src/routes/stocks/[tickerID]/analyst/+page.svelte
index 94a346a9..523790de 100644
--- a/src/routes/stocks/[tickerID]/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/analyst/+page.svelte
@@ -132,85 +132,56 @@ changeTab(0)
 
                 <div class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
                   <div class="p-4 bp:p-5 sm:p-6">
-                      <div class="text-sm font-normal text-default xs:text-base">
-                          Total Analysts 
-                          <span class="relative" role="tooltip">
-                              <label for="totalAnalystInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                  <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                      <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                  </svg>
-                              </label>
-                              <InfoModal
-                                title={"Total Analyst"}
-                                content={"The total number of analyst who provided a rating in the past 12 months."}
-                                id={"totalAnalystInfo"}
-                                hide={true}
-                              />
-                          </span> 
-                      </div> 
+                    <label for="totalAnalystInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                      Total Analysts 
+                      <InfoModal
+                      title={"Total Analyst"}
+                      content={"The total number of analyst who provided a rating in the past 12 months."}
+                      id={"totalAnalystInfo"}
+                      />
+                    </label>   
                       <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                         {numOfAnalyst}
                       </div> 
                   </div>
                   <div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
-                      <div class="text-sm font-normal text-default xs:text-base">
-                          Consensus Rating 
-                          <span class="relative" role="tooltip">
-                              <label for="consensusRatingInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                  <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                      <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                  </svg>
-                              </label>
-                              <InfoModal
-                                title={"Consensus Rating"}
-                                content={`The average analyst rating for ${$stockTicker} is standardized to align with categories: Strong Buy, Buy, Hold, Sell, and Strong Sell.`}
-                                id={"consensusRatingInfo"}
-                                hide={true}
-                              />
-                          </span> 
-                      </div> 
+                    <label for="consensusRatingInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                      Total Rating 
+                      <InfoModal
+                      title={"Consensus Rating"}
+                      content={`The average analyst rating for ${$stockTicker} is standardized to align with categories: Strong Buy, Buy, Hold, Sell, and Strong Sell.`}
+                      id={"consensusRatingInfo"}
+                    />
+                    </label>  
+      
                       <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                         {consensusRating}
                       </div> 
                   </div>
                   <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
-                      <div class="text-sm font-normal text-default xs:text-base">
-                          Price Target 
-                          <span class="relative" role="tooltip">
-                              <label for="priceTargetInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                  <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                      <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                  </svg>
-                              </label>
-                              <InfoModal
-                                title={"Price Target"}
-                                content={"The average 12-month price target"}
-                                id={"priceTargetInfo"}
-                                hide={true}
-                                />
-                          </span> 
-                      </div> 
+                    <label for="priceTargetInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                      Price Target 
+                      <InfoModal
+                      title={"Price Target"}
+                      content={"The average 12-month price target"}
+                      id={"priceTargetInfo"}
+                      />
+                    </label>    
+                   
                       <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                         ${priceTarget}
                       </div> 
                   </div>
                   <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
-                      <div class="text-sm font-normal text-default xs:text-base">
-                          Upside 
-                          <span class="relative" role="tooltip">
-                              <label for="upsideInfo" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                  <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                      <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                  </svg>
-                              </label>
-                                <InfoModal
-                                  title={"Upside"}
-                                  content={"The average price target's percentage difference from the current stock price."}
-                                  id={"upsideInfo"}
-                                  hide ={true}
-                                  />
-                          </span> 
-                      </div> 
+                    <label for="upsideInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                      Upside 
+                      <InfoModal
+                      title={"Upside"}
+                      content={"The average price target's percentage difference from the current stock price."}
+                      id={"upsideInfo"}
+                      />
+                    </label>      
+
                       <div class="mt-1 break-words font-semibold leading-8 text-light text-xl">
                         {#if changesPercentage >=0}
                             <span class="text-[#10DB06]">+{changesPercentage}%</span>
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 8bc6c11f..94fcf998 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -337,7 +337,8 @@ onMount(async() => {
                           We can divide four types of insider transactions:
                         
                           <div class="flex flex-row items-center justify-center">
-                            Buy, Sell, 
+                            Buy, Sell,
+                            
                             <label for="grantInfo" class="ml-1 cursor-pointer font-medium">
                               Grant
                             </label>
@@ -345,8 +346,8 @@ onMount(async() => {
                               title={"Stock Grant"}
                               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">
+                            />
+                            <label for="exerciseInfo" class="ml-6 cursor-pointer font-medium">
                               Exercise
                             </label>
                             <InfoModal
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 21e73a6f..ff8aebc5 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -389,85 +389,55 @@ $: {
                           
                         <div class="mb-4 grid grid-cols-2 grid-rows-2 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x">
                           <div class="p-4 bp:p-5 sm:p-6">
-                              <div class="text-sm font-normal text-default xs:text-base">
-                                Total Volume
-                                  <span class="relative" role="tooltip">
-                                      <label for="totaVolume" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                          <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                              <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                          </svg>
-                                      </label>
-                                      <InfoModal
-                                        title={"Total Volume"}
-                                        content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
-                                        id={"totaVolume"}
-                                        hide={true}
-                                      />
-                                  </span> 
-                              </div> 
+                            <label for="totaVolume" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                              Total Volume
+                              <InfoModal
+                              title={"Total Volume"}
+                              content={"The total volume is the combined number of puts and calls traded over the past three months in options trading."}
+                              id={"totaVolume"}
+                            />
+                            </label>
+                               
                               <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
                                 {displayTotalVolume}
                               </div> 
                           </div>
                           <div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0">
-                              <div class="text-sm font-normal text-default xs:text-base">
-                                Total OI 
-                                  <span class="relative" role="tooltip">
-                                      <label for="totalOpenInterest" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                          <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                              <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                          </svg>
-                                      </label>
-                                      <InfoModal
-                                        title={"Total OI"}
-                                        content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
-                                        id={"totalOpenInterest"}
-                                        hide={true}
-                                      />
-                                  </span> 
-                              </div> 
+                            <label for="totalOpenInterest" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                              Total OI 
+                              <InfoModal
+                              title={"Total OI"}
+                              content={"The total open interest reflects the aggregate number of outstanding options contracts in options trading."}
+                              id={"totalOpenInterest"}
+                            />
+                            </label>
                               <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
                                 {displayTotalOpenInterest}
                               </div> 
                           </div>
                           <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0">
-                              <div class="text-sm font-normal text-default xs:text-base">
-                                P/C Ratio
-                                  <span class="relative" role="tooltip">
-                                      <label for="putCallRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                          <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                              <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                          </svg>
-                                      </label>
-                                      <InfoModal
-                                        title={"P/C Ratio"}
-                                        content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
-                                        id={"putCallRatio"}
-                                        hide={true}
-                                        />
-                                  </span> 
-                              </div> 
+                            <label for="putCallRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                              P/C Ratio
+                              <InfoModal
+                              title={"P/C Ratio"}
+                              content={"The put-call ratio assesses market sentiment and potential movements by comparing traded put options to call options."}
+                              id={"putCallRatio"}
+                              />
+                            </label> 
                               <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
                                 {putCallRatio !== 'Infinity' ? putCallRatio : '> 1'}
                               </div> 
                           </div>
                           <div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0">
-                              <div class="text-sm font-normal text-default xs:text-base">
-                                OI P/C Ratio
-                                  <span class="relative" role="tooltip">
-                                      <label for="openInteresteRatio" class="absolute -right-[10px] -top-[3px] cursor-pointer p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
-                                          <svg class="h-[9px] w-[9px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
-                                              <path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
-                                          </svg>
-                                      </label>
-                                        <InfoModal
-                                          title={"OI P/C Ratio"}
-                                          content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
-                                          id={"openInteresteRatio"}
-                                          hide ={true}
-                                          />
-                                  </span> 
-                              </div> 
+                            <label for="openInteresteRatio" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]">
+                              OI P/C Ratio
+                              <InfoModal
+                                title={"OI P/C Ratio"}
+                                content={"The open interest put-call ratio measures market sentiment in options trading by comparing the total number of outstanding put options contracts to outstanding call options contracts. A higher ratio suggests bearish sentiment, while a lower ratio indicates bullish sentiment."}
+                                id={"openInteresteRatio"}
+                                />
+                            </label>   
+   
                               <div class="mt-1 break-words font-semibold leading-8 text-light text-lg">
                                 {putCallOpenInterestRatio !== 'Infinity' ? putCallOpenInterestRatio : '> 1'}
                               </div>