From 1fd81b2be3bebe9120038b419b0d5d2b197d49bb Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 25 Aug 2024 11:40:31 +0200
Subject: [PATCH] update ui of calendars

---
 src/routes/dividends-calendar/+page.svelte    | 73 +++++++------------
 src/routes/earnings-calendar/+page.svelte     | 15 +---
 src/routes/economic-calendar/+page.svelte     | 20 +----
 src/routes/stock-splits-calendar/+page.svelte | 22 +-----
 4 files changed, 37 insertions(+), 93 deletions(-)

diff --git a/src/routes/dividends-calendar/+page.svelte b/src/routes/dividends-calendar/+page.svelte
index 93305291..f3e46de3 100644
--- a/src/routes/dividends-calendar/+page.svelte
+++ b/src/routes/dividends-calendar/+page.svelte
@@ -328,35 +328,35 @@ $: {
               <div class="w-full overflow-x-scroll">
     
                     
-              <!-- Cards -->
+               <!-- Cards -->
               <div class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0">
-                  <!-- Start Columns -->
-                  <label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
-                    <svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
-                  </label>
-                  {#each weekday as day,index}
-                  
-                  <div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
-                          <label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 sm:bg-[#A24D51] sm:gradient-effect' : ''} flex rounded-lg sm:rounded-none bg-[#3C40F0] border border-blue-600 mb-3">
-                            <div class=" flex flex-row justify-center items-center w-full">
-                              <label on:click={() => clickWeekday('previous', index) } class="sm:hidden ml-auto">
-                                <svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
-                              </label>
-                              <div class="flex flex-col text-white truncate m-auto p-1">
-                                <span class="font-medium text-md">{formattedWeekday[index]}</span>
-                                <span class="text-sm m-auto pt-1 pb-1"> {day.length} Dividends</span>
-                              </div>
-                              <label on:click={() => clickWeekday('next', index) } class="sm:hidden mr-auto">
-                                <svg class="w-8 h-8 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
-                              </label>
+                <!-- Start Columns -->
+                <label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
+                  <svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
+                </label>
+                {#each weekday as day,index}
+                
+                <div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
+                        <label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-[#27272A]' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3">
+                          <div class=" flex flex-row justify-center items-center w-full ">
+                            <label on:click={() => clickWeekday('previous', index) } class="{previousMax === true && index === 0? 'opacity-20' : ''} sm:hidden ml-auto">
+                              <svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
+                            </label>
+                            <div class="flex flex-col text-white truncate m-auto p-1">
+                              <span class="font-medium text-md">{formattedWeekday[index]}</span>
+                              <span class="text-sm m-auto pt-1 pb-1"> {day.length} Earnings</span>
                             </div>
-                          </label>
-                      </div>
-                  {/each}
-                  <label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
-                    <svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
-                  </label>
-              </div>
+                            <label on:click={() => clickWeekday('next', index) } class="{nextMax === true && index === 4? 'opacity-20' : ''} sm:hidden mr-auto">
+                              <svg class="w-8 h-8 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
+                            </label>
+                          </div>
+                        </label>
+                    </div>
+                {/each}
+                <label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
+                  <svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
+                </label>
+            </div>
     
               
               {#each weekday as day,index}
@@ -483,21 +483,4 @@ $: {
       
     
     
-    
-    
-    
-  
-    
-    
-  <style>
-  
-      
-      .gradient-effect {
-      background: linear-gradient(100deg, #B46266, #A24D51);
-      color: #fff;
-      position: relative;
-      overflow: hidden;
-      }
-  
-      </style>
-      
\ No newline at end of file
+  
\ No newline at end of file
diff --git a/src/routes/earnings-calendar/+page.svelte b/src/routes/earnings-calendar/+page.svelte
index de5c4d40..3a528e06 100644
--- a/src/routes/earnings-calendar/+page.svelte
+++ b/src/routes/earnings-calendar/+page.svelte
@@ -376,7 +376,7 @@ $: {
                     <tbody>
                       {#each day as item, index}
                       <!-- row -->
-                      <tr on:click={() => goto("/stocks/"+item?.symbol)} class=" sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
+                      <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer">
                         
                         <td class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]">
                           {item?.symbol}
@@ -510,17 +510,4 @@ $: {
   </section>
   
 
-
-
-
-
-<style>
-  .gradient-effect {
-    background: linear-gradient(100deg, #B46266, #A24D51);
-    color: #fff;
-    position: relative;
-    overflow: hidden;
-  }
-
-</style>
   
\ No newline at end of file
diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index df396403..97e2ed52 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -193,13 +193,13 @@
                 <!-- Cards -->
                 <div class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0">
                     <!-- Start Columns -->
-                    <label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
+                    <label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
                       <svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
                     </label>
                     {#each (filterList?.length === 0 ? weekday : weekdayFiltered) as day,index}
                     
                     <div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
-                            <label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 sm:bg-[#A24D51] sm:gradient-effect' : ''} rounded-lg sm:rounded-none flex bg-[#3C40F0] border border-blue-600 mb-3">
+                            <label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-[#27272A]' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3">
                               <div class=" flex flex-row justify-center items-center w-full">
                                 <label on:click={() => clickWeekday('previous', index) } class="sm:hidden ml-auto">
                                   <svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
@@ -215,7 +215,7 @@
                             </label>
                         </div>
                     {/each}
-                    <label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
+                    <label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
                       <svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
                     </label>
                 </div>
@@ -427,16 +427,4 @@
 </section>
         
       
-      
-      
-<style>
-
-
-.gradient-effect {
-background: linear-gradient(100deg, #B46266, #A24D51);
-color: #fff;
-position: relative;
-overflow: hidden;
-}
-
-</style>
+      
\ No newline at end of file
diff --git a/src/routes/stock-splits-calendar/+page.svelte b/src/routes/stock-splits-calendar/+page.svelte
index 26c8864a..8e4bbb16 100644
--- a/src/routes/stock-splits-calendar/+page.svelte
+++ b/src/routes/stock-splits-calendar/+page.svelte
@@ -342,13 +342,13 @@
                 <!-- Cards -->
                 <div class="w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0">
                     <!-- Start Columns -->
-                    <label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
+                    <label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
                       <svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
                     </label>
                     {#each weekday as day,index}
                     
                     <div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
-                            <label on:click={() => toggleDate(index)} class="w-11/12 sm:w-full m-auto  cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 bg-opacity-[0.6] sm:bg-[#A24D51] sm:gradient-effect' : ''} rounded-lg sm:rounded-none flex bg-[#3C40F0] border border-blue-600 mb-3">
+                            <label on:click={() => toggleDate(index)} class="w-11/12 sm:w-full m-auto  cursor-pointer h-16 {index === selectedWeekday ? 'bg-[#27272A]' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3">
                               <div class=" flex flex-row justify-center items-center w-full">
                                 <label on:click={() => clickWeekday('previous', index) } class="sm:hidden ml-auto">
                                   <svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
@@ -364,7 +364,7 @@
                             </label>
                         </div>
                     {/each}
-                    <label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#3C40F0] hover:bg-purple-600 border border-blue-600 mb-3">
+                    <label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3">
                       <svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
                     </label>
                 </div>
@@ -497,18 +497,4 @@
       
       
       
-    
-      
-      
-    <style>
-    
-        
-        .gradient-effect {
-        background: linear-gradient(100deg, #B46266, #A24D51);
-        color: #fff;
-        position: relative;
-        overflow: hidden;
-        }
-    
-        </style>
-        
\ No newline at end of file
+  
\ No newline at end of file