fix: video upload page layout fixes

openedx · Oct 17, 2023 · 7cc28e4 · 7cc28e4
1 parent cfa4577
commit 7cc28e4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 43 deletions.
diff --git a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx
@@ -17,39 +17,41 @@ const URLUploader = () => {
   const intl = useIntl();
   return (
     <div className="d-flex flex-column">
-      <div style={{ backgroundColor: '#F2F0EF' }} className="justify-content-center align-self-center rounded-circle p-5">
-        <Icon src={FileUpload} className="text-muted" size="lg" />
+      <div className="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5">
+        <Icon src={FileUpload} className="text-muted" style={{ height: '2rem', width: '2rem' }} />
       </div>
-      <div className="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5">
-        <span className="small">{intl.formatMessage(messages.dropVideoFileHere)}</span>
-        <span className="align-self-center" style={{ fontSize: '0.8rem' }}>{intl.formatMessage(messages.info)}</span>
+      <div className="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3">
+        <span>{intl.formatMessage(messages.dropVideoFileHere)}</span>
+        <span className="x-small align-self-center pt-2">{intl.formatMessage(messages.info)}</span>
       </div>
-      <div className="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal">OR</div>
-      <div className="zindex-9 video-id-prompt p-4">
+      <div className="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3">
+        OR
+      </div>
+      <div className="zindex-9 video-id-prompt py-3">
         <InputGroup className="video-upload-input-group">
           <FormControl
+            className="m-0"
             placeholder={intl.formatMessage(messages.pasteURL)}
             aria-label={intl.formatMessage(messages.pasteURL)}
             aria-describedby="basic-addon2"
             borderless
             onClick={(event) => { event.stopPropagation(); }}
             onChange={(event) => { setTextInputValue(event.target.value); }}
           />
-          <div className="light-300 justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button">
-            <IconButton
-              className="text-muted"
-              alt={intl.formatMessage(messages.submitButtonAltText)}
-              src={ArrowForward}
-              iconAs={Icon}
-              size="inline"
-              onClick={(event) => {
-                event.stopPropagation();
-                if (textInputValue.trim() !== '') {
-                  onURLUpload(textInputValue);
-                }
-              }}
-            />
-          </div>
+          <IconButton
+            className="position-absolute align-self-center text-muted bg-transparent shadow-none"
+            style={{ marginLeft: '20.25rem' }}
+            alt={intl.formatMessage(messages.submitButtonAltText)}
+            src={ArrowForward}
+            iconAs={Icon}
+            size="inline"
+            onClick={(event) => {
+              event.stopPropagation();
+              if (textInputValue.trim() !== '') {
+                onURLUpload(textInputValue);
+              }
+            }}
+          />
         </InputGroup>
       </div>
     </div>

diff --git a/src/editors/containers/VideoUploadEditor/index.scss b/src/editors/containers/VideoUploadEditor/index.scss
@@ -11,20 +11,13 @@
   width: 100%;
 }
 
-.url-submit-button {
-  position: absolute;
-  margin-left: 17rem;
-  font-size: 0.75rem;
-}
-
 .video-id-prompt {
 
   input::placeholder {
     color: #454545;
     // color: #5E35B1;
     font-weight: '500';
     word-wrap: 'break-word';
-    font-size: 0.875rem !important;
   }
 
   button {
@@ -36,17 +29,3 @@
     background: rgba(239, 234, 247, 0.70);
   }
 }
-
-.video-upload-input-group{
-  .form-control {
-    font-size: 0.875rem !important;
-    width: 308px !important;
-    height: 44px !important;
-  }
-
-  .pgn__icon.pgn__icon__lg {
-    width: 3.625rem !important;
-    height: 3.625rem !important;
-  }
-}
-