Miscellaneous changes and improvements

src/commons/dialogs/ConfirmDialog.tsx

@@ -3,6 +3,8 @@ import {
   ButtonProps,
   Classes,
   Dialog,
+  DialogBody,
+  DialogFooter,
   DialogProps,
   IconName,
   Intent
@@ -54,11 +56,10 @@ export function ConfirmDialog<T>(
       icon={props.icon}
       {...props.props}
     >
-      <div className={Classes.DIALOG_BODY}>{props.contents}</div>
-      <div className={Classes.DIALOG_FOOTER}>
+      <DialogBody>{props.contents}</DialogBody>
+      <DialogFooter actions={!props.largeButtons && <>{buttons}</>}>
         {props.largeButtons && buttons}
-        {!props.largeButtons && <div className={Classes.DIALOG_FOOTER_ACTIONS}>{buttons}</div>}
-      </div>
+      </DialogFooter>
     </Dialog>
   );
 }

src/commons/editingOverviewCard/EditingOverviewCard.tsx

@@ -3,6 +3,7 @@ import {
   Card,
   Classes,
   Dialog,
+  DialogBody,
   Elevation,
   H3,
   H4,
@@ -179,7 +180,7 @@ export const EditingOverviewCard: React.FC<EditingOverviewCardProps> = props =>
       onClose={toggleOptionsOverlay}
       title="Other options"
     >
-      <div className={Classes.DIALOG_BODY}>
+      <DialogBody>
         <H3>Assessment Type</H3>
         {assessmentTypeSelect(props.overview.type, saveCategory)}
         <H3>Number</H3>
@@ -201,7 +202,7 @@ export const EditingOverviewCard: React.FC<EditingOverviewCardProps> = props =>
             ? makeEditingOverviewTextarea('fileName')
             : createPlaceholder(props.overview.fileName || '')}
         </div>
-      </div>
+      </DialogBody>
     </Dialog>
   );
 

src/commons/editingWorkspace/EditingWorkspace.tsx

@@ -1,7 +1,8 @@
 import {
-  ButtonGroup,
   Classes,
   Dialog,
+  DialogBody,
+  DialogFooter,
   Intent,
   NonIdealState,
   Spinner,
@@ -214,31 +215,33 @@ const EditingWorkspace: React.FC<EditingWorkspaceProps> = props => {
       isOpen={showResetTemplateOverlay}
       title="Confirmation: Reset editor?"
     >
-      <div className={Classes.DIALOG_BODY}>
+      <DialogBody>
         <Markdown content="Are you sure you want to reset to your last save?" />
-      </div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <ButtonGroup>
-          <ControlButton
-            label="Cancel"
-            onClick={() => setShowResetTemplateOverlay(false)}
-            options={{ minimal: false }}
-          />
-          <ControlButton
-            label="Confirm"
-            onClick={() => {
-              const assessment = retrieveLocalAssessment()!;
-              setAssessment(assessment);
-              setHasUnsavedChanges(false);
-              setShowResetTemplateOverlay(false);
-              setOriginalMaxXp(getMaxXp());
-              handleRefreshLibrary();
-              resetWorkspaceValues();
-            }}
-            options={{ minimal: false, intent: Intent.DANGER }}
-          />
-        </ButtonGroup>
-      </div>
+      </DialogBody>
+      <DialogFooter
+        actions={
+          <>
+            <ControlButton
+              label="Cancel"
+              onClick={() => setShowResetTemplateOverlay(false)}
+              options={{ minimal: false }}
+            />
+            <ControlButton
+              label="Confirm"
+              onClick={() => {
+                const assessment = retrieveLocalAssessment()!;
+                setAssessment(assessment);
+                setHasUnsavedChanges(false);
+                setShowResetTemplateOverlay(false);
+                setOriginalMaxXp(getMaxXp());
+                handleRefreshLibrary();
+                resetWorkspaceValues();
+              }}
+              options={{ minimal: false, intent: Intent.DANGER }}
+            />
+          </>
+        }
+      />
     </Dialog>
   );
 

src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentManageQuestionTab.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { Button, Dialog, DialogBody, DialogFooter, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router';
@@ -120,26 +120,28 @@ const ManageQuestionTab: React.FC<ManageQuestionTabProps> = props => {
       isOpen={showSaveOverlay}
       title="Confirmation: Save unsaved changes?"
     >
-      <div className={Classes.DIALOG_BODY}>
+      <DialogBody>
         <Markdown content="Are you sure you want to save over your unsaved changes?" />
-      </div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <ButtonGroup>
-          <ControlButton
-            label="Cancel"
-            onClick={() => setShowSaveOverlay(false)}
-            options={{ minimal: false }}
-          />
-          <ControlButton
-            label="Confirm"
-            onClick={() => {
-              modifyAssessment();
-              setShowSaveOverlay(false);
-            }}
-            options={{ minimal: false, intent: Intent.DANGER }}
-          />
-        </ButtonGroup>
-      </div>
+      </DialogBody>
+      <DialogFooter
+        actions={
+          <>
+            <ControlButton
+              label="Cancel"
+              onClick={() => setShowSaveOverlay(false)}
+              options={{ minimal: false }}
+            />
+            <ControlButton
+              label="Confirm"
+              onClick={() => {
+                modifyAssessment();
+                setShowSaveOverlay(false);
+              }}
+              options={{ minimal: false, intent: Intent.DANGER }}
+            />
+          </>
+        }
+      />
     </Dialog>
   );
 

src/commons/gitHubOverlay/FileExplorerDialog.tsx

@@ -3,6 +3,8 @@ import {
   Button,
   Classes,
   Dialog,
+  DialogBody,
+  DialogFooter,
   InputGroup,
   Intent,
   Tree,
@@ -47,7 +49,7 @@ const FileExplorerDialog: React.FC<FileExplorerDialogProps> = props => {
       <div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
         <h3>Select a File</h3>
       </div>
-      <div className={Classes.DIALOG_BODY}>
+      <DialogBody>
         <Tree
           contents={repoFiles}
           onNodeClick={handleNodeClick}
@@ -71,13 +73,15 @@ const FileExplorerDialog: React.FC<FileExplorerDialogProps> = props => {
             />
           </div>
         )}
-      </div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button onClick={handleClose}>Close</Button>
-          <AnchorButton onClick={handleSubmit} intent={Intent.PRIMARY} text={props.pickerType} />
-        </div>
-      </div>
+      </DialogBody>
+      <DialogFooter
+        actions={
+          <>
+            <Button onClick={handleClose}>Close</Button>
+            <AnchorButton onClick={handleSubmit} intent={Intent.PRIMARY} text={props.pickerType} />
+          </>
+        }
+      />
     </Dialog>
   );
 

src/commons/gitHubOverlay/RepositoryDialog.tsx

@@ -3,6 +3,8 @@ import {
   Button,
   Classes,
   Dialog,
+  DialogBody,
+  DialogFooter,
   Intent,
   Radio,
   RadioGroup
@@ -25,7 +27,7 @@ const RepositoryDialog: React.FC<RepositoryDialogProps> = props => {
       <div className={classNames('githubDialogHeader', Classes.DIALOG_HEADER)}>
         <h3>Select a Repository</h3>
       </div>
-      <div className={Classes.DIALOG_BODY}>
+      <DialogBody>
         <RadioGroup
           className="RepositoryRadioGroup"
           onChange={handleSelect}
@@ -35,15 +37,17 @@ const RepositoryDialog: React.FC<RepositoryDialogProps> = props => {
             <Radio label={repo.name} key={repo.id} value={repo.name} />
           ))}
         </RadioGroup>
-      </div>
-      <div className={classNames(Classes.DIALOG_FOOTER)}>
-        <div className={classNames(Classes.DIALOG_FOOTER_ACTIONS)}>
-          <Button onClick={handleClose}>Close</Button>
-          <AnchorButton onClick={handleSubmit} intent={Intent.PRIMARY}>
-            Select
-          </AnchorButton>
-        </div>
-      </div>
+      </DialogBody>
+      <DialogFooter
+        actions={
+          <>
+            <Button onClick={handleClose}>Close</Button>
+            <AnchorButton onClick={handleSubmit} intent={Intent.PRIMARY}>
+              Select
+            </AnchorButton>
+          </>
+        }
+      />
     </Dialog>
   );
 

src/commons/researchAgreementPrompt/ResearchAgreementPrompt.tsx

@@ -1,4 +1,4 @@
-import { Button, Classes, Dialog, H4, Intent } from '@blueprintjs/core';
+import { Button, Classes, Dialog, DialogBody, DialogFooter, H4, Intent } from '@blueprintjs/core';
 import { useDispatch } from 'react-redux';
 
 import SessionActions from '../application/actions/SessionActions';
@@ -17,7 +17,7 @@ const ResearchAgreementPrompt: React.FC = () => {
         isCloseButtonShown={false}
         isOpen
       >
-        <div className={Classes.DIALOG_BODY}>
+        <DialogBody>
           <H4>Welcome to your new {Constants.sourceAcademyDeploymentName} course!</H4>
           <div>
             Here at {Constants.sourceAcademyDeploymentName}, our mission is to bring out the beauty
@@ -31,20 +31,22 @@ const ResearchAgreementPrompt: React.FC = () => {
             with no penalty for you whatsoever. Contact your course instructor if you have questions
             or concerns about this research.
           </div>
-        </div>
-        <div className={Classes.DIALOG_FOOTER}>
-          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <Button
-              text="I would like to opt out"
-              onClick={() => dispatch(SessionActions.updateCourseResearchAgreement(false))}
-            />
-            <Button
-              text="I consent!"
-              intent={Intent.SUCCESS}
-              onClick={() => dispatch(SessionActions.updateCourseResearchAgreement(true))}
-            />
-          </div>
-        </div>
+        </DialogBody>
+        <DialogFooter
+          actions={
+            <>
+              <Button
+                text="I would like to opt out"
+                onClick={() => dispatch(SessionActions.updateCourseResearchAgreement(false))}
+              />
+              <Button
+                text="I consent!"
+                intent={Intent.SUCCESS}
+                onClick={() => dispatch(SessionActions.updateCourseResearchAgreement(true))}
+              />
+            </>
+          }
+        />
       </Dialog>
     </div>
   );

src/commons/sourceRecorder/SourceRecorderDeleteCell.tsx

@@ -1,4 +1,4 @@
-import { Classes, Dialog } from '@blueprintjs/core';
+import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 
@@ -35,15 +35,17 @@ const SourceRecorderDeleteCell: React.FC<SourceRecorderDeleteCellProps> = props
         title="Delete Sourcecast"
         canOutsideClickClose={true}
       >
-        <div className={Classes.DIALOG_BODY}>
+        <DialogBody>
           <p>Are you sure to delete this sourcecast entry?</p>
-        </div>
-        <div className={Classes.DIALOG_FOOTER}>
-          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-            <ControlButton label="Confirm Delete" icon={IconNames.TRASH} onClick={handleDelete} />
-            <ControlButton label="Cancel" icon={IconNames.CROSS} onClick={handleCloseDialog} />
-          </div>
-        </div>
+        </DialogBody>
+        <DialogFooter
+          actions={
+            <>
+              <ControlButton label="Confirm Delete" icon={IconNames.TRASH} onClick={handleDelete} />
+              <ControlButton label="Cancel" icon={IconNames.CROSS} onClick={handleCloseDialog} />
+            </>
+          }
+        />
       </Dialog>
     </div>
   );