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

---
 src/lib/components/CountrySegmentation.svelte |  2 +-
 src/lib/components/CreateNewPost.svelte       |  2 +-
 src/lib/components/Footer.svelte              |  4 +-
 src/lib/components/MiniPlot.svelte            |  2 +-
 src/lib/components/NotificationBell.svelte    |  2 +-
 src/lib/components/PostSection.svelte         |  4 +-
 src/lib/components/Searchbar.svelte           | 22 ++---
 src/lib/components/SectorSegmentation.svelte  |  2 +-
 src/routes/+layout.svelte                     | 83 ++++++++++++++++---
 src/routes/community/+page.svelte             | 16 ++--
 .../community/post/[postId]/+page.svelte      |  2 +-
 src/routes/contact/+page.svelte               |  4 +-
 src/routes/portfolio/+page.svelte             |  2 +-
 src/routes/price-alert/+page.svelte           |  8 +-
 src/routes/pricing/+page.svelte               |  2 +-
 src/routes/privacy-policy/+page.svelte        |  4 +-
 src/routes/terms-of-use/+page.svelte          |  4 +-
 src/routes/watchlist/+page.svelte             | 10 +--
 18 files changed, 114 insertions(+), 61 deletions(-)

diff --git a/src/lib/components/CountrySegmentation.svelte b/src/lib/components/CountrySegmentation.svelte
index 69e5bb8f..33c5a76a 100644
--- a/src/lib/components/CountrySegmentation.svelte
+++ b/src/lib/components/CountrySegmentation.svelte
@@ -75,7 +75,7 @@ $: {
                                     <!--Start Progress-->
                                     {#each (showFullStats ? geographicList : geographicList?.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 && geographicList?.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 && geographicList?.length > 2 ? 'opacity-[0.3]' : '' }">
 
                                             <div class="flex-shrink-0 mr-3 rounded-full w-10 h-10 relative bg-[#09090B]">
                                                 <img
diff --git a/src/lib/components/CreateNewPost.svelte b/src/lib/components/CreateNewPost.svelte
index 33ded1a1..c84c4c14 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-[#27272A] rounded-[4px] sm:rounded-[8px]">
+      <div class="sm:border border-gray-700 sm:hover:border-gray-600 rounded-none sm:rounded-md bg-[#141417] 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/Footer.svelte b/src/lib/components/Footer.svelte
index a591ccec..cff9eb99 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -8,7 +8,7 @@
 
 
  <!--Footer-->
- <footer class="bg-[#09090B] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 left-0 w-full">
+ <footer class="bg-[#09090B] border-t border-slate-800 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto">
   <div class="container mx-auto px-3">
       
     <div class="w-full flex flex-col md:flex-row py-6">
@@ -41,7 +41,7 @@
           </span>
           <span class="relative flex h-3 w-3 ml-2">
             <span class="absolute inline-flex h-full w-full rounded-full"></span>
-            <span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-400"></span>
+            <span class="relative inline-flex rounded-full h-3 w-3 bg-purple-600"></span>
           </span>
         </a>
 
diff --git a/src/lib/components/MiniPlot.svelte b/src/lib/components/MiniPlot.svelte
index 09a6301a..b8a8db59 100644
--- a/src/lib/components/MiniPlot.svelte
+++ b/src/lib/components/MiniPlot.svelte
@@ -138,7 +138,7 @@ if(chart && typeof window !== 'undefined')
 
 
 
-<label on:click={etfSelector} class="sm:hover:border-[#3C74D4] duration-200 transition ease-in-out cursor-pointer flex flex-row items-center rounded-lg shadow-lg border border-slate-800 bg-[#09090B]">
+<label on:click={etfSelector} class="sm:hover:border-[#3C74D4] duration-200 transition ease-in-out cursor-pointer flex flex-row items-center rounded-lg shadow-lg border border-slate-800 bg-[#27272A]">
   <div class="flex flex-col items-center lg:mr-5">
     <span class="text-white font-bold text-xs w-20 text-center">{title}</span>
     <div class="flex flex-row mt-1 items-center">
diff --git a/src/lib/components/NotificationBell.svelte b/src/lib/components/NotificationBell.svelte
index 4339d104..d96b438e 100644
--- a/src/lib/components/NotificationBell.svelte
+++ b/src/lib/components/NotificationBell.svelte
@@ -17,7 +17,7 @@ async function toggle() {
   <!--Start Notification Bell-->
   {#if data?.user}
   
-  <div on:click={toggle} class="relative m-auto ml-1 mr-1 sm:ml-2.5 sm:mr-4">
+  <div on:click={toggle} class="relative ml-3 -mr-1">
     <label class="sm:hover:text-[#756EFF] text-gray-300 hover:text-white cursor-pointer">
       <svg class="w-7 h-7 inline-block" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.0196 2.91016C8.7096 2.91016 6.0196 5.60016 6.0196 8.91016V11.8002C6.0196 12.4102 5.7596 13.3402 5.4496 13.8602L4.2996 15.7702C3.5896 16.9502 4.0796 18.2602 5.3796 18.7002C9.6896 20.1402 14.3396 20.1402 18.6496 18.7002C19.8596 18.3002 20.3896 16.8702 19.7296 15.7702L18.5796 13.8602C18.2796 13.3402 18.0196 12.4102 18.0196 11.8002V8.91016C18.0196 5.61016 15.3196 2.91016 12.0196 2.91016Z" stroke="currentColor" stroke-width="1" stroke-miterlimit="10" stroke-linecap="round"></path><path d="M13.8699 3.19994C13.5599 3.10994 13.2399 3.03994 12.9099 2.99994C11.9499 2.87994 11.0299 2.94994 10.1699 3.19994C10.4599 2.45994 11.1799 1.93994 12.0199 1.93994C12.8599 1.93994 13.5799 2.45994 13.8699 3.19994Z" stroke="currentColor" stroke-width="1" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path><path opacity="0.4" d="M15.0195 19.0601C15.0195 20.7101 13.6695 22.0601 12.0195 22.0601C11.1995 22.0601 10.4395 21.7201 9.89953 21.1801C9.35953 20.6401 9.01953 19.8801 9.01953 19.0601" stroke="currentColor" stroke-width="1" stroke-miterlimit="10"></path></svg>
     </label>
diff --git a/src/lib/components/PostSection.svelte b/src/lib/components/PostSection.svelte
index 2fede892..cc909066 100644
--- a/src/lib/components/PostSection.svelte
+++ b/src/lib/components/PostSection.svelte
@@ -314,7 +314,7 @@ $: {
   
     </div>
    
-  <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">
+  <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">
       <!-- List container -->
       <div class="flex flex-col">
           <!-- Item -->
@@ -695,7 +695,7 @@ $: {
         left: 0;
         right: 0;
         height: 50px; /* Adjust as needed for the gradient effect */
-        background: linear-gradient(0deg, rgb(39, 39, 42, 1), rgb(39, 39, 42, 0)); /* Smooth gradient transition */
+        background: linear-gradient(0deg, rgb(9, 9, 11, 1), rgb(9, 9, 11, 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/Searchbar.svelte b/src/lib/components/Searchbar.svelte
index f7739bb6..e4b57ceb 100644
--- a/src/lib/components/Searchbar.svelte
+++ b/src/lib/components/Searchbar.svelte
@@ -322,7 +322,7 @@ $: {
 
 
 <label on:click={loadSearchData} for="searchBarModal"
-class="cursor-pointer w-8 h-8  flex items-center justify-center bg-purple-600 rounded-full">
+class="cursor-pointer w-8 h-8 flex-shrink-0 flex items-center justify-center bg-purple-600 rounded-full">
 <span class="sr-only">Search</span>
     <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
         <path class="fill-current text-white" d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
@@ -412,7 +412,7 @@ class="cursor-pointer w-8 h-8  flex items-center justify-center bg-purple-600 ro
   
   
   
-  <div class="modal-box overflow-hidden rounded-xl bg-[#09090B] sm:my-8 sm:m-auto sm:h-auto w-full sm:w-1/2 md:w-3/4 lg:w-1/2 2xl:w-1/3 " >
+  <div class="modal-box overflow-hidden rounded-xl bg-[#09090B] border border-gray-800 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-1/2 md:w-3/4 lg:w-1/2 2xl:w-1/3 " >
 
      
       <!-- Search layout -->
@@ -421,7 +421,7 @@ class="cursor-pointer w-8 h-8  flex items-center justify-center bg-purple-600 ro
             <label for="modal-search" class="sr-only">Search</label>
             <input 
             id="modal-search" 
-            class="rounded-lg w-full text-white bg-[#09090B] border border-slate-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4" 
+            class="rounded-lg w-full text-white bg-[#09090B] border border-gray-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4" 
             type="search" 
             placeholder="Search Anything…" 
             bind:value={searchQuery}
@@ -448,14 +448,14 @@ class="cursor-pointer w-8 h-8  flex items-center justify-center bg-purple-600 ro
         <p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">Oh snapp, ticker does not exist in our database</p>
         {/if}
         {#if !showSuggestions}
-        <div class="text-start text-sm font-semibold text-slate-400 mb-2">
+        <div class="text-start text-sm font-semibold text-white mb-2">
           Popular
         </div>
         {/if}  
         <ul class="text-sm" >
             {#if !showSuggestions }
               {#each popularList as item}
-                <li>
+                <li class="border-b border-gray-800">
                   <a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white  group'} w-full">
                     <div class="flex flex-row items-center w-full">
                       <div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
@@ -482,11 +482,11 @@ class="cursor-pointer w-8 h-8  flex items-center justify-center bg-purple-600 ro
               
              
             {:else if showSuggestions && searchResults?.length > 0}
-            <div class="text-start text-sm font-semibold text-slate-400 mb-2">
+            <div class="text-start text-sm font-semibold text-white mb-2">
               Suggestions
             </div>
               {#each searchResults as item}
-                <li>
+                <li class="border-b border-gray-800">
                   <!-- svelte-ignore a11y-click-events-have-key-events -->
                   <!-- svelte-ignore a11y-label-has-associated-control -->
                   <label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] rounded-lg flex justify-start items-center p-2 text-white group'}">
@@ -591,14 +591,14 @@ class="cursor-pointer w-8 h-8  flex items-center justify-center bg-purple-600 ro
       <p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">Oh snapp, ticker does not exist in our database</p>
       {/if}
       {#if !showSuggestions}
-      <div class="text-start text-sm font-semibold text-slate-400 mb-2">
+      <div class="text-start text-sm font-semibold text-white mb-2">
         Popular
       </div>
       {/if}  
       <ul class="text-sm" >
           {#if !showSuggestions }
             {#each popularList as item}
-              <li>
+              <li class="border-b border-gray-800">
                 <a  href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`}  on:click={() => popularTicker(item?.symbol, item?.type) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
                   <div class="flex flex-row items-center w-full">
                     <div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
@@ -623,11 +623,11 @@ class="cursor-pointer w-8 h-8  flex items-center justify-center bg-purple-600 ro
             
            
           {:else if showSuggestions && searchResults?.length > 0}
-          <div class="text-start text-sm font-semibold text-slate-400 mb-2">
+          <div class="text-start text-sm font-semibold text-white mb-2">
             Suggestions
           </div>
             {#each searchResults as item}
-              <li>
+              <li class="border-b border-gray-800">
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <!-- svelte-ignore a11y-label-has-associated-control -->
                 <label data-sveltekit-preload-data="false" on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}">
diff --git a/src/lib/components/SectorSegmentation.svelte b/src/lib/components/SectorSegmentation.svelte
index 039f3450..aefadcbc 100644
--- a/src/lib/components/SectorSegmentation.svelte
+++ b/src/lib/components/SectorSegmentation.svelte
@@ -116,7 +116,7 @@ $: {
                             <!--Start Progress-->
                             {#each (showFullStats ? sectorList : sectorList?.slice(0,3)) as item,index}
 
-                                <div on:click= {() => sectorSelector(item?.industry)} class="shadow-lg bg-[#09090B] w-full rounded-lg p-4 mb-5  flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && sectorList?.length > 3 ? 'opacity-[0.5]' : '' }">
+                                <div on:click= {() => sectorSelector(item?.industry)} class="shadow-lg bg-[#27272A] w-full rounded-lg p-4 mb-5  flex flex-row items-center {index === 0 ? 'mt-4' : ''} {index === 2 && !showFullStats && sectorList?.length > 3 ? 'opacity-[0.5]' : '' }">
 
                                     <div class="flex flex-col -mt-2 w-full">
                                         <div class="flex flex-row items-center w-full">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 818094b6..db1a350c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -393,9 +393,59 @@ $: {
 
 
 
+<div class="app {$page?.url?.pathname === '/' ? 'bg-[#000]' : ''}">
+
+{#if !data?.user}
+<header
+  class="sticky {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} inset-x-0 top-0 z-30 mx-auto w-full max-w-screen-md border border-[#202020] py-3 sm:py-4 shadow-lg sm:backdrop-blur-sm bg-[#202020] sm:bg-opacity-80 md:top-3 md:rounded-2xl lg:max-w-screen-lg">
+  <div class="px-4">
+      <div class="flex items-center justify-between">
+          <div class="flex shrink-0">
+              <a href="/" class="flex-shrink-0 flex flex-row items-center {!data?.user ? 'ml-4' : 'ml-2'}">
+                <img class="avatar w-9 sm:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"}
+                  alt="stocknear logo" loading="lazy" />
+                <div class="flex justify-center items-center text-lg sm:text-xl font-medium mr-auto ml-2">
+                    <span class="self-center text-gray-200 font-semibold whitespace-nowrap">Stocknear</span>
+                </div>
+              </a>
+          </div>
+          <div class="hidden md:flex md:items-center md:justify-center md:gap-5">
+            <a aria-current="page"
+                  class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white hover:text-yellow-200 transition-all duration-200 hover:bg-purple-600"
+                  href="/">Home</a>
+              <a aria-current="page"
+                  class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white hover:text-yellow-200 transition-all duration-200 hover:bg-purple-600"
+                  href="/about">About Us</a>
+              <a class="inline-block rounded-lg px-2 py-1 text-[0.90rem] font-semibold text-white hover:text-yellow-200 transition-all duration-200 hover:bg-purple-600"
+                  href="/pricing">Pricing</a>
+          </div>
+          <div class="flex items-center justify-end gap-3">
+              <a class="items-center justify-center rounded-xl bg-gray-200 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition-all duration-150 hover:bg-white sm:inline-flex"
+                  href="/register">Start Trial</a>
+              <a class="inline-flex items-center justify-center rounded-xl bg-purple-600 px-3 py-2 text-sm font-semibold text-yellow-200 shadow-sm transition-all duration-150 hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
+                  href="/login">Login</a>
+          </div>
+      </div>
+  </div>
+</header>
+
+<main class="w-full">
+  <slot />
+
+  {#if Cookie && $showCookieConsent === true}
+  <Cookie />
+  {/if}
+
+
+  {#if !hideFooter}
+  <Footer/>
+  {/if}
+</main>
+
+{:else }
 
 <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 2xl:border-r 2xl:border-gray-800 bg-[#141417] 2xl:flex">
+  <aside class="fixed overflow-y-scroll 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="/"
@@ -689,8 +739,9 @@ $: {
         <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">
-        
+      
+      <div class="relative ml-auto">
+        <!--
         <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-white" />
         <Input
           type="search"
@@ -698,12 +749,22 @@ $: {
           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"
           />
+        -->
+        <Searchbar />
+
+        <NotificationBell 
+          data={data}
+          hasUnreadElement={hasUnreadElement}
+        />
+
       </div>
+
+      
       <DropdownMenu.Root >
         <DropdownMenu.Trigger asChild let:builder>
           <Button
             size="icon"
-            class="overflow-hidden rounded-full "
+            class="overflow-hidden rounded-full"
             builders={[builder]}
           >
             <img
@@ -744,13 +805,14 @@ $: {
           </DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
+
     </header>
-    <main
-      class="w-full"
-    >
+    <main class="w-full">
       <slot />
-
-
+      <Toaster class="bg-[#1A1A27] text-white text-medium"/>
+      {#if Cookie && $showCookieConsent === true}
+      <Cookie />
+      {/if}
       {#if !hideFooter}
       <Footer/>
       {/if}
@@ -758,7 +820,8 @@ $: {
   </div>
 </div>
 
-
+{/if}
+</div>
 
 <style>
   .scroller {
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index 75e048f1..1696265f 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-[#27272A] 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-[#09090B] 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-[#141417] {sortingPosts === 'hot' ? 'bg-[#141417] 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-[#323232] {sortingPosts === 'hot' ? 'bg-[#323232] 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-[#141417] {sortingPosts === 'new' ? 'bg-[#141417] 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-[#323232] {sortingPosts === 'new' ? 'bg-[#323232] 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-[#27272A] h-auto sm:w-96">
+                                  <div class="rounded-t-lg bg-[#09090B] border border-gray-800 h-auto sm:w-96">
                                     <!--Start Header-->
-                                    <div class="bg-[#27272A] w-full p-3 rounded-t-lg">
+                                    <div class="bg-[#09090B] 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-[#27272A] h-auto sm:w-96 rounded-lg">
+                                  <div class="bg-[#09090B] border border-gray-800 h-auto sm:w-96 rounded-lg">
 
                                   <!--Start Image-->
                                   <div class="flex flex-row items-center w-full p-3">
@@ -756,9 +756,9 @@ $: {
 
                                <!--Community Rules-->
                                <div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">  
-                                <div class="bg-[#27272A] sm:w-96 rounded-lg">
+                                <div class="bg-[#09090B] border border-gray-800 sm:w-96 rounded-lg">
                                   <!--Start Header-->
-                                  <div class="bg-[#27272A] border-b border-slate-700 w-full pl-6 pr-6 pt-6 pb-4 rounded-t-lg">
+                                  <div class="bg-[#09090B] 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/community/post/[postId]/+page.svelte b/src/routes/community/post/[postId]/+page.svelte
index fd5e6f4e..40d5dbca 100644
--- a/src/routes/community/post/[postId]/+page.svelte
+++ b/src/routes/community/post/[postId]/+page.svelte
@@ -576,7 +576,7 @@ function updateVote(postVote) {
         {/if}
       </form>
       <!--End Upvote-->
-      <label class="px-6 py-4 w-14 rounded-lg bg-[#09090B] text-[1rem] text-bold text-white">
+      <label class="px-6 py-4 w-14 rounded-lg bg-[#27272A] text-[1rem] text-bold text-white">
           {typeof upvoteCounter[post?.id] === 'number' || typeof downvoteCounter[post?.id] === 'number' ? (upvoteCounter[post?.id] - downvoteCounter[post?.id]) : '-' }
       </label>
       <!--Start Downvote-->
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 95b557ba..db2489e9 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -18,7 +18,6 @@
 <!-- Other meta tags -->
 <meta property="og:title" content={`Contact Us · stocknear`}/>
 <meta property="og:description" content={`Need help, found a bug or you have a feature request. Please contact us to resolve any issues.`} />
-<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <meta property="og:type" content="website"/>
 <!-- Add more Open Graph meta tags as needed -->
 
@@ -26,7 +25,6 @@
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`Contact Us · stocknear`}/>
 <meta name="twitter:description" content={`Need help, found a bug or you have a feature request. Please contact us to resolve any issues.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -46,7 +44,7 @@
   </div>
   -->
 
-  <div  class="w-full 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 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 -->
diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index dbf0f16b..f90506dd 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@@ -167,7 +167,7 @@ if (usRegion.includes(value)) {
       
       
   
-    <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 -->
diff --git a/src/routes/price-alert/+page.svelte b/src/routes/price-alert/+page.svelte
index 5b314c9d..fbbcf78a 100644
--- a/src/routes/price-alert/+page.svelte
+++ b/src/routes/price-alert/+page.svelte
@@ -194,7 +194,6 @@ $: {
     <!-- Other meta tags -->
     <meta property="og:title" content="Price Alert · stocknear"/>
     <meta property="og:description" content="Set a price alert and get instant notification.">
-    <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
     <meta property="og:type" content="website"/>
     <!-- Add more Open Graph meta tags as needed -->
 
@@ -202,7 +201,6 @@ $: {
     <meta name="twitter:card" content="summary_large_image"/>
     <meta name="twitter:title" content="Price Alert · stocknear"/>
     <meta name="twitter:description" content="Set a price alert and get instant notification.">
-    <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
     <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
         
@@ -216,7 +214,7 @@ $: {
     <div class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
         
          
-      <div  class="w-full 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 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 -->
@@ -295,14 +293,14 @@ $: {
 
             <div class="flex flex-row justify-end items-center pr-4 sm:pr-0 pb-2">
                 {#if editMode}
-                <label on:click={handleDelete} class="cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg mr-3">
+                <label on:click={handleDelete} class="cursor-pointer bg-[#27272A] sm:hover:bg-[#27272A] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg mr-3">
                     <svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M10 5h4a2 2 0 1 0-4 0M8.5 5a3.5 3.5 0 1 1 7 0h5.75a.75.75 0 0 1 0 1.5h-1.32l-1.17 12.111A3.75 3.75 0 0 1 15.026 22H8.974a3.75 3.75 0 0 1-3.733-3.389L4.07 6.5H2.75a.75.75 0 0 1 0-1.5zm2 4.75a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0zM14.25 9a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75m-7.516 9.467a2.25 2.25 0 0 0 2.24 2.033h6.052a2.25 2.25 0 0 0 2.24-2.033L18.424 6.5H5.576z"/></svg>
                     <span class="ml-1 text-white text-sm">
                         {numberOfChecked}
                     </span>
                 </label>
                 {/if}
-                <label on:click={() => editMode = !editMode} class="cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg">
+                <label on:click={() => editMode = !editMode} class="cursor-pointer bg-[#27272A] sm:hover:bg-[#27272A] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg">
                     <svg class="inline-block w-5 h-5" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1024 1024"><path fill="white" d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640z"/><path fill="white" d="m469.952 554.24l52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"/></svg>
                     {#if !editMode}
                     <span class="ml-1 text-white text-sm">
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 6d9c9f75..11611a6f 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -153,7 +153,7 @@ async function purchasePlan() {
 
         <div class="flex flex-col sm:flex-row items-center gap-10 sm:gap-5 w-full mt-10 sm:mt-20">
             <!-- Pricing Card -->
-            <div class="order-last sm:order-1 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white bg-[#09090B] rounded-lg">
+            <div class="order-last sm:order-1 flex flex-col p-6 lg:p-8 mx-auto w-full text-center text-white border border-gray-800 bg-[#09090B] rounded-lg">
 
 
                 <div class="flex flex-row items-center justify-start items-center mt-2">
diff --git a/src/routes/privacy-policy/+page.svelte b/src/routes/privacy-policy/+page.svelte
index 32e4d721..0e9fcba0 100644
--- a/src/routes/privacy-policy/+page.svelte
+++ b/src/routes/privacy-policy/+page.svelte
@@ -14,14 +14,12 @@
 
   <!-- Other meta tags -->
   <meta property="og:title" content="Privacy Policy · stocknear"/>
-  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <meta property="og:type" content="website"/>
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content="Privacy Policy · stocknear"/>
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 	    
@@ -37,7 +35,7 @@
     </div>
     -->
   
-    <div  class="w-full 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 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 -->
diff --git a/src/routes/terms-of-use/+page.svelte b/src/routes/terms-of-use/+page.svelte
index 9f3a4fad..1dbd3d49 100644
--- a/src/routes/terms-of-use/+page.svelte
+++ b/src/routes/terms-of-use/+page.svelte
@@ -14,14 +14,12 @@
 
   <!-- Other meta tags -->
   <meta property="og:title" content="Terms of Use · stocknear"/>
-  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <meta property="og:type" content="website"/>
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content="Terms of Use · stocknear"/>
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 	    
@@ -39,7 +37,7 @@
     </div>
     -->
   
-    <div  class="w-full m-auto sm:bg-[#09090B] sm:rounded-xl h-auto p-10 mt-3 mb-10">
+    <div  class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 mb-10">
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
     
         <!-- Start Column -->
diff --git a/src/routes/watchlist/+page.svelte b/src/routes/watchlist/+page.svelte
index 11b69a73..4c1a6b92 100644
--- a/src/routes/watchlist/+page.svelte
+++ b/src/routes/watchlist/+page.svelte
@@ -359,7 +359,6 @@ onDestroy( () => {
   <!-- Other meta tags -->
   <meta property="og:title" content="Stock Watchlist · stocknear"/>
   <meta property="og:description" content="A stock watchlist tracker tool. Add stocks and ETFs to keep track of their performance.">
-  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <meta property="og:type" content="website"/>
   <!-- Add more Open Graph meta tags as needed -->
 
@@ -367,7 +366,6 @@ onDestroy( () => {
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content="Stock Watchlist · stocknear"/>
   <meta name="twitter:description" content="A stock watchlist tracker tool. Add stocks and ETFs to keep track of their performance.">
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
     
@@ -381,7 +379,7 @@ onDestroy( () => {
 <div class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-40">
     
      
-  <div  class="w-full 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 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 -->
@@ -439,7 +437,7 @@ onDestroy( () => {
       <div class="flex flex-row items-center w-full">
 
         <div class="flex flex-row items-center justify-between w-full">
-          <label for="allList" class="ml-2 cursor-pointer w-auto px-4 bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out flex justify-center items-center py-3 rounded-lg shadow-lg">
+          <label for="allList" class="ml-2 cursor-pointer w-auto px-4 bg-[#27272A] sm:hover:bg-[#27272A] duratiion-100 transition ease-in-out flex justify-center items-center py-3 rounded-lg shadow-lg">
             <span class="text-white text-md">
               {displayWatchList?.title?.length > 10 ? displayWatchList?.title?.slice(0,10) + '...' : displayWatchList?.title}
             </span>
@@ -464,7 +462,7 @@ onDestroy( () => {
         </div>
       
 
-          <label for="addWatchList" class="{$screenWidth < 640 || !data?.user ? 'hidden' : ''} cursor-pointer w-48 md:w-44 bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out flex justify-center items-center py-3 rounded-lg shadow-lg mr-2">
+          <label for="addWatchList" class="{$screenWidth < 640 || !data?.user ? 'hidden' : ''} cursor-pointer w-48 md:w-44 bg-[#27272A] sm:hover:bg-[#27272A] duratiion-100 transition ease-in-out flex justify-center items-center py-3 rounded-lg shadow-lg mr-2">
             <svg class="w-5 h-5 inline-block " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#fff" d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z"/></svg>
             <span class="ml-1 text-white text-sm">New Watchlist</span>
           </label>
@@ -473,7 +471,7 @@ onDestroy( () => {
       </div>
       {:else}
       <div class ="w-full m-auto flex justify-center items-center">
-        <label for="addWatchList" class="{$screenWidth < 640 || !data?.user ? 'hidden' : ''} light-box cursor-pointer w-48 md:w-44 bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out flex justify-center items-center py-3 rounded-lg shadow-lg">
+        <label for="addWatchList" class="{$screenWidth < 640 || !data?.user ? 'hidden' : ''} light-box cursor-pointer w-48 md:w-44 bg-[#27272A] sm:hover:bg-[#27272A] duratiion-100 transition ease-in-out flex justify-center items-center py-3 rounded-lg shadow-lg">
           <svg class="w-6 h-6 inline-block " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#fff" d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z"/></svg>
           <span class="ml-2 text-white text-md">New Watchlist</span>
         </label>