updated the alert banner
This commit is contained in:
parent
a1d5e75447
commit
1f62d7ba53
|
@ -55,3 +55,9 @@ export const Value = styled.div<{ width?: string }>`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const FlexWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
`;
|
||||||
|
|
27
src/components/icons/WarningIcon.tsx
Normal file
27
src/components/icons/WarningIcon.tsx
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function WarningIcon(props) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: 'red',
|
||||||
|
display: 'inline-block',
|
||||||
|
padding: '0 10px',
|
||||||
|
}}>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
height={props.height}
|
||||||
|
viewBox={props.viewBox}
|
||||||
|
width={props.width}
|
||||||
|
fill="currentColor">
|
||||||
|
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 6h2v8h-2v-8zm1 12.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
WarningIcon.defaultProps = {
|
||||||
|
height: 24,
|
||||||
|
width: 24,
|
||||||
|
viewBox: '0 0 24 24',
|
||||||
|
};
|
|
@ -1,6 +1,7 @@
|
||||||
|
import { FlexWrapper } from 'components/Container';
|
||||||
|
import WarningIcon from 'components/icons/WarningIcon';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Alert from 'react-bootstrap/Alert';
|
import styled from 'styled-components';
|
||||||
import { getVariantColor } from './LinkButton';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
bannerMessage?: any;
|
bannerMessage?: any;
|
||||||
|
@ -8,23 +9,22 @@ interface Props {
|
||||||
children?: any;
|
children?: any;
|
||||||
style?: any;
|
style?: any;
|
||||||
}
|
}
|
||||||
|
const Banner = styled.div`
|
||||||
|
border: 1px solid yellow;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px 28px;
|
||||||
|
color: #eee;
|
||||||
|
margin-top: 10px;
|
||||||
|
`;
|
||||||
export default function AlertBanner(props: Props) {
|
export default function AlertBanner(props: Props) {
|
||||||
return (
|
return props.bannerMessage || props.children ? (
|
||||||
<Alert
|
<FlexWrapper>
|
||||||
variant={props.variant ?? 'danger'}
|
<Banner>
|
||||||
style={{
|
<WarningIcon />
|
||||||
display:
|
{props.bannerMessage}
|
||||||
props.bannerMessage || props.children ? 'block' : 'none',
|
</Banner>
|
||||||
textAlign: 'center',
|
</FlexWrapper>
|
||||||
border: 'none',
|
) : (
|
||||||
background: 'none',
|
<></>
|
||||||
borderRadius: '0px',
|
|
||||||
color: getVariantColor(props.variant),
|
|
||||||
padding: 0,
|
|
||||||
margin: 0,
|
|
||||||
...props.style,
|
|
||||||
}}>
|
|
||||||
{props.bannerMessage ? props.bannerMessage : props.children}
|
|
||||||
</Alert>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,8 +10,8 @@ import {
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
|
import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import AlertBanner from './AlertBanner';
|
|
||||||
import { Collapse } from 'react-collapse';
|
import { Collapse } from 'react-collapse';
|
||||||
|
import { ButtonVariant, getVariantColor } from './LinkButton';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
fileCounter;
|
fileCounter;
|
||||||
|
@ -65,6 +65,14 @@ const Content = styled.div`
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const NotUploadSectionHeader = styled.div`
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: center;
|
||||||
|
color: ${getVariantColor(ButtonVariant.warning)};
|
||||||
|
border-bottom: 1px solid ${getVariantColor(ButtonVariant.warning)};
|
||||||
|
margin: 0 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
interface ResultSectionProps {
|
interface ResultSectionProps {
|
||||||
fileUploadResultMap: Map<FileUploadResults, string[]>;
|
fileUploadResultMap: Map<FileUploadResults, string[]>;
|
||||||
fileUploadResult: FileUploadResults;
|
fileUploadResult: FileUploadResults;
|
||||||
|
@ -136,12 +144,6 @@ const InProgressSection = (props: InProgressProps) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const NotUploadSectionHeader = () => (
|
|
||||||
<AlertBanner variant="warning" style={{ marginTop: '30px' }}>
|
|
||||||
{constants.FILE_NOT_UPLOADED_LIST}
|
|
||||||
</AlertBanner>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function UploadProgress(props: Props) {
|
export default function UploadProgress(props: Props) {
|
||||||
const fileProgressStatuses = [] as FileProgresses[];
|
const fileProgressStatuses = [] as FileProgresses[];
|
||||||
const fileUploadResultMap = new Map<FileUploadResults, string[]>();
|
const fileUploadResultMap = new Map<FileUploadResults, string[]>();
|
||||||
|
@ -214,7 +216,11 @@ export default function UploadProgress(props: Props) {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{props.uploadStage === UPLOAD_STAGES.FINISH &&
|
{props.uploadStage === UPLOAD_STAGES.FINISH &&
|
||||||
filesNotUploaded && <NotUploadSectionHeader />}
|
filesNotUploaded && (
|
||||||
|
<NotUploadSectionHeader>
|
||||||
|
{constants.FILE_NOT_UPLOADED_LIST}
|
||||||
|
</NotUploadSectionHeader>
|
||||||
|
)}
|
||||||
|
|
||||||
<ResultSection
|
<ResultSection
|
||||||
fileUploadResultMap={fileUploadResultMap}
|
fileUploadResultMap={fileUploadResultMap}
|
||||||
|
|
Loading…
Reference in a new issue