SaveDashboard: Updated modal design/layout a bit (#22810)

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+
 import { Forms, Button, HorizontalGroup } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 import { SaveDashboardFormProps } from '../types';
@@ -30,32 +31,32 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
     >
       {({ register, errors }) => (
         <>
-          <Forms.Field label="Changes description">
+          <div className="gf-form-group">
+            {hasTimeChanged && (
+              <Forms.Checkbox
+                label="Save current time range as dashboard default"
+                name="saveTimerange"
+                ref={register}
+                aria-label={e2e.pages.SaveDashboardModal.selectors.saveTimerange}
+              />
+            )}
+            {hasVariableChanged && (
+              <Forms.Checkbox
+                label="Save current variable values as dashboard default"
+                name="saveVariables"
+                ref={register}
+                aria-label={e2e.pages.SaveDashboardModal.selectors.saveVariables}
+              />
+            )}
+            {(hasVariableChanged || hasTimeChanged) && <div className="gf-form-group" />}
+
             <Forms.TextArea
               name="message"
               ref={register}
               placeholder="Add a note to describe your changes..."
               autoFocus
             />
-          </Forms.Field>
-          {hasTimeChanged && (
-            <Forms.Field label="Save current time range" description="Dashboard time range has changed">
-              <Forms.Switch
-                name="saveTimerange"
-                ref={register}
-                aria-label={e2e.pages.SaveDashboardModal.selectors.saveTimerange}
-              />
-            </Forms.Field>
-          )}
-          {hasVariableChanged && (
-            <Forms.Field label="Save current variables" description="Dashboard variables have changed">
-              <Forms.Switch
-                name="saveVariables"
-                ref={register}
-                aria-label={e2e.pages.SaveDashboardModal.selectors.saveVariables}
-              />
-            </Forms.Field>
-          )}
+          </div>
 
           <HorizontalGroup>
             <Button type="submit" aria-label={e2e.pages.SaveDashboardModal.selectors.save}>