feat: add footer and fix styles

Author: navinkarkera

src/library-authoring/component-comparison/CompareChangesWidget.tsx

@@ -51,7 +51,7 @@ const CompareChangesWidget = ({
     <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
       <Card.Body
         className="p-4 bg-white overflow-auto"
-        style={{ height: '70vh' }}
+        style={{ height: '60vh' }}
       >
         {sideBySide && (
           <h3 className="w-100 text-center mb-4">
@@ -68,9 +68,9 @@ const CompareChangesWidget = ({
             <LibraryBlock
               usageKey={oldUsageKey || usageKey}
               version={oldVersion}
-              minHeight="50vh"
+              minHeight="45vh"
               showTitle={showTitle}
-              addHeight={40}
+              addHeight={70}
             />
           </IframeProvider>
         </div>
@@ -82,7 +82,7 @@ const CompareChangesWidget = ({
     <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
       <Card.Body
         className="p-4 bg-white overflow-auto"
-        style={{ height: '70vh' }}
+        style={{ height: '60vh' }}
       >
         {sideBySide && (
           <h3 className="w-100 text-center mb-4">
@@ -94,8 +94,8 @@ const CompareChangesWidget = ({
             usageKey={usageKey}
             version={newVersion}
             showTitle={showNewTitle || showTitle}
-            minHeight="50vh"
-            addHeight={40}
+            minHeight="45vh"
+            addHeight={70}
           />
         </IframeProvider>
       </Card.Body>

src/library-authoring/generic/history-log/HistoryCompareChangesModal.test.tsx

@@ -1,3 +1,4 @@
+import { userEvent } from '@testing-library/user-event';
 import { render, screen, initializeMocks } from '@src/testUtils';
 
 import HistoryCompareChangesModal from './HistoryCompareChangesModal';
@@ -43,6 +44,26 @@ describe('<HistoryCompareChangesModal />', () => {
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-new-version', 'published');
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-side-by-side', 'true');
     expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-show-title', 'true');
+    expect(screen.getByRole('button', { name: 'Done' })).toBeInTheDocument();
+  });
+
+  it('closes modal when clicking done button', async () => {
+    const onClose = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <HistoryCompareChangesModal
+        isOpen
+        onClose={onClose}
+        usageKey="lb:org:lib:type:id"
+        oldTitle="Electron Arcs"
+        oldVersion={3}
+        newVersion="published"
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Done' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it('renders nothing for container usage keys', () => {

src/library-authoring/generic/history-log/HistoryCompareChangesModal.tsx

@@ -1,4 +1,4 @@
-import { Icon, ModalDialog, Stack } from '@openedx/paragon';
+import { Button, Icon, ModalDialog, Stack } from '@openedx/paragon';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import CompareChangesWidget from '@src/library-authoring/component-comparison/CompareChangesWidget';
@@ -49,7 +49,7 @@ const HistoryCompareChangesModal = ({
     >
       <ModalDialog.Header>
         <ModalDialog.Title>
-          <Stack direction='horizontal'>
+          <Stack direction='horizontal' gap={2}>
             <FormattedMessage
               {...messages.previewChangesTitle}
               values={{
@@ -74,6 +74,11 @@ const HistoryCompareChangesModal = ({
           showTitle
         />
       </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button onClick={onClose}>
+          {intl.formatMessage(messages.doneButton)}
+        </Button>
+      </ModalDialog.Footer>
     </ModalDialog>
   );
 };

src/library-authoring/generic/history-log/messages.ts

@@ -71,6 +71,11 @@ const messages = defineMessages({
     defaultMessage: 'Show this version',
     description: 'Action to open the version comparison modal for a history entry.',
   },
+  doneButton: {
+    id: 'course-authoring.library-authoring.history.done-button',
+    defaultMessage: 'Done',
+    description: 'Button label to close preview changes modal.',
+  },
 });
 
 export default messages;