From 15393f3da14e60a8893adbd04a61b1f74700c38e Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Mon, 24 Apr 2023 18:06:50 -0500
Subject: [PATCH] style: Fixing styles on gallery, editor and uploader video
 page

---
 package-lock.json                             |  2 +-
 .../__snapshots__/index.test.jsx.snap         | 21 +++++--
 .../LanguageNamesWidget.jsx                   |  6 +-
 .../components/VideoSettingsModal/index.jsx   | 12 ++--
 src/editors/containers/VideoEditor/index.jsx  | 18 ++++--
 .../__snapshots__/index.test.jsx.snap         | 56 +++++++++++--------
 .../containers/VideoUploadEditor/index.jsx    | 26 +++++----
 .../containers/VideoUploadEditor/index.scss   |  5 ++
 .../data/redux/thunkActions/video.test.js     |  7 +++
 .../__snapshots__/index.test.jsx.snap         |  3 +-
 .../sharedComponents/BaseModal/index.jsx      |  2 +-
 .../SelectionModal/Gallery.jsx                |  6 +-
 .../SelectionModal/GalleryCard.jsx            | 32 ++++++++---
 .../SelectionModal/SearchSort.jsx             |  6 +-
 .../__snapshots__/Gallery.test.jsx.snap       |  6 +-
 .../__snapshots__/GalleryCard.test.jsx.snap   | 15 ++++-
 .../__snapshots__/SearchSort.test.jsx.snap    |  8 +++
 .../sharedComponents/SelectionModal/index.jsx | 16 ++++--
 18 files changed, 168 insertions(+), 79 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0828bba6a..dc17aa36b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47382,4 +47382,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/editors/containers/VideoEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/__snapshots__/index.test.jsx.snap
index 4228e5ac6..beddeae9e 100644
--- 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>
 `;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx
index 2fabd32cb..79333e689 100644
--- 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>
   );
 };
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
index af7a8a90f..c46e1dea4 100644
--- 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 />
diff --git a/src/editors/containers/VideoEditor/index.jsx b/src/editors/containers/VideoEditor/index.jsx
index 4e8c9d33c..d0eb74610 100644
--- 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>
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
index 397e908b3..76b3b224e 100644
--- 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>
diff --git a/src/editors/containers/VideoUploadEditor/index.jsx b/src/editors/containers/VideoUploadEditor/index.jsx
index 71b2ce68d..726327fcf 100644
--- 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>
   );
diff --git a/src/editors/containers/VideoUploadEditor/index.scss b/src/editors/containers/VideoUploadEditor/index.scss
index f94935505..b48aa025e 100644
--- 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%;
diff --git a/src/editors/data/redux/thunkActions/video.test.js b/src/editors/data/redux/thunkActions/video.test.js
index edb211f6c..841cb2b36 100644
--- 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,
diff --git a/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap
index 00d2ed5d9..aee237271 100644
--- 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,
       }
     }
   >
diff --git a/src/editors/sharedComponents/BaseModal/index.jsx b/src/editors/sharedComponents/BaseModal/index.jsx
index 66521fcb7..38fe4ad51 100644
--- 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>
diff --git a/src/editors/sharedComponents/SelectionModal/Gallery.jsx b/src/editors/sharedComponents/SelectionModal/Gallery.jsx
index e497a40c2..506448705 100644
--- 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}
diff --git a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
index faad6f273..6c0fe5fab 100644
--- 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={{
diff --git a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx
index 11a5f9145..762255877 100644
--- 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>
diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap
index 9c2eacf95..029cbbaf2 100644
--- 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",
diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
index 684f7189c..d8296c5b1 100644
--- 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",
diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/SearchSort.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/SearchSort.test.jsx.snap
index 1f3156ab8..9421398b4 100644
--- 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"
     >
diff --git a/src/editors/sharedComponents/SelectionModal/index.jsx b/src/editors/sharedComponents/SelectionModal/index.jsx
index 3ae534b8b..9ddd77e90 100644
--- 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>
       )}