From 80ac1152f8d966b62bd692d935695bc4f992c5ba Mon Sep 17 00:00:00 2001
From: joshhunt <josh@trtr.co>
Date: Tue, 2 May 2023 19:48:10 +0100
Subject: [PATCH] use components for modal styles

---
 .../components/BrowseActions/DeleteModal.tsx  | 41 ++++++++-----------
 .../components/BrowseActions/MoveModal.tsx    | 36 ++++++++--------
 2 files changed, 32 insertions(+), 45 deletions(-)

diff --git a/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.tsx b/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.tsx
index 332688bb22e..4f57f0b806a 100644
--- a/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.tsx
+++ b/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.tsx
@@ -1,8 +1,8 @@
-import { css } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, ConfirmModal, Spinner, useStyles2 } from '@grafana/ui';
+import { Space, Stack } from '@grafana/experimental';
+import { Alert, ConfirmModal, Spinner } from '@grafana/ui';
+import { P } from '@grafana/ui/src/unstable';
 
 import { useGetAffectedItemsQuery } from '../../api/browseDashboardsAPI';
 import { DashboardTreeSelection } from '../../types';
@@ -17,7 +17,6 @@ export interface Props {
 }
 
 export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Props) => {
-  const styles = useStyles2(getStyles);
   const { data, isFetching, isLoading, error } = useGetAffectedItemsQuery(selectedItems);
 
   const onDelete = () => {
@@ -28,16 +27,19 @@ export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: P
   return (
     <ConfirmModal
       body={
-        <div className={styles.modalBody}>
-          This action will delete the following content:
-          <div className={styles.breakdown}>
-            <>
-              {data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
-              {(isFetching || isLoading) && <Spinner size={12} />}
-              {error && <Alert severity="error" title="Unable to retrieve descendant information" />}
-            </>
-          </div>
-        </div>
+        <>
+          <Stack direction="column" gap={0.5}>
+            <P>This action will delete the following content:</P>
+            <P color="secondary">
+              <>
+                {data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
+                {(isFetching || isLoading) && <Spinner size={12} />}
+                {error && <Alert severity="error" title="Unable to retrieve descendant information" />}
+              </>
+            </P>
+          </Stack>
+          <Space v={2} />
+        </>
       }
       confirmationText="Delete"
       confirmText="Delete"
@@ -48,14 +50,3 @@ export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: P
     />
   );
 };
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  breakdown: css({
-    ...theme.typography.bodySmall,
-    color: theme.colors.text.secondary,
-    marginBottom: theme.spacing(2),
-  }),
-  modalBody: css({
-    ...theme.typography.body,
-  }),
-});
diff --git a/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx b/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx
index 54dcefb868d..93e5c88b453 100644
--- a/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx
+++ b/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx
@@ -1,8 +1,8 @@
-import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Button, Field, Modal, Spinner, useStyles2 } from '@grafana/ui';
+import { Space, Stack } from '@grafana/experimental';
+import { Alert, Button, Field, Modal, Spinner } from '@grafana/ui';
+import { P } from '@grafana/ui/src/unstable';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 
 import { useGetAffectedItemsQuery } from '../../api/browseDashboardsAPI';
@@ -19,7 +19,6 @@ export interface Props {
 
 export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Props) => {
   const [moveTarget, setMoveTarget] = useState<string>();
-  const styles = useStyles2(getStyles);
   const selectedFolders = Object.keys(selectedItems.folder).filter((uid) => selectedItems.folder[uid]);
   const { data, isFetching, isLoading, error } = useGetAffectedItemsQuery(selectedItems);
 
@@ -33,14 +32,19 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
   return (
     <Modal title="Move" onDismiss={onDismiss} {...props}>
       {selectedFolders.length > 0 && <Alert severity="warning" title="Moving this item may change its permissions." />}
-      This action will move the following content:
-      <div className={styles.breakdown}>
-        <>
-          {data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
-          {(isFetching || isLoading) && <Spinner size={12} />}
-          {error && <Alert severity="error" title="Unable to retrieve descendant information" />}
-        </>
-      </div>
+
+      <Stack direction="column" gap={0.5}>
+        <P>This action will delete the following content:</P>
+        <P color="secondary">
+          <>
+            {data && buildBreakdownString(data.folder, data.dashboard, data.libraryPanel, data.alertRule)}
+            {(isFetching || isLoading) && <Spinner size={12} />}
+            {error && <Alert severity="error" title="Unable to retrieve descendant information" />}
+          </>
+        </P>
+      </Stack>
+      <Space v={2} />
+
       <Field label="Folder name">
         <FolderPicker allowEmpty onChange={({ uid }) => setMoveTarget(uid)} />
       </Field>
@@ -55,11 +59,3 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
     </Modal>
   );
 };
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  breakdown: css({
-    ...theme.typography.bodySmall,
-    color: theme.colors.text.secondary,
-    marginBottom: theme.spacing(2),
-  }),
-});