Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: vertical spacing between items (#166)

Browse Source
This commit is contained in:
Kristin Aoki
2022-12-13 13:20:15 -05:00
committed by GitHub
parent b5be6f441c
commit 7daa2c2dba
18 changed files with 158 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
View File

@@ -24,7 +24,7 @@ export const CollapsibleFormWidget = ({
intl,
}) => (
<Collapsible.Advanced
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
defaultOpen
open={isError || undefined}
>
@@ -32,17 +32,17 @@ export const CollapsibleFormWidget = ({
className="collapsible-trigger d-flex border-0 align-items-center"
style={{ justifyContent: 'unset' }}
>
<Collapsible.Visible whenClosed>
<Collapsible.Visible whenClosed className="p-0 pb-3">
<div className="d-flex flex-column flex-grow-1">
<div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
<div className={`${fontSize}`}>{subtitle}</div>
{subtitle ? <div className={`${fontSize} mt-3`}>{subtitle}</div> : null}
</div>
<div className="d-flex flex-row align-self-start">
{isError && <Icon className="alert-icon" src={Info} />}
<IconButton alt={intl.formatMessage(messages.expandAltText)} src={ExpandMore} iconAs={Icon} variant="dark" />
</div>
</Collapsible.Visible>
<Collapsible.Visible whenOpen>
<Collapsible.Visible whenOpen className="p-0">
<div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
<div className="align-self-start">
<IconButton alt={intl.formatMessage(messages.collapseAltText)} src={ExpandLess} iconAs={Icon} variant="dark" />

2
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
View File

@@ -46,7 +46,7 @@ export const DurationWidget = ({
subtitle={getTotalLabel(duration.formValue.startTime, duration.formValue.stopTime, true)}
>
<FormattedMessage {...messages.durationDescription} />
<Form.Row className="mt-4">
<Form.Row className="mt-4.5">
<Form.Group as={Col}>
<Form.Control
floatingLabel={intl.formatMessage(messages.startTimeLabel)}

26
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
View File

@@ -32,23 +32,19 @@ export const LicenseDetails = ({
}) => (
level !== LicenseLevel.course && details && license !== 'select' ? (
<div className="x-small border-primary-100 border-bottom m-0">
<Form.Group>
<div>
<Form.Group className="pb-2">
<div className="mb-3">
<FormattedMessage {...messages.detailsSubsectionTitle} />
</div>
{license === LicenseTypes.allRightsReserved
? (
<div className="mt-2">
<FormattedMessage {...messages.allRightsReservedSectionMessage} />
</div>
)
: null}
{license === LicenseTypes.allRightsReserved ? (
<FormattedMessage {...messages.allRightsReservedSectionMessage} />
) : null}
{license === LicenseTypes.creativeCommons
? (
<Stack gap={3}>
<div className="border-primary-100 border-bottom py-3">
<Stack gap={4}>
<div className="border-primary-100 border-bottom pb-4">
<Form.Group>
<ActionRow>
<Icon className="text-primary-500" src={Attribution} />
@@ -67,7 +63,7 @@ export const LicenseDetails = ({
<FormattedMessage {...messages.attributionSectionDescription} />
</div>
</div>
<div className="border-primary-100 border-bottom py-3">
<div className="border-primary-100 border-bottom pb-4">
<Form.Group>
<ActionRow>
<Icon src={Nc} />
@@ -92,7 +88,7 @@ export const LicenseDetails = ({
<FormattedMessage {...messages.noncommercialSectionDescription} />
</div>
</div>
<div className="border-primary-100 border-bottom py-3">
<div className="border-primary-100 border-bottom pb-4">
<Form.Group>
<ActionRow>
<Icon src={Nd} />
@@ -145,9 +141,7 @@ export const LicenseDetails = ({
</div>
</div>
</Stack>
)
: null}
) : null}
</Form.Group>
</div>
) : null

4
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
View File

@@ -24,9 +24,9 @@ export const LicenseDisplay = ({
return (
<Stack gap={3}>
<div className="x-small"><FormattedMessage {...messages.displaySubsectionTitle} /></div>
<div className="small border border-gray-300 rounded pt-2 px-3 pb-3">
<div className="small border border-gray-300 rounded p-4">
<LicenseBlurb license={license} details={details} />
<div className="x-small">{licenseDescription}</div>
<div className="x-small mt-3">{licenseDescription}</div>
</div>
<Hyperlink
className="text-primary-500 x-small"

4
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
View File

@@ -60,8 +60,8 @@ export const LicenseSelector = ({
/>
) : null }
</Form.Row>
<div className="x-small mt-2">{levelDescription}</div>
{license === LicenseTypes.select ? null : <div className="border-primary-100 mt-3 border-bottom" />}
<div className="x-small mt-3">{levelDescription}</div>
{license === LicenseTypes.select ? null : <div className="border-primary-100 mt-4 border-bottom" />}
</Form.Group>
);
};

46
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
View File

@@ -6,8 +6,12 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
<div
className="x-small border-primary-100 border-bottom m-0"
>
<Form.Group>
<div>
<Form.Group
className="pb-2"
>
<div
className="mb-3"
>
<FormattedMessage
defaultMessage="License Details"
description="Title for license detatils subsection"
@@ -15,10 +19,10 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
/>
</div>
<Stack
gap={3}
gap={4}
>
<div
className="border-primary-100 border-bottom py-3"
className="border-primary-100 border-bottom pb-4"
>
<Form.Group>
<ActionRow>
@@ -51,7 +55,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
</div>
</div>
<div
className="border-primary-100 border-bottom py-3"
className="border-primary-100 border-bottom pb-4"
>
<Form.Group>
<ActionRow>
@@ -82,7 +86,7 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
</div>
</div>
<div
className="border-primary-100 border-bottom py-3"
className="border-primary-100 border-bottom pb-4"
>
<Form.Group>
<ActionRow>
@@ -150,23 +154,23 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
<div
className="x-small border-primary-100 border-bottom m-0"
>
<Form.Group>
<div>
<Form.Group
className="pb-2"
>
<div
className="mb-3"
>
<FormattedMessage
defaultMessage="License Details"
description="Title for license detatils subsection"
id="authoring.videoeditor.license.detailsSubsection.title"
/>
</div>
<div
className="mt-2"
>
<FormattedMessage
defaultMessage="You reserve all rights for your work."
description="All Rights Reserved section message"
id="authoring.videoeditor.license.allRightsReservedSectionMessage"
/>
</div>
<FormattedMessage
defaultMessage="You reserve all rights for your work."
description="All Rights Reserved section message"
id="authoring.videoeditor.license.allRightsReservedSectionMessage"
/>
</Form.Group>
</div>
`;
@@ -177,8 +181,12 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
<div
className="x-small border-primary-100 border-bottom m-0"
>
<Form.Group>
<div>
<Form.Group
className="pb-2"
>
<div
className="mb-3"
>
<FormattedMessage
defaultMessage="License Details"
description="Title for license detatils subsection"

16
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap
View File

@@ -14,14 +14,14 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with default pr
/>
</div>
<div
className="small border border-gray-300 rounded pt-2 px-3 pb-3"
className="small border border-gray-300 rounded p-4"
>
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="all-rights-reserved"
/>
<div
className="x-small"
className="x-small mt-3"
>
FormattedMessage component with license description
</div>
@@ -54,14 +54,14 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
/>
</div>
<div
className="small border border-gray-300 rounded pt-2 px-3 pb-3"
className="small border border-gray-300 rounded p-4"
>
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="all-rights-reserved"
/>
<div
className="x-small"
className="x-small mt-3"
>
FormattedMessage component with license description
</div>
@@ -94,14 +94,14 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
/>
</div>
<div
className="small border border-gray-300 rounded pt-2 px-3 pb-3"
className="small border border-gray-300 rounded p-4"
>
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="creative-commons"
/>
<div
className="x-small"
className="x-small mt-3"
>
FormattedMessage component with license description
</div>
@@ -136,14 +136,14 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
/>
</div>
<div
className="small border border-gray-300 rounded pt-2 px-3 pb-3"
className="small border border-gray-300 rounded p-4"
>
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="all-rights-reserved"
/>
<div
className="x-small"
className="x-small mt-3"
>
FormattedMessage component with license description
</div>

16
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
View File

@@ -44,7 +44,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
/>
</Form.Row>
<div
className="x-small mt-2"
className="x-small mt-3"
>
<FormattedMessage
defaultMessage="This license is set specifically for this video"
@@ -53,7 +53,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
/>
</div>
<div
className="border-primary-100 mt-3 border-bottom"
className="border-primary-100 mt-4 border-bottom"
/>
</Form.Group>
`;
@@ -90,7 +90,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
</Form.Control>
</Form.Row>
<div
className="x-small mt-2"
className="x-small mt-3"
>
<FormattedMessage
defaultMessage="This license currently set at the course level"
@@ -99,7 +99,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
/>
</div>
<div
className="border-primary-100 mt-3 border-bottom"
className="border-primary-100 mt-4 border-bottom"
/>
</Form.Group>
`;
@@ -148,7 +148,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
/>
</Form.Row>
<div
className="x-small mt-2"
className="x-small mt-3"
>
<FormattedMessage
defaultMessage="This license currently set at the library level"
@@ -157,7 +157,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
/>
</div>
<div
className="border-primary-100 mt-3 border-bottom"
className="border-primary-100 mt-4 border-bottom"
/>
</Form.Group>
`;
@@ -194,7 +194,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
</Form.Control>
</Form.Row>
<div
className="x-small mt-2"
className="x-small mt-3"
>
<FormattedMessage
defaultMessage="This license currently set at the course level"
@@ -203,7 +203,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
/>
</div>
<div
className="border-primary-100 mt-3 border-bottom"
className="border-primary-100 mt-4 border-bottom"
/>
</Form.Group>
`;

8
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap
View File

@@ -22,7 +22,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with default pro
title="License"
>
<Stack
gap={3}
gap={4}
>
<injectIntl(ShimmedIntlComponent)
level="course"
@@ -45,7 +45,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with default pro
}
/>
<div
className="border-primary-100 border-bottom"
className="border-primary-100 border-bottom my-2"
/>
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -85,7 +85,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with isLibrary t
title="License"
>
<Stack
gap={3}
gap={4}
>
<injectIntl(ShimmedIntlComponent)
level="library"
@@ -133,7 +133,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with licenseType
title="License"
>
<Stack
gap={3}
gap={4}
>
<injectIntl(ShimmedIntlComponent)
level="block"

5
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
View File

@@ -53,8 +53,7 @@ export const LicenseWidget = ({
)}
title={intl.formatMessage(messages.title)}
>
<Stack gap={3}>
<Stack gap={4}>
{license ? (
<>
<LicenseSelector license={license} level={level} />
@@ -68,7 +67,7 @@ export const LicenseWidget = ({
) : null }
{!licenseType ? (
<>
<div className="border-primary-100 border-bottom" />
<div className="border-primary-100 border-bottom my-2" />
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
size="sm"

40
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap
View File

@@ -100,7 +100,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoId
/>
</ErrorAlert>
<Stack
gap={3}
gap={4}
>
<div
className="text-center"
@@ -110,15 +110,15 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoId
description="Message for adding thumbnail"
id="authoring.videoeditor.thumbnail.upload.message"
/>
</div>
<div
className="text-center text-primary-300"
>
<FormattedMessage
defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
description="Message for thumbnail aspectRequirements"
id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
/>
<div
className="text-primary-300"
>
<FormattedMessage
defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
description="Message for thumbnail aspectRequirements"
id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
/>
</div>
</div>
<FileInput
acceptedFiles=".gif,.jpg,.jpeg,.png,.bmp,.bmp2"
@@ -210,7 +210,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with default p
/>
</Alert>
<Stack
gap={3}
gap={4}
>
<div
className="text-center"
@@ -220,15 +220,15 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with default p
description="Message for adding thumbnail"
id="authoring.videoeditor.thumbnail.upload.message"
/>
</div>
<div
className="text-center text-primary-300"
>
<FormattedMessage
defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
description="Message for thumbnail aspectRequirements"
id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
/>
<div
className="text-primary-300"
>
<FormattedMessage
defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
description="Message for thumbnail aspectRequirements"
id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
/>
</div>
</div>
<FileInput
acceptedFiles=".gif,.jpg,.jpeg,.png,.bmp,.bmp2"

8
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
View File

@@ -101,12 +101,12 @@ export const ThumbnailWidget = ({
) : null }
</Stack>
) : (
<Stack gap={3}>
<Stack gap={4}>
<div className="text-center">
<FormattedMessage {...messages.addThumbnail} />
</div>
<div className="text-center text-primary-300">
<FormattedMessage {...messages.aspectRequirements} />
<div className="text-primary-300">
<FormattedMessage {...messages.aspectRequirements} />
</div>
</div>
<FileInput fileInput={fileInput} acceptedFiles={Object.values(acceptedImgKeys).join()} />
<Button

94
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
View File

@@ -30,17 +30,15 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
/>
</ErrorAlert>
<Stack
gap={3}
gap={2.5}
>
<Form.Group
className="mt-4.5"
>
<Form.Group>
<Transcript
index={0}
language="en"
/>
<ActionRow
className="mt-4 mb-1"
className="mt-3.5"
>
<Form.Checkbox
checked={false}
@@ -85,7 +83,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
</ActionRow>
<Form.Checkbox
checked={false}
className="mt-4.5 decorative-control-label"
className="mt-3 decorative-control-label"
onChange={[Function]}
>
<div
@@ -99,9 +97,8 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
</div>
</Form.Checkbox>
</Form.Group>
<Stack
className="border-primary-100 border-top"
gap={3}
<div
className="border-primary-100 border-top pt-4"
>
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -115,7 +112,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
id="authoring.videoeditor.transcripts.upload.label"
/>
</Button>
</Stack>
</div>
</Stack>
</CollapsibleFormWidget>
`;
@@ -150,11 +147,9 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
/>
</ErrorAlert>
<Stack
gap={3}
gap={2.5}
>
<Form.Group
className="mt-4.5"
>
<Form.Group>
<Transcript
index={0}
language="en"
@@ -164,7 +159,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
language="fr"
/>
<ActionRow
className="mt-4 mb-1"
className="mt-3.5"
>
<Form.Checkbox
checked={false}
@@ -209,7 +204,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
</ActionRow>
<Form.Checkbox
checked={false}
className="mt-4.5 decorative-control-label"
className="mt-3 decorative-control-label"
onChange={[Function]}
>
<div
@@ -223,9 +218,8 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
</div>
</Form.Checkbox>
</Form.Group>
<Stack
className="border-primary-100 border-top"
gap={3}
<div
className="border-primary-100 border-top pt-4"
>
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -239,7 +233,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
id="authoring.videoeditor.transcripts.upload.label"
/>
</Button>
</Stack>
</div>
</Stack>
</CollapsibleFormWidget>
`;
@@ -274,17 +268,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
/>
</ErrorAlert>
<Stack
gap={3}
gap={2.5}
>
<Form.Group
className="mt-4.5"
>
<Form.Group>
<Transcript
index={0}
language="en"
/>
<ActionRow
className="mt-4 mb-1"
className="mt-3.5"
>
<Form.Checkbox
checked={true}
@@ -329,7 +321,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
</ActionRow>
<Form.Checkbox
checked={false}
className="mt-4.5 decorative-control-label"
className="mt-3 decorative-control-label"
onChange={[Function]}
>
<div
@@ -343,9 +335,8 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
</div>
</Form.Checkbox>
</Form.Group>
<Stack
className="border-primary-100 border-top"
gap={3}
<div
className="border-primary-100 border-top pt-4"
>
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -359,7 +350,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
id="authoring.videoeditor.transcripts.upload.label"
/>
</Button>
</Stack>
</div>
</Stack>
</CollapsibleFormWidget>
`;
@@ -394,16 +385,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
/>
</ErrorAlert>
<Stack
gap={3}
gap={2.5}
>
<FormattedMessage
defaultMessage="Add video transcripts (.srt files only) for improved accessibility."
description="Message for adding first transcript"
id="authoring.videoeditor.transcripts.upload.firstTranscriptMessage"
/>
<Stack
className="border-primary-100 border-top"
gap={3}
<div
className="border-primary-100 border-top pt-4"
>
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -417,7 +407,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
id="authoring.videoeditor.transcripts.upload.label"
/>
</Button>
</Stack>
</div>
</Stack>
</CollapsibleFormWidget>
`;
@@ -452,17 +442,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
/>
</ErrorAlert>
<Stack
gap={3}
gap={2.5}
>
<Form.Group
className="mt-4.5"
>
<Form.Group>
<Transcript
index={0}
language="en"
/>
<ActionRow
className="mt-4 mb-1"
className="mt-3.5"
>
<Form.Checkbox
checked={false}
@@ -507,7 +495,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
</ActionRow>
<Form.Checkbox
checked={true}
className="mt-4.5 decorative-control-label"
className="mt-3 decorative-control-label"
onChange={[Function]}
>
<div
@@ -521,9 +509,8 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
</div>
</Form.Checkbox>
</Form.Group>
<Stack
className="border-primary-100 border-top"
gap={3}
<div
className="border-primary-100 border-top pt-4"
>
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -537,7 +524,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
id="authoring.videoeditor.transcripts.upload.label"
/>
</Button>
</Stack>
</div>
</Stack>
</CollapsibleFormWidget>
`;
@@ -572,17 +559,15 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
/>
</ErrorAlert>
<Stack
gap={3}
gap={2.5}
>
<Form.Group
className="mt-4.5"
>
<Form.Group>
<Transcript
index={0}
language="en"
/>
<ActionRow
className="mt-4 mb-1"
className="mt-3.5"
>
<Form.Checkbox
checked={false}
@@ -627,7 +612,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
</ActionRow>
<Form.Checkbox
checked={false}
className="mt-4.5 decorative-control-label"
className="mt-3 decorative-control-label"
onChange={[Function]}
>
<div
@@ -641,9 +626,8 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
</div>
</Form.Checkbox>
</Form.Group>
<Stack
className="border-primary-100 border-top"
gap={3}
<div
className="border-primary-100 border-top pt-4"
>
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
@@ -657,7 +641,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
id="authoring.videoeditor.transcripts.upload.label"
/>
</Button>
</Stack>
</div>
</Stack>
</CollapsibleFormWidget>
`;

14
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
View File

@@ -107,17 +107,16 @@ export const TranscriptWidget = ({
>
<FormattedMessage {...messages.deleteTranscriptError} />
</ErrorAlert>
<Stack gap={3}>
<Stack gap={2.5}>
{hasTranscripts ? (
<Form.Group className="mt-4.5">
<Form.Group>
{ transcripts.map((language, index) => (
<Transcript
language={language}
index={index}
/>
))}
<ActionRow className="mt-4 mb-1">
<ActionRow className="mt-3.5">
<Form.Checkbox
checked={allowTranscriptDownloads}
className="decorative-control-label"
@@ -142,7 +141,7 @@ export const TranscriptWidget = ({
</ActionRow>
<Form.Checkbox
checked={showTranscriptByDefault}
className="mt-4.5 decorative-control-label"
className="mt-3 decorative-control-label"
onChange={(e) => updateField({ showTranscriptByDefault: e.target.checked })}
>
<div className="small text-gray-700">
@@ -155,8 +154,7 @@ export const TranscriptWidget = ({
<FormattedMessage {...messages.addFirstTranscript} />
</>
)}
<Stack gap={3} className="border-primary-100 border-top">
<div className="border-primary-100 border-top pt-4">
<Button
className="text-primary-500 font-weight-bold justify-content-start pl-0"
size="sm"
@@ -166,7 +164,7 @@ export const TranscriptWidget = ({
>
<FormattedMessage {...messages.uploadButtonLabel} />
</Button>
</Stack>
</div>
</Stack>
</CollapsibleFormWidget>
);

11
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
View File

@@ -50,7 +50,9 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
id="authoring.videoeditor.videoSource.fallbackVideo.title"
/>
</div>
<div>
<div
className="mt-3"
>
<FormattedMessage
defaultMessage="To be sure all learners can access the video, edX
recommends providing additional videos in both .mp4 and
@@ -61,7 +63,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
/>
</div>
<Form.Row
className="mt-4 flex-nowrap"
className="mt-3.5 flex-nowrap"
>
<Form.Control
floatingLabel="Video URL"
@@ -76,7 +78,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
/>
</Form.Row>
<ActionRow
className="mt-4"
className="mt-4.5"
>
<Form.Checkbox
checked={false}
@@ -122,6 +124,9 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
<ActionRow.Spacer />
</ActionRow>
</Form.Group>
<div
className="my-4 border-primary-100 border-bottom"
/>
<Button
className="text-primary-500 font-weight-bold pl-0"
onClick={[Function]}

7
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
View File

@@ -82,11 +82,11 @@ export const VideoSourceWidget = ({
<div className="mt-4">
<FormattedMessage {...messages.fallbackVideoTitle} />
</div>
<div>
<div className="mt-3">
<FormattedMessage {...messages.fallbackVideoMessage} />
</div>
{fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => (
<Form.Row className="mt-4 flex-nowrap">
<Form.Row className="mt-3.5 flex-nowrap">
<Form.Control
floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
onChange={fallbackVideos.onChange(index)}
@@ -104,7 +104,7 @@ export const VideoSourceWidget = ({
/>
</Form.Row>
)) : null}
<ActionRow className="mt-4">
<ActionRow className="mt-4.5">
<Form.Checkbox
checked={allowDownload.local}
className="decorative-control-label"
@@ -128,6 +128,7 @@ export const VideoSourceWidget = ({
<ActionRow.Spacer />
</ActionRow>
</Form.Group>
<div className="my-4 border-primary-100 border-bottom" />
<Button
className="text-primary-500 font-weight-bold pl-0"
size="sm"

12
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
View File

@@ -2,7 +2,7 @@
exports[`CollapsibleFormWidget render snapshots: renders as expected with default props 1`] = `
<Advanced
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
defaultOpen={true}
>
<Trigger
@@ -14,6 +14,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
}
>
<Visible
className="p-0 pb-3"
whenClosed={true}
>
<div
@@ -25,7 +26,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
tiTLE
</div>
<div
className=""
className=" mt-3"
>
SuBTItle
</div>
@@ -41,6 +42,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
</div>
</Visible>
<Visible
className="p-0"
whenOpen={true}
>
<div
@@ -71,7 +73,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
exports[`CollapsibleFormWidget render snapshots: renders with open={true} when there is error 1`] = `
<Advanced
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
className="collapsible-card rounded mx-4 my-3 p-4 text-primary-500"
defaultOpen={true}
open={true}
>
@@ -84,6 +86,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
}
>
<Visible
className="p-0 pb-3"
whenClosed={true}
>
<div
@@ -95,7 +98,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
tiTLE
</div>
<div
className=""
className=" mt-3"
>
SuBTItle
</div>
@@ -114,6 +117,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
</div>
</Visible>
<Visible
className="p-0"
whenOpen={true}
>
<div

2
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/DurationWidget.test.jsx.snap
View File

@@ -12,7 +12,7 @@ exports[`DurationWidget render snapshots: renders as expected with default props
id="authoring.videoeditor.duration.description"
/>
<Form.Row
className="mt-4"
className="mt-4.5"
>
<Form.Group>
<Form.Control