fix: step instructions, exit-without-save, margins

* fix: default instructions to use view step

* chore: add margin to info popover button

* fix: exit without saving button message

src/components/InfoPopover/index.jsx

@@ -32,7 +32,7 @@ export const InfoPopover = ({ onClick, children }) => {
         )}
       >
         <IconButton
-          className="ml-2 esg-help-icon"
+          className="ml-2 mb-2 esg-help-icon"
           src={InfoOutline}
           alt={formatMessage(messages.altText)}
           iconAs={Icon}

src/components/Instructions/useInstructionsMessage.jsx

@@ -1,18 +1,21 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { useGlobalState } from 'hooks/app';
 import { stepNames, stepStates } from 'constants';
 
+import { useGlobalState } from 'hooks/app';
+import { useViewStep } from 'hooks/routing';
+
 import messages from './messages';
 
 const useInstructionsMessage = (step = null) => {
   const { formatMessage } = useIntl();
+  const viewStep = useViewStep();
   const {
     activeStepName,
     effectiveGrade,
     stepState,
   } = useGlobalState();
-  const stepName = step || activeStepName;
+  const stepName = (viewStep === stepNames.xblock) ? activeStepName : viewStep;
   if (step || stepState !== stepStates.inProgress || stepName === stepNames.staff) {
     return null;
   }

src/hooks/actions/useExitWithoutSavingAction.js

@@ -7,14 +7,11 @@ import messages, { confirmTitles, confirmDescriptions } from './messages';
 
 const useExitWithoutSavingAction = () => {
   const { formatMessage } = useIntl();
-  const closeAction = useCloseAction(messages.finishLater);
+  const closeAction = useCloseAction(messages.exitWithoutSaving);
   const confirmAction = useConfirmAction();
 
   return confirmAction({
-    action: {
-      ...closeAction,
-      children: formatMessage(messages.exitWithoutSaving),
-    },
+    action: closeAction,
     title: formatMessage(confirmTitles.exit),
     description: formatMessage(confirmDescriptions.exit),
   });