fix: pagination style (#697)

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

@@ -25,6 +25,7 @@ import {
   RowStatus,
   MoreInfoColumn,
   FilterStatus,
+  Footer,
 } from './table-components';
 import ApiStatusToast from './ApiStatusToast';
 
@@ -216,10 +217,10 @@ const FileTable = ({
           <div data-testid="files-data-table" className="bg-light-200">
             <DataTable.TableControlBar />
             <hr className="mb-5 border-light-700" />
-            { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={5} /> }
+            { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={6} /> }
             { currentView === 'list' && <DataTable.Table /> }
             <DataTable.EmptyTable content={intl.formatMessage(messages.noResultsFoundMessage)} />
-            <DataTable.TableFooter />
+            <Footer />
           </div>
         )}
 

src/files-and-videos/generic/table-components/Footer.jsx

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { DataTableContext, Pagination, TableFooter } from '@edx/paragon';
+
+const Footer = () => {
+  const {
+    pageOptions, pageCount, gotoPage, state,
+  } = useContext(DataTableContext);
+
+  if (pageOptions.length < 2) {
+    return null;
+  }
+
+  const pageIndex = state?.pageIndex;
+
+  return (
+    <TableFooter>
+      <Pagination
+        size="small"
+        currentPage={pageIndex + 1}
+        pageCount={pageCount}
+        paginationLabel="table pagination"
+        onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
+      />
+    </TableFooter>
+  );
+};
+
+export default Footer;

src/files-and-videos/generic/table-components/index.js

@@ -2,6 +2,7 @@ import GalleryCard from './GalleryCard';
 import TableActions from './TableActions';
 import FilterStatus from './FilterStatus';
 import RowStatus from './RowStatus';
+import Footer from './Footer';
 import {
   AccessColumn,
   ActiveColumn,
@@ -15,6 +16,7 @@ export {
   GalleryCard,
   FilterStatus,
   RowStatus,
+  Footer,
   AccessColumn,
   ActiveColumn,
   MoreInfoColumn,

src/files-and-videos/index.scss

@@ -7,8 +7,13 @@
     visibility: hidden;
   }
 
-  .pgn__data-table-layout-main {
+  .pgn__data-table-layout-wrapper {
+    overflow-x: visible;
+  }
+
+  .pgn__data-table-wrapper {
     background-color: $light-200;
+    box-shadow: 0 0 0;
 
     .pgn__data-table-status-bar {
       padding: 12px 0;
@@ -26,6 +31,11 @@
         margin-bottom: 0;
       }
     }
+
+    .pgn__data-table-footer {
+      border-top: none;
+      justify-content: center;
+    }
   }
 
   .more-info-menu {

src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx

@@ -99,7 +99,7 @@ const TranscriptTab = ({
 
   return (
     <Stack gap={3}>
-      <div ref={divRef} style={{ overflowY: 'scroll', height: '310px' }} className="px-1 py-2">
+      <div ref={divRef} style={{ overflowY: 'auto', maxHeight: '310px' }} className="px-1 py-2">
         <ErrorAlert
           hideHeading={false}
           isError={transcriptStatus === RequestStatus.FAILED && !isEmpty(errors.transcript)}

src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx

@@ -82,7 +82,7 @@ const Transcript = ({
           key={`transcript-${language}`}
           data-testid={`transcript-${language}`}
         >
-          <div className="col-10 p-0">
+          <div className="col-9 p-0">
             <LanguageSelect
               options={languages}
               value={newLanguage}