fix: vertical spacing between items (#166)

openedx · Dec 13, 2022 · 7daa2c2 · 7daa2c2
1 parent b5be6f4
commit 7daa2c2
Show file tree

Hide file tree

Showing 18 changed files with 158 additions and 165 deletions.
diff --git a/...containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx b/...containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
@@ -24,25 +24,25 @@ 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}
   >
     <Collapsible.Trigger
       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" />

diff --git a/...ditors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx b/...ditors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
@@ -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)}

diff --git a/...ers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx b/...ers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
@@ -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

diff --git a/...ers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx b/...ers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
@@ -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"

diff --git a/...rs/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx b/...rs/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
@@ -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>
   );
 };

diff --git a/...ts/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap b/...ts/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
@@ -6,19 +6,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>
     <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"

diff --git a/...ts/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap b/...ts/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap
@@ -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>

diff --git a/...s/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap b/...s/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
@@ -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>
 `;
diff --git a/.../components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap b/.../components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap
@@ -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"