From: PhiTux <redacted>
Date: Sat, 11 Oct 2025 14:30:36 +0000 (+0200)
Subject: added shadow to many components
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=ba78c5ce1f48778cfcc039105c0cb80ae4a84b3f;p=DailyTxT.git

added shadow to many components
---

diff --git a/frontend/src/lib/ALookBack.svelte b/frontend/src/lib/ALookBack.svelte
index 1b412fe..9202d8e 100644
--- a/frontend/src/lib/ALookBack.svelte
+++ b/frontend/src/lib/ALookBack.svelte
@@ -42,7 +42,7 @@
 </script>
 
 <!-- svelte-ignore a11y_consider_explicit_label -->
-<button onclick={openModal} id="zoomButton" class="btn" style="height:100px;">
+<button onclick={openModal} id="zoomButton" class="btn glass-shadow" style="height:100px;">
 	<div class="d-flex flex-row h-100" style="width: 200px;">
 		<div class="left d-flex flex-column justify-content-evenly px-1">
 			<div><b>{log?.year}</b></div>
diff --git a/frontend/src/lib/Datepicker.svelte b/frontend/src/lib/Datepicker.svelte
index 55dd4bb..7760119 100644
--- a/frontend/src/lib/Datepicker.svelte
+++ b/frontend/src/lib/Datepicker.svelte
@@ -199,7 +199,7 @@
 	}
 </script>
 
-<div class="datepicker glass">
+<div class="datepicker glass glass-shadow">
 	<div class="datepicker-header">
 		<button type="button" class="btn btnLeftRight" onclick={() => changeMonth(-1)}>&lt;</button>
 		<div class="date-selectors">
@@ -340,7 +340,7 @@
 	.datepicker {
 		display: inline-block;
 		font-family: Arial, sans-serif;
-		border-radius: 8px;
+		border-radius: 10px;
 		box-sizing: border-box;
 	}
 	.datepicker-header {
@@ -350,8 +350,8 @@
 		color: white;
 		padding: 8px 16px;
 		font-size: 16px;
-		border-top-left-radius: 8px;
-		border-top-right-radius: 8px;
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
 	}
 	.calendar-container {
 		position: relative;
diff --git a/frontend/src/lib/Sidenav.svelte b/frontend/src/lib/Sidenav.svelte
index cd52d4a..33de087 100644
--- a/frontend/src/lib/Sidenav.svelte
+++ b/frontend/src/lib/Sidenav.svelte
@@ -276,7 +276,7 @@
 	<Datepicker {bookmarkDay} />
 	<br />
 
-	<div class="search d-flex flex-column">
+	<div class="search d-flex flex-column glass-shadow mb-2">
 		<form onsubmit={searchForString} class="input-group">
 			<button
 				class="btnSearchPopover btn btn-outline-secondary glass"
@@ -370,7 +370,7 @@
 				</div>
 			{/if}
 		{/if}
-		<div class="list-group flex-grow-1 mb-2 glass">
+		<div class="list-group flex-grow-1 glass">
 			{#if $searchResults.length > 0}
 				{#each $searchResults as result}
 					<button
@@ -458,6 +458,7 @@
 
 	.btnSearchPopover {
 		border-bottom-left-radius: 0px;
+		border-top-left-radius: 10px;
 	}
 
 	:global(.datepicker) {
@@ -580,19 +581,23 @@
 
 	#search-button {
 		border-bottom-right-radius: 0;
+		border-top-right-radius: 10px;
 	}
 
 	/* Dynamic search results panel: fill remaining space, but never below 250px */
 	.search {
 		flex: 1 1 auto; /* allow search area to grow */
-		min-height: 0; /* allow inner flex children to compute height */
+		/* min-height: 0; */ /* allow inner flex children to compute height */
 		display: flex;
 		flex-direction: column;
+		border-radius: 10px;
 	}
 
 	.list-group {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
+		border-bottom-left-radius: 10px;
+		border-bottom-right-radius: 10px;
 		overflow-y: auto;
 		min-height: 250px; /* minimum requirement */
 		flex: 1 1 auto; /* take all remaining vertical space */
diff --git a/frontend/src/routes/(authed)/read/+page.svelte b/frontend/src/routes/(authed)/read/+page.svelte
index fbe8045..877ecd3 100644
--- a/frontend/src/routes/(authed)/read/+page.svelte
+++ b/frontend/src/routes/(authed)/read/+page.svelte
@@ -460,7 +460,7 @@
 	{/if}
 
 	<!-- Center -->
-	<div class="d-flex flex-column my-4 ms-4 flex-fill overflow-y-auto" id="scrollArea">
+	<div class="d-flex flex-column my-4 flex-fill overflow-y-auto" id="scrollArea">
 		{#if logs.length > 0}
 			{#each logs as log (log.day)}
 				<!-- Log-Area -->
@@ -609,6 +609,16 @@
 
 	.log {
 		border-radius: 15px;
+		margin-left: 1rem;
+		margin-right: 1rem;
+	}
+
+	:global(body[data-bs-theme='dark']) .log {
+		box-shadow: 3px 3px 8px 4px rgba(0, 0, 0, 0.3);
+	}
+
+	:global(body[data-bs-theme='light']) .log {
+		box-shadow: 3px 3px 8px 4px rgba(0, 0, 0, 0.2);
 	}
 
 	:global(body[data-bs-theme='dark']) .glass {
diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index bab2d60..d69248c 100644
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -1361,78 +1361,83 @@
 		<!-- Center -->
 		<div class="d-flex flex-column pt-4 px-4 flex-grow-1" id="middle">
 			<!-- Input-Area -->
-			<div
-				class="d-flex flex-row textAreaHeader glass"
-				ontouchstart={onHeaderTouchStart}
-				ontouchend={onHeaderTouchEnd}
-			>
-				<div class="flex-fill d-flex">
-					<div class="w-50 textAreaDate">
-						{new Date(
-							Date.UTC($selectedDate.year, $selectedDate.month - 1, $selectedDate.day)
-						).toLocaleDateString($tolgee.getLanguage(), { weekday: 'long', timeZone: 'UTC' })}<br />
-						{new Date(
-							Date.UTC($selectedDate.year, $selectedDate.month - 1, $selectedDate.day)
-						).toLocaleDateString($tolgee.getLanguage(), {
-							day: '2-digit',
-							month: '2-digit',
-							year: 'numeric',
-							timeZone: 'UTC'
-						})}
-					</div>
-					<div class="w-50 textAreaWrittenAt">
-						<div class={logDateWritten ? '' : 'opacity-50'}>{$t('log.written_on')}</div>
-						{logDateWritten}
-					</div>
-				</div>
-				<!-- Desktop buttons -->
+			<div class="glass-shadow input-area">
 				<div
-					class="textAreaHistory header-btn-desktop d-flex flex-column justify-content-center {historyAvailable
-						? ''
-						: 'invisible'}"
+					class="d-flex flex-row textAreaHeader glass"
+					ontouchstart={onHeaderTouchStart}
+					ontouchend={onHeaderTouchEnd}
 				>
-					<button class="btn px-0 btn-hover" onclick={() => getHistory()}>
-						<Fa icon={faClockRotateLeft} size="1.5x" fw />
-					</button>
-				</div>
-				<div class="textAreaDelete header-btn-desktop d-flex flex-column justify-content-center">
-					<button class="btn px-0 btn-hover" onclick={() => showDeleteDayModal()}>
-						<Fa icon={faTrash} size="1.5x" fw />
-					</button>
-				</div>
-				<!-- Mobile dropdown -->
-				<div class="dropdown header-actions-mobile d-flex flex-column justify-content-center ms-1">
-					<button
-						class="btn px-2 btn-hover"
-						type="button"
-						data-bs-toggle="dropdown"
-						aria-expanded="false"
+					<div class="flex-fill d-flex">
+						<div class="w-50 textAreaDate">
+							{new Date(
+								Date.UTC($selectedDate.year, $selectedDate.month - 1, $selectedDate.day)
+							).toLocaleDateString($tolgee.getLanguage(), { weekday: 'long', timeZone: 'UTC' })}<br
+							/>
+							{new Date(
+								Date.UTC($selectedDate.year, $selectedDate.month - 1, $selectedDate.day)
+							).toLocaleDateString($tolgee.getLanguage(), {
+								day: '2-digit',
+								month: '2-digit',
+								year: 'numeric',
+								timeZone: 'UTC'
+							})}
+						</div>
+						<div class="w-50 textAreaWrittenAt">
+							<div class={logDateWritten ? '' : 'opacity-50'}>{$t('log.written_on')}</div>
+							{logDateWritten}
+						</div>
+					</div>
+					<!-- Desktop buttons -->
+					<div
+						class="textAreaHistory header-btn-desktop d-flex flex-column justify-content-center {historyAvailable
+							? ''
+							: 'invisible'}"
 					>
-						<Fa icon={faBars} fw />
-					</button>
-					<ul class="dropdown-menu dropdown-menu-end">
-						{#if historyAvailable}
+						<button class="btn px-0 btn-hover" onclick={() => getHistory()}>
+							<Fa icon={faClockRotateLeft} size="1.5x" fw />
+						</button>
+					</div>
+					<div class="textAreaDelete header-btn-desktop d-flex flex-column justify-content-center">
+						<button class="btn px-0 btn-hover" onclick={() => showDeleteDayModal()}>
+							<Fa icon={faTrash} size="1.5x" fw />
+						</button>
+					</div>
+					<!-- Mobile dropdown -->
+					<div
+						class="dropdown header-actions-mobile d-flex flex-column justify-content-center ms-1"
+					>
+						<button
+							class="btn px-2 btn-hover"
+							type="button"
+							data-bs-toggle="dropdown"
+							aria-expanded="false"
+						>
+							<Fa icon={faBars} fw />
+						</button>
+						<ul class="dropdown-menu dropdown-menu-end">
+							{#if historyAvailable}
+								<li>
+									<button type="button" class="dropdown-item" onclick={() => getHistory()}>
+										<Fa icon={faClockRotateLeft} class="me-2" />{$t('log.dropdown.history')}
+									</button>
+								</li>
+							{/if}
 							<li>
-								<button type="button" class="dropdown-item" onclick={() => getHistory()}>
-									<Fa icon={faClockRotateLeft} class="me-2" />{$t('log.dropdown.history')}
+								<button
+									type="button"
+									class="dropdown-item text-danger"
+									onclick={() => showDeleteDayModal()}
+								>
+									<Fa icon={faTrash} class="me-2" />{$t('log.dropdown.deleteDay')}
 								</button>
 							</li>
-						{/if}
-						<li>
-							<button
-								type="button"
-								class="dropdown-item text-danger"
-								onclick={() => showDeleteDayModal()}
-							>
-								<Fa icon={faTrash} class="me-2" />{$t('log.dropdown.deleteDay')}
-							</button>
-						</li>
-					</ul>
+						</ul>
+					</div>
+				</div>
+				<div id="log" class="focus-ring">
+					<div id="toolbar"></div>
+					<div id="editor"></div>
 				</div>
-			</div>
-			<div id="log" class="focus-ring">
-				<div id="toolbar"></div>
-				<div id="editor"></div>
 			</div>
 			{#if images.length > 0}
 				{#if !autoLoadImages && images.find((image) => !image.src && !image.loading)}
@@ -1451,7 +1456,7 @@
 			{/if}
 
 			{#if $settings.useALookBack && aLookBack.length > 0}
-				<div class="mt-3 d-flex gap-2 overflow-x-auto mb-2 a-look-back">
+				<div class="mt-3 d-flex gap-3 overflow-x-auto mb-2 a-look-back">
 					{#each aLookBack as log}
 						<ALookBack {log} />
 					{/each}
@@ -1460,7 +1465,7 @@
 		</div>
 
 		<div id="right" class="d-flex flex-column">
-			<div class="tags glass">
+			<div class="tags glass glass-shadow">
 				<div class="d-flex flex-row justify-content-between">
 					<div class="d-flex flex-row">
 						<h3>{$t('tags.tags')}</h3>
@@ -1574,7 +1579,7 @@
 				</div>
 			</div>
 
-			<div class="files d-flex flex-column glass">
+			<div class="files d-flex flex-column glass glass-shadow">
 				<button
 					class="btn btn-secondary upload-btn {filesOfDay?.length > 0 ? '' : ''}"
 					id="uploadBtn"
@@ -2051,6 +2056,10 @@
 </div>
 
 <style>
+	.input-area {
+		border-radius: 10px;
+	}
+
 	@media screen and (max-width: 567px) {
 		:global(em-emoji-picker) {
 			right: 0;
@@ -2352,8 +2361,8 @@
 	:global(.TinyMDE) {
 		border: 1px solid lightgreen;
 
-		border-bottom-left-radius: 8px;
-		border-bottom-right-radius: 8px;
+		border-bottom-left-radius: 10px;
+		border-bottom-right-radius: 10px;
 		overflow-y: auto;
 
 		transition: all ease 0.2s;
@@ -2380,8 +2389,8 @@
 		border-left: 1px solid #6a6a6a;
 		border-top: 1px solid #6a6a6a;
 		border-right: 1px solid #6a6a6a;
-		border-top-left-radius: 5px;
-		border-top-right-radius: 5px;
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
 	}
 
 	.header-actions-mobile {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 607c86e..d26df27 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -350,6 +350,10 @@
 </main>
 
 <style>
+	:global(.glass-shadow) {
+		box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.2);
+	}
+
 	.toastBtn {
 		background-color: #f57c00 !important;
 		color: black !important;