From 4b4535e0760d55eda18b40500f74901b3e9fe107 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 28 Aug 2024 11:35:02 +0200
Subject: [PATCH] increase card size

---
 src/lib/components/AnalystCard.svelte        | 2 +-
 src/lib/components/CryptoProfileCard.svelte  | 2 +-
 src/lib/components/DividendCard.svelte       | 2 +-
 src/lib/components/ESGCard.svelte            | 2 +-
 src/lib/components/ETFProfileCard.svelte     | 2 +-
 src/lib/components/SimilarETFCard.svelte     | 2 +-
 src/lib/components/SimilarTickerCard.svelte  | 2 +-
 src/lib/components/TickerInfoCard.svelte     | 4 +++-
 src/lib/components/TopETFTickerHolder.svelte | 2 +-
 src/lib/components/TopHoldingCard.svelte     | 2 +-
 10 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/AnalystCard.svelte b/src/lib/components/AnalystCard.svelte
index 4022547d..01e4a672 100644
--- a/src/lib/components/AnalystCard.svelte
+++ b/src/lib/components/AnalystCard.svelte
@@ -45,7 +45,7 @@ if ($stockTicker && typeof window !== 'undefined' && typeof analystRating !== 'u
   
   <!--Start Analyst Card -->
   <div class="space-y-3 sm:pt-5 hidden sm:block sm:{Object?.keys(analystRating)?.length !== 0 ? '' : 'hidden'}">  
-    <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] -mx-1 sm:mx-0">
+    <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0">
      
       <!--Start Content-->
       <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
diff --git a/src/lib/components/CryptoProfileCard.svelte b/src/lib/components/CryptoProfileCard.svelte
index f4ce9f43..af612e8b 100644
--- a/src/lib/components/CryptoProfileCard.svelte
+++ b/src/lib/components/CryptoProfileCard.svelte
@@ -47,7 +47,7 @@
   </script>
   
   <div class="sm:space-y-3">  
-    <div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
+    <div class="lg:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0">
 
          <!--Start Header-->
         <div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$cryptoTicker?.toUpperCase()}.jpg`});">
diff --git a/src/lib/components/DividendCard.svelte b/src/lib/components/DividendCard.svelte
index 86f46c52..931d8695 100644
--- a/src/lib/components/DividendCard.svelte
+++ b/src/lib/components/DividendCard.svelte
@@ -25,7 +25,7 @@
           
           <div class="space-y-3 lg:pt-5 lg:{dividendHistoryList?.length !== 0 ? '' : 'hidden'}">  
           
-          <div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
+          <div class="sm:rounded-lg shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
           
             <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
               <div class="flex flex-row items-center w-full ml-2 pb-2 p-3">
diff --git a/src/lib/components/ESGCard.svelte b/src/lib/components/ESGCard.svelte
index e20be0bf..d39b3f9a 100644
--- a/src/lib/components/ESGCard.svelte
+++ b/src/lib/components/ESGCard.svelte
@@ -50,7 +50,7 @@ $: {
 
 <!--Start ESG Card -->
 <div class="space-y-3 lg:pt-5 hidden lg:block lg:{esgScore && esgRiskRating && environmentalScore && governanceScore !== 'n/a' ? '' : 'hidden'}">  
-  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] -mx-1 sm:mx-0">
+  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto sm:h-[470px] {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px] -mx-1 sm:mx-0">
    
     <!--Start Content-->
     <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
diff --git a/src/lib/components/ETFProfileCard.svelte b/src/lib/components/ETFProfileCard.svelte
index 02e77313..96eccefa 100644
--- a/src/lib/components/ETFProfileCard.svelte
+++ b/src/lib/components/ETFProfileCard.svelte
@@ -56,7 +56,7 @@ let showFullText = false;
   </script>
   
   <div class="sm:space-y-3">  
-    <div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
+    <div class="sm:rounded-lg shadow-lg sm:border sm:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0">
 
          <!--Start Header-->
          <div class="lg:rounded-t-sm w-full h-[130px] bg-[#09090B] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url('{defaultImage}');">
diff --git a/src/lib/components/SimilarETFCard.svelte b/src/lib/components/SimilarETFCard.svelte
index 4240a66d..9e8d0391 100644
--- a/src/lib/components/SimilarETFCard.svelte
+++ b/src/lib/components/SimilarETFCard.svelte
@@ -26,7 +26,7 @@ export let similarTicker;
 
 <div class="space-y-3 sm:pt-5  hidden lg:block sm:{similarTicker?.length !== 0 ? '' : 'hidden'}">  
 
-<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
+<div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
 
   <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">
     <h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 p-3">
diff --git a/src/lib/components/SimilarTickerCard.svelte b/src/lib/components/SimilarTickerCard.svelte
index 3687a294..65f5cdcc 100644
--- a/src/lib/components/SimilarTickerCard.svelte
+++ b/src/lib/components/SimilarTickerCard.svelte
@@ -26,7 +26,7 @@ export let similarstock;
   
   <div class="space-y-3 sm:pt-5 hidden lg:block lg:{similarstock?.length !== 0 ? '' : 'hidden'}">  
   
-  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
+  <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
   
     <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
       <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
diff --git a/src/lib/components/TickerInfoCard.svelte b/src/lib/components/TickerInfoCard.svelte
index 6a47bcda..1e7bb356 100644
--- a/src/lib/components/TickerInfoCard.svelte
+++ b/src/lib/components/TickerInfoCard.svelte
@@ -83,7 +83,7 @@ $: {
 </script>
 
 <div class="sm:space-y-3">  
-    <div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] lg:pt-0">
+    <div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0">
 
       <!--Start Header-->
       <div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});">
@@ -115,12 +115,14 @@ $: {
         <div class="flex justify-center items-center w-full m-auto">
           <table class="table table-sm table-compact">
             <tbody>
+              <!--
               <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">CEO</td>
                 <td class="text-center sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{ceoName}</td>
                 <td class="text-start sm:text-end lg:border-b lg:border-[#27272A] bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Country</td>
                 <td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{country}</td>
               </tr>
+              -->
               <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Mkt Cap</td>
                 <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.marketCap,true)}</td>
diff --git a/src/lib/components/TopETFTickerHolder.svelte b/src/lib/components/TopETFTickerHolder.svelte
index acb7ce8b..970f7403 100644
--- a/src/lib/components/TopETFTickerHolder.svelte
+++ b/src/lib/components/TopETFTickerHolder.svelte
@@ -22,7 +22,7 @@
       
       <div class="space-y-3 sm:pt-5 hidden lg:block lg:{topETFHolder?.length !== 0 ? '' : 'hidden'}">  
       
-      <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px]">
+      <div class="sm:rounded-lg shadow-lg bg-[#000] sm:bg-[#09090B] sm:border sm:border-slate-800 h-auto {$screenWidth < 640 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
       
         <div class="w-auto lg:w-full p-1 flex flex-col m-auto pb-14 sm:pb-10 px-2 sm:px-0">
             <h2 class="text-start text-2xl font-semibold text-white p-3 mt-3 ml-1">
diff --git a/src/lib/components/TopHoldingCard.svelte b/src/lib/components/TopHoldingCard.svelte
index 3ad95bb3..c686fe2f 100644
--- a/src/lib/components/TopHoldingCard.svelte
+++ b/src/lib/components/TopHoldingCard.svelte
@@ -37,7 +37,7 @@ $: {
       
       <div class="space-y-3 lg:pt-5 lg:{topHoldingList?.length !== 0 ? '' : 'hidden'}">  
       
-      <div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px]">
+      <div class="sm:rounded-sm shadow-lg bg-[#000] lg:bg-[#09090B] lg:border lg:border-slate-800 h-auto {$screenWidth <= 800 ? 'w-screen pt-16' : ''} md:w-[420px] xl:w-[450px]">
       
         <div class="w-auto lg:w-full p-1 flex-1 flex flex-wrap pb-5">