fix styles

Author: paula-stacho

packages/compass-components/src/components/loader.tsx

@@ -6,7 +6,7 @@ import { useDarkMode } from '../hooks/use-theme';
 import { Subtitle, Button, ProgressBar } from './leafygreen';
 import type { ProgressBarProps } from '@leafygreen-ui/progress-bar';
 
-const containerStyles = css({
+const loaderContainerStyles = css({
   display: 'flex',
   gap: spacing[200],
   flexDirection: 'column',
@@ -17,7 +17,14 @@ const containerStyles = css({
 
 const progressContainerStyles = css({
   width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  maxWidth: spacing[1600] * 8,
   gap: spacing[500],
+  margin: '0 auto',
 });
 
 const textStyles = css({
@@ -105,7 +112,10 @@ function SpinLoaderWithLabel({
   const darkMode = useDarkMode(_darkMode);
 
   return (
-    <div className={cx(containerStyles, className)} data-testid={dataTestId}>
+    <div
+      className={cx(loaderContainerStyles, className)}
+      data-testid={dataTestId}
+    >
       <SpinLoader
         size={spacing[600]}
         darkMode={darkMode}
@@ -144,7 +154,7 @@ function ProgressLoaderWithCancel({
   ...props
 }: ProgressLoaderWithCancelProps): React.ReactElement {
   return (
-    <div className={cx(containerStyles, progressContainerStyles, className)}>
+    <div className={cx(progressContainerStyles, className)}>
       <ProgressBar {...props} />
       <Button
         variant="primaryOutline"

packages/compass-data-modeling/src/components/analysis-progress-status.tsx

@@ -1,25 +1,12 @@
 import {
-  css,
   ProgressLoaderWithCancel,
-  spacing,
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import React from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
 import { cancelAnalysis, type AnalysisStep } from '../store/analysis-process';
 
-const loaderStyles = css({
-  margin: '0 auto',
-});
-
-const loadingContainerStyles = css({
-  width: '100%',
-  paddingTop: spacing[1800] * 3,
-  display: 'flex',
-  justifyContent: 'center',
-});
-
 function getProgressPropsFromStatus({
   step,
   sampledCollections,
@@ -97,22 +84,19 @@ export const AnalysisProgressStatus: React.FC<AnalysisProgressStatusProps> = ({
 }) => {
   const darkMode = useDarkMode();
   return (
-    <div className={loadingContainerStyles}>
-      <ProgressLoaderWithCancel
-        darkMode={darkMode}
-        variant="success"
-        className={loaderStyles}
-        cancelText="Cancel"
-        onCancel={onCancelClick}
-        {...getProgressPropsFromStatus({
-          step,
-          sampledCollections,
-          analyzedCollections,
-          collectionRelationsInferred,
-          totalCollections,
-        })}
-      ></ProgressLoaderWithCancel>
-    </div>
+    <ProgressLoaderWithCancel
+      darkMode={darkMode}
+      variant="success"
+      cancelText="Cancel"
+      onCancel={onCancelClick}
+      {...getProgressPropsFromStatus({
+        step,
+        sampledCollections,
+        analyzedCollections,
+        collectionRelationsInferred,
+        totalCollections,
+      })}
+    ></ProgressLoaderWithCancel>
   );
 };