E2C: New onprem empty state (#89628)

* E2C: New onprem empty state

* fix test

public/app/features/migrate-to-cloud/onprem/EmptyState/CallToAction/CallToAction.tsx

@@ -13,7 +13,7 @@ export const CallToAction = () => {
 
   return (
     <>
-      <Box display="flex" padding={5} gap={2} direction="column" alignItems="center" backgroundColor="secondary">
+      <Box display="flex" gap={2} direction="column" alignItems="center" backgroundColor="secondary">
         <Text variant="h3" textAlignment="center">
           <Trans i18nKey="migrate-to-cloud.cta.header">Let us manage your Grafana stack</Trans>
         </Text>

public/app/features/migrate-to-cloud/onprem/EmptyState/EmptyState.tsx

@@ -1,38 +1,29 @@
-import { css } from '@emotion/css';
+import { Box, Grid, Stack } from '@grafana/ui';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { Grid, Stack, useStyles2 } from '@grafana/ui';
 
 import { CallToAction } from './CallToAction/CallToAction';
 import { InfoPaneLeft } from './InfoPaneLeft';
 import { InfoPaneRight } from './InfoPaneRight';
 
 export const EmptyState = () => {
-  const styles = useStyles2(getStyles);
-
   return (
-    <div className={styles.container}>
+    <Box backgroundColor="secondary" display="flex" alignItems="center" direction="column">
-      <Stack direction="column">
+      <Box maxWidth={180} paddingY={6} paddingX={2}>
-        <CallToAction />
+        <Stack gap={5} direction="column">
+          <CallToAction />
 
-        <Grid
+          <Grid
-          alignItems="flex-start"
+            alignItems="flex-start"
-          gap={1}
+            gap={4}
-          columns={{
+            columns={{
-            xs: 1,
+              xs: 1,
-            lg: 2,
+              lg: 2,
-          }}
+            }}
-        >
+          >
-          <InfoPaneLeft />
+            <InfoPaneLeft />
-          <InfoPaneRight />
+            <InfoPaneRight />
-        </Grid>
+          </Grid>
-      </Stack>
+        </Stack>
-    </div>
+      </Box>
+    </Box>
   );
 };
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  container: css({
-    maxWidth: theme.breakpoints.values.xl,
-  }),
-});

public/app/features/migrate-to-cloud/onprem/EmptyState/InfoPaneLeft.tsx

@@ -1,11 +1,11 @@
-import { Box } from '@grafana/ui';
+import { Stack } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { InfoItem } from '../../shared/InfoItem';
 
 export const InfoPaneLeft = () => {
   return (
-    <Box alignItems="flex-start" display="flex" padding={2} gap={2} direction="column" backgroundColor="secondary">
+    <Stack gap={4} direction="column">
       <InfoItem
         title={t('migrate-to-cloud.what-is-cloud.title', 'What is Grafana Cloud?')}
         linkTitle={t('migrate-to-cloud.what-is-cloud.link-title', 'Learn about cloud features')}
@@ -17,6 +17,7 @@ export const InfoPaneLeft = () => {
           installation.
         </Trans>
       </InfoItem>
+
       <InfoItem
         title={t('migrate-to-cloud.why-host.title', 'Why host with Grafana?')}
         linkTitle={t('migrate-to-cloud.why-host.link-title', 'More questions? Talk to an expert')}
@@ -27,6 +28,7 @@ export const InfoPaneLeft = () => {
           SLOs, incident management, machine learning, and powerful observability integrations.
         </Trans>
       </InfoItem>
+
       <InfoItem
         title={t('migrate-to-cloud.is-it-secure.title', 'Is it secure?')}
         linkTitle={t('migrate-to-cloud.is-it-secure.link-title', 'Grafana Labs Trust Center')}
@@ -38,6 +40,6 @@ export const InfoPaneLeft = () => {
           unauthorized access, use, or disclosure.
         </Trans>
       </InfoItem>
-    </Box>
+    </Stack>
   );
 };

public/app/features/migrate-to-cloud/onprem/EmptyState/InfoPaneRight.tsx

@@ -1,11 +1,11 @@
-import { Box } from '@grafana/ui';
+import { Stack } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { InfoItem } from '../../shared/InfoItem';
 
 export const InfoPaneRight = () => {
   return (
-    <Box alignItems="flex-start" display="flex" direction="column" gap={2} padding={2} backgroundColor="secondary">
+    <Stack gap={4} direction="column">
       <InfoItem
         title={t('migrate-to-cloud.pdc.title', 'Not all my data sources are on the public internet')}
         linkTitle={t('migrate-to-cloud.pdc.link-title', 'Learn about PDC')}
@@ -36,6 +36,6 @@ export const InfoPaneRight = () => {
           dashboards.
         </Trans>
       </InfoItem>
-    </Box>
+    </Stack>
   );
 };