ui fix

src/lib/components/LoginPopup.svelte

@@ -864,13 +864,7 @@ const output = await response.json();
               class="flex flex-col items-center space-y-2 w-full md:w-5/6 pt-4 md:ml-auto md:mr-auto"
             >
               <!--<Input id="name" label="Your first and last name" value={form?.data?.name} errors={form?.errors?.name} />-->
-              <Input
+
-                id="username"
-                label="Username"
-                value={form?.data?.username}
-                errors={form?.errors?.username}
-                disabled={loading}
-              />
               <Input
                 type="email"
                 id="email"
@@ -2297,13 +2291,7 @@ const output = await response.json();
                 class="flex flex-col items-center space-y-2 w-full md:w-5/6 pt-4 md:ml-auto md:mr-auto"
               >
                 <!--<Input id="name" label="Your first and last name" value={form?.data?.name} errors={form?.errors?.name} />-->
-                <Input
+
-                  id="username"
-                  label="Username"
-                  value={form?.data?.username}
-                  errors={form?.errors?.username}
-                  disabled={loading}
-                />
                 <Input
                   type="email"
                   id="email"

src/routes/market-mover/[slug]/+page.svelte

@@ -4,6 +4,7 @@
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import { goto } from "$app/navigation";
+  import InfoModal from "$lib/components/InfoModal.svelte";
 
   import { afterUpdate } from "svelte";
   export let data;
@@ -262,9 +263,16 @@
               <h1 class="text-white text-xl sm:text-2xl font-semibold">
                 {displayTitle[timePeriod]?.replace("title", title)}
               </h1>
+              {#if timePeriod === "1D" && ["Gainers", "Losers"]?.includes(title)}
+                <InfoModal
+                  title={`${title} Today`}
+                  content={`The stocks with the highest percentage ${title === "Gainers" ? "gains" : "loss"} today, updated every two minutes during market open. Excludes stocks with a market cap under 10M and volume under 50K.`}
+                  id={"marketmoverId"}
+                />
+              {/if}
 
               <div
-                class="mb-0 ml-3 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
+                class="mb-0 ml-5 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
               >
                 <span class="hidden lg:inline">Updated</span>
                 {lastTradingDay}

src/routes/market-mover/afterhours/+page.svelte

@@ -3,6 +3,7 @@
   import { abbreviateNumber, getLastTradingDay } from "$lib/utils";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import InfoModal from "$lib/components/InfoModal.svelte";
 
   import { goto } from "$app/navigation";
 
@@ -214,9 +215,14 @@
               <h1 class="text-white text-xl sm:text-2xl font-semibold">
                 Afterhours {categoryType === "gainers" ? "Gainers" : "Losers"}
               </h1>
+              <InfoModal
+                title={`${categoryType === "gainers" ? "Afterhours Gainers" : "Afterhours Losers"} Today`}
+                content={`The stocks with the highest percentage ${categoryType === "gainers" ? "gains" : "loss"} in the afterhours, updated every two minutes during market closing. Excludes stocks with a market cap under 10M.`}
+                id={"aftermarketId"}
+              />
 
               <div
-                class="mb-0 ml-3 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
+                class="mb-0 ml-5 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
               >
                 <span class="hidden lg:inline">Updated</span>
                 {lastTradingDay}

src/routes/market-mover/premarket/+page.svelte

@@ -3,6 +3,7 @@
   import { abbreviateNumber, getLastTradingDay } from "$lib/utils";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import InfoModal from "$lib/components/InfoModal.svelte";
 
   import { goto } from "$app/navigation";
 
@@ -18,15 +19,6 @@
     },
   );
 
-  const displayTitle = {
-    "1D": "Active Today",
-    "1W": "Week Active",
-    "1M": "Month Active",
-    "1Y": "1 Year Active",
-    "3Y": "3 Year Active",
-    "5Y": "5 Year Active",
-  };
-
   let rawData = data?.getMarketMover;
   let stockList = rawData[categoryType];
 
@@ -223,9 +215,13 @@
               <h1 class="text-white text-xl sm:text-2xl font-semibold">
                 Premarket {categoryType === "gainers" ? "Gainers" : "Losers"}
               </h1>
-
+              <InfoModal
+                title={`${categoryType === "gainers" ? "Premarket Gainers" : "Premarket Losers"} Today`}
+                content={`The stocks with the highest percentage ${categoryType === "gainers" ? "gains" : "loss"} in the premarket, updated every two minutes during market closing. Excludes stocks with a market cap under 10M.`}
+                id={"premarketId"}
+              />
               <div
-                class="mb-0 ml-3 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
+                class="mb-0 ml-5 mt-1 whitespace-nowrap text-sm font-semiboldt text-white"
               >
                 <span class="hidden lg:inline">Updated</span>
                 {lastTradingDay}