feat(Calendar): add auth placeholder

src/routes/Calendar/Calendar.tsx

@@ -6,6 +6,7 @@ import useCalendar from './useCalendar';
 import useSelectableInputs from './useSelectableInputs';
 import Table from './Table/Table';
 import List from './List/List';
+import Placeholder from './Placeholder/Placeholder';
 import styles from './Calendar.less';
 
 type Props = {
@@ -22,29 +23,34 @@ const Calendar = ({ urlParams }: Props) => {
 
     return (
         <MainNavBars className={styles['calendar']} route={'calendar'}>
-            <div className={styles['content']}>
+            {
-                <div className={styles['main']}>
+                profile.auth !== null ?
-                    <div className={styles['inputs']}>
+                    <div className={styles['content']}>
-                        {
+                        <div className={styles['main']}>
-                            paginationInput !== null ?
+                            <div className={styles['inputs']}>
-                                <PaginationInput {...paginationInput} className={styles['pagination-input']} />
+                                {
-                                :
+                                    paginationInput !== null ?
-                                null
+                                        <PaginationInput {...paginationInput} className={styles['pagination-input']} />
-                        }
+                                        :
+                                        null
+                                }
+                            </div>
+                            <Table
+                                items={calendar.items}
+                                monthInfo={calendar.monthInfo}
+                                onChange={setSelected}
+                            />
+                        </div>
+                        <List
+                            items={calendar.items}
+                            monthInfo={calendar.monthInfo}
+                            profile={profile}
+                            onChange={setSelected}
+                        />
                     </div>
-                    <Table
+                    :
-                        items={calendar.items}
+                    <Placeholder />
-                        monthInfo={calendar.monthInfo}
+            }
-                        onChange={setSelected}
-                    />
-                </div>
-                <List
-                    items={calendar.items}
-                    monthInfo={calendar.monthInfo}
-                    profile={profile}
-                    onChange={setSelected}
-                />
-            </div>
         </MainNavBars>
     );
 };

src/routes/Calendar/Placeholder/Placeholder.less

@@ -0,0 +1,90 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+.placeholder {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+
+    .title {
+        flex: none;
+        font-size: 1.75rem;
+        font-weight: 400;
+        text-align: center;
+        color: var(--primary-foreground-color);
+        margin-bottom: 1rem;
+        opacity: 0.5;
+    }
+
+    .image {
+        flex: none;
+        height: 14rem;
+        margin: 1.5rem 0;
+    }
+
+    .overview {
+        flex: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4rem;
+        margin-bottom: 3rem;
+
+        .point {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 1.5rem;
+            width: 18rem;
+
+            .icon {
+                flex: none;
+                height: 3.25rem;
+                width: 3.25rem;
+                color: var(--primary-foreground-color);
+                opacity: 0.3;
+            }
+
+            .text {
+                flex: auto;
+                font-size: 1.1rem;
+                font-size: 500;
+                color: var(--primary-foreground-color);
+                opacity: 0.9;
+            }
+        }
+    }
+
+    .button {
+        flex: none;
+        justify-content: center;
+        height: 4rem;
+        line-height: 4rem;
+        padding: 0 5rem;
+        font-size: 1.1rem;
+        color: var(--primary-foreground-color);
+        border-radius: 3.5rem;
+        background-color: var(--overlay-color);
+
+        &:hover {
+            outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+            background-color: transparent;
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .placeholder {
+        padding: 1rem;
+
+        .overview {
+            flex-direction: column;
+        }
+    }
+}

src/routes/Calendar/Placeholder/Placeholder.tsx

@@ -0,0 +1,43 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Icon from '@stremio/stremio-icons/react';
+import { Button, Image } from 'stremio/common';
+import styles from './Placeholder.less';
+
+const Placeholder = () => {
+    const { t } = useTranslation();
+
+    return (
+        <div className={styles['placeholder']}>
+            <div className={styles['title']}>
+                {t('CALENDAR_NOT_LOGGED_IN')}
+            </div>
+            <Image
+                className={styles['image']}
+                src={require('/images/calendar_placeholder.png')}
+                alt={' '}
+            />
+            <div className={styles['overview']}>
+                <div className={styles['point']}>
+                    <Icon className={styles['icon']} name={'megaphone'} />
+                    <div className={styles['text']}>
+                        {t('NOT_LOGGED_IN_NOTIFICATIONS')}
+                    </div>
+                </div>
+                <div className={styles['point']}>
+                    <Icon className={styles['icon']} name={'calendar-thin'} />
+                    <div className={styles['text']}>
+                        {t('NOT_LOGGED_IN_CALENDAR')}
+                    </div>
+                </div>
+            </div>
+            <Button className={styles['button']} href={'#/intro'}>
+                {t('LOG_IN')}
+            </Button>
+        </div>
+    );
+};
+
+export default Placeholder;