From f2ab85b076ebc67f536cebbb8212ecd65876ecac Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 5 Dec 2024 14:38:14 +0100
Subject: [PATCH] update price alert

---
 src/lib/components/PriceAlert.svelte          | 534 ++++--------------
 src/routes/+layout.svelte                     |   6 +-
 .../corporate-lobbying-tracker/+page.svelte   |   2 +-
 src/routes/crypto/[tickerID]/+layout.svelte   | 169 +++---
 src/routes/etf/[tickerID]/+layout.svelte      |  30 +-
 src/routes/stocks/[tickerID]/+layout.svelte   |  29 +-
 6 files changed, 230 insertions(+), 540 deletions(-)

diff --git a/src/lib/components/PriceAlert.svelte b/src/lib/components/PriceAlert.svelte
index df46e817..269cc89b 100644
--- a/src/lib/components/PriceAlert.svelte
+++ b/src/lib/components/PriceAlert.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import toast from "svelte-french-toast";
   import {
-    screenWidth,
     openPriceAlert,
     displayCompanyName,
     stockTicker,
@@ -9,17 +8,21 @@
     cryptoTicker,
     assetType,
   } from "$lib/store";
-  import RangeSlider from "svelte-range-slider-pips";
 
   export let data;
+  export let ticker;
 
-  let currentPrice = data?.getStockQuote?.price;
-  let values = [0];
-  let displayPrice = (currentPrice * (1 + values?.at(0) / 100))?.toFixed(2);
+  let currentPrice = Number(data?.getStockQuote?.price?.toFixed(2));
+  let targetPrice = currentPrice; //(currentPrice * (1 + targetPrice / 100))?.toFixed(2);
+  let condition = "above";
+
+  function changeStatement(event) {
+    condition = event.target.value;
+  }
 
   async function handleCreateAlert() {
-    if (values?.at(0) === 0) {
-      toast.error(`Percentage change must not be zero`, {
+    if (targetPrice < 0) {
+      toast.error(`Target Price must be above zero`, {
         style:
           "border-radius: 10px; background: #333; color: #fff;  padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
       });
@@ -37,10 +40,9 @@
               : $cryptoTicker,
         name: $displayCompanyName,
         assetType: $assetType,
-        priceWhenCreated: currentPrice?.toFixed(2),
-        condition: values?.at(0) < 0 ? "below" : "above",
-        targetPrice: displayPrice,
-        path: "create-price-alert",
+        priceWhenCreated: currentPrice,
+        condition: condition,
+        targetPrice: targetPrice,
       };
 
       // Make the POST request to the endpoint
@@ -52,92 +54,22 @@
         body: JSON.stringify(postData),
       });
 
-      const output = await response.json();
+      //const output = await response.json();
 
-      if (output === "success") {
-        toast.success(`Successfully created price alert`, {
-          style:
-            "border-radius: 10px; background: #333; color: #fff;  padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
-        });
-        values = [0];
-        displayPrice = currentPrice;
-      } else {
-        toast.error(`Something went wrong. Please try again!`, {
-          style:
-            "border-radius: 10px; background: #333; color: #fff;  padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
-        });
-      }
+      toast.success(`Successfully created price alert`, {
+        style:
+          "border-radius: 10px; background: #333; color: #fff;  padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
+      });
+      targetPrice = currentPrice;
     }
   }
 
-  function numPadInput(number) {
-    // Check if the input number is a single digit number
-    if (number >= 0 && number <= 9) {
-      if (Math?.abs(displayPrice - currentPrice) < 0.001) {
-        displayPrice = Number(number);
-      } else {
-        if ((String(displayPrice)?.split(".")[1] || "")?.length < 2) {
-          displayPrice = Number(String(displayPrice) + String(number));
-        }
-      }
-      values[0] = (displayPrice / currentPrice - 1) * 100;
-
-      const button = document.getElementById(`numPad-${number}`);
-      if (button) {
-        button.classList.add("bg-white", "bg-opacity-[0.05]");
-        setTimeout(() => {
-          button.classList.remove("bg-white", "bg-opacity-[0.05]");
-        }, 120);
-      }
-    } else if (number === "remove") {
-      displayPrice = String(displayPrice).slice(0, -1);
-      // If displayPrice becomes an empty string, set it to 0
-      if (displayPrice === "") {
-        displayPrice = 0;
-      }
-
-      values[0] = (displayPrice / currentPrice - 1) * 100;
-
-      const button = document.getElementById(`numPad-remove`);
-      if (button) {
-        button.classList.add("bg-white", "bg-opacity-[0.05]");
-        setTimeout(() => {
-          button.classList.remove("bg-white", "bg-opacity-[0.05]");
-        }, 120);
-      }
-    } else if (number === "dot") {
-      if (
-        !String(displayPrice)?.includes(".") &&
-        (String(displayPrice)?.split(".")[1] || "")?.length < 2
-      ) {
-        displayPrice = String(displayPrice) + ".";
-        console.log(displayPrice);
-      }
-
-      values[0] = (displayPrice / currentPrice - 1) * 100;
-
-      const button = document.getElementById(`numPad-dot`);
-      if (button) {
-        button.classList.add("bg-white", "bg-opacity-[0.05]");
-        setTimeout(() => {
-          button.classList.remove("bg-white", "bg-opacity-[0.05]");
-        }, 120);
-      }
-    }
-  }
-
-  $: isPositive = values[0] < 0;
-  $: origin = isPositive
-    ? "--left: auto; --right: 50%"
-    : "--right: auto; --left: 50%";
-  $: color = isPositive ? "#FF2F1F" : "#0DDE00";
-
   $: {
     if ($openPriceAlert === true) {
       $openPriceAlert = false;
-      currentPrice = data?.getStockQuote?.price;
-      values = [0];
-      displayPrice = (currentPrice * (1 + values?.at(0) / 100))?.toFixed(2);
+      currentPrice = Number(data?.getStockQuote?.price?.toFixed(2));
+      targetPrice = currentPrice;
+      condition = "above";
     }
   }
 </script>
@@ -149,341 +81,123 @@
   />
 </svelte:head>
 
-{#if $screenWidth >= 640}
-  <!--Start Trade Modal-->
-  <input type="checkbox" id="priceAlertModal" class="modal-toggle" />
+<!--Start Trade Modal-->
+<input type="checkbox" id="priceAlertModal" class="modal-toggle" />
 
-  <dialog id="priceAlertModal" class="modal modal-bottom sm:modal-middle">
+<dialog id="priceAlertModal" class="modal modal-middle p-2 sm:p-0">
+  <label
+    for="priceAlertModal"
+    class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.3]"
+  ></label>
+
+  <div
+    class="modal-box rounded-md w-full bg-[#1E222D] border border-gray-600 min-h-fit h-[600px] sm:h-[500px]"
+  >
+    <!--Start Trade Modal-->
     <label
       for="priceAlertModal"
-      class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.02]"
-    ></label>
-
-    <div
-      class="modal-box rounded-none w-full bg-[#000] border border-gray-800 h-[450px]"
+      class="cursor-pointer absolute right-5 top-5 text-[1.8rem] text-white"
     >
-      <!--Start Trade Modal-->
-      <label
-        for="priceAlertModal"
-        class="cursor-pointer absolute right-5 top-5 bg-[#000] text-[1.8rem] text-white"
+      <svg
+        class="w-8 h-8"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        ><path
+          fill="white"
+          d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+        /></svg
       >
-        <svg
-          class="w-8 h-8"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          ><path
-            fill="white"
-            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
-          /></svg
-        >
-      </label>
+    </label>
 
-      <div class="flex flex-col w-full">
-        <h2 class="text-white font-medium text-lg text-center m-auto mb-5 mt-3">
-          Price Alerts
-        </h2>
+    <div class="flex flex-col w-full">
+      <h2 class="text-white font-semibold text-lg text-start mb-5">
+        Create Price Alert on {ticker}
+      </h2>
 
-        <div class="flex justify-between items-center">
-          <body class="w-11/12 m-auto">
-            <div
-              class="mt-8 text-center flex flex-col justify-center items-center mb-14"
-            >
-              <div class="text-white font-medium text-5xl">
-                ${displayPrice}
-              </div>
-              <div class="text-sm text-white text-opacity-[0.5] mt-2">
-                Current Price: ${currentPrice}
-              </div>
-            </div>
-
-            <div
-              class="positive-negative-slider"
-              style="--range: {Math.abs(
-                values[0] / 2,
-              )}%; {origin}; --range-color: {color};"
-            >
-              <RangeSlider
-                id="large"
-                on:change={() =>
-                  (displayPrice = (
-                    currentPrice *
-                    (1 + values?.at(0) / 100)
-                  )?.toFixed(2))}
-                suffix="%"
-                min={-100}
-                max={100}
-                all={false}
-                first={false}
-                last={false}
-                rest={false}
-                hoverable={false}
-                bind:values
-              />
-            </div>
-            {#if values?.at(0) !== 0}
-              <div class="text-white text-center m-auto text-sm">
-                Triggers once when price moves {values?.at(0) > 0
-                  ? "above"
-                  : "below"}
-                {#if values?.at(0) > 0}
-                  <svg
-                    class="inline-block w-5 h-5 -mr-1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    ><g id="evaArrowUpFill0"
-                      ><g id="evaArrowUpFill1"
-                        ><path
-                          id="evaArrowUpFill2"
-                          fill="#00FC50"
-                          d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                        /></g
-                      ></g
-                    ></svg
-                  >
-                  <span class="text-[#00FC50] font-medium"
-                    >+{values?.at(0)?.toFixed(2)}%</span
-                  >
-                {:else if values?.at(0) < 0}
-                  <svg
-                    class="inline-block w-5 h-5 -mr-1 rotate-180"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    ><g id="evaArrowUpFill0"
-                      ><g id="evaArrowUpFill1"
-                        ><path
-                          id="evaArrowUpFill2"
-                          fill="#FF2F1F"
-                          d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"
-                        /></g
-                      ></g
-                    ></svg
-                  >
-                  <span class="inline-block text-[#FF2F1F] font-medium"
-                    >{values?.at(0)?.toFixed(2)}%
-                  </span>
-                {/if}
-              </div>
-            {:else}
-              <div
-                class="text-white text-opacity-60 m-auto text-center text-sm"
-              >
-                Set a trigger by moving the slider.
-              </div>
-            {/if}
-          </body>
-        </div>
-
-        <div class="w-full pt-8 m-auto flex justify-center items-center">
-          <button
-            on:click={handleCreateAlert}
-            class="m-auto cursor-pointer px-7 py-2 rounded-full transition ease-out {values?.at(
-              0,
-            ) !== 0
-              ? 'bg-[#0DDE00]'
-              : 'bg-gray-600'} text-center text-black font-medium"
-          >
-            Create
-          </button>
-        </div>
-      </div>
-
-      <!--End Trade Modal-->
-    </div>
-  </dialog>
-{:else}
-  <!--Start Mobile Price Alert-->
-  <div class="drawer drawer-end overflow-hidden w-screen z-40">
-    <input id="priceAlertModal" type="checkbox" class="drawer-toggle" />
-    <div class="drawer-side overflow-y-scroll overflow-hidden">
       <div
-        class="bg-[#000] min-h-screen px-5 w-screen pb-20 overflow-y-scroll overflow-hidden"
+        class="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-5 font-semibold text-white"
       >
-        <!--Start Header-->
-        <div
-          class="bg-[#000] w-full p-1 flex flex-col items-center pb-5 h-auto"
+        <label class="text-sm w-[20%] mb-1 sm:mb-0">Symbol</label>
+        <label
+          class="rounded-md bg-[#2A2E39] w-full sm:w-[80%] py-2 px-2 text-sm border border-gray-600"
         >
-          <label for="priceAlertModal" class="absolute left-6 top-6">
-            <svg
-              class="w-6 h-6 inline-block mb-0.5"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              ><path
-                fill="#fff"
-                d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
-              /></svg
-            >
-          </label>
-          <h2
-            class="text-center m-auto text-[1.1rem] font-medium text-white mt-5"
+          <img
+            style="clip-path: circle(50%);"
+            class="w-4 h-4 inline-block -mt-1 mr-1"
+            src={`https://financialmodelingprep.com/image-stock/${ticker}.png`}
+            loading="lazy"
+          />
+
+          {ticker}, Regular trading hours
+        </label>
+      </div>
+
+      <div class="flex flex-col gap-4 mt-5 font-semibold text-white">
+        <!-- Condition Label -->
+        <div class="flex flex-col sm:flex-row items-start sm:items-center">
+          <label class="text-sm w-[20%] mb-1 sm:mb-0">Condition</label>
+          <input
+            type="text"
+            value="Price"
+            class="w-full sm:w-[80%] bg-[#2A2E39] border border-gray-600 text-sm rounded-md py-2 px-3 text-white"
+            readonly
+          />
+        </div>
+
+        <!-- Crossing Dropdown -->
+        <div class="flex flex-col sm:flex-row items-start sm:items-center">
+          <label class="text-sm w-[20%] mb-1 sm:mb-0">Crossing</label>
+          <select
+            on:change={changeStatement}
+            class="w-full sm:w-[80%] bg-[#2A2E39] border border-gray-600 text-sm rounded-md py-2 px-3 text-white"
           >
-            Price Alert
-          </h2>
-        </div>
-        <!--End Header-->
-
-        <div class="flex justify-between items-center">
-          <body class="w-11/12 m-auto">
-            <div
-              class="mt-8 text-center flex flex-col justify-center items-center mb-14"
-            >
-              <div class="text-white font-medium text-5xl">
-                ${displayPrice}
-              </div>
-              <div class="text-sm text-white text-opacity-[0.5] mt-2">
-                Current Price: ${currentPrice}
-              </div>
-            </div>
-            <div class="text-center font-medium flex justify-center">
-              {#if (displayPrice / currentPrice - 1) * 100 > 100}
-                <span class="text-[#00FC50]"
-                  >{((displayPrice / currentPrice - 1) * 100)?.toFixed(
-                    2,
-                  )}%</span
-                >
-              {:else if values?.at(0) > 0}
-                <span class="text-[#00FC50]">{values?.at(0)?.toFixed(2)}%</span>
-              {:else if values?.at(0) < 0}
-                <span class="inline-block text-[#FF2F1F]"
-                  >{values?.at(0)?.toFixed(2)}%
-                </span>
-              {:else}
-                <span class="inline-block text-white text-opacity-[0.6]"
-                  >0%</span
-                >
-              {/if}
-            </div>
-
-            <div
-              class="positive-negative-slider"
-              style="--range: {Math.abs(
-                values[0] / 2,
-              )}%; {origin}; --range-color: {color};"
-            >
-              <RangeSlider
-                id="large"
-                on:change={() =>
-                  (displayPrice = (
-                    currentPrice *
-                    (1 + values?.at(0) / 100)
-                  )?.toFixed(2))}
-                suffix="%"
-                min={-100}
-                max={100}
-                all={false}
-                first={false}
-                last={false}
-                rest={false}
-                hoverable={false}
-                bind:values
-              />
-            </div>
-
-            <div
-              class="{values?.at(0) !== 0
-                ? 'invisible'
-                : ''} text-white text-opacity-60 m-auto text-center text-sm"
-            >
-              Set a trigger by moving the slider.
-            </div>
-          </body>
+            <option value="above" selected>Above</option>
+            <option value="below">Below</option>
+          </select>
         </div>
 
-        <div class="w-full pt-4 flex justify-end items-center ml-auto pr-8">
-          <button
-            on:click={handleCreateAlert}
-            class="ml-auto cursor-pointer px-5 py-2 rounded-full transition ease-out {values?.at(
-              0,
-            ) !== 0
-              ? 'bg-[#0DDE00]'
-              : 'bg-gray-600'} text-center text-black font-medium"
-          >
-            Create
-          </button>
-        </div>
+        <!-- Value Input -->
+        <div class="flex flex-col sm:flex-row items-start sm:items-center">
+          <label class="text-sm w-[20%] mb-1 sm:mb-0">Value</label>
 
-        <div
-          class="flex flex-wrap pl-5 rounded-xl bg-[#000] max-w-sm mx-auto mt-5"
-        >
-          {#each Array.from({ length: 9 }, (_, i) => i + 1) as number}
-            <div class="w-1/3">
-              <button
-                id={"numPad-" + number}
-                on:click={() => numPadInput(number)}
-                class="transition ease-out w-20 h-20 text-2xl text-white font-bold rounded-full"
-                >{number}</button
-              >
-            </div>
-          {/each}
-          <div class="w-1/3">
-            <button
-              id="numPad-dot"
-              on:click={() => numPadInput("dot")}
-              class="transition ease-out w-20 h-20 text-2xl text-white font-bold rounded-full"
-              >.</button
-            >
-          </div>
-          <div class="w-1/3">
-            <button
-              id="numPad-0"
-              on:click={() => numPadInput(0)}
-              class="transition ease-out w-20 h-20 text-2xl text-white font-bold rounded-full"
-              >0</button
-            >
-          </div>
-          <div class="w-1/3">
-            <button
-              id="numPad-remove"
-              on:click={() => numPadInput("remove")}
-              class="transition ease-out w-20 h-20 text-2xl text-white font-bold rounded-full"
-            >
-              <svg
-                class="w-6 h-6 inline-block"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                ><path
-                  fill="gray"
-                  d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
-                /></svg
-              >
-            </button>
-          </div>
+          <input
+            type="number"
+            bind:value={targetPrice}
+            step="0.1"
+            class="w-full sm:w-[80%] bg-[#2A2E39] border border-gray-600 text-sm rounded-md py-2 px-3 text-white"
+          />
         </div>
       </div>
+
+      {#if !isNaN(targetPrice) && targetPrice !== undefined && targetPrice !== null}
+        <div class="flex flex-col gap-2 mt-5 text-white">
+          <label class="text-sm sm:text-[1rem] font-semibold"
+            >Quick Summary:</label
+          >
+          <p class="text-sm sm:text-[1rem]">
+            Your price alert will notify you when the stock price is {condition}
+            {targetPrice?.toFixed(2)}.
+          </p>
+        </div>
+      {/if}
+
+      <!-- Action Buttons -->
+      <div class="flex justify-end gap-4 mt-6 absolute bottom-5 right-5">
+        <label
+          for="priceAlertModal"
+          class="cursor-pointer border border-gray-600 text-white py-2 px-4 rounded-md text-sm"
+        >
+          Cancel
+        </label>
+        <button
+          on:click={handleCreateAlert}
+          class="bg-white text-black py-2 px-4 rounded-md text-sm"
+        >
+          Save
+        </button>
+      </div>
     </div>
+
+    <!--End Trade Modal-->
   </div>
-  <!--End Mobile Price Alert-->
-{/if}
-
-<style>
-  #large {
-    font-size: 1em;
-    margin-inline: 0;
-    --range-handle-focus: gray;
-  }
-  #large .rangeFloat {
-    font-size: 1.2em;
-  }
-
-  #x {
-    margin-inline: 0;
-  }
-
-  .positive-negative-slider {
-    background: white;
-    position: relative;
-    --range-slider: transparent;
-    margin-inline: 1em;
-    border-radius: 10px;
-  }
-  .positive-negative-slider::after {
-    content: "";
-    position: absolute;
-    left: var(--left);
-    right: var(--right);
-    top: 0;
-    bottom: 0;
-    width: var(--range, 0);
-    background-color: var(--range-color);
-    border-radius: inherit;
-  }
-</style>
+</dialog>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 937aee5c..a0c4a7c4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -620,7 +620,7 @@
                               >Reddit Tracker</a
                             >
                           </Button>
-
+                          <!--
                           <Button
                             builders={[builder]}
                             type="submit"
@@ -632,6 +632,7 @@
                               >Lobbying Tracker</a
                             >
                           </Button>
+                          -->
                           <Button
                             builders={[builder]}
                             type="submit"
@@ -1084,12 +1085,13 @@
                             class="text-[1rem] text-white ml-4 mt-4"
                             >Reddit Tracker</a
                           >
-
+                          <!--
                           <a
                             href="/corporate-lobbying-tracker"
                             class="text-[1rem] text-white ml-4 mt-4"
                             >Lobbying Tracker</a
                           >
+                            -->
                           <a
                             href="/sentiment-tracker"
                             class="text-[1rem] text-white ml-4 mt-4"
diff --git a/src/routes/corporate-lobbying-tracker/+page.svelte b/src/routes/corporate-lobbying-tracker/+page.svelte
index 8498c758..2ed74261 100644
--- a/src/routes/corporate-lobbying-tracker/+page.svelte
+++ b/src/routes/corporate-lobbying-tracker/+page.svelte
@@ -155,7 +155,7 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
diff --git a/src/routes/crypto/[tickerID]/+layout.svelte b/src/routes/crypto/[tickerID]/+layout.svelte
index d556d237..fe05cd97 100644
--- a/src/routes/crypto/[tickerID]/+layout.svelte
+++ b/src/routes/crypto/[tickerID]/+layout.svelte
@@ -19,6 +19,8 @@
   import { page } from "$app/stores";
   import toast from "svelte-french-toast";
   import CryptoProfileCard from "$lib/components/CryptoProfileCard.svelte";
+  import PriceAlert from "$lib/components/PriceAlert.svelte";
+
   export let data;
 
   //$assetType = 'stock';
@@ -209,18 +211,10 @@
   }
 
   let LoginPopup;
-  let PriceAlert;
 
   onMount(async () => {
     if (!data?.user) {
       LoginPopup = (await import("$lib/components/LoginPopup.svelte")).default;
-    } else {
-      /*
-      AddPortfolio = (await import('$lib/components/AddPortfolio.svelte')).default;
-      BuyTrade = (await import('$lib/components/BuyTrade.svelte')).default;
-      SellTrade = (await import('$lib/components/SellTrade.svelte')).default;
-      */
-      PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
     }
 
     //const startTime = currentDateTime.set({ hour: 15, minute: 30 });
@@ -935,107 +929,102 @@
 {/if}
 -->
 
-{#if PriceAlert}
-  <PriceAlert {data} />
-{/if}
+<PriceAlert {data} ticker={$cryptoTicker} />
 
 <!--Start Type of Trade-->
 
 <input type="checkbox" id="typeOfTrade" class="modal-toggle" />
 
 <dialog
-  id="typeOfTrade"
-  class="modal modal-bottom sm:modal-middle overflow-hidden"
+  id="addWatchListModal"
+  class="modal modal-bottom sm:modal-middle bg-[#000] bg-opacity-[0.5]"
 >
   <label
-    for="typeOfTrade"
-    class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.08]"
+    id="addWatchListModal"
+    for="addWatchListModal"
+    class="cursor-pointer modal-backdrop"
   ></label>
 
-  <div class="modal-box w-full bg-[#000] border border-slate-600 pb-10">
-    <div class="flex flex-col">
-      <div class="text-white text-md flex flex-col flex-shrink-0">
-        <div class="rounded-full w-10 h-10 relative bg-gray-900 mb-2">
-          <img
-            class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
-            src={`https://financialmodelingprep.com/image-stock/${$cryptoTicker}.png`}
-          />
-        </div>
-        <span class="mb-1">
-          {$displayCompanyName?.length > 30
-            ? $displayCompanyName?.slice(0, 30) + "..."
-            : $displayCompanyName}
-        </span>
-        <div class="flex flex-row items-center mb-10">
-          <span class="mb-1 text-sm font-medium">
-            Current Price: ${$currentPortfolioPrice}
-          </span>
-          <span class="text-blue-400 text-sm font-medium ml-auto">
-            Holding Shares: {holdingShares}
-          </span>
-        </div>
-      </div>
-    </div>
+  <div
+    class="modal-box rounded-md w-full bg-[#1E222D] sm:border sm:border-gray-600"
+  >
+    <label
+      for="addWatchListModal"
+      class="cursor-pointer bg-[#1E222D] absolute right-5 top-2 text-[1.8rem] text-white"
+    >
+      ✕
+    </label>
 
     <div class="text-white">
-      <h3 class="font-bold text-2xl mb-5">Type of Trade</h3>
+      <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
 
-      <ul class="menu dropdown-content text-white bg-[#000] rounded -ml-6">
-        <li class="mb-3">
+      <div class="flex flex-col items-center w-full max-w-3xl bg-[#1E222D]">
+        {#each userWatchList as item}
           <label
-            for="typeOfTrade"
-            on:click={() => handleTypeOfTrade("buy")}
-            class="cursor-pointer flex flex-row justify-start items-center"
+            on:click|stopPropagation={() => toggleUserWatchlist(item?.id)}
+            class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
           >
-            <div class="rounded-full w-10 h-10 relative bg-gray-800">
-              <svg
-                class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
-                viewBox="0 0 16 16"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                fill="green"
-                ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
-                  id="SVGRepo_tracerCarrier"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                ></g><g id="SVGRepo_iconCarrier">
-                  <rect width="16" height="16" id="icon-bound" fill="none"
-                  ></rect>
-                  <path
-                    d="M0,11h11.2l-2.6,2.6L10,15l6-6H0V11z M4.8,5l2.6-2.6L6,1L0,7h16V5H4.8z"
-                  ></path>
-                </g></svg
-              >
-            </div>
-            <span class="ml-1 text-white text-lg font-medium"
-              >Buy {$cryptoTicker} Shares</span
+            <div
+              class="flex flex-row items-center w-full bg-[#2A2E39] p-3 rounded-md {item?.ticker?.includes(
+                $cryptoTicker,
+              )
+                ? 'border border-gray-400'
+                : ''}"
             >
-          </label>
-        </li>
-        <li class="mb-3">
-          <label
-            for="typeOfTrade"
-            on:click={() => handleTypeOfTrade("sell")}
-            class="cursor-pointer flex flex-row justify-start items-center"
-          >
-            <div class="rounded-full w-10 h-10 relative bg-gray-800">
-              <svg
-                class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                ><path
-                  fill="red"
-                  d="M14.25 21.4q-.575.575-1.425.575T11.4 21.4l-8.8-8.8q-.275-.275-.438-.65T2 11.15V4q0-.825.588-1.413T4 2h7.15q.425 0 .8.163t.65.437l8.8 8.825q.575.575.575 1.413T21.4 14.25l-7.15 7.15ZM6.5 8q.625 0 1.063-.438T8 6.5q0-.625-.438-1.063T6.5 5q-.625 0-1.063.438T5 6.5q0 .625.438 1.063T6.5 8Z"
-                /></svg
+              <div class="flex flex-col items-center w-full">
+                <span class="ml-1 text-white font-medium mr-auto">
+                  {item?.title}
+                </span>
+                <span class="ml-1 text-white text-sm font-medium mr-auto">
+                  {item?.ticker?.length}
+                  {item?.ticker?.length !== 1 ? "Companies" : "Company"}
+                </span>
+              </div>
+
+              <div
+                class="rounded-full w-8 h-8 relative border border-[#737373]"
               >
+                {#if item?.ticker?.includes($cryptoTicker)}
+                  <svg
+                    class="w-full h-full rounded-full"
+                    viewBox="0 0 48 48"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    fill="#09090B000"
+                    ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                      id="SVGRepo_tracerCarrier"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    ></g><g id="SVGRepo_iconCarrier">
+                      <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+                      <title>ic_fluent_checkmark_circle_48_filled</title>
+                      <desc>Created with Sketch.</desc>
+                      <g
+                        stroke="none"
+                        stroke-width="1"
+                        fill="none"
+                        fill-rule="evenodd"
+                      >
+                        <g
+                          id="ic_fluent_checkmark_circle_48_filled"
+                          fill="#fff"
+                          fill-rule="nonzero"
+                        >
+                          <path
+                            d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z"
+                          >
+                          </path>
+                        </g>
+                      </g>
+                    </g></svg
+                  >
+                {/if}
+              </div>
             </div>
-            <span class="ml-1 text-white text-lg font-medium">
-              Sell {$cryptoTicker} Shares
-            </span>
           </label>
-        </li>
-      </ul>
+        {/each}
+      </div>
     </div>
   </div>
 </dialog>
diff --git a/src/routes/etf/[tickerID]/+layout.svelte b/src/routes/etf/[tickerID]/+layout.svelte
index dc5e3358..b93e012c 100644
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@@ -21,6 +21,7 @@
   import { page } from "$app/stores";
   import toast from "svelte-french-toast";
   import Markethour from "$lib/components/Markethour.svelte";
+  import PriceAlert from "$lib/components/PriceAlert.svelte";
 
   export let data;
   $: $realtimePrice = data?.getStockQuote?.price?.toFixed(2);
@@ -194,16 +195,10 @@
   }
 
   let LoginPopup;
-  let PriceAlert;
 
   onMount(async () => {
     if (!data?.user) {
       LoginPopup = (await import("$lib/components/LoginPopup.svelte")).default;
-    } else {
-      //AddPortfolio = (await import('$lib/components/AddPortfolio.svelte')).default;
-      //BuyTrade = (await import('$lib/components/BuyTrade.svelte')).default;
-      //SellTrade = (await import('$lib/components/SellTrade.svelte')).default;
-      PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
     }
 
     if ($isOpen) {
@@ -747,10 +742,7 @@
 <!--End Login Modal-->
 
 <!--Start SellTrade Modal-->
-{#if PriceAlert}
-  <PriceAlert {data} />
-{/if}
-
+<PriceAlert {data} ticker={$etfTicker} />
 <!--Start Add Watchlist Modal-->
 <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
 
@@ -764,10 +756,12 @@
     class="cursor-pointer modal-backdrop"
   ></label>
 
-  <div class="modal-box w-full bg-[#191919] sm:border sm:border-gray-800">
+  <div
+    class="modal-box rounded-md w-full bg-[#1E222D] sm:border sm:border-gray-600"
+  >
     <label
       for="addWatchListModal"
-      class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"
+      class="cursor-pointer bg-[#1E222D] absolute right-5 top-2 text-[1.8rem] text-white"
     >
       ✕
     </label>
@@ -775,26 +769,24 @@
     <div class="text-white">
       <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
 
-      <div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
+      <div class="flex flex-col items-center w-full max-w-3xl bg-[#1E222D]">
         {#each userWatchList as item}
           <label
             on:click|stopPropagation={() => toggleUserWatchlist(item?.id)}
             class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
           >
             <div
-              class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-md {item?.ticker?.includes(
+              class="flex flex-row items-center w-full bg-[#2A2E39] p-3 rounded-md {item?.ticker?.includes(
                 $etfTicker,
               )
-                ? 'ring-2 ring-[#04E000]'
+                ? 'border border-gray-400'
                 : ''}"
             >
               <div class="flex flex-col items-center w-full">
                 <span class="ml-1 text-white font-medium mr-auto">
                   {item?.title}
                 </span>
-                <span
-                  class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto"
-                >
+                <span class="ml-1 text-white text-sm font-medium mr-auto">
                   {item?.ticker?.length}
                   {item?.ticker?.length !== 1 ? "Companies" : "Company"}
                 </span>
@@ -827,7 +819,7 @@
                       >
                         <g
                           id="ic_fluent_checkmark_circle_48_filled"
-                          fill="#04E000"
+                          fill="#fff"
                           fill-rule="nonzero"
                         >
                           <path
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 0cfff9d1..1a1f2a54 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -24,6 +24,7 @@
   import toast from "svelte-french-toast";
   import { convertTimestamp } from "$lib/utils";
   import AIScore from "$lib/components/AIScore.svelte";
+  import PriceAlert from "$lib/components/PriceAlert.svelte";
 
   export let data;
   let prePostData = data?.getPrePostQuote || {};
@@ -203,16 +204,10 @@
   }
 
   let LoginPopup;
-  let PriceAlert;
 
   onMount(async () => {
     if (!data?.user) {
       LoginPopup = (await import("$lib/components/LoginPopup.svelte")).default;
-    } else {
-      //AddPortfolio = (await import('$lib/components/AddPortfolio.svelte')).default;
-      //BuyTrade = (await import('$lib/components/BuyTrade.svelte')).default;
-      //SellTrade = (await import('$lib/components/SellTrade.svelte')).default;
-      PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
     }
 
     if ($isOpen) {
@@ -978,9 +973,7 @@
 <!--End Login Modal-->
 
 <!--Start SellTrade Modal-->
-{#if PriceAlert}
-  <PriceAlert {data} />
-{/if}
+<PriceAlert {data} ticker={$stockTicker} />
 
 <!--Start Add Watchlist Modal-->
 <input type="checkbox" id="addWatchListModal" class="modal-toggle" />
@@ -995,10 +988,12 @@
     class="cursor-pointer modal-backdrop"
   ></label>
 
-  <div class="modal-box w-full bg-[#191919] sm:border sm:border-gray-800">
+  <div
+    class="modal-box rounded-md w-full bg-[#1E222D] sm:border sm:border-gray-600"
+  >
     <label
       for="addWatchListModal"
-      class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"
+      class="cursor-pointer bg-[#1E222D] absolute right-5 top-2 text-[1.8rem] text-white"
     >
       ✕
     </label>
@@ -1006,26 +1001,24 @@
     <div class="text-white">
       <h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
 
-      <div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
+      <div class="flex flex-col items-center w-full max-w-3xl bg-[#1E222D]">
         {#each userWatchList as item}
           <label
             on:click|stopPropagation={() => toggleUserWatchlist(item?.id)}
             class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
           >
             <div
-              class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-md {item?.ticker?.includes(
+              class="flex flex-row items-center w-full bg-[#2A2E39] p-3 rounded-md {item?.ticker?.includes(
                 $stockTicker,
               )
-                ? 'ring-2 ring-[#04E000]'
+                ? 'border border-gray-400'
                 : ''}"
             >
               <div class="flex flex-col items-center w-full">
                 <span class="ml-1 text-white font-medium mr-auto">
                   {item?.title}
                 </span>
-                <span
-                  class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto"
-                >
+                <span class="ml-1 text-white text-sm font-medium mr-auto">
                   {item?.ticker?.length}
                   {item?.ticker?.length !== 1 ? "Companies" : "Company"}
                 </span>
@@ -1058,7 +1051,7 @@
                       >
                         <g
                           id="ic_fluent_checkmark_circle_48_filled"
-                          fill="#04E000"
+                          fill="#fff"
                           fill-rule="nonzero"
                         >
                           <path