From e1310f7059bcacc74e41d492c1b839d6704f5775 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 15 Jul 2024 10:03:34 +0200
Subject: [PATCH] ui fixes

---
 src/lib/components/Correlation.svelte         |  2 +-
 src/lib/components/CreateNewPost.svelte       |  2 +-
 src/lib/components/FundamentalAnalysis.svelte |  8 ++--
 src/lib/components/PostSection.svelte         |  8 ++--
 src/lib/components/PriceAnalysis.svelte       |  2 +-
 src/lib/components/TrendAnalysis.svelte       |  8 ++--
 src/lib/components/shadcn/input/input.svelte  |  2 +-
 src/routes/+layout.svelte                     | 43 +++++++++++++------
 src/routes/community/+page.svelte             | 24 +++++------
 src/routes/dark-pool-flow/+page.svelte        |  4 +-
 src/routes/home/+page.svelte                  |  4 +-
 src/routes/options-flow/+page.svelte          |  2 +-
 12 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/src/lib/components/Correlation.svelte b/src/lib/components/Correlation.svelte
index 279cbc06..f6d58258 100644
--- a/src/lib/components/Correlation.svelte
+++ b/src/lib/components/Correlation.svelte
@@ -74,7 +74,7 @@
         {#each (showFullStats ? correlationList : correlationList?.slice(0, 3)) as item, index}
        
 
-      <div class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 sm:p-3 mb-5  flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && correlationList?.length > 2 ? 'opacity-[0.3]' : '' }">
+      <div class="shadow-lg bg-[#27272A] w-full rounded-lg p-4 sm:p-3 mb-5  flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && correlationList?.length > 2 ? 'opacity-[0.3]' : '' }">
 
         <div on:click={() => stockSelector(item?.symbol)} class="flex-shrink-0 mr-3 rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-[#09090B]">
             <img
diff --git a/src/lib/components/CreateNewPost.svelte b/src/lib/components/CreateNewPost.svelte
index b3a00bdd..33ded1a1 100644
--- a/src/lib/components/CreateNewPost.svelte
+++ b/src/lib/components/CreateNewPost.svelte
@@ -9,7 +9,7 @@
   <!-- List container -->                  
   <div class="flex flex-col">
       <!-- Item -->
-      <div class="sm:border border-gray-700 sm:hover:border-gray-600 rounded-none sm:rounded-md bg-[#09090B] rounded-[4px] sm:rounded-[8px]">
+      <div class="sm:border border-gray-700 sm:hover:border-gray-600 rounded-none sm:rounded-md bg-[#27272A] rounded-[4px] sm:rounded-[8px]">
         <div class="flex h-14 sm:h-16 justify-start items-center">
           <div class="ml-2 sm:ml-3 avatar relative">
             <div class="w-8 sm:w-10 rounded-full">
diff --git a/src/lib/components/FundamentalAnalysis.svelte b/src/lib/components/FundamentalAnalysis.svelte
index 7d8b4569..7dc85cd2 100644
--- a/src/lib/components/FundamentalAnalysis.svelte
+++ b/src/lib/components/FundamentalAnalysis.svelte
@@ -115,11 +115,11 @@ $: {
             <div class="w-full mt-5 mb-5 flex justify-start items-center">
                 <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
                   <!--Start Flow Sentiment-->  
-                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-2xl h-20">
+                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-2xl h-20">
                       <div class="flex flex-col items-start">
                           <span class="font-medium text-gray-200 text-sm">Quarter Sentiment</span>
                           {#if !deactivateContent}
-                          <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span>
+                          <span class="text-start text-[1rem] sm:text-lg font-semibold {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span>
                           {:else}
                           <a href="/pricing" class="text-blue-400 mt-1 hover:text-white font-medium text-sm flex justify-center items-center">
                             Unlock with Pro
@@ -131,7 +131,7 @@ $: {
                   
                   <!--End Flow Sentiment-->
                    <!--Start Put/Call-->  
-                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-2xl h-20">
+                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-2xl h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm ">Accuracy</span>
                         <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -159,7 +159,7 @@ $: {
                    <!--End Put/Call-->
 
                    <!--Start Precision-->  
-                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-2xl h-20">
+                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-2xl h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm ">Precision</span>
                         <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
diff --git a/src/lib/components/PostSection.svelte b/src/lib/components/PostSection.svelte
index d955a440..2fede892 100644
--- a/src/lib/components/PostSection.svelte
+++ b/src/lib/components/PostSection.svelte
@@ -288,7 +288,7 @@ $: {
         {/if}
       </form>
       <!--End Upvote-->
-      <label class="text-center py-4 w-14 rounded-lg bg-[#09090B] border border-gray-700 text-[1rem] text-bold text-white">
+      <label class="text-center py-4 w-14 rounded-lg bg-[#27272A] border border-gray-700 text-[1rem] text-bold text-white">
           {upvoteCounter[posts?.id] - downvoteCounter[posts?.id] }
       </label>
       <!--Start Downvote-->
@@ -314,7 +314,7 @@ $: {
   
     </div>
    
-  <div class="w-full bg-[#09090B] border-t border-b sm:border sm:hover:border-slate-600 border-gray-700 rounded-none sm:rounded-lg">
+  <div class="w-full bg-[#27272A] border-t border-b sm:border sm:hover:border-slate-600 border-gray-700 rounded-none sm:rounded-lg">
       <!-- List container -->
       <div class="flex flex-col">
           <!-- Item -->
@@ -660,7 +660,7 @@ $: {
   
     <label for={deletePostId}  class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
     
-    <div class="modal-box bg-[#09090B] p-10" >
+    <div class="modal-box bg-[#27272A] p-10" >
   
   
           <h3 class="font-bold text-md sm:text-lg sm:mb-10">
@@ -695,7 +695,7 @@ $: {
         left: 0;
         right: 0;
         height: 50px; /* Adjust as needed for the gradient effect */
-        background: linear-gradient(0deg, rgb(32, 32, 32, 1), rgb(32, 32, 32, 0)); /* Smooth gradient transition */
+        background: linear-gradient(0deg, rgb(39, 39, 42, 1), rgb(39, 39, 42, 0)); /* Smooth gradient transition */
         pointer-events: none; /* Ensure it doesn't interfere with text interaction */
       }
     </style>
\ No newline at end of file
diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
index dd3b72a2..f74df53d 100644
--- a/src/lib/components/PriceAnalysis.svelte
+++ b/src/lib/components/PriceAnalysis.svelte
@@ -228,7 +228,7 @@ $: {
                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
                       <div class="flex flex-col items-start">
                           <span class="font-medium text-gray-200 text-sm">Price Sentiment</span>
-                          <span class="text-start text-[1rem] font-medium {priceSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{priceSentiment}</span>
+                          <span class="text-start text-[1rem] sm:text-lg font-semibold {priceSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{priceSentiment}</span>
                       </div>
                   </div>
                   
diff --git a/src/lib/components/TrendAnalysis.svelte b/src/lib/components/TrendAnalysis.svelte
index 036e194d..69369a64 100644
--- a/src/lib/components/TrendAnalysis.svelte
+++ b/src/lib/components/TrendAnalysis.svelte
@@ -128,16 +128,16 @@ $: {
             <div class="w-full mt-5 mb-5 flex justify-start items-center">
                 <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
                   <!--Start Flow Sentiment-->  
-                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-lg h-20">
+                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
                       <div class="flex flex-col items-start">
                           <span class="font-medium text-gray-200 text-sm">Trend Sentiment</span>
-                          <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span>
+                          <span class="text-start text-[1rem] sm:text-lg font-semibold {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span>
                       </div>
                   </div>
                   
                   <!--End Flow Sentiment-->
                    <!--Start Put/Call-->  
-                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-lg h-20">
+                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm ">Accuracy</span>
                         <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -165,7 +165,7 @@ $: {
                    <!--End Put/Call-->
 
                    <!--Start Precision-->  
-                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#09090B] shadow-lg rounded-lg h-20">
+                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] shadow-lg rounded-lg h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm ">Precision</span>
                         <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
diff --git a/src/lib/components/shadcn/input/input.svelte b/src/lib/components/shadcn/input/input.svelte
index 16c7b095..df49d859 100644
--- a/src/lib/components/shadcn/input/input.svelte
+++ b/src/lib/components/shadcn/input/input.svelte
@@ -17,7 +17,7 @@
 
 <input
 	class={cn(
-		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-transparent focus:ring-0 disabled:opacity-50",
 		className
 	)}
 	bind:value
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 24eeb75e..818094b6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -395,13 +395,13 @@ $: {
 
 
 <div class="flex min-h-screen w-full flex-col bg-[#09090B]">
-  <aside class="fixed inset-y-0 left-0 z-50 hidden w-56 flex-col sm:border-r sm:border-gray-800 bg-[#141417] sm:flex">
-    <nav class="flex flex-col items-center mr-auto gap-y-4 sm:py-5 w-full">
+  <aside class="fixed inset-y-0 left-0 z-50 hidden w-56 flex-col 2xl:border-r 2xl:border-gray-800 bg-[#141417] 2xl:flex">
+    <nav class="flex flex-col items-center mr-auto gap-y-4 2xl:py-5 w-full">
       <a
         href="/"
         class="mr-12 mb-5 group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
       >
-      <img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
+      <img class="avatar w-9 2xl:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
         <span class="text-white text-xl">Stocknear</span>
       </a>
       
@@ -580,12 +580,12 @@ $: {
     </nav>
    
   </aside>
-  <div class="flex flex-col sm:pl-14">
+  <div class="flex flex-col">
     <header class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#141417] flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
       <Sheet.Root>
         <Sheet.Trigger asChild let:builder>
-          <Button builders={[builder]} size="icon" class="sm:hidden bg-[#141417] border-none">
-            <Menu class="h-5.5 w-5.5" />
+          <Button builders={[builder]} size="icon" class="sm:xl bg-[#141417] text-white sm:hover:bg-white sm:hover:text-black border-none">
+            <Menu class="h-5.5 w-5.5 sm:w-7 sm:h-7" />
             <span class="sr-only">Toggle Menu</span>
           </Button>
         </Sheet.Trigger>
@@ -600,8 +600,8 @@ $: {
           </a>
 
           <Sheet.Close asChild let:builder>
-            <Button builders={[builder]} type="submit" class="bg-[#141417] -ml-4 mr-auto">
-              <a href="/" class="flex flex-row items-center mr-auto mt-5">
+            <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417] -ml-4 mr-auto">
+              <a href="/" class="flex flex-row items-center mr-auto mt-5 ">
                 <div class="flex h-9 w-9 items-center justify-center rounded-lg text-white transition-colors hover:text-white md:h-8 md:w-8">
                   <Home class="h-5.5 w-5.5" />  
                 </div>
@@ -683,14 +683,21 @@ $: {
           </nav>
         </Sheet.Content>
       </Sheet.Root>
-     
-      <div class="relative ml-auto flex-1 md:grow-0">
+      
+      <a href="/" class="-ml-2 flex w-9 flex-shrink-0">
+        <img class="avatar w-9 2xl:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
+        <span class="text-white hidden sm:block font-semibold ml-2 text-lg">Stocknear</span>
+      </a>
+
+      <div class="relative m-auto flex-1 md:grow-0">
+        
         <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-white" />
         <Input
           type="search"
           placeholder="Search..."
-          class="w-full rounded-lg bg-[#202327] border-none pl-8 md:w-[200px] lg:w-[336px]"
-        />
+          class="w-full rounded-lg bg-[#202327] placeholder-gray-400 border-none pl-8 md:w-[300px] lg:w-[700px] border-transparent focus:border-transparent focus:ring-0 "
+          autocomplete="off"
+          />
       </div>
       <DropdownMenu.Root >
         <DropdownMenu.Trigger asChild let:builder>
@@ -743,9 +750,21 @@ $: {
     >
       <slot />
 
+
+      {#if !hideFooter}
+      <Footer/>
+      {/if}
     </main>
   </div>
 </div>
 
 
 
+<style>
+  .scroller {
+    scrollbar-width: thin;
+  }
+  
+  
+  
+  </style>
\ No newline at end of file
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index 298d3811..75e048f1 100644
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -467,15 +467,15 @@ $: {
                                   <!-- List container -->                  
                                   <div class="flex flex-col mt-4">
                                     <!-- Item -->
-                                    <div class="border-t border-b sm:border border-gray-700 sm:hover:border-gray-600 rounded-none sm:rounded-md bg-[#09090B] rounded-[4px] sm:rounded-[8px]">
+                                    <div class="border-t border-b sm:border border-gray-700 sm:hover:border-gray-600 rounded-none sm:rounded-md bg-[#27272A] rounded-[4px] sm:rounded-[8px]">
                                       <div class="flex h-14 justify-start items-center">                                           
                                         <div class="flex flex-row ml-3">
-                                          <label on:click={() => handleCategoryOfPosts('hot')} class="flex flex-row w-fit pl-3 pr-4 pt-1 pb-1 tab mr-2 font-medium transition duration-150 ease-out hover:ease-in rounded-full hover:bg-[#333333] {sortingPosts === 'hot' ? 'bg-[#333333] text-white' : 'text-gray-300'} rounded-full cursor-pointer">
+                                          <label on:click={() => handleCategoryOfPosts('hot')} class="flex flex-row w-fit pl-3 pr-4 pt-1 pb-1 tab mr-2 font-medium transition duration-150 ease-out hover:ease-in rounded-full hover:bg-[#141417] {sortingPosts === 'hot' ? 'bg-[#141417] text-white' : 'text-gray-300'} rounded-full cursor-pointer">
                                             <svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="{sortingPosts === 'hot' ? 'red' : '#737487'}" d="M17.66 11.2c-.23-.3-.51-.56-.77-.82c-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32c-2.59 2.08-3.61 5.75-2.39 8.9c.04.1.08.2.08.33c0 .22-.15.42-.35.5c-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5c.14.6.41 1.2.71 1.73c1.08 1.73 2.95 2.97 4.96 3.22c2.14.27 4.43-.12 6.07-1.6c1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6c-1.12.4-2.24-.16-2.9-.82c1.19-.28 1.9-1.16 2.11-2.05c.17-.8-.15-1.46-.28-2.23c-.12-.74-.1-1.37.17-2.06c.19.38.39.76.63 1.06c.77 1 1.98 1.44 2.24 2.8c.04.14.06.28.06.43c.03.82-.33 1.72-.93 2.27Z"/></svg>
                                             <p class="ml-1 font-bold text-sm sm:text-[1rem]">Hot</p>
                                           </label>
         
-                                          <label on:click={() => handleCategoryOfPosts('new')} class="flex flex-row w-fit ml-3 pl-3 pr-4 pt-1 pb-1 tab mr-2 font-medium transition duration-150 ease-out hover:ease-in rounded-full hover:bg-[#333333] {sortingPosts === 'new' ? 'bg-[#333333] text-white' : 'text-gray-300'} rounded-full cursor-pointer">
+                                          <label on:click={() => handleCategoryOfPosts('new')} class="flex flex-row w-fit ml-3 pl-3 pr-4 pt-1 pb-1 tab mr-2 font-medium transition duration-150 ease-out hover:ease-in rounded-full hover:bg-[#141417] {sortingPosts === 'new' ? 'bg-[#141417] text-white' : 'text-gray-300'} rounded-full cursor-pointer">
                                             <svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.3895 5.21125L16.7995 8.03125C16.9895 8.42125 17.4995 8.79125 17.9295 8.87125L20.4795 9.29125C22.1095 9.56125 22.4895 10.7413 21.3195 11.9213L19.3295 13.9113C18.9995 14.2413 18.8095 14.8913 18.9195 15.3613L19.4895 17.8213C19.9395 19.7613 18.8995 20.5213 17.1895 19.5013L14.7995 18.0813C14.3695 17.8213 13.6495 17.8213 13.2195 18.0813L10.8295 19.5013C9.11945 20.5113 8.07945 19.7613 8.52945 17.8213L9.09945 15.3613C9.18945 14.8813 8.99945 14.2313 8.66945 13.9013L6.67945 11.9113C5.50945 10.7413 5.88945 9.56125 7.51945 9.28125L10.0695 8.86125C10.4995 8.79125 11.0095 8.41125 11.1995 8.02125L12.6095 5.20125C13.3795 3.68125 14.6195 3.68125 15.3895 5.21125Z" fill={sortingPosts === 'new' ? '#D6B329' : '#737487'}></path> <path d="M8 5.75H2C1.59 5.75 1.25 5.41 1.25 5C1.25 4.59 1.59 4.25 2 4.25H8C8.41 4.25 8.75 4.59 8.75 5C8.75 5.41 8.41 5.75 8 5.75Z" fill={sortingPosts === 'new' ? '#D6B329' : '#737487'}></path> <path d="M5 19.75H2C1.59 19.75 1.25 19.41 1.25 19C1.25 18.59 1.59 18.25 2 18.25H5C5.41 18.25 5.75 18.59 5.75 19C5.75 19.41 5.41 19.75 5 19.75Z" fill={sortingPosts === 'new' ? '#D6B329' : '#737487'}></path> <path d="M3 12.75H2C1.59 12.75 1.25 12.41 1.25 12C1.25 11.59 1.59 11.25 2 11.25H3C3.41 11.25 3.75 11.59 3.75 12C3.75 12.41 3.41 12.75 3 12.75Z" fill={sortingPosts === 'new' ? '#D6B329' : '#737487'}></path> </g></svg>
                                             <p class="ml-1 font-bold text-sm sm:text-[1rem]">New</p>
                                           </label>
@@ -547,9 +547,9 @@ $: {
 
                                  <!--Start About Community -->
                                  <div class="space-y-3 mb-5">  
-                                  <div class="rounded-t-lg bg-[#09090B] h-auto sm:w-96">
+                                  <div class="rounded-t-lg bg-[#27272A] h-auto sm:w-96">
                                     <!--Start Header-->
-                                    <div class="bg-[#09090B] w-full p-3 rounded-t-lg">
+                                    <div class="bg-[#27272A] w-full p-3 rounded-t-lg">
                                       <span class="text-white text-xl ml-1 font-semibold">
                                         About Community
                                       </span>
@@ -610,7 +610,7 @@ $: {
                               <!--Start Discord -->
                               {#if discordData?.length !== 0}
                                 <div class="space-y-3 mb-5">  
-                                  <div class="bg-[#09090B] h-auto sm:w-96 rounded-lg">
+                                  <div class="bg-[#27272A] h-auto sm:w-96 rounded-lg">
 
                                   <!--Start Image-->
                                   <div class="flex flex-row items-center w-full p-3">
@@ -689,9 +689,9 @@ $: {
                               <!--Ticker Mentioning-->
                               <!--
                               <div class="space-y-3 mt-5 pb-3">  
-                                <div class="rounded-2xl bg-[#09090B] h-96 sm:w-96">
+                                <div class="rounded-2xl bg-[#27272A] h-96 sm:w-96">
                                   Start Header
-                                  <div class="bg-[#09090B] border-b border-slate-700 w-full p-3 rounded-t-lg ">
+                                  <div class="bg-[#27272A] border-b border-slate-700 w-full p-3 rounded-t-lg ">
                                     <span class="text-white text-xl ml-1 font-semibold">
                                       Ticker Mentions
                                     </span>
@@ -700,7 +700,7 @@ $: {
 
                                   Start Content
                                   <div class="w-full text-gray-300">
-                                    <table class="table table-xs table-zebra table-compact w-full bg-[#09090B] border-b border-[#27272A]">
+                                    <table class="table table-xs table-zebra table-compact w-full bg-[#27272A] border-b border-[#27272A]">
                                       <thead>
                                         <tr class="border-b border-slate-700">
                                           <th class="text-white font-medium text-sm border-b border-slate-800">Company</th>
@@ -710,7 +710,7 @@ $: {
                                       </thead>
                                       <tbody class="p-3">
                                         {#each tickerMentioning?.slice(0,5) as item}
-                                        <tr class="bg-[#09090B] border-b border-[#27272A] shake-ticker w-full">
+                                        <tr class="bg-[#27272A] border-b border-[#27272A] shake-ticker w-full">
                                           <td class="text-gray-200 border-b border-[#27272A]">
                                             <div class="flex flex-row">
                                               <div class="rounded-full w-8 h-8 relative bg-[#20202E] flex items-center justify-center">
@@ -756,9 +756,9 @@ $: {
 
                                <!--Community Rules-->
                                <div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">  
-                                <div class="bg-[#09090B] sm:w-96 rounded-lg">
+                                <div class="bg-[#27272A] sm:w-96 rounded-lg">
                                   <!--Start Header-->
-                                  <div class="bg-[#09090B] border-b border-slate-700 w-full pl-6 pr-6 pt-6 pb-4 rounded-t-lg">
+                                  <div class="bg-[#27272A] border-b border-slate-700 w-full pl-6 pr-6 pt-6 pb-4 rounded-t-lg">
                                     <span class="text-white text-xl ml-1 font-semibold">
                                       Community Rules
                                     </span>
diff --git a/src/routes/dark-pool-flow/+page.svelte b/src/routes/dark-pool-flow/+page.svelte
index 83d0370e..f86916fc 100644
--- a/src/routes/dark-pool-flow/+page.svelte
+++ b/src/routes/dark-pool-flow/+page.svelte
@@ -220,7 +220,7 @@ function formatTime(dateString) {
           <div class="relative flex justify-center items-center overflow-hidden w-full">
               <main class="w-full">
                
-                <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
                 
                     <!-- Start Column -->
@@ -360,7 +360,7 @@ function formatTime(dateString) {
                     <div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
                       <table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                         <thead>
-                          <tr class="bg-[#09090B] border-b border-blue-400">
+                          <tr class="bg-[#09090B]">
                             <th class="text-start bg-[#09090B] text-white text-sm font-semibold">
                               Time
                             </th>
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index b6fee599..bfbf1fa7 100644
--- a/src/routes/home/+page.svelte
+++ b/src/routes/home/+page.svelte
@@ -200,7 +200,7 @@ async function loadSearchData() {
                                   
                                   {#if (data?.user?.tier === 'Pro' && data?.user?.freeTrial === true) || (data?.user?.tier !== 'Pro' && data?.user?.freeTrial === false) }
                                   <div class="text-center mb-5 relative w-fit flex justify-center m-auto">
-                                    <a href="/pricing" class="text-white antialiased bg-[#09090B] w-full px-4 py-2 rounded-xl m-auto font-medium text-sm flex items-center">
+                                    <a href="/pricing" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-xl m-auto font-medium text-sm flex items-center">
                                       <span class="font-semibold uppercase">SAVE 50% Off Subscription – Summer Special!</span>
                                     </a>
                                     <div class="absolute top-[-1.2rem] -right-5 sm:-right-8 rotate-[7deg]">
@@ -212,7 +212,7 @@ async function loadSearchData() {
                                   {:else}
                                 
                                   <div class="text-center mb-5 relative w-fit flex justify-center m-auto">
-                                    <a href="/dark-pool-flow" class="text-white antialiased bg-[#09090B] w-full px-4 py-2 rounded-xl m-auto font-medium text-sm flex items-center">
+                                    <a href="/dark-pool-flow" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-xl m-auto font-medium text-sm flex items-center">
                                       <span class="font-semibold">Realtime Dark Pool Trades from Hedge Funds</span>
                                     </a>
                                     <div class="absolute top-[-1.2rem] -right-5 sm:-right-8 rotate-[7deg]">
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index 16949b9e..b035bb49 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -841,7 +841,7 @@ $: {
                           {formatTime(item?.time)}
                         </td>
     
-                        <th on:click|stopPropagation={() => assetSelector(item?.ticker, item?.assetType)} class="{index % 2 ? 'bg-[#09090B]' : 'bg-[#09090B]'} text-blue-400 text-start font-normal">
+                        <th on:click|stopPropagation={() => assetSelector(item?.ticker, item?.assetType)} class="{index % 2 ? 'bg-[#09090B]' : 'bg-[#27272A]'} text-blue-400 text-start font-normal">
                           {item?.ticker}
                         </th>