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;
|
||||
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 Alert from 'react-bootstrap/Alert';
|
||||
import { getVariantColor } from './LinkButton';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface Props {
|
||||
bannerMessage?: any;
|
||||
|
@ -8,23 +9,22 @@ interface Props {
|
|||
children?: 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) {
|
||||
return (
|
||||
<Alert
|
||||
variant={props.variant ?? 'danger'}
|
||||
style={{
|
||||
display:
|
||||
props.bannerMessage || props.children ? 'block' : 'none',
|
||||
textAlign: 'center',
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
borderRadius: '0px',
|
||||
color: getVariantColor(props.variant),
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
...props.style,
|
||||
}}>
|
||||
{props.bannerMessage ? props.bannerMessage : props.children}
|
||||
</Alert>
|
||||
return props.bannerMessage || props.children ? (
|
||||
<FlexWrapper>
|
||||
<Banner>
|
||||
<WarningIcon />
|
||||
{props.bannerMessage}
|
||||
</Banner>
|
||||
</FlexWrapper>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,8 +10,8 @@ import {
|
|||
import styled from 'styled-components';
|
||||
import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
|
||||
import constants from 'utils/strings/constants';
|
||||
import AlertBanner from './AlertBanner';
|
||||
import { Collapse } from 'react-collapse';
|
||||
import { ButtonVariant, getVariantColor } from './LinkButton';
|
||||
|
||||
interface Props {
|
||||
fileCounter;
|
||||
|
@ -65,6 +65,14 @@ const Content = styled.div`
|
|||
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 {
|
||||
fileUploadResultMap: Map<FileUploadResults, string[]>;
|
||||
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) {
|
||||
const fileProgressStatuses = [] as FileProgresses[];
|
||||
const fileUploadResultMap = new Map<FileUploadResults, string[]>();
|
||||
|
@ -214,7 +216,11 @@ export default function UploadProgress(props: Props) {
|
|||
/>
|
||||
|
||||
{props.uploadStage === UPLOAD_STAGES.FINISH &&
|
||||
filesNotUploaded && <NotUploadSectionHeader />}
|
||||
filesNotUploaded && (
|
||||
<NotUploadSectionHeader>
|
||||
{constants.FILE_NOT_UPLOADED_LIST}
|
||||
</NotUploadSectionHeader>
|
||||
)}
|
||||
|
||||
<ResultSection
|
||||
fileUploadResultMap={fileUploadResultMap}
|
||||
|
|
Loading…
Reference in a new issue