Lighten up shadows

src/app/components/Alerts.svelte

@@ -89,7 +89,7 @@
 </script>
 
 <div class="col-4">
-  <div class="card2 bg-alt flex flex-col gap-6 shadow-xl">
+  <div class="card2 bg-alt flex flex-col gap-6 shadow-md">
     <div class="flex items-center justify-between">
       <strong class="flex items-center gap-3">
         <Icon icon={Inbox} />
@@ -108,7 +108,7 @@
       {/each}
     </div>
   </div>
-  <div class="card2 bg-alt flex flex-col gap-4 shadow-xl">
+  <div class="card2 bg-alt flex flex-col gap-4 shadow-md">
     <div class="flex items-center justify-between">
       <strong class="flex items-center gap-3">
         <Icon icon={Bell} />

src/app/components/CalendarEventItem.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <Link
-  class="col-3 card2 bg-alt w-full cursor-pointer shadow-xl"
+  class="col-3 card2 bg-alt w-full cursor-pointer shadow-md"
   href={makeCalendarPath(url, event.id)}>
   <CalendarEventHeader {event} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">

src/app/components/ComposeMenu.svelte

@@ -31,7 +31,7 @@
   })
 </script>
 
-<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl" bind:this={ul}>
+<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-md" bind:this={ul}>
   <li>
     <Button onclick={createGoal}>
       <Icon size={4} icon={StarFallMinimalistic} />

src/app/components/EventMenu.svelte

@@ -54,7 +54,7 @@
   })
 </script>
 
-<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl" bind:this={ul}>
+<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-md" bind:this={ul}>
   {#if isRoot}
     <li>
       <Button onclick={share}>

src/app/components/GoalItem.svelte

@@ -20,7 +20,7 @@
   const h = getTagValue("h", event.tags)
 </script>
 
-<Link class="col-2 card2 bg-alt w-full cursor-pointer shadow-xl" href={makeGoalPath(url, event.id)}>
+<Link class="col-2 card2 bg-alt w-full cursor-pointer shadow-md" href={makeGoalPath(url, event.id)}>
   <p class="text-2xl">{event.content}</p>
   <Content
     event={{content: summary, tags: event.tags}}

src/app/components/MenuSpace.svelte

@@ -133,7 +133,7 @@
         <Popover hideOnClick onClose={toggleMenu}>
           <ul
             transition:fly
-            class="menu absolute z-popover mt-2 w-full gap-1 rounded-box bg-base-100 p-2 shadow-xl">
+            class="menu absolute z-popover mt-2 w-full gap-1 rounded-box bg-base-100 p-2 shadow-md">
             <li>
               <Button onclick={createInvite}>
                 <Icon icon={LinkRound} />

src/app/components/PeopleItem.svelte

@@ -18,7 +18,7 @@
   const openProfile = () => pushModal(ProfileDetail, {pubkey, url})
 </script>
 
-<div class="card2 bg-alt flex flex-col gap-4 shadow-xl">
+<div class="card2 bg-alt flex flex-col gap-4 shadow-md">
   <div class="flex justify-between">
     <Profile {pubkey} {url} />
     <Button onclick={openProfile} class="btn btn-primary hidden sm:flex">

src/app/components/RoomItemMenu.svelte

@@ -35,7 +35,7 @@
   }
 </script>
 
-<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
+<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-md">
   <li>
     <Button onclick={showInfo}>
       <Icon size={4} icon={Code2} />

src/app/components/ThreadItem.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <Link
-  class="col-2 card2 bg-alt w-full cursor-pointer shadow-xl"
+  class="col-2 card2 bg-alt w-full cursor-pointer shadow-md"
   href={makeThreadPath(url, event.id)}>
   {#if title}
     <div class="flex w-full items-center justify-between gap-2">

src/app/components/ThunkStatusDetail.svelte

@@ -23,7 +23,7 @@
   })
 </script>
 
-<div class="card2 bg-alt col-2 shadow-2xl">
+<div class="card2 bg-alt col-2 shadow-lg">
   <p>
     Failed to publish to {displayRelayUrl(url)}: {message}.
   </p>

src/lib/components/Dialog.svelte

@@ -14,7 +14,7 @@
   const extraClass = $derived(
     !fullscreen &&
       cx(
-        "bg-alt text-base-content overflow-auto text-base-content shadow-xl",
+        "bg-alt text-base-content overflow-auto text-base-content shadow-md",
         "px-4 py-6 bottom-0 left-0 right-0 top-20 rounded-t-box absolute",
         "sm:p-6 sm:max-h-[90vh] sm:w-[520px] sm:rounded-box sm:relative sm:top-0",
       ),

src/lib/components/PageBar.svelte

@@ -13,7 +13,7 @@
 
 <div data-component="PageBar" class="cw top-sai fixed z-feature p-2 {props.class}">
   <div
-    class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+    class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-md">
     <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
       {@render props.icon?.()}
       {@render props.title?.()}

src/routes/discover/+page.svelte

@@ -145,7 +145,7 @@
         {#if inviteData}
           {#key inviteData.url}
             <Button
-              class="card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:dark:brightness-[1.1]"
+              class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
               onclick={() => openSpace(inviteData.url, inviteData.claim)}>
               <RelaySummary url={inviteData.url} />
             </Button>
@@ -153,7 +153,7 @@
         {/if}
         {#each relaySearch.searchOptions(term).slice(0, limit) as relay (relay.url)}
           <Button
-            class="card2 bg-alt shadow-xl transition-all hover:shadow-2xl hover:dark:brightness-[1.1]"
+            class="card2 bg-alt shadow-md transition-all hover:shadow-lg hover:dark:brightness-[1.1]"
             onclick={() => openSpace(relay.url)}>
             <RelaySummary url={relay.url} />
           </Button>

src/routes/settings/about/+page.svelte

@@ -25,7 +25,7 @@
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
       <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
         {#if Capacitor.getPlatform() !== "ios"}
-          <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
+          <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-lg">
             <h3 class="text-2xl sm:h-12">Donate</h3>
             <p class="sm:h-16">Funds will be used to support development.</p>
             <Link external href="https://geyser.fund/project/flotilla" class="btn btn-primary">
@@ -33,7 +33,7 @@
             </Link>
           </div>
         {/if}
-        <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
+        <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-lg">
           <h3 class="text-2xl sm:h-12">Get in touch</h3>
           <p class="sm:h-16">Having problems? Let us know.</p>
           <Link

src/routes/settings/content/+page.svelte

@@ -48,7 +48,7 @@
 </script>
 
 <form class="content column gap-4" {onsubmit}>
-  <div class="card2 bg-alt col-4 shadow-xl">
+  <div class="card2 bg-alt col-4 shadow-md">
     <strong class="text-lg">Content Settings</strong>
     <FieldInline>
       {#snippet label()}

src/routes/settings/profile/+page.svelte

@@ -44,7 +44,7 @@
 </script>
 
 <div class="content column gap-4">
-  <div class="card2 bg-alt shadow-xl">
+  <div class="card2 bg-alt shadow-md">
     <div class="flex justify-between gap-2">
       <div class="flex max-w-full gap-3">
         <div class="py-1">
@@ -70,7 +70,7 @@
     {/key}
   </div>
   {#if $session?.email}
-    <div class="card2 bg-alt col-4 shadow-xl">
+    <div class="card2 bg-alt col-4 shadow-md">
       <FieldInline>
         {#snippet label()}
           <p>Email Address</p>
@@ -90,7 +90,7 @@
       </FieldInline>
     </div>
   {/if}
-  <div class="card2 bg-alt col-4 shadow-xl">
+  <div class="card2 bg-alt col-4 shadow-md">
     <FieldInline>
       {#snippet label()}
         <p class="flex items-center gap-3">
@@ -140,7 +140,7 @@
     {/if}
     <SignerStatus />
   </div>
-  <div class="card2 bg-alt shadow-xl">
+  <div class="card2 bg-alt shadow-md">
     <div class="flex items-center justify-between">
       <strong class="flex items-center gap-3">
         <Icon icon={Settings} />

src/routes/settings/relays/+page.svelte

@@ -50,7 +50,7 @@
 </script>
 
 <div class="content column gap-4">
-  <Collapse class="card2 bg-alt column gap-4 shadow-xl">
+  <Collapse class="card2 bg-alt column gap-4 shadow-md">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
         <Icon icon={Globus} />
@@ -83,7 +83,7 @@
       </Button>
     </div>
   </Collapse>
-  <Collapse class="card2 bg-alt column gap-4 shadow-xl">
+  <Collapse class="card2 bg-alt column gap-4 shadow-md">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
         <Icon icon={Inbox} />
@@ -115,7 +115,7 @@
       </Button>
     </div>
   </Collapse>
-  <Collapse class="card2 bg-alt column gap-4 shadow-xl">
+  <Collapse class="card2 bg-alt column gap-4 shadow-md">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
         <Icon icon={Mailbox} />

src/routes/settings/wallet/+page.svelte

@@ -30,7 +30,7 @@
 </script>
 
 <div class="content column gap-4">
-  <div class="card2 bg-alt flex flex-col gap-6 shadow-xl">
+  <div class="card2 bg-alt flex flex-col gap-6 shadow-md">
     <div class="flex items-center justify-between">
       <strong class="flex items-center gap-3">
         <Icon icon={Wallet2} />
@@ -100,7 +100,7 @@
     </div>
   </div>
   <div
-    class="card2 bg-alt flex flex-col shadow-xl"
+    class="card2 bg-alt flex flex-col shadow-md"
     class:gap-6={profileLightningAddress && walletLud16 && profile?.lud16 !== walletLud16}>
     <div class="flex items-center justify-between">
       <strong>Lightning Address</strong>