fix(Library): use separate placeholder image

src/components/Checkbox/Checkbox.less

@@ -42,7 +42,7 @@
         margin: 0 1rem 0 0.3rem;
         align-items: center;
         justify-content: center;
-        transition: all 0.2s ease-in-out;
+        transition: background-color 0.2s ease-in-out;
         cursor: pointer;
         outline: none;
         user-select: none;

src/components/MainNavBars/MainNavBars.less

@@ -29,8 +29,7 @@
 
     .nav-content-container {
         position: absolute;
-        padding-top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
+        top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
-        top: 0;
         right: 0;
         bottom: 0;
         left: var(--vertical-nav-bar-size);
@@ -43,7 +42,7 @@
     .main-nav-bars-container {
         .nav-content-container {
             left: 0;
-            padding-bottom: var(--vertical-nav-bar-size);
+            bottom: var(--vertical-nav-bar-size);
         }
 
         .vertical-nav-bar {

src/routes/Calendar/Placeholder/Placeholder.less

@@ -8,12 +8,11 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100%;
+    min-height: 100%;
     width: 100%;
     overflow-y: auto;
 
     .title {
-        flex: none;
         font-size: 1.75rem;
         font-weight: 400;
         text-align: center;
@@ -22,19 +21,22 @@
         opacity: 0.5;
     }
 
-    .image {
+    .image-container {
-        flex: none;
+        padding: 1.5rem 0;
-        height: 14rem;
+
-        margin: 1.5rem 0;
+        .image {
+            height: 100%;
+            max-height: 14rem;
+            object-fit: contain;
+        }
     }
 
     .overview {
-        flex: none;
         display: flex;
         flex-direction: row;
         align-items: center;
         gap: 4rem;
-        margin-bottom: 3rem;
+        margin-bottom: 1rem;
 
         .point {
             display: flex;
@@ -61,21 +63,47 @@
         }
     }
 
-    .button {
+    .button-container {
-        flex: none;
+        margin: 1rem 0;
-        justify-content: center;
+    
-        height: 4rem;
+        .button {
-        line-height: 4rem;
+            display: flex;
-        padding: 0 5rem;
+            justify-content: center;
-        font-size: 1.1rem;
+            height: 4rem;
-        color: var(--primary-foreground-color);
+            line-height: 4rem;
-        text-align: center;
+            padding: 0 5rem;
-        border-radius: 3.5rem;
+            font-size: 1.1rem;
-        background-color: var(--overlay-color);
+            color: var(--primary-foreground-color);
+            text-align: center;
+            border-radius: 3.5rem;
+            background-color: var(--overlay-color);
 
-        &:hover {
+            &:hover {
-            outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+                outline: var(--focus-outline-size) solid var(--primary-foreground-color);
-            background-color: transparent;
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @xsmall) {
+    .placeholder {
+        padding: 1rem 2rem;
+
+        .title {
+            margin-bottom: 0;
+        }
+
+        .image-container {
+            padding: 1rem;
+
+            .image {
+                max-height: 10rem;
+            }
+        }
+
+        .button-container {
+            margin: 1rem 0 0;
         }
     }
 }
@@ -84,16 +112,21 @@
     .placeholder {
         padding: 1rem 2rem;
 
-        .image {
-            height: 10rem;
-        }
-
         .overview {
             flex-direction: column;
+            gap: 1rem;
+
+            .point {
+                .text {
+                    font-size: 1rem;
+                }
+            }
         }
 
-        .button {
+        .button-container {
-            width: 100%;
+            .button {
+                width: 100%;
+            }
         }
     }
 }

src/routes/Calendar/Placeholder/Placeholder.tsx

@@ -14,11 +14,13 @@ const Placeholder = () => {
             <div className={styles['title']}>
                 {t('CALENDAR_NOT_LOGGED_IN')}
             </div>
-            <Image
+            <div className={styles['image-container']}>
-                className={styles['image']}
+                <Image
-                src={require('/images/media_carousel.png')}
+                    className={styles['image']}
-                alt={' '}
+                    src={require('/images/calendar_placeholder.png')}
-            />
+                    alt={' '}
+                />
+            </div>
             <div className={styles['overview']}>
                 <div className={styles['point']}>
                     <Icon className={styles['icon']} name={'megaphone'} />
@@ -33,9 +35,11 @@ const Placeholder = () => {
                     </div>
                 </div>
             </div>
-            <Button className={styles['button']} href={'#/intro?form=login'}>
+            <div className={styles['button-container']}>
-                {t('LOG_IN')}
+                <Button className={styles['button']} href={'#/intro?form=login'}>
-            </Button>
+                    {t('LOG_IN')}
+                </Button>
+            </div>
         </div>
     );
 };