style: Fixing styles on gallery, editor and uploader video page

2023-04-24 18:06:50 -05:00
parent 135e0d7859
commit 15393f3da1
18 changed files with 168 additions and 79 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -47382,4 +47382,4 @@
      "dev": true
    }
  }
-}
+}
--- a/src/editors/containers/VideoEditor/snapshots/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/snapshots/index.test.jsx.snap
@@ -8,11 +8,22 @@ exports[`VideoEditor snapshots renders as expected with default behavior 1`] = `
    onClose={[MockFunction props.onClose]}
    validateEntry={[MockFunction validateEntry]}
  >
-    <Spinner
-      animation="border"
-      className="m-3"
-      screenreadertext="loading"
-    />
+    <div
+      style={
+        Object {
+          "left": "50%",
+          "position": "absolute",
+          "top": "50%",
+          "transform": "translate(-50%, -50%)",
+        }
+      }
+    >
+      <Spinner
+        animation="border"
+        className="m-3"
+        screenreadertext="loading"
+      />
+    </div>
  </EditorContainer>
 </Component>
 `;
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx
@@ -10,18 +10,16 @@ export const LanguageNamesWidget = ({ transcripts, intl }) => {
  let icon = ClosedCaptionOff;
  const hasTranscripts = transcriptHooks.hasTranscripts(transcripts);
  let message = intl.formatMessage(messages.noTranscriptsAdded);
-  let fontClass = 'text-gray';

  if (hasTranscripts) {
    message = transcriptHooks.transcriptLanguages(transcripts, intl);
-    fontClass = 'text-primary';
    icon = ClosedCaption;
  }

  return (
    <div className="d-flex flex-row align-items-center x-small">
-      <Icon className="mr-1" src={icon} />
-      <span className={fontClass}>{message}</span>
+      <Icon className="mr-1 text-primary-500" src={icon} />
+      <span className="text-gray-700">{message}</span>
    </div>
  );
 };
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@edx/paragon';
+import { Button, Icon } from '@edx/paragon';
 import { ArrowBackIos } from '@edx/paragon/icons';
 import {
  FormattedMessage,
@@ -24,12 +24,16 @@ export const VideoSettingsModal = ({
 }) => (
  <>
    <Button
-      variant="tertiary"
-      iconBefore={ArrowBackIos}
-      className="mb-2 mb-sm-0"
+      variant="link"
+      className="text-primary-500"
      size="sm"
      onClick={onReturn}
+      style={{
+        textDecoration: 'none',
+        marginLeft: '3px',
+      }}
    >
+      <Icon src={ArrowBackIos} style={{ height: '13px' }} />
      <FormattedMessage {...messages.replaceVideoButtonLabel} />
    </Button>
    <ErrorSummary />
--- a/src/editors/containers/VideoEditor/index.jsx
+++ b/src/editors/containers/VideoEditor/index.jsx
@@ -38,11 +38,19 @@ export const VideoEditor = ({
            <VideoEditorModal />
          </div>
        ) : (
-          <Spinner
-            animation="border"
-            className="m-3"
-            screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
-          />
+          <div style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+          >
+            <Spinner
+              animation="border"
+              className="m-3"
+              screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
+            />
+          </div>
        )}
      </EditorContainer>
    </ErrorContext.Provider>
--- a/src/editors/containers/VideoUploadEditor/snapshots/index.test.jsx.snap
+++ b/src/editors/containers/VideoUploadEditor/snapshots/index.test.jsx.snap
@@ -62,21 +62,25 @@ exports[`VideoUploadEditor renders without errors 1`] = `
        />
      </div>
      <div
-        class="d-flex video-id-prompt"
+        class="d-flex video-id-container"
      >
-        <input
-          placeholder="Paste your video ID or URL"
-          type="text"
-          value=""
-        />
-        <button
-          class="border-start-0"
-          type="button"
+        <div
+          class="d-flex video-id-prompt"
        >
-          <icon
-            class="rounded-circle text-dark"
+          <input
+            placeholder="Paste your video ID or URL"
+            type="text"
+            value=""
          />
-        </button>
+          <button
+            class="border-start-0"
+            type="button"
+          >
+            <icon
+              class="rounded-circle text-dark"
+            />
+          </button>
+        </div>
      </div>
    </div>
  </div>
@@ -135,21 +139,25 @@ exports[`VideoUploader renders without errors 1`] = `
      />
    </div>
    <div
-      class="d-flex video-id-prompt"
+      class="d-flex video-id-container"
    >
-      <input
-        placeholder="Paste your video ID or URL"
-        type="text"
-        value=""
-      />
-      <button
-        class="border-start-0"
-        type="button"
+      <div
+        class="d-flex video-id-prompt"
      >
-        <icon
-          class="rounded-circle text-dark"
+        <input
+          placeholder="Paste your video ID or URL"
+          type="text"
+          value=""
        />
-      </button>
+        <button
+          class="border-start-0"
+          type="button"
+        >
+          <icon
+            class="rounded-circle text-dark"
+          />
+        </button>
+      </div>
    </div>
  </div>
 </div>
--- a/src/editors/containers/VideoUploadEditor/index.jsx
+++ b/src/editors/containers/VideoUploadEditor/index.jsx
@@ -60,18 +60,20 @@ export const VideoUploader = ({ onUpload, errorMessage }) => {
        </div>
        <input {...getInputProps()} data-testid="fileInput" />
      </div>
-      <div className="d-flex video-id-prompt">
-        <input
-          type="text"
-          placeholder="Paste your video ID or URL"
-          value={textInputValue}
-          onChange={handleInputChange}
-          onKeyDown={(e) => e.key === 'Enter' && handleSaveButtonClick()}
-          onClick={(event) => event.preventDefault()}
-        />
-        <button className="border-start-0" type="button" onClick={handleSaveButtonClick}>
-          <Icon src={ArrowForward} className="rounded-circle text-dark" />
-        </button>
+      <div className="d-flex video-id-container">
+        <div className="d-flex video-id-prompt">
+          <input
+            type="text"
+            placeholder="Paste your video ID or URL"
+            value={textInputValue}
+            onChange={handleInputChange}
+            onKeyDown={(e) => e.key === 'Enter' && handleSaveButtonClick()}
+            onClick={(event) => event.preventDefault()}
+          />
+          <button className="border-start-0" type="button" onClick={handleSaveButtonClick}>
+            <Icon src={ArrowForward} className="rounded-circle text-dark" />
+          </button>
+        </div>
      </div>
    </div>
  );
--- a/src/editors/containers/VideoUploadEditor/index.scss
+++ b/src/editors/containers/VideoUploadEditor/index.scss
@@ -11,6 +11,11 @@
  }
 }

+.video-id-container {
+  width: 100%;
+  justify-content: center;
+}
+
 .video-id-prompt {
  position: absolute;
  top: 68%;
--- a/src/editors/data/redux/thunkActions/video.test.js
+++ b/src/editors/data/redux/thunkActions/video.test.js
@@ -284,6 +284,10 @@ describe('video thunkActions', () => {
          stopTime: testMetadata.end_time,
          total: 0,
        },
+        allowVideoSharing: {
+          level: 'course',
+          value: true,
+        },
        handout: testMetadata.handout,
        licenseType: 'liCENSEtyPe',
        licenseDetails: {
@@ -292,6 +296,9 @@ describe('video thunkActions', () => {
          noDerivatives: true,
          shareAlike: false,
        },
+        selectedVideoTranscriptUrls: undefined,
+        videoSharingEnabledForCourse: undefined,
+        videoSharingLearnMoreLink: 'SomEUrL.Com',
        courseLicenseType: 'liCENSEtyPe',
        courseLicenseDetails: {
          attribution: true,
--- a/src/editors/sharedComponents/BaseModal/snapshots/index.test.jsx.snap
+++ b/src/editors/sharedComponents/BaseModal/snapshots/index.test.jsx.snap
@@ -13,7 +13,8 @@ exports[`BaseModal ImageUploadModal template component snapshot 1`] = `
  <ModalDialog.Header
    style={
      Object {
-        "zIndex": 10000,
+        "boxShadow": "2px 2px 5px rgba(0, 0, 0, 0.3)",
+        "zIndex": 1,
      }
    }
  >
--- a/src/editors/sharedComponents/BaseModal/index.jsx
+++ b/src/editors/sharedComponents/BaseModal/index.jsx
@@ -30,7 +30,7 @@ export const BaseModal = ({
    isFullscreenOnMobile
    isFullscreenScroll={isFullscreenScroll}
  >
-    <ModalDialog.Header style={{ zIndex: 10000 }}>
+    <ModalDialog.Header style={{ zIndex: 1, boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.3)' }}>
      <ModalDialog.Title>
        {title}
      </ModalDialog.Title>
--- a/src/editors/sharedComponents/SelectionModal/Gallery.jsx
+++ b/src/editors/sharedComponents/SelectionModal/Gallery.jsx
@@ -50,20 +50,20 @@ export const Gallery = ({
  }
  if (galleryIsEmpty) {
    return (
-      <div className="gallery p-4 bg-gray-100" style={{ height, margin: '0 -1.5rem' }}>
+      <div className="gallery p-4 bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
        <FormattedMessage {...emptyGalleryLabel} />
      </div>
    );
  }
  if (searchIsEmpty) {
    return (
-      <div className="gallery p-4 bg-gray-100" style={{ height, margin: '0 -1.5rem' }}>
+      <div className="gallery p-4 bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
        <FormattedMessage {...messages.emptySearchLabel} />
      </div>
    );
  }
  return (
-    <Scrollable className="gallery bg-gray-100" style={{ height, margin: '0 -1.5rem' }}>
+    <Scrollable className="gallery bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
      <div className="p-4">
        <SelectableBox.Set
          columns={1}
--- a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
+++ b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
@@ -15,17 +15,27 @@ import LanguageNamesWidget from '../../containers/VideoEditor/components/VideoSe
 export const GalleryCard = ({
  asset,
 }) => (
-  <SelectableBox className="card bg-white" key={asset.externalUrl} type="radio" value={asset.id} style={{ padding: '10px 20px' }}>
+  <SelectableBox
+    className="card bg-white"
+    key={asset.externalUrl}
+    type="radio"
+    value={asset.id}
+    style={{
+      padding: '10px 20px',
+      border: 'none',
+      boxShadow: 'none',
+    }}
+  >
    <div className="card-div d-flex flex-row flex-nowrap">
      <div style={{
        position: 'relative',
        width: '200px',
        height: '100px',
-        margin: '16px 0 0 0',
+        margin: '18px 0 0 0',
      }}
      >
        <Image
-          style={{ width: '200px', height: '100px' }}
+          style={{ border: 'none', width: '200px', height: '100px' }}
          src={asset.externalUrl}
        />
        { asset.status && asset.statusBadgeVariant && (
@@ -34,13 +44,21 @@ export const GalleryCard = ({
          </Badge>
        )}
        { asset.duration >= 0 && (
-          <Badge variant="dark" style={{ position: 'absolute', right: '6px', bottom: '6px' }}>
+          <Badge
+            variant="dark"
+            style={{
+              position: 'absolute',
+              right: '6px',
+              bottom: '6px',
+              backgroundColor: 'black',
+            }}
+          >
            {formatDuration(asset.duration)}
          </Badge>
        )}
      </div>
-      <div className="card-text p-3">
-        <h3>{asset.displayName}</h3>
+      <div className="card-text p-3" style={{ marginTop: '10px' }}>
+        <h3 className="text-primary-500">{asset.displayName}</h3>
        { asset.transcripts && (
          <div style={{ margin: '0 0 5px 0' }}>
            <LanguageNamesWidget
@@ -48,7 +66,7 @@ export const GalleryCard = ({
            />
          </div>
        )}
-        <p style={{ fontSize: '11px' }}>
+        <p className="text-gray-500" style={{ fontSize: '11px' }}>
          <FormattedMessage
            {...messages.addedDate}
            values={{
--- a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx
+++ b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx
@@ -57,7 +57,7 @@ export const SearchSort = ({

    { !showSwitch && <ActionRow.Spacer /> }
    <Dropdown>
-      <Dropdown.Toggle id="gallery-sort-button" variant="tertiary">
+      <Dropdown.Toggle className="text-gray-700" id="gallery-sort-button" variant="tertiary">
        <FormattedMessage {...sortMessages[sortBy]} />
      </Dropdown.Toggle>
      <Dropdown.Menu>
@@ -71,7 +71,7 @@ export const SearchSort = ({

    { filterKeys && filterMessages && (
      <Dropdown>
-        <Dropdown.Toggle id="gallery-filter-button" variant="tertiary">
+        <Dropdown.Toggle className="text-gray-700" id="gallery-filter-button" variant="tertiary">
          <FormattedMessage {...filterMessages[filterBy]} />
        </Dropdown.Toggle>
        <Dropdown.Menu>
@@ -92,7 +92,7 @@ export const SearchSort = ({
          onChange={onSwitchClick}
          isInline
        >
-          <Form.Switch value="switch-value" floatLabelLeft>
+          <Form.Switch className="text-gray-700" value="switch-value" floatLabelLeft>
            <FormattedMessage {...switchMessage} />
          </Form.Switch>
        </Form.SwitchSet>
--- a/src/editors/sharedComponents/SelectionModal/snapshots/Gallery.test.jsx.snap
+++ b/src/editors/sharedComponents/SelectionModal/snapshots/Gallery.test.jsx.snap
@@ -2,7 +2,7 @@

 exports[`TextEditor Image Gallery component component snapshot: loaded but no images, show empty gallery 1`] = `
 <div
-  className="gallery p-4 bg-gray-100"
+  className="gallery p-4 bg-light-400"
  style={
    Object {
      "height": "375px",
@@ -16,7 +16,7 @@ exports[`TextEditor Image Gallery component component snapshot: loaded but no im

 exports[`TextEditor Image Gallery component component snapshot: loaded but search returns no images, show 0 search result gallery 1`] = `
 <div
-  className="gallery p-4 bg-gray-100"
+  className="gallery p-4 bg-light-400"
  style={
    Object {
      "height": "375px",
@@ -34,7 +34,7 @@ exports[`TextEditor Image Gallery component component snapshot: loaded but searc

 exports[`TextEditor Image Gallery component component snapshot: loaded, show gallery 1`] = `
 <Scrollable
-  className="gallery bg-gray-100"
+  className="gallery bg-light-400"
  style={
    Object {
      "height": "375px",
--- a/src/editors/sharedComponents/SelectionModal/snapshots/GalleryCard.test.jsx.snap
+++ b/src/editors/sharedComponents/SelectionModal/snapshots/GalleryCard.test.jsx.snap
@@ -6,6 +6,8 @@ exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
  key="props.img.externalUrl"
  style={
    Object {
+      "border": "none",
+      "boxShadow": "none",
      "padding": "10px 20px",
    }
  }
@@ -18,7 +20,7 @@ exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
      style={
        Object {
          "height": "100px",
-          "margin": "16px 0 0 0",
+          "margin": "18px 0 0 0",
          "position": "relative",
          "width": "200px",
        }
@@ -28,6 +30,7 @@ exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
        src="props.img.externalUrl"
        style={
          Object {
+            "border": "none",
            "height": "100px",
            "width": "200px",
          }
@@ -36,11 +39,19 @@ exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
    </div>
    <div
      className="card-text p-3"
+      style={
+        Object {
+          "marginTop": "10px",
+        }
+      }
    >
-      <h3>
+      <h3
+        className="text-primary-500"
+      >
        props.img.displayName
      </h3>
      <p
+        className="text-gray-500"
        style={
          Object {
            "fontSize": "11px",
--- a/src/editors/sharedComponents/SelectionModal/snapshots/SearchSort.test.jsx.snap
+++ b/src/editors/sharedComponents/SelectionModal/snapshots/SearchSort.test.jsx.snap
@@ -28,6 +28,7 @@ exports[`SearchSort component snapshots with filterKeys with search string (clos
  </Form.Group>
  <Dropdown>
    <Dropdown.Toggle
+      className="text-gray-700"
      id="gallery-sort-button"
      variant="tertiary"
    >
@@ -78,6 +79,7 @@ exports[`SearchSort component snapshots with filterKeys with search string (clos
  </Dropdown>
  <Dropdown>
    <Dropdown.Toggle
+      className="text-gray-700"
      id="gallery-filter-button"
      variant="tertiary"
    >
@@ -138,6 +140,7 @@ exports[`SearchSort component snapshots with filterKeys with search string (clos
    onChange={null}
  >
    <Component
+      className="text-gray-700"
      floatLabelLeft={true}
      value="switch-value"
    >
@@ -166,6 +169,7 @@ exports[`SearchSort component snapshots with filterKeys without search string (s
  </Form.Group>
  <Dropdown>
    <Dropdown.Toggle
+      className="text-gray-700"
      id="gallery-sort-button"
      variant="tertiary"
    >
@@ -216,6 +220,7 @@ exports[`SearchSort component snapshots with filterKeys without search string (s
  </Dropdown>
  <Dropdown>
    <Dropdown.Toggle
+      className="text-gray-700"
      id="gallery-filter-button"
      variant="tertiary"
    >
@@ -276,6 +281,7 @@ exports[`SearchSort component snapshots with filterKeys without search string (s
    onChange={null}
  >
    <Component
+      className="text-gray-700"
      floatLabelLeft={true}
      value="switch-value"
    >
@@ -314,6 +320,7 @@ exports[`SearchSort component snapshots without filterKeys with search string (c
  <ActionRow.Spacer />
  <Dropdown>
    <Dropdown.Toggle
+      className="text-gray-700"
      id="gallery-sort-button"
      variant="tertiary"
    >
@@ -385,6 +392,7 @@ exports[`SearchSort component snapshots without filterKeys without search string
  <ActionRow.Spacer />
  <Dropdown>
    <Dropdown.Toggle
+      className="text-gray-700"
      id="gallery-sort-button"
      variant="tertiary"
    >
--- a/src/editors/sharedComponents/SelectionModal/index.jsx
+++ b/src/editors/sharedComponents/SelectionModal/index.jsx
@@ -47,7 +47,7 @@ export const SelectionModal = ({
  let background = '#FFFFFF';
  let showGallery = true;
  if (isLoaded && !isFetchError && !isUploadError && !inputError.show) {
-    background = '#EBEBEB';
+    background = '#E9E6E4';
  } else if (isLoaded) {
    showGallery = false;
  }
@@ -69,14 +69,22 @@ export const SelectionModal = ({
      size={size}
      isFullscreenScroll={isFullscreenScroll}
      footerAction={(
-        <Button iconBefore={Add} onClick={fileInput.click} variant="link">
+        <Button
+          className="text-primary-500"
+          iconBefore={Add}
+          onClick={fileInput.click}
+          variant="link"
+          style={{
+            textDecoration: 'none',
+          }}
+        >
          <FormattedMessage {...uploadButtonMsg} />
        </Button>
      )}
      title={intl.formatMessage(titleMsg)}
-      bodyStyle={{ background, padding: '9px 24px' }}
+      bodyStyle={{ background, padding: '3px 24px' }}
      headerComponent={(
-        <div style={{ zIndex: 10000, margin: '18px 0' }}>
+        <div style={{ margin: '18px 0' }}>
          <SearchSort {...searchSortProps} />
        </div>
      )}