From db8929d1a8bfea809e5151d5fbf3474a479ef4e7 Mon Sep 17 00:00:00 2001 From: Farhaan Bukhsh Date: Sat, 9 Sep 2023 12:31:04 +0530 Subject: [PATCH] fix: Fix styling for components in dropzone Signed-off-by: Farhaan Bukhsh --- .../VideoUploadEditor/VideoUploader.jsx | 81 ++-- .../__snapshots__/VideoUploader.test.jsx.snap | 288 +++++++----- .../__snapshots__/index.test.jsx.snap | 442 +++++++++--------- .../containers/VideoUploadEditor/index.jsx | 19 +- .../containers/VideoUploadEditor/index.scss | 33 +- 5 files changed, 472 insertions(+), 391 deletions(-) diff --git a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx index d3705d8b3..1ff918e11 100644 --- a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx +++ b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx @@ -4,33 +4,62 @@ import { useIntl } from '@edx/frontend-platform/i18n'; import { Icon, IconButton, Dropzone, InputGroup, FormControl, } from '@edx/paragon'; -import { ArrowForward, FileUpload } from '@edx/paragon/icons'; +import { ArrowForward, FileUpload, Close } from '@edx/paragon/icons'; import { useDispatch } from 'react-redux'; import { thunkActions } from '../../data/redux'; import * as hooks from './hooks'; +import * as editorHooks from '../EditorContainer/hooks'; import messages from './messages'; const URLUploader = () => { + const [textInputValue, setTextInputValue] = React.useState(''); + const onURLUpload = hooks.onVideoUpload(); const intl = useIntl(); return ( -
-
- +
+
+
- {intl.formatMessage(messages.dropVideoFileHere)} + {intl.formatMessage(messages.dropVideoFileHere)} {intl.formatMessage(messages.info)}
-
OR
+
OR
+
+ + { event.stopPropagation(); }} + onChange={(event) => { setTextInputValue(event.target.value); }} + /> +
+ { + event.stopPropagation(); + if (textInputValue.trim() !== '') { + onURLUpload(textInputValue); + } + }} + /> +
+ +
); }; -export const VideoUploader = ({ setLoading }) => { - const [textInputValue, setTextInputValue] = React.useState(''); - const onURLUpload = hooks.onVideoUpload(); - const intl = useIntl(); +export const VideoUploader = ({ setLoading, onClose }) => { const dispatch = useDispatch(); + const intl = useIntl(); + const handleCancel = editorHooks.handleCancel({ onClose }); const handleProcessUpload = ({ fileData }) => { dispatch(thunkActions.video.uploadVideo({ @@ -41,38 +70,28 @@ export const VideoUploader = ({ setLoading }) => { }; return ( -
+
+
+ +
} /> -
- - { setTextInputValue(event.target.value); }} - /> -
- { onURLUpload(textInputValue); }} - /> -
- -
); }; VideoUploader.propTypes = { setLoading: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired, }; export default VideoUploader; diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap index c0b7cb0ca..bac8ec525 100644 --- a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap +++ b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap @@ -5,7 +5,42 @@ Object { "asFragment": [Function], "baseElement":
-
+
+
+ +
Drag and drop video here or click to upload @@ -63,62 +99,62 @@ Object {
OR
-
-
-
-
-
-
- -
-
-
+
+ + + + + + + +
+
+
@@ -127,7 +163,42 @@ Object {
, "container":
-
+
+
+ +
Drag and drop video here or click to upload @@ -185,62 +257,62 @@ Object {
OR
-
-
-
-
-
-
- -
-
-
+
+ + + + + + + +
+
+
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap index 1196ae931..c9d7abaf3 100644 --- a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap +++ b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap @@ -7,14 +7,181 @@ Object {
+
+ +
+ +
+
+
+ , +
+ , + "container":
+
+
+
+
-
- -
-
-
- -
-
- -
-
-
-
-
-
- , -
- , - "container":
-
-
-
- -
-
Drag and drop video here or click to upload @@ -261,62 +267,62 @@ Object {
OR
-
-
-
-
-
-
- -
-
-
+
+ + + + + + + +
+
+
diff --git a/src/editors/containers/VideoUploadEditor/index.jsx b/src/editors/containers/VideoUploadEditor/index.jsx index 3080e9f2b..ba4bf12d6 100644 --- a/src/editors/containers/VideoUploadEditor/index.jsx +++ b/src/editors/containers/VideoUploadEditor/index.jsx @@ -1,14 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useIntl } from '@edx/frontend-platform/i18n'; -import { - Icon, IconButton, Spinner, -} from '@edx/paragon'; -import { Close } from '@edx/paragon/icons'; +import { Spinner } from '@edx/paragon'; import './index.scss'; import messages from './messages'; import { VideoUploader } from './VideoUploader'; -import * as editorHooks from '../EditorContainer/hooks'; export const VideoUploadEditor = ( { @@ -16,22 +12,13 @@ export const VideoUploadEditor = ( }, ) => { const [loading, setLoading] = React.useState(false); - const handleCancel = editorHooks.handleCancel({ onClose }); const intl = useIntl(); return (
{(!loading) ? ( -
-
- -
- +
+
) : (
diff --git a/src/editors/containers/VideoUploadEditor/index.scss b/src/editors/containers/VideoUploadEditor/index.scss index 5e19763b1..bb1e3f54c 100644 --- a/src/editors/containers/VideoUploadEditor/index.scss +++ b/src/editors/containers/VideoUploadEditor/index.scss @@ -7,32 +7,24 @@ } .pgn__dropzone { - height: 100vh; + height: 96vh; width: 100%; } -.video-id-container { - width: 100%; - justify-content: center; -} - .url-submit-button { position: absolute; - left: 85%; + margin-left: 17rem; + font-size: 0.75rem; } .video-id-prompt { - position: absolute; - top: 65%; - left: 50%; - transform: translateX(-50%); input::placeholder { color: #454545; // color: #5E35B1; - font-family: 'Inter'; - font-weight: 500; - word-wrap: break-word; + font-weight: '500'; + word-wrap: 'break-word'; + font-size: 0.875rem !important; } button { @@ -45,8 +37,13 @@ } } -.close-button-container { - position: absolute; - top: 25px; - right: 30px; +.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; }