diff --git a/src/components/Container.ts b/src/components/Container.ts
index 78b35832c..5c9175e31 100644
--- a/src/components/Container.ts
+++ b/src/components/Container.ts
@@ -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;
+`;
diff --git a/src/components/icons/WarningIcon.tsx b/src/components/icons/WarningIcon.tsx
new file mode 100644
index 000000000..f1346fe0c
--- /dev/null
+++ b/src/components/icons/WarningIcon.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default function WarningIcon(props) {
+ return (
+
+ );
+}
+
+WarningIcon.defaultProps = {
+ height: 24,
+ width: 24,
+ viewBox: '0 0 24 24',
+};
diff --git a/src/components/pages/gallery/AlertBanner.tsx b/src/components/pages/gallery/AlertBanner.tsx
index ffcbd9132..91f2a9feb 100644
--- a/src/components/pages/gallery/AlertBanner.tsx
+++ b/src/components/pages/gallery/AlertBanner.tsx
@@ -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 (
-
- {props.bannerMessage ? props.bannerMessage : props.children}
-
+ return props.bannerMessage || props.children ? (
+
+
+
+ {props.bannerMessage}
+
+
+ ) : (
+ <>>
);
}
diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx
index 40f809d4d..8a55339e8 100644
--- a/src/components/pages/gallery/UploadProgress.tsx
+++ b/src/components/pages/gallery/UploadProgress.tsx
@@ -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;
fileUploadResult: FileUploadResults;
@@ -136,12 +144,6 @@ const InProgressSection = (props: InProgressProps) => {
);
};
-const NotUploadSectionHeader = () => (
-
- {constants.FILE_NOT_UPLOADED_LIST}
-
-);
-
export default function UploadProgress(props: Props) {
const fileProgressStatuses = [] as FileProgresses[];
const fileUploadResultMap = new Map();
@@ -214,7 +216,11 @@ export default function UploadProgress(props: Props) {
/>
{props.uploadStage === UPLOAD_STAGES.FINISH &&
- filesNotUploaded && }
+ filesNotUploaded && (
+
+ {constants.FILE_NOT_UPLOADED_LIST}
+
+ )}