2022-09-18 14:32:54 +00:00
|
|
|
import styled, { css } from "styled-components";
|
2022-10-25 13:30:42 +00:00
|
|
|
import {
|
|
|
|
mobile,
|
|
|
|
tablet,
|
|
|
|
smallTablet,
|
|
|
|
desktop,
|
|
|
|
size,
|
|
|
|
hugeDesktop,
|
|
|
|
} from "../utils/device";
|
2021-08-30 13:24:16 +00:00
|
|
|
import NoUserSelect from "../utils/commonStyles";
|
2022-10-25 13:30:42 +00:00
|
|
|
import { isMobileOnly } from "react-device-detect";
|
2021-02-10 11:36:35 +00:00
|
|
|
|
2022-09-19 11:22:00 +00:00
|
|
|
const EmptyPageStyles = css`
|
2022-09-19 13:49:39 +00:00
|
|
|
grid-row-gap: 9px;
|
|
|
|
|
2022-09-18 14:32:54 +00:00
|
|
|
.ec-image {
|
2022-09-19 13:49:39 +00:00
|
|
|
height: 100px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ec-desc {
|
2022-09-21 13:16:04 +00:00
|
|
|
max-width: 348px;
|
2022-09-22 12:23:27 +00:00
|
|
|
line-height: 16px;
|
|
|
|
margin-top: 0;
|
2022-09-18 14:32:54 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.empty-folder_container-links {
|
2022-09-22 12:23:27 +00:00
|
|
|
align-items: start;
|
2022-09-19 13:49:39 +00:00
|
|
|
margin: 16px 0 !important;
|
2022-09-18 14:32:54 +00:00
|
|
|
}
|
|
|
|
|
2022-10-25 17:45:53 +00:00
|
|
|
max-width: 800px;
|
|
|
|
|
|
|
|
@media ${hugeDesktop} {
|
2022-10-26 12:16:41 +00:00
|
|
|
margin: 0 13%;
|
|
|
|
width: 74%;
|
|
|
|
min-width: 480px;
|
2022-10-25 17:45:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media ${tablet} {
|
2022-10-26 12:16:41 +00:00
|
|
|
max-width: 480px;
|
2022-10-25 17:45:53 +00:00
|
|
|
margin: 0 auto;
|
|
|
|
}
|
2022-09-18 14:32:54 +00:00
|
|
|
|
2022-10-25 17:45:53 +00:00
|
|
|
@media (max-width: 768px) {
|
2022-10-26 12:16:41 +00:00
|
|
|
${(props) =>
|
|
|
|
props.sectionWidth > size.smallTablet &&
|
|
|
|
css`
|
|
|
|
margin: 0 13% !important;
|
|
|
|
width: 74%;
|
|
|
|
min-width: auto;
|
|
|
|
`}
|
2022-10-25 17:45:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media ${smallTablet} {
|
2022-09-18 14:32:54 +00:00
|
|
|
.ec-header {
|
2022-09-19 13:49:39 +00:00
|
|
|
padding-top: 22px;
|
2022-09-18 14:32:54 +00:00
|
|
|
}
|
2022-09-21 13:16:04 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media ${desktop} {
|
|
|
|
.ec-desc {
|
|
|
|
max-width: 618px;
|
|
|
|
}
|
2022-09-22 12:23:27 +00:00
|
|
|
|
|
|
|
.ec-buttons {
|
|
|
|
max-width: none;
|
|
|
|
}
|
2022-09-18 14:32:54 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2022-10-25 13:30:42 +00:00
|
|
|
const MobileView = css`
|
|
|
|
grid-template-areas:
|
|
|
|
"img img img"
|
|
|
|
"headerText headerText headerText"
|
|
|
|
${(props) =>
|
|
|
|
props.subheadingText && `"subheadingText subheadingText subheadingText"`}
|
|
|
|
${(props) =>
|
|
|
|
props.descriptionText &&
|
|
|
|
`"descriptionText descriptionText descriptionText"`}
|
|
|
|
"button button button";
|
|
|
|
|
|
|
|
.ec-header {
|
2022-10-25 17:45:53 +00:00
|
|
|
padding-top: 0px;
|
2022-10-25 13:30:42 +00:00
|
|
|
}
|
|
|
|
.ec-header,
|
|
|
|
.ec-subheading,
|
|
|
|
.ec-desc,
|
|
|
|
.ec-image,
|
|
|
|
.ec-buttons {
|
|
|
|
padding-left: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ec-image {
|
2022-10-25 17:45:53 +00:00
|
|
|
height: 75px;
|
2022-10-25 13:30:42 +00:00
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2021-02-10 11:36:35 +00:00
|
|
|
const EmptyContentBody = styled.div`
|
|
|
|
margin: 0 auto;
|
2022-10-25 17:45:53 +00:00
|
|
|
|
|
|
|
padding: ${(props) => (props.isEmptyFolderContainer ? "37px 0" : "64px 0")};
|
2021-11-02 13:14:53 +00:00
|
|
|
grid-template-columns: 150px 1fr;
|
2021-02-10 11:36:35 +00:00
|
|
|
|
|
|
|
display: grid;
|
|
|
|
grid-template-areas:
|
|
|
|
"img headerText"
|
|
|
|
${(props) => props.subheadingText && `"img subheadingText"`}
|
|
|
|
${(props) => props.descriptionText && `"img descriptionText"`}
|
|
|
|
"img button";
|
|
|
|
|
|
|
|
grid-column-gap: 16px;
|
|
|
|
grid-row-gap: 10px;
|
|
|
|
max-width: 800px;
|
2022-10-04 06:28:15 +00:00
|
|
|
|
2021-02-10 11:36:35 +00:00
|
|
|
grid-template-rows: max-content;
|
|
|
|
.ec-image {
|
|
|
|
grid-area: img;
|
2022-05-06 14:39:10 +00:00
|
|
|
margin: 16px 0 0 auto;
|
2021-08-30 13:24:16 +00:00
|
|
|
${NoUserSelect}
|
2021-02-10 11:36:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.ec-header {
|
|
|
|
grid-area: headerText;
|
2022-10-25 13:30:42 +00:00
|
|
|
font-size: 16px;
|
2021-02-10 11:36:35 +00:00
|
|
|
padding-top: 16px;
|
2022-12-08 06:43:18 +00:00
|
|
|
|
|
|
|
color: ${(props) => props.theme.emptyContent.header.color};
|
|
|
|
|
2021-02-10 11:36:35 +00:00
|
|
|
@media (max-width: 375px) {
|
|
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ec-subheading {
|
|
|
|
grid-area: subheadingText;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ec-desc {
|
|
|
|
grid-area: descriptionText;
|
|
|
|
line-height: 18px;
|
|
|
|
margin-top: 2px;
|
2022-12-07 12:32:52 +00:00
|
|
|
|
|
|
|
color: ${(props) => props.theme.emptyContent.description.color};
|
2021-02-10 11:36:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.ec-buttons {
|
|
|
|
grid-area: button;
|
2022-12-08 06:43:18 +00:00
|
|
|
svg {
|
|
|
|
path {
|
|
|
|
fill: ${(props) => props.theme.emptyContent.button.colorLink};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: ${(props) => props.theme.emptyContent.button.colorLink};
|
|
|
|
}
|
|
|
|
span {
|
|
|
|
color: ${(props) => props.theme.emptyContent.button.colorText};
|
|
|
|
}
|
2022-09-18 14:32:54 +00:00
|
|
|
}
|
|
|
|
|
2022-10-25 13:30:42 +00:00
|
|
|
@media ${tablet} {
|
|
|
|
grid-template-columns: none;
|
|
|
|
max-width: 480px;
|
|
|
|
}
|
|
|
|
|
2021-02-10 11:36:35 +00:00
|
|
|
@media (orientation: portrait) {
|
|
|
|
@media (max-width: 768px) {
|
2022-10-25 17:45:53 +00:00
|
|
|
padding-top: ${(props) => !props.isEmptyFolderContainer && "0px"};
|
2021-02-10 11:36:35 +00:00
|
|
|
|
|
|
|
.ec-image {
|
|
|
|
max-height: 100px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-26 09:37:28 +00:00
|
|
|
@media (max-width: 428px) {
|
2022-10-25 13:30:42 +00:00
|
|
|
${MobileView}
|
|
|
|
}
|
|
|
|
}
|
2021-02-10 11:36:35 +00:00
|
|
|
|
2022-10-25 13:30:42 +00:00
|
|
|
${(props) =>
|
|
|
|
(props.isEmptyPage || props.isEmptyFolderContainer) && `${EmptyPageStyles}`}
|
|
|
|
|
|
|
|
${(props) =>
|
2022-10-25 17:45:53 +00:00
|
|
|
(props.isEmptyPage || props.isEmptyFolderContainer) &&
|
2022-10-25 13:30:42 +00:00
|
|
|
props.sectionWidth <= size.smallTablet &&
|
|
|
|
!isMobileOnly &&
|
|
|
|
css`
|
|
|
|
${MobileView}
|
|
|
|
|
|
|
|
.ec-desc {
|
|
|
|
max-width: none;
|
2021-02-10 11:36:35 +00:00
|
|
|
}
|
|
|
|
|
2022-10-25 13:30:42 +00:00
|
|
|
.ec-header {
|
|
|
|
padding-top: 22px;
|
2021-02-10 11:36:35 +00:00
|
|
|
}
|
2022-09-18 14:32:54 +00:00
|
|
|
|
2022-10-25 17:45:53 +00:00
|
|
|
.ec-image {
|
|
|
|
height: 100px !important;
|
|
|
|
}
|
2022-10-25 13:30:42 +00:00
|
|
|
`}
|
2022-10-25 17:45:53 +00:00
|
|
|
|
|
|
|
${(props) =>
|
2022-10-26 12:16:41 +00:00
|
|
|
(props.isEmptyPage || props.isEmptyFolderContainer) &&
|
2022-10-25 17:45:53 +00:00
|
|
|
isMobileOnly &&
|
|
|
|
css`
|
|
|
|
.ec-image {
|
2022-10-26 12:16:41 +00:00
|
|
|
margin-top: ${(props) => props.isEmptyFolderContainer && "0px"};
|
|
|
|
height: ${(props) => props.isEmptyPage && "72px !important"};
|
2022-10-25 17:45:53 +00:00
|
|
|
}
|
|
|
|
`}
|
|
|
|
|
2022-10-26 12:16:41 +00:00
|
|
|
|
2022-10-25 17:45:53 +00:00
|
|
|
${(props) =>
|
2022-10-26 12:16:41 +00:00
|
|
|
(props.isEmptyPage || props.isEmptyFolderContainer) &&
|
|
|
|
props.sectionWidth <= size.smallTablet &&
|
2022-10-25 17:45:53 +00:00
|
|
|
css`
|
2022-10-26 12:16:41 +00:00
|
|
|
max-width: none !important;
|
|
|
|
width: auto !important;
|
|
|
|
min-width: auto !important;
|
|
|
|
margin: 0 !important;
|
2022-10-25 17:45:53 +00:00
|
|
|
`}
|
2021-02-10 11:36:35 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const EmptyContentImage = styled.img.attrs((props) => ({
|
|
|
|
src: props.imageSrc,
|
|
|
|
alt: props.imageAlt,
|
|
|
|
}))`
|
|
|
|
background: no-repeat 0 0 transparent;
|
|
|
|
`;
|
|
|
|
|
|
|
|
export { EmptyContentBody, EmptyContentImage };
|