fix: style adjustments on export modal COMPASS-9142 (#6806)

Author: paula-stacho

packages/compass-schema/src/components/export-schema-modal.tsx

@@ -36,23 +36,23 @@ const modalStyles = css({
 });
 
 const loaderStyles = css({
+  height: `${spacing[1600] * 5 - spacing[800]}px`,
   marginTop: spacing[400],
 });
 
 const contentContainerStyles = css({
   paddingTop: spacing[400],
-  paddingBottom: spacing[400],
 });
 
 const codeEditorContainerStyles = css({
-  height: `${spacing[1600] * 4 - spacing[400]}px`,
+  height: `${spacing[1600] * 5 - spacing[400]}px`,
   padding: spacing[100],
 });
 
 const codeStyles = css({
   '& .cm-editor': {
     paddingLeft: spacing[200],
-    maxHeight: `${spacing[1600] * 4 - spacing[800]}px`,
+    maxHeight: `${spacing[1600] * 5 - spacing[800]}px`,
   },
   '& .multiline-editor-actions': {
     marginRight: spacing[300],
@@ -230,9 +230,6 @@ const ExportSchemaModal: React.FunctionComponent<{
         </div>
       </ModalBody>
       <ModalFooter className={footerStyles}>
-        <Button onClick={onClose} variant="default">
-          Cancel
-        </Button>
         <Button
           variant="primary"
           isLoading={exportStatus === 'inprogress'}
@@ -241,7 +238,10 @@ const ExportSchemaModal: React.FunctionComponent<{
           onClick={onSchemaDownload}
           data-testid="schema-export-download-button"
         >
-          Export…
+          Export..
+        </Button>
+        <Button onClick={onClose} variant="default">
+          Cancel
         </Button>
       </ModalFooter>
     </Modal>