improvement(reskin): submission upload - part 2 f2f

Author: dedywahyudi

__tests__/shared/components/SubmissionManagement/__snapshots__/Submission.jsx.snap

@@ -47,9 +47,8 @@ exports[`Snapshot match 1`] = `
         type="button"
       >
         <DeleteIcon
-          fill="none"
-          height="9"
-          viewBox="0 0 16 9"
+          height="16"
+          viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         />
@@ -120,9 +119,8 @@ exports[`Snapshot match 2`] = `
         type="button"
       >
         <DeleteIcon
-          fill="none"
-          height="9"
-          viewBox="0 0 16 9"
+          height="16"
+          viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         />

src/shared/components/ProfilePage/BadgesModal/modal.scss

@@ -12,12 +12,12 @@
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 999;
+  border-radius: 8px;
   padding: 30px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border-radius: 0;
 
   @include xs-to-lg {
     max-width: 95vw;

src/shared/components/SubmissionManagement/Icons/IconTrashSimple.svg

@@ -14,11 +14,12 @@
 import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
-import { COMPETITION_TRACKS, CHALLENGE_STATUS, safeForDownload } from 'utils/tc';
+// CHALLENGE_STATUS
+import { COMPETITION_TRACKS, safeForDownload } from 'utils/tc';
 
 import PT from 'prop-types';
 
-import DeleteIcon from '../Icons/IconTrashSimple.svg';
+// import DeleteIcon from '../Icons/IconTrashSimple.svg';
 import DownloadIcon from '../Icons/IconSquareDownload.svg';
 import ExpandIcon from '../Icons/IconMinimalDown.svg';
 import ScreeningStatus from '../ScreeningStatus';
@@ -31,10 +32,10 @@ export default function Submission(props) {
     showScreeningDetails,
     track,
     onDownload,
-    onDelete,
+    // onDelete,
     onShowDetails,
-    status,
-    allowDelete,
+    // status,
+    // allowDelete,
   } = props;
   const formatDate = date => moment(+new Date(date)).format('MMM DD, YYYY hh:mm A');
   const onDownloadSubmission = onDownload.bind(1, submissionObject.id);
@@ -88,19 +89,19 @@ export default function Submission(props) {
              onClick={() => onDownload(submissionObject.id)}
            ><DownloadIcon /></button>
            */ }
-          {status !== CHALLENGE_STATUS.COMPLETED
-             && track !== COMPETITION_TRACKS.DES
-             && (
-             <button
-               styleName="delete-icon"
-               onClick={() => onDelete(submissionObject.id)}
-               disabled={!allowDelete}
-               type="button"
-             >
-               <DeleteIcon />
-             </button>
-             )
-           }
+          {/* {status !== CHALLENGE_STATUS.COMPLETED */}
+          {/*    && track !== COMPETITION_TRACKS.DES */}
+          {/*    && ( */}
+          {/*    <button */}
+          {/*      styleName="delete-icon" */}
+          {/*      onClick={() => onDelete(submissionObject.id)} */}
+          {/*      disabled={!allowDelete} */}
+          {/*      type="button" */}
+          {/*    > */}
+          {/*      <DeleteIcon /> */}
+          {/*    </button> */}
+          {/*    ) */}
+          {/*  } */}
           <button
             styleName={`expand-icon ${(showScreeningDetails ? 'expanded' : '')}`}
             onClick={() => onShowDetails(submissionObject.id)}
@@ -137,8 +138,8 @@ Submission.propTypes = {
   showScreeningDetails: PT.bool,
   track: PT.string.isRequired,
   onDownload: PT.func.isRequired,
-  onDelete: PT.func.isRequired,
+  // onDelete: PT.func.isRequired,
   onShowDetails: PT.func,
-  status: PT.string.isRequired,
-  allowDelete: PT.bool.isRequired,
+  // status: PT.string.isRequired,
+  // allowDelete: PT.bool.isRequired,
 };

src/shared/components/SubmissionManagement/Submission/index.jsx

@@ -88,10 +88,18 @@ $submission-space-50: $base-unit * 10;
   .id-col {
     font-weight: 700;
     width: 32%;
+
+    @include xs-to-sm {
+      width: 80%;
+    }
   }
 
   .type-col {
     width: 21%;
+
+    @include xs-to-sm {
+      width: 80%;
+    }
   }
 
   .date-col {
@@ -103,6 +111,7 @@ $submission-space-50: $base-unit * 10;
 
     @include xs-to-sm {
       padding: 0 10px;
+      width: 80%;
     }
   }
 

src/shared/components/SubmissionManagement/Submission/styles.scss

@@ -38,6 +38,23 @@ $light-gray-color: $tc-gray-neutral-light;
   }
 }
 
+.add-sub-btn-warning {
+  @include roboto-bold;
+
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  border-radius: 50px !important;
+  background: $tc-red-70 !important;
+  color: #fff !important;
+  text-transform: uppercase;
+
+  @include xs-to-md {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
 .submission-management {
   padding-bottom: 40px;
 }

src/shared/components/SubmissionManagement/SubmissionManagement/styles.scss

@@ -146,7 +146,6 @@ class FilestackFilePicker extends React.Component {
       fileName,
       fileExtensions,
       title,
-      mandatory,
       error,
       dragged,
       setDragged,
@@ -167,13 +166,6 @@ class FilestackFilePicker extends React.Component {
           <p>
             {title}
           </p>
-          {
-            mandatory && (
-            <p styleName="mandatory">
-              *mandatory
-            </p>
-            )
-          }
         </div>
         <div
           styleName={`file-picker ${error ? 'error' : ''} ${dragged ? 'drag' : ''}`}
@@ -338,7 +330,6 @@ FilestackFilePicker.propTypes = {
   fileName: PT.string,
   fileExtensions: PT.arrayOf(PT.string).isRequired,
   title: PT.string.isRequired,
-  mandatory: PT.bool.isRequired,
   setError: PT.func.isRequired,
   setFileName: PT.func.isRequired,
   setUploadProgress: PT.func.isRequired,