update key information cards

src/lib/components/ESGCard.svelte

@@ -20,23 +20,14 @@ $: {
   if ($stockTicker && typeof window !== 'undefined' && typeof stockDeck !== 'undefined' && stockDeck?.length !== 0)
   {
    
-    info = stockDeck[0]
+    info = stockDeck?.at(0)
-
-
     esgScore = info?.esgScore !== 'n/a' ? Math.round(info?.esgScore.toFixed(1)) : 'n/a';
     socialScore = info?.socialScore !== 'n/a' ? Math.round(info?.socialScore.toFixed(1)) : 'n/a';
-    environmentalScore = info?.environmentalScore !== 'n/a' ? Math.round(info?.environmentalScore.toFixed(1)) : 'n/a';
+    environmentalScore = info?.environmentalScore !== 'n/a' ? Math.round(info?.environmentalScore?.toFixed(1)) : 'n/a';
-    governanceScore =  info?.governanceScore !== 'n/a' ? Math.round(info?.governanceScore.toFixed(1)) : 'n/a';
+    governanceScore =  info?.governanceScore !== 'n/a' ? Math.round(info?.governanceScore?.toFixed(1)) : 'n/a';
     esgRiskRating = info?.esgRiskRating;
   
     };
-    /*
-    if (esgRatingCircleContainer)
-    {
-      esgRatingAcc(esgScore/100);
-    }
-    */
-
   }
 
 
@@ -146,20 +137,16 @@ $: {
   <div class="bg-[#000] h-auto w-screen">
   
     <!--Start Header-->
-    <div class="bg-[#27272A] w-full  p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
+    <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
-      <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
+      <h2 class="text-center m-auto text-[1.1rem] font-semibold text-white mt-5">
         ESG Score
       </h2>
 
-      <div class="flex flex-col items-center mt-10 w-full">
+      <div class="flex flex-col items-center mt-10 mb-5 w-full px-3">
-        <span class="text-white text-center text-md text-opacity-[0.8]">
+        <span class="text-white text-center text-md">
           Gain valuable insights into a company's sustainability by evaluating its ESG (Environmental, Social, and Governance) scores.
         </span>
 
-        <div class="flex flex-row justify-center items-center w-full mt-5">
-
-        
-        </div>
       </div>
     </div>
     <!--End Header-->

src/lib/components/Sidecard.svelte

@@ -2,7 +2,7 @@
 
 import TickerInfoCard from '$lib/components/TickerInfoCard.svelte';
 import AnalystCard from '$lib/components/AnalystCard.svelte';
-import ESGCard from '$lib/components/ESGCard.svelte';
+//import ESGCard from '$lib/components/ESGCard.svelte';
 import SimilarTickerCard from '$lib/components/SimilarTickerCard.svelte';
 import TopETFTickerHolder from '$lib/components/TopETFTickerHolder.svelte';
 
@@ -24,7 +24,7 @@ export let analystRating
 <AnalystCard lastPrice={lastPrice} analystRating={analystRating} />
 
 
-<ESGCard stockDeck={stockDeck} />
+<!--<ESGCard stockDeck={stockDeck} />-->
 
 <SimilarTickerCard similarstock={similarstock}/>
 

src/lib/components/SimilarTickerCard.svelte

@@ -103,18 +103,14 @@ export let similarstock;
   <div class="bg-[#000] h-auto w-screen">
   
    <!--Start Header-->
-   <div class="bg-[#27272A] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
+   <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
     <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
      Similar Ticker
     </h2>
-    <div class="flex flex-col items-center mt-10 w-full">
+    <div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
-      <span class="text-white text-center text-md text-opacity-[0.8] pl-8 pr-8">
+      <span class="text-white text-center text-md">
         Identify trends in similar assets and explore superior competing options in your portfolio.
       </span>
-
-      <div class="flex flex-row justify-center items-center w-full mt-5">
-      </div>
-
     </div>
 
   </div>
@@ -125,9 +121,9 @@ export let similarstock;
       <table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
         <thead>
           <tr>
-            <th class="text-white font-bold text-sm text-start bg-[#000]">Company</th>
+            <th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
-            <th class="text-white font-bold text-sm text-center bg-[#000]">Market Cap</th>
+            <th class="text-white font-semibold text-sm text-end bg-[#000]">Market Cap</th>
-            <th class="text-white font-bold text-sm text-end bg-[#000]">Avg Volume</th>
+            <th class="text-white font-semibold text-sm text-end bg-[#000]">Avg Volume</th>
           </tr>
         </thead>
         <tbody>
@@ -135,16 +131,13 @@ export let similarstock;
           <tr on:click={() => stockSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
             {#if index <=6}
            
-              <td class="text-gray-200">
+              <td class="text-white whitespace-nowrap">
                 <div class="flex flex-row items-center">
-                  <div class="rounded-full w-10 h-10 relative flex items-center justify-center">
+                  <div class="flex flex-col w-full">
-                    <img style="clip-path: circle(50%);" class="w-6 h-6 rounded-full" src={`https://financialmodelingprep.com/image-stock/${item.symbol}.png`} loading="lazy"/>
-                  </div>
-                  <div class="flex flex-col ml-3 w-full">
                     <span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
                     <span class="text-white text-xs">
                       {#if typeof item?.name !== 'undefined'}
-                        {item?.name?.length > 10 ? item?.name?.slice(0,10) + "..." : item?.name}
+                        {item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
                       {:else}
                         n/a
                       {/if}
@@ -155,11 +148,11 @@ export let similarstock;
                 
               </td>
           
-            <td class="text-white text-center font-medium ">
+            <td class="text-white text-end font-medium text-sm">
               {item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
             </td>
           
-            <td class="text-white font-medium text-end">
+            <td class="text-white font-medium text-end text-sm">
               {item?.avgVolume !== null ? abbreviateNumber(item?.avgVolume) : '-'}
             </td>
             {/if}

src/lib/components/StockKeyInformation.svelte

@@ -4,7 +4,7 @@
   import ExecutiveCard from '$lib/components/ExecutiveCard.svelte';
 
   import SimilarTickerCard from '$lib/components/SimilarTickerCard.svelte';
-  import ESGCard from '$lib/components/ESGCard.svelte';
+  //import ESGCard from '$lib/components/ESGCard.svelte';
   import SECFilingsCard from '$lib/components/SECFilingsCard.svelte';
   import TopETFTickerHolder from '$lib/components/TopETFTickerHolder.svelte';
 
@@ -44,9 +44,11 @@ $: {
     <label on:click={() => $secFilingsClicked = true} for="secFilingModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
       SEC Filings
     </label>
+    <!--
     <label for="esgModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
       ESG Score
     </label>
+    -->
     <label for="similarTickerModal" class="w-auto border border-gray-300 flex px-4 py-2 mb-2 justify-center items-center text-xs font-medium rounded-xl text-gray-200">
       Similar
     </label>
@@ -145,6 +147,7 @@ $: {
   
 
 <!--Start ESG Modal-->
+<!--
 <div class="drawer drawer-end z-40 overflow-hidden w-screen">
   <input id="esgModal" type="checkbox" class="drawer-toggle"/>
   <div class="drawer-side overflow-hidden">
@@ -164,6 +167,7 @@ $: {
     </div>
   </div>
 </div>
+-->
 <!--End ESG Modal-->
 
   

src/lib/components/TopETFTickerHolder.svelte

@@ -101,18 +101,15 @@
       <div class="bg-[#000] h-auto w-screen">
       
        <!--Start Header-->
-       <div class="bg-[#27272A] w-full p-1 flex flex-col items-center pb-5 h-auto rounded-b-[30px]">
+       <div class="w-full p-1 flex flex-col items-center pb-5 h-auto">
-        <h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5">
+        <h2 class="text-center m-auto text-lg font-semibold text-white mt-5">
           Top ETFs Holder
         </h2>
-        <div class="flex flex-col items-center mt-10 w-full">
+        <div class="flex flex-col items-center mt-10 mb-5 w-full px-8">
-          <span class="text-white text-center text-md text-opacity-[0.8] pl-8 pr-8">
+          <span class="text-white text-center text-md">
             Find the ETFs with the highest portfolio weights for this stock. 
           </span>
 
-          <div class="flex flex-row justify-center items-center w-full mt-5">
-          </div>
-    
         </div>
     
       </div>
@@ -123,9 +120,9 @@
           <table class="table table-sm table-compact mt-3 text-start flex justify-start items-center w-full px-3 m-auto">
             <thead>
               <tr>
-                <th class="text-white font-bold text-sm text-start bg-[#000]">Company</th>
+                <th class="text-white font-semibold text-sm text-start bg-[#000]">Company</th>
-                <th class="text-white font-bold text-sm text-center bg-[#000]">Total Assets</th>
+                <th class="text-white font-semibold text-sm text-end bg-[#000]">Total Assets</th>
-                <th class="text-white font-bold text-sm text-end bg-[#000]">% of Fund</th>
+                <th class="text-white font-semibold text-sm text-end bg-[#000]">% of Fund</th>
               </tr>
             </thead>
             <tbody>
@@ -133,13 +130,13 @@
               <tr on:click={() => etfSelector(item?.symbol)} class="text-white cursor-pointer bg-[#000] border-b border-[#000]">
                 {#if index <=6}
                
-                  <td class="text-gray-200">
+                  <td class="text-white whitespace-nowrap">
                     <div class="flex flex-row items-center">
                       <div class="flex flex-col w-full">
                         <span class="text-blue-400 text-sm font-medium">{item?.symbol}</span>
                         <span class="text-white text-xs">
                           {#if typeof item?.name !== 'undefined'}
-                            {item?.name?.length > 15 ? item?.name?.slice(0,15) + "..." : item?.name}
+                            {item?.name?.length > 20 ? item?.name?.slice(0,20) + "..." : item?.name}
                           {:else}
                             n/a
                           {/if}
@@ -150,7 +147,7 @@
                     
                   </td>
               
-                <td class="text-white text-center font-medium ">
+                <td class="text-white text-end font-medium ">
                   {item?.totalAssets !== null ? abbreviateNumber(item?.totalAssets,true) : '-'}
                 </td>