From 580d17422bdbd2a73ee0c97d38e7c5cb66026841 Mon Sep 17 00:00:00 2001 From: Pushkar Anand Date: Sun, 23 May 2021 11:19:53 +0530 Subject: [PATCH] Empty Screen and sidebar design update. --- src/components/CloudUpload.tsx | 22 ++ src/components/PhotoFrame.tsx | 25 +- src/components/Sidebar.tsx | 258 +++++++++---------- src/pages/_app.tsx | 20 +- src/pages/gallery/components/Collections.tsx | 2 +- 5 files changed, 184 insertions(+), 143 deletions(-) create mode 100644 src/components/CloudUpload.tsx diff --git a/src/components/CloudUpload.tsx b/src/components/CloudUpload.tsx new file mode 100644 index 000000000..dc2915e3c --- /dev/null +++ b/src/components/CloudUpload.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +export default function CloudUpload(props) { + return ( + + + + + ); +} + +CloudUpload.defaultProps = { + height: 24, + width: 24, + viewBox: '0 0 24 24', +}; diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx index ac96b476e..c16edd277 100644 --- a/src/components/PhotoFrame.tsx +++ b/src/components/PhotoFrame.tsx @@ -10,6 +10,7 @@ import constants from 'utils/strings/constants'; import AutoSizer from 'react-virtualized-auto-sizer'; import { VariableSizeList as List } from 'react-window'; import PhotoSwipe from 'components/PhotoSwipe/PhotoSwipe'; +import CloudUpload from './CloudUpload'; const DATE_CONTAINER_HEIGHT = 45; const IMAGE_CONTAINER_HEIGHT = 200; @@ -70,6 +71,19 @@ const DateContainer = styled.div` padding-top: 15px; `; +const EmptyScreen = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + flex: 1; + color: #2dc262; + + & > svg { + filter: drop-shadow(3px 3px 5px rgba(45,194,98,0.5)); + } +`; + enum ITEM_TYPE { TIME = 'TIME', TILE = 'TILE', @@ -261,13 +275,8 @@ const PhotoFrame = ({ return ( <> {!isFirstLoad && files.length == 0 ? ( -
+ + -
+ ) : filteredData.length ? ( diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index a23192e43..0000a7c2f 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -104,7 +104,7 @@ export default function Sidebar(props: Props) { >
{user?.email}
-
-
-
- {constants.SUBSCRIPTION_PLAN} -
-
- { - - } +
+
+
+
+ {constants.SUBSCRIPTION_PLAN} +
-
-
- {isSubscriptionActive(subscription) ? ( - isOnFreePlan(subscription) ? ( - constants.FREE_SUBSCRIPTION_INFO( - subscription?.expiryTime - ) - ) : isSubscriptionCancelled(subscription) ? ( - constants.RENEWAL_CANCELLED_SUBSCRIPTION_INFO( - subscription?.expiryTime +
+ {isSubscriptionActive(subscription) ? ( + isOnFreePlan(subscription) ? ( + constants.FREE_SUBSCRIPTION_INFO( + subscription?.expiryTime + ) + ) : isSubscriptionCancelled(subscription) ? ( + constants.RENEWAL_CANCELLED_SUBSCRIPTION_INFO( + subscription?.expiryTime + ) + ) : ( + constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO( + subscription?.expiryTime + ) ) ) : ( - constants.RENEWAL_ACTIVE_SUBSCRIPTION_INFO( - subscription?.expiryTime - ) - ) - ) : ( -

{constants.SUBSCRIPTION_EXPIRED}

- )} +

{constants.SUBSCRIPTION_EXPIRED}

+ )} + +
-
-
-
-
- {constants.USAGE_DETAILS} -
-
- {usage ? ( - constants.USAGE_INFO( - usage, - Math.ceil( - Number(convertBytesToGBs(subscription?.storage)) +
+
+
+ {constants.USAGE_DETAILS} +
+
+ {usage ? ( + constants.USAGE_INFO( + usage, + Math.ceil( + Number(convertBytesToGBs(subscription?.storage)) + ) ) - ) - ) : ( -
- -
- )} + ) : ( +
+ +
+ )} +
-
-
- - {constants.REQUEST_FEATURE} - - - {constants.SUPPORT} - - <> - setRecoveryModalView(false)} - somethingWentWrong={() => - props.setDialogMessage({ - title: constants.RECOVER_KEY_GENERATION_FAILED, - close: { variant: 'danger' }, - }) - } - /> +
+ + {constants.REQUEST_FEATURE} + + + {constants.SUPPORT} + + <> + setRecoveryModalView(false)} + somethingWentWrong={() => + props.setDialogMessage({ + title: constants.RECOVER_KEY_GENERATION_FAILED, + close: { variant: 'danger' }, + }) + } + /> + setRecoveryModalView(true)} + > + {constants.DOWNLOAD_RECOVERY_KEY} + + setRecoveryModalView(true)} + onClick={() => { + setData(LS_KEYS.SHOW_BACK_BUTTON, { value: true }); + router.push('changePassword'); + }} > - {constants.DOWNLOAD_RECOVERY_KEY} + {constants.CHANGE_PASSWORD} - - { - setData(LS_KEYS.SHOW_BACK_BUTTON, { value: true }); - router.push('changePassword'); - }} - > - {constants.CHANGE_PASSWORD} - - - {constants.EXPORT} - -
- - props.setDialogMessage({ - title: `${constants.CONFIRM} ${constants.LOGOUT}`, - content: constants.LOGOUT_MESSAGE, - staticBackdrop: true, - proceed: { - text: constants.LOGOUT, - action: logoutUser, - variant: 'danger', - }, - close: { text: constants.CANCEL }, - }) - } - > - logout - -
+ + {constants.EXPORT} + +
+ + props.setDialogMessage({ + title: `${constants.CONFIRM} ${constants.LOGOUT}`, + content: constants.LOGOUT_MESSAGE, + staticBackdrop: true, + proceed: { + text: constants.LOGOUT, + action: logoutUser, + variant: 'danger', + }, + close: { text: constants.CANCEL }, + }) + } + > + logout + +
); } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 27e51497b..bc4aecaa2 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -195,13 +195,29 @@ const GlobalStyles = createGlobalStyle` } .bm-menu { background: #131313; - padding: 2.5em 1.5em 0; font-size: 1.15em; - color:#d1d1d1 + color:#d1d1d1; + display: flex; } .bm-cross { background: #d1d1d1; } + .bm-cross-button { + top: 20px; + } + .bm-item-list { + display: flex; + flex-direction: column; + max-height: 100%; + flex: 1; + } + .bm-item { + padding: 20px; + } + .bm-overlay { + top: 0; + background: rgba(0, 0, 0, 0.8) !important; + } .bg-upload-progress-bar { background-color: #2dc262; } diff --git a/src/pages/gallery/components/Collections.tsx b/src/pages/gallery/components/Collections.tsx index 2022e8bfe..18f46e2c3 100644 --- a/src/pages/gallery/components/Collections.tsx +++ b/src/pages/gallery/components/Collections.tsx @@ -109,7 +109,7 @@ export default function Collections(props: CollectionProps) { const user: User = getData(LS_KEYS.USER); if (!collections || collections.length === 0) { - return ; + return null; } const collectionOptions = CollectionOptions({