updated the alert banner

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;
+`;

src/components/icons/WarningIcon.tsx

@@ -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',
+};

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 (
-        <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>
+    ) : (
+        <></>
     );
 }

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<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}