ui fixes

src/lib/components/DividendAnnouncement.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { stockTicker, displayCompanyName } from "$lib/store";
-  import InfoModal from "$lib/components/InfoModal.svelte";
   export let data;
 
   let rawData = {};
@@ -39,17 +38,11 @@
         <div class="flex flex-row justify-start mr-auto items-center">
           <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
           <div class="flex flex-row items-center">
-            <label
+            <h3
-              for="dividendAnnouncement"
+              class="mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
-              class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
             >
               Dividend Announcement
-            </label>
+            </h3>
-            <InfoModal
-              title={"Dividend Announcement"}
-              content={`Dividend announcements are company declarations of cash or stock distributions to shareholders, usually reflecting profit and providing investment returns.`}
-              id={"dividendAnnouncement"}
-            />
           </div>
         </div>
       </div>
@@ -57,7 +50,7 @@
       <div
         class="text-white text-[1rem] {latestInfoDate(rawData?.date)
           ? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg'
-          : 'bg-[#09090B] pl-1'} "
+          : 'bg-[#09090B] pl-1'}"
       >
         <div class="mt-1">
           {$displayCompanyName} has announced its upcoming dividend details on {new Date(
@@ -70,52 +63,62 @@
           })}:
         </div>
 
-        <li
+        <!-- Added grid container -->
-          class="ml-[20px] sm:ml-[30px]"
+        <ul class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 mt-5">
-          style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;"
+          <!-- First column -->
-        >
+          <div>
-          <span class="font-bold">Dividend:</span> ${rawData?.dividend} per share
+            <li
-          ({rawData?.dividend / rawData?.dividendPrior - 1 > 0 ? "+" : ""}{(
+              class="ml-[20px]"
-            (rawData?.dividend / rawData?.dividendPrior - 1) *
+              style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
-            100
+            >
-          )?.toFixed(2)}% YoY)
+              <span class="font-bold">Dividend:</span> ${rawData?.dividend} per share
-        </li>
+              ({rawData?.dividend / rawData?.dividendPrior - 1 > 0 ? "+" : ""}{(
-        <li
+                (rawData?.dividend / rawData?.dividendPrior - 1) *
-          class="ml-[20px] sm:ml-[30px]"
+                100
-          style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
+              )?.toFixed(2)}% YoY)
-        >
+            </li>
-          <span class="font-bold">Dividend Yield:</span>
+            <li
-          {rawData?.dividendYield?.toFixed(2)}%
+              class="ml-[20px]"
-        </li>
+              style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
-        <li
+            >
-          class="ml-[20px] sm:ml-[30px]"
+              <span class="font-bold">Dividend Yield:</span>
-          style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
+              {rawData?.dividendYield?.toFixed(2)}%
-        >
+            </li>
-          <span class="font-bold">Ex-Dividend Date:</span>
+          </div>
-          {new Date(rawData?.exDividendDate)?.toLocaleString("en-US", {
-            month: "short",
-            day: "numeric",
-            year: "numeric",
-            daySuffix: "2-digit",
-          })}
-        </li>
 
-        <li
+          <!-- Second column -->
-          class="ml-[20px] sm:ml-[30px]"
+          <div>
-          style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
+            <li
-        >
+              class="ml-[20px]"
-          <span class="font-bold">Payable Date:</span>
+              style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
-          {new Date(rawData?.payableDate)?.toLocaleString("en-US", {
+            >
-            month: "short",
+              <span class="font-bold">Ex-Dividend Date:</span>
-            day: "numeric",
+              {new Date(rawData?.exDividendDate)?.toLocaleString("en-US", {
-            year: "numeric",
+                month: "short",
-            daySuffix: "2-digit",
+                day: "numeric",
-          })}
+                year: "numeric",
-        </li>
+                daySuffix: "2-digit",
+              })}
+            </li>
+            <li
+              class="ml-[20px]"
+              style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
+            >
+              <span class="font-bold">Payable Date:</span>
+              {new Date(rawData?.payableDate)?.toLocaleString("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+                daySuffix: "2-digit",
+              })}
+            </li>
+          </div>
+        </ul>
 
+        <!-- Keep the Record Date outside the grid as a full-width item -->
         <li
-          class="ml-[20px] sm:ml-[30px]"
+          class="ml-[20px]"
-          style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
+          style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
         >
           <span class="font-bold">Record Date:</span>
           {new Date(rawData?.recordDate)?.toLocaleString("en-US", {

src/lib/components/EarningsSurprise.svelte

@@ -5,7 +5,8 @@
   export let data;
 
   let rawData = {};
-
+  let epsRatio = 0;
+  let revenueRatio = 0;
   function latestInfoDate(inputDate) {
     // Convert the input date string to milliseconds since epoch
     const inputDateMs = Date?.parse(inputDate);
@@ -28,6 +29,14 @@
   $: {
     if ($stockTicker && typeof window !== "undefined") {
       rawData = data?.getEarningsSurprise;
+      epsRatio = (
+        ((rawData?.eps - rawData?.epsPrior) / Math.abs(rawData?.epsPrior)) *
+        100
+      )?.toFixed(2);
+      revenueRatio = (
+        (rawData?.revenue / rawData?.revenuePrior - 1) *
+        100
+      )?.toFixed(2);
     }
   }
 </script>
@@ -80,14 +89,12 @@
             Math.abs(rawData?.revenueSurprise),
             true,
           )}, with
-          <strong
+          <span
-            >{((rawData?.revenue / rawData?.revenuePrior - 1) * 100)?.toFixed(
+            class="font-semibold {revenueRatio > 0
-              2,
+              ? 'text-[#00FC50]'
-            )}%</strong
+              : 'text-[#FF2F1F]'}">{revenueRatio}%</span
           >
-          YoY {rawData?.revenue / rawData?.revenuePrior - 1 < 0
+          YoY {revenueRatio < 0 ? "decline" : "growth"}.
-            ? "decline"
-            : "growth"}.
         </li>
         <li
           class="ml-[20px] sm:ml-[30px]"
@@ -97,18 +104,12 @@
           {rawData?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by ${rawData?.epsSurprise?.toFixed(
             2,
           )}, with
-          <strong
+          <span
-            >{(
+            class="font-semibold {epsRatio > 0
-              ((rawData?.eps - rawData?.epsPrior) /
+              ? 'text-[#00FC50]'
-                Math.abs(rawData?.epsPrior)) *
+              : 'text-[#FF2F1F]'}">{epsRatio}%</span
-              100
-            )?.toFixed(2)}%</strong
           >
-          YoY {(rawData?.eps - rawData?.epsPrior) /
+          YoY {epsRatio < 0 ? "decline" : "growth"}.
-            Math.abs(rawData?.epsPrior) <
-          0
-            ? "decline"
-            : "growth"}.
         </li>
       </div>
     </div>

src/lib/components/NextEarnings.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { stockTicker, displayCompanyName } from "$lib/store";
-  import InfoModal from "$lib/components/InfoModal.svelte";
   import { abbreviateNumber } from "$lib/utils";
   export let data;
 
@@ -39,17 +38,11 @@
         <div class="flex flex-row justify-start mr-auto items-center">
           <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
           <div class="flex flex-row items-center">
-            <label
+            <h3
-              for="nextEarningsInfo"
+              class="mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
-              class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
             >
               Next Earnings Release
-            </label>
+            </h3>
-            <InfoModal
-              title={"Next Earnings"}
-              content={`Earnings represent a company's net profit after expenses, taxes, and costs. Reported quarterly, they show financial health, including revenue and EPS, influencing stock prices and investor decisions.`}
-              id={"nextEarningsInfo"}
-            />
           </div>
         </div>
       </div>
@@ -73,13 +66,19 @@
         <br />Analysts project revenue of
         <strong>{abbreviateNumber(rawData?.revenueEst, true)}</strong>,
         reflecting a
-        <strong>{revenueRatio}%</strong> YoY {revenueRatio > 0
+        <span
-          ? "growth"
+          class="font-semibold {revenueRatio > 0
-          : revenueRatio < 0
+            ? 'text-[#00FC50]'
-            ? "shrinking"
+            : 'text-[#FF2F1F]'} ">{abbreviateNumber(revenueRatio)}%</span
-            : ""} and earnings per share of
+        >
+        YoY {revenueRatio > 0 ? "growth" : revenueRatio < 0 ? "shrinking" : ""} and
+        earnings per share of
         <strong>{rawData?.epsEst}</strong>, making a
-        <strong>{epsRatio}%</strong>
+        <span
+          class="font-semibold {epsRatio > 0
+            ? 'text-[#00FC50]'
+            : 'text-[#FF2F1F]'} ">{epsRatio}%</span
+        >
         {epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
       </div>
     </div>

src/routes/stocks/[tickerID]/+layout.server.ts

@@ -43,23 +43,6 @@ const fetchWatchlist = async (pb, userId) => {
   return output;
 };
 
-const fetchCommunitySentiment = async (pb, ticker, cookies) => {
-  const cookieVote = cookies.get(`community-sentiment-${ticker}`);
-  const today = new Date().toISOString().split("T")[0];
-  const pastNDays = new Date(new Date().setDate(new Date().getDate() - 7))
-    .toISOString()
-    .split("T")[0];
-
-  const output = await pb.collection("sentiment").getFullList({
-    filter: `ticker="${ticker}" && created < "${today}" && created >= "${pastNDays}"`,
-  });
-
-  return {
-    alreadyVoted: cookieVote || null,
-    sentimentData: output?.at(0) || {},
-  };
-};
-
 export const load = async ({ params, locals, cookies, setHeaders }) => {
   const { apiURL, apiKey, pb, user } = locals;
   const { tickerID } = params;
@@ -84,8 +67,6 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
       fetchData(apiURL, apiKey, endpoint, tickerID),
     ),
     fetchWatchlist(pb, user?.id),
-    //fetchFromFastify(fastifyURL, '/get-portfolio-data', user?.id),
-    fetchCommunitySentiment(pb, tickerID, cookies),
   ];
 
   const [
@@ -102,7 +83,6 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
     getDividendAnnouncement,
     getNews,
     getUserWatchlist,
-    getCommunitySentiment,
   ] = await Promise.all(promises);
 
   return {
@@ -119,7 +99,6 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
     getDividendAnnouncement,
     getNews,
     getUserWatchlist,
-    getCommunitySentiment,
     companyName: cleanString(getStockDeck?.at(0)?.companyName),
   };
 };

src/routes/stocks/[tickerID]/+page.svelte

@@ -25,7 +25,6 @@
   import EarningsSurprise from "$lib/components/EarningsSurprise.svelte";
   import DividendAnnouncement from "$lib/components/DividendAnnouncement.svelte";
 
-  import CommunitySentiment from "$lib/components/CommunitySentiment.svelte";
   import Lazy from "$lib/components/Lazy.svelte";
   import { convertTimestamp } from "$lib/utils";
   import { Button } from "$lib/components/shadcn/button/index.js";
@@ -36,7 +35,6 @@
   export let form;
 
   let prePostData = {};
-  let communitySentiment = {};
 
   $: previousClose = data?.getStockQuote?.previousClose;
 
@@ -668,11 +666,8 @@
       oneYearPrice = [];
       maxPrice = [];
       prePostData = {};
-      communitySentiment = {};
       output = null;
 
-      communitySentiment = data?.getCommunitySentiment;
-
       const asyncFunctions = [getPrePostQuote()];
 
       Promise.all(asyncFunctions)
@@ -1651,10 +1646,10 @@
                 </div>
               </div>
               <div>
-                <h2 class="mb-2" data-svelte-h="svelte-avjv7o">
+                <h2 class="mb-2 text-white text-2xl font-semibold">
                   Analyst Forecast
                 </h2>
-                <p class="mb-4" data-test="overview-forecast-intro">
+                <p class="mb-4 text-gray-200">
                   According to 40 analysts, the average rating for NVDA stock is
                   "Strong Buy." The 12-month stock price forecast is $145.84,
                   which is an increase of 3.04% from the latest price.
@@ -1688,9 +1683,6 @@
               <div class="lg:sticky lg:top-20"></div>
             </div>
             <div class="w-full">
-              <div class="w-full mt-14 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
-                <CommunitySentiment {communitySentiment} />
-              </div>
               <div class="w-full mt-10 m-auto sm:p-6 lg:hidden">
                 <Lazy>
                   <h3
@@ -1705,7 +1697,7 @@
               </div>
 
               <div
-                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(
+                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
                   data?.getEarningsSurprise || {},
                 )?.length !== 0
                   ? ''
@@ -1715,7 +1707,7 @@
               </div>
 
               <div
-                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(
+                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
                   data?.getNextEarnings || {},
                 )?.length !== 0
                   ? ''
@@ -1725,7 +1717,7 @@
               </div>
 
               <div
-                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(
+                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
                   data?.getDividendAnnouncement || {},
                 )?.length !== 0
                   ? ''
@@ -1735,7 +1727,7 @@
               </div>
 
               <div
-                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(
+                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
                   data?.getBullBearSay || {},
                 )?.length !== 0
                   ? ''
@@ -1746,7 +1738,7 @@
 
               <Lazy>
                 <div
-                  class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data
+                  class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {data
                     ?.getWhyPriceMoved?.length !== 0
                     ? ''
                     : 'hidden'}"