From ef6e3153222bf6ce461302fc512eb4129a197372 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 7 Feb 2024 15:39:15 +0000
Subject: [PATCH] Chore: use `Box` in command palette empty state (#82101)

* use Box

* use paddingTop/paddingBottom
---
 .../app/features/commandPalette/EmptyState.tsx   | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/public/app/features/commandPalette/EmptyState.tsx b/public/app/features/commandPalette/EmptyState.tsx
index 05fc9bf0a64..15439b049d7 100644
--- a/public/app/features/commandPalette/EmptyState.tsx
+++ b/public/app/features/commandPalette/EmptyState.tsx
@@ -1,31 +1,21 @@
-import { css } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { Stack, Text, useStyles2 } from '@grafana/ui';
+import { Box, Stack, Text } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
 
 export interface Props {}
 
 export const EmptyState = ({}: Props) => {
-  const styles = useStyles2(getStyles);
-
   return (
-    <div className={styles.container}>
+    <Box paddingY={8}>
       <Stack direction="column" alignItems="center">
         <img src={'public/img/grot-not-found.svg'} width="200px" alt="grot" />
         <Text variant="h5">
           <Trans i18nKey="command-palette.empty-state.title">No results found</Trans>
         </Text>
       </Stack>
-    </div>
+    </Box>
   );
 };
 
 EmptyState.displayName = 'EmptyState';
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  container: css({
-    padding: theme.spacing(8, 0),
-  }),
-});