From 79c0087466a8c20318f2218b1138d307b74fb6dc Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Fri, 29 Sep 2023 09:35:33 +0100
Subject: [PATCH] GeneralSettings: Use Box instead of gf-form classes (#75678)

DashboardSettings: Use Box instead of gf-form classes
---
 .../components/DashboardSettings/GeneralSettings.tsx     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
index 429b86bab77..0a4b10ecc34 100644
--- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
@@ -13,6 +13,7 @@ import {
   HorizontalGroup,
   TextArea,
 } from '@grafana/ui';
+import { Box } from '@grafana/ui/src/unstable';
 import { Page } from 'app/core/components/Page/Page';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { updateTimeZoneDashboard, updateWeekStartDashboard } from 'app/features/dashboard/state/actions';
@@ -119,7 +120,7 @@ export function GeneralSettingsUnconnected({
   return (
     <Page navModel={sectionNav} pageNav={pageNav}>
       <div style={{ maxWidth: '600px' }}>
-        <div className="gf-form-group">
+        <Box marginBottom={5}>
           <Field
             label={
               <HorizontalGroup justify="space-between">
@@ -177,7 +178,7 @@ export function GeneralSettingsUnconnected({
           >
             <RadioButtonGroup value={dashboard.editable} options={editableOptions} onChange={onEditableChange} />
           </Field>
-        </div>
+        </Box>
 
         <TimePickerSettings
           onTimeZoneChange={onTimeZoneChange}
@@ -208,9 +209,7 @@ export function GeneralSettingsUnconnected({
           </Field>
         </CollapsableSection>
 
-        <div className="gf-form-button-row">
-          {dashboard.meta.canDelete && <DeleteDashboardButton dashboard={dashboard} />}
-        </div>
+        <Box marginTop={3}>{dashboard.meta.canDelete && <DeleteDashboardButton dashboard={dashboard} />}</Box>
       </div>
     </Page>
   );