diff --git a/packages/client/src/components/EmptyContainer/EmptyContainer.js b/packages/client/src/components/EmptyContainer/EmptyContainer.js index 277b8a9fd9..6fb8fd5fc3 100644 --- a/packages/client/src/components/EmptyContainer/EmptyContainer.js +++ b/packages/client/src/components/EmptyContainer/EmptyContainer.js @@ -111,19 +111,15 @@ const EmptyFolderWrapper = styled.div` padding: 20px 42px 64px 11px !important; `} - - - ${(props) => (props.isEmptyPage || props.isEmptyFolderContainer) && + props.sectionWidth <= size.smallTablet && !isMobileOnly && css` - @container section-container (width <= ${size.smallTablet}px) { - padding-left: 12px !important; + padding-left: 12px !important; - .empty-folder_link { - margin-bottom: 0 !important; - } + .empty-folder_link { + margin-bottom: 0 !important; } `} } @@ -145,17 +141,19 @@ const EmptyFoldersContainer = (props) => { imageStyle, buttonStyle, isEmptyPage, - + sectionWidth, isEmptyFolderContainer, className, } = props; return ( ); diff --git a/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js b/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js index 5b734145f6..bbfd5999a9 100644 --- a/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js +++ b/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js @@ -23,7 +23,7 @@ const RoomNoAccessContainer = (props) => { setAlreadyFetchingRooms, categoryType, isEmptyPage, - + sectionWidth, theme, } = props; @@ -88,6 +88,7 @@ const RoomNoAccessContainer = (props) => { return ( { setIsEmptyPage, isVisitor, isCollaborator, - + sectionWidth, setIsLoadedEmptyPage, security, } = props; @@ -369,6 +369,7 @@ const RootFolderContainer = (props) => { @@ -377,8 +378,12 @@ const RootFolderContainer = (props) => { export default inject( ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => { - const { isDesktopClient, isEncryptionSupport, organizationName, theme } = - auth.settingsStore; + const { + isDesktopClient, + isEncryptionSupport, + organizationName, + theme, + } = auth.settingsStore; const { filter, diff --git a/packages/client/src/components/EmptyContainer/index.js b/packages/client/src/components/EmptyContainer/index.js index 0c410d5bcd..a09706db88 100644 --- a/packages/client/src/components/EmptyContainer/index.js +++ b/packages/client/src/components/EmptyContainer/index.js @@ -21,7 +21,7 @@ const EmptyContainer = ({ parentId, theme, setCreateRoomDialogVisible, - + sectionWidth, isRoomNotFoundOrMoved, isGracePeriod, setInviteUsersWarningDialogVisible, @@ -53,7 +53,12 @@ const EmptyContainer = ({ }; if (isRoomNotFoundOrMoved) { - return ; + return ( + + ); } return isFiltered ? ( @@ -63,9 +68,14 @@ const EmptyContainer = ({ onCreate={onCreate} linkStyles={linkStyles} onCreateRoom={onCreateRoom} + sectionWidth={sectionWidth} /> ) : ( - + ); }; @@ -79,8 +89,13 @@ export default inject( }) => { const { filter, roomsFilter, isErrorRoomNotAvailable } = filesStore; - const { authorType, search, withSubfolders, filterType, searchInContent } = - filter; + const { + authorType, + search, + withSubfolders, + filterType, + searchInContent, + } = filter; const { subjectId, filterValue, @@ -91,15 +106,20 @@ export default inject( withoutTags, } = roomsFilter; - const { isPrivacyFolder, isRoomsFolder, isArchiveFolder } = - treeFoldersStore; + const { + isPrivacyFolder, + isRoomsFolder, + isArchiveFolder, + } = treeFoldersStore; const { isGracePeriod } = auth.currentTariffStatusStore; const isRooms = isRoomsFolder || isArchiveFolder; - const { setCreateRoomDialogVisible, setInviteUsersWarningDialogVisible } = - dialogsStore; + const { + setCreateRoomDialogVisible, + setInviteUsersWarningDialogVisible, + } = dialogsStore; const isFiltered = isRooms ? filterValue || diff --git a/packages/client/src/pages/Home/Section/Body/index.js b/packages/client/src/pages/Home/Section/Body/index.js index 1b4985ec4b..079428c7fe 100644 --- a/packages/client/src/pages/Home/Section/Body/index.js +++ b/packages/client/src/pages/Home/Section/Body/index.js @@ -253,7 +253,7 @@ const SectionBodyContent = (props) => { {(context) => isEmptyFilesList || null ? ( <> - + ) : viewAs === "tile" ? ( <> diff --git a/packages/components/empty-screen-container/styled-empty-screen-container.js b/packages/components/empty-screen-container/styled-empty-screen-container.js index 2b5a716871..150b98157a 100644 --- a/packages/components/empty-screen-container/styled-empty-screen-container.js +++ b/packages/components/empty-screen-container/styled-empty-screen-container.js @@ -45,11 +45,9 @@ const EmptyPageStyles = css` ${(props) => props.sectionWidth > size.smallTablet && css` - @container section-container (width > ${size.smallTablet}px) { - margin: 0 13% !important; - width: 74%; - min-width: auto; - } + margin: 0 13% !important; + width: 74%; + min-width: auto; `} } @@ -186,22 +184,21 @@ const EmptyContentBody = styled.div` ${(props) => (props.isEmptyPage || props.isEmptyFolderContainer) && + props.sectionWidth <= size.smallTablet && !isMobileOnly && css` - @container section-container (width <= ${size.smallTablet}px) { - ${MobileView} + ${MobileView} - .ec-desc { - max-width: none; - } + .ec-desc { + max-width: none; + } - .ec-header { - padding-top: 22px; - } + .ec-header { + padding-top: 22px; + } - .ec-image { - height: 100px !important; - } + .ec-image { + height: 100px !important; } `} @@ -218,13 +215,12 @@ const EmptyContentBody = styled.div` ${(props) => (props.isEmptyPage || props.isEmptyFolderContainer) && + props.sectionWidth <= size.smallTablet && css` - @container section-container (width <= ${size.smallTablet}px) { - max-width: none !important; - width: auto !important; - min-width: auto !important; - margin: 0 !important; - } + max-width: none !important; + width: auto !important; + min-width: auto !important; + margin: 0 !important; `} `;