Modals: Make text left aligned in save & delete modals (#33605)

public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx

@@ -64,7 +64,6 @@ const ProvisionedDeleteModal = ({ hideModal, provisionedId }: { hideModal(): voi
     icon="trash-alt"
     onDismiss={hideModal}
     className={css`
-      text-align: center;
       width: 500px;
     `}
   >
@@ -89,7 +88,7 @@ const ProvisionedDeleteModal = ({ hideModal, provisionedId }: { hideModal(): voi
       File path: {provisionedId}
     </p>
     <Modal.ButtonRow>
-      <Button variant="secondary" onClick={hideModal}>
+      <Button variant="primary" onClick={hideModal}>
         OK
       </Button>
     </Modal.ButtonRow>

public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx

@@ -81,30 +81,28 @@ const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ on
 
   return (
     <Modal className={styles.modal} title="Plugin dashboard" icon="copy" isOpen={true} onDismiss={onDismiss}>
-      <div className={styles.modalContent}>
-        <div className={styles.modalText}>
-          Your changes will be lost when you update the plugin.
-          <br />
-          <small>
-            Use <strong>Save As</strong> to create custom version.
-          </small>
-        </div>
-        <Modal.ButtonRow>
-          <Button variant="secondary" onClick={onDismiss} fill="outline">
-            Cancel
-          </Button>
-          <SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={onDismiss} />
-          <Button
-            variant="destructive"
-            onClick={async () => {
-              await onDashboardSave(dashboard.getSaveModelClone(), { overwrite: true }, dashboard);
-              onDismiss();
-            }}
-          >
-            Overwrite
-          </Button>
-        </Modal.ButtonRow>
+      <div className={styles.modalText}>
+        Your changes will be lost when you update the plugin.
+        <br />
+        <small>
+          Use <strong>Save As</strong> to create custom version.
+        </small>
       </div>
+      <Modal.ButtonRow>
+        <Button variant="secondary" onClick={onDismiss} fill="outline">
+          Cancel
+        </Button>
+        <SaveDashboardAsButton dashboard={dashboard} onSaveSuccess={onDismiss} />
+        <Button
+          variant="destructive"
+          onClick={async () => {
+            await onDashboardSave(dashboard.getSaveModelClone(), { overwrite: true }, dashboard);
+            onDismiss();
+          }}
+        >
+          Overwrite
+        </Button>
+      </Modal.ButtonRow>
     </Modal>
   );
 };
@@ -125,9 +123,6 @@ const getConfirmPluginDashboardSaveModalStyles = stylesFactory((theme: GrafanaTh
   modal: css`
     width: 500px;
   `,
-  modalContent: css`
-    text-align: center;
-  `,
   modalText: css`
     font-size: ${theme.typography.heading.h4};
     color: ${theme.colors.link};