fix: general page layout and colors (#693)

src/files-and-videos/files-page/FilesPage.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
-import { CheckboxFilter } from '@edx/paragon';
+import { CheckboxFilter, Container } from '@edx/paragon';
 import Placeholder from '@edx/frontend-lib-content-components';
 
 import { RequestStatus } from '../../data/constants';
@@ -169,18 +169,16 @@ const FilesPage = ({
   }
   return (
     <FilesPageProvider courseId={courseId}>
-      <main>
-        <div className="p-4">
-          <EditFileErrors
-            resetErrors={handleErrorReset}
-            errorMessages={errorMessages}
-            addFileStatus={addAssetStatus}
-            deleteFileStatus={deleteAssetStatus}
-            updateFileStatus={updateAssetStatus}
-          />
-          <div className="h2">
-            <FormattedMessage {...messages.heading} />
-          </div>
+      <Container size="xl" className="p-4 pt-4.5">
+        <EditFileErrors
+          resetErrors={handleErrorReset}
+          errorMessages={errorMessages}
+          addFileStatus={addAssetStatus}
+          deleteFileStatus={deleteAssetStatus}
+          updateFileStatus={updateAssetStatus}
+        />
+        <div className="h2">
+          <FormattedMessage {...messages.heading} />
         </div>
         <FileTable
           {...{
@@ -200,7 +198,7 @@ const FilesPage = ({
             files: assets,
           }}
         />
-      </main>
+      </Container>
     </FilesPageProvider>
   );
 };

src/files-and-videos/generic/FileTable.jsx

@@ -51,7 +51,8 @@ const FileTable = ({
     xs: 12,
     sm: 6,
     md: 4,
-    lg: 2,
+    lg: 3,
+    xl: 2,
   };
   const [currentView, setCurrentView] = useState(defaultVal);
   const [isDeleteOpen, setDeleteOpen, setDeleteClose] = useToggle(false);
@@ -212,9 +213,10 @@ const FileTable = ({
             }}
           />
         ) : (
-          <div data-testid="files-data-table" className="mr-4 ml-3">
+          <div data-testid="files-data-table" className="bg-light-200">
             <DataTable.TableControlBar />
-            { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={6} /> }
+            <hr className="mb-5 border-light-700" />
+            { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={5} /> }
             { currentView === 'list' && <DataTable.Table /> }
             <DataTable.EmptyTable content={intl.formatMessage(messages.noResultsFoundMessage)} />
             <DataTable.TableFooter />

src/files-and-videos/index.scss

@@ -6,6 +6,27 @@
   #table-filters-dropdown {
     visibility: hidden;
   }
+
+  .pgn__data-table-layout-main {
+    background-color: $light-200;
+
+    .pgn__data-table-status-bar {
+      padding: 12px 0;
+
+      .pgn__data-table-actions-left {
+        margin-top: 16px;
+      }
+    }
+
+    .pgn__data-table-card-view {
+      margin-left: 24px;
+
+      .pgn__card-grid__card-item {
+        padding: 0 24px 24px 0;
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 .pgn__form-control-set-inline {

src/files-and-videos/videos-page/VideosPage.jsx

@@ -12,6 +12,7 @@ import {
   ActionRow,
   Button,
   CheckboxFilter,
+  Container,
 } from '@edx/paragon';
 import Placeholder from '@edx/frontend-lib-content-components';
 
@@ -177,34 +178,32 @@ const VideosPage = ({
   }
   return (
     <VideosPageProvider courseId={courseId}>
-      <main>
-        <div className="p-4">
-          <EditFileErrors
-            resetErrors={handleErrorReset}
-            errorMessages={errorMessages}
-            addFileStatus={addVideoStatus}
-            deleteFileStatus={deleteVideoStatus}
-            updateFileStatus={updateVideoStatus}
-          />
-          <ActionRow>
-            <div className="h2">
-              <FormattedMessage {...messages.heading} />
-            </div>
-            <ActionRow.Spacer />
-            {isVideoTranscriptEnabled ? (
-              <Button
-                variant="link"
-                size="sm"
-                onClick={() => {
-                  openTranscriptSettings();
-                  handleErrorReset({ errorType: 'transcript' });
-                }}
-              >
-                <FormattedMessage {...messages.transcriptSettingsButtonLabel} />
-              </Button>
-            ) : null}
-          </ActionRow>
-        </div>
+      <Container size="xl" className="p-4 pt-4.5">
+        <EditFileErrors
+          resetErrors={handleErrorReset}
+          errorMessages={errorMessages}
+          addFileStatus={addVideoStatus}
+          deleteFileStatus={deleteVideoStatus}
+          updateFileStatus={updateVideoStatus}
+        />
+        <ActionRow>
+          <div className="h2">
+            <FormattedMessage {...messages.heading} />
+          </div>
+          <ActionRow.Spacer />
+          {isVideoTranscriptEnabled ? (
+            <Button
+              variant="link"
+              size="sm"
+              onClick={() => {
+                openTranscriptSettings();
+                handleErrorReset({ errorType: 'transcript' });
+              }}
+            >
+              <FormattedMessage {...messages.transcriptSettingsButtonLabel} />
+            </Button>
+          ) : null}
+        </ActionRow>
         {isVideoTranscriptEnabled ? (
           <TranscriptSettings
             {...{
@@ -234,7 +233,7 @@ const VideosPage = ({
             files: videos,
           }}
         />
-      </main>
+      </Container>
     </VideosPageProvider>
   );
 };