Modals: design update (#33368)

* Modals: Style update draft

* Modal.ButtonRow to control spacing better in a centralised way

* Remove header border if no tabs

* Added border and made buttons right aligned and changed order of buttons

* Updating the overlay

* Tweaks to paddings

* Updated share modals

public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx

@@ -1,5 +1,5 @@
 import React, { FormEvent, PureComponent } from 'react';
-import { RadioButtonGroup, Switch, Field, TextArea, ClipboardButton } from '@grafana/ui';
+import { RadioButtonGroup, Switch, Field, TextArea, ClipboardButton, Modal } from '@grafana/ui';
 import { SelectableValue, AppEvents } from '@grafana/data';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { appEvents } from 'app/core/core';
@@ -96,9 +96,11 @@ export class ShareEmbed extends PureComponent<Props, State> {
         >
           <TextArea rows={5} value={iframeHtml} onChange={this.onIframeHtmlChange}></TextArea>
         </Field>
-        <ClipboardButton variant="primary" getText={this.getIframeHtml} onClipboardCopy={this.onIframeHtmlCopy}>
-          Copy to clipboard
-        </ClipboardButton>
+        <Modal.ButtonRow>
+          <ClipboardButton variant="primary" getText={this.getIframeHtml} onClipboardCopy={this.onIframeHtmlCopy}>
+            Copy to clipboard
+          </ClipboardButton>
+        </Modal.ButtonRow>
       </>
     );
   }

public/app/features/dashboard/components/ShareModal/ShareExport.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { saveAs } from 'file-saver';
-import { Button, Field, Switch } from '@grafana/ui';
+import { Button, Field, Modal, Switch } from '@grafana/ui';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { DashboardExporter } from 'app/features/dashboard/components/DashExportModal';
 import { appEvents } from 'app/core/core';
@@ -95,17 +95,17 @@ export class ShareExport extends PureComponent<Props, State> {
         <Field label="Export for sharing externally">
           <Switch value={shareExternally} onChange={this.onShareExternallyChange} />
         </Field>
-        <div className="gf-form-button-row">
-          <Button variant="primary" onClick={this.onSaveAsFile}>
-            Save to file
+        <Modal.ButtonRow>
+          <Button variant="secondary" onClick={onDismiss}>
+            Cancel
           </Button>
           <Button variant="secondary" onClick={this.onViewJson}>
             View JSON
           </Button>
-          <Button variant="secondary" onClick={onDismiss}>
-            Cancel
+          <Button variant="primary" onClick={this.onSaveAsFile}>
+            Save to file
           </Button>
-        </div>
+        </Modal.ButtonRow>
       </>
     );
   }

public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Button, ClipboardButton, Icon, Spinner, Select, Input, LinkButton, Field } from '@grafana/ui';
+import { Button, ClipboardButton, Icon, Spinner, Select, Input, LinkButton, Field, Modal } from '@grafana/ui';
 import { AppEvents, SelectableValue } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
@@ -233,19 +233,19 @@ export class ShareSnapshot extends PureComponent<Props, State> {
           <Input type="number" width={21} value={timeoutSeconds} onChange={this.onTimeoutChange} />
         </Field>
 
-        <div className="gf-form-button-row">
-          <Button variant="primary" disabled={isLoading} onClick={this.createSnapshot()}>
-            Local Snapshot
+        <Modal.ButtonRow>
+          <Button variant="secondary" onClick={onDismiss}>
+            Cancel
           </Button>
           {externalEnabled && (
             <Button variant="secondary" disabled={isLoading} onClick={this.createSnapshot(true)}>
               {sharingButtonText}
             </Button>
           )}
-          <Button variant="secondary" onClick={onDismiss}>
-            Cancel
+          <Button variant="primary" disabled={isLoading} onClick={this.createSnapshot()}>
+            Local Snapshot
           </Button>
-        </div>
+        </Modal.ButtonRow>
       </>
     );
   }