added shadow to many components

diff --git a/frontend/src/lib/ALookBack.svelte b/frontend/src/lib/ALookBack.svelte
index 1b412fe34a1c1085f519cd7ea08ecc287eb30e13..9202d8ec483aae2429215aaced79b9d186315ca3 100644 (file)
--- 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 55dd4bb1b5e4346e04850e5212c092dbccc66f75..77601193c966ad6f32cd10012ce3fdf542d7aff0 100644 (file)
--- 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 cd52d4ae60e0a274b87a3826773f6b2cf6ef4a31..33de087f84a7dc05e611f2e8159305be31355a7a 100644 (file)
--- 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 fbe8045ad241fc3697626c78aa4d15c96ace80a6..877ecd358dafa2656f137e51d818ce0917f3a0fd 100644 (file)
--- 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 bab2d60cd881c26b4388080967c8c0b6c1889149..d69248c2e9b6354128fd789b808e1c9202493c30 100644 (file)
--- 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 607c86e76f37121a091080b92037d02018229c84..d26df27f50b2a1265c9c651432d9e56829356b16 100644 (file)
--- 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;