diff --git a/.betterer.results b/.betterer.results
index c4004ec1d7a..d56f5aa7e50 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1437,9 +1437,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "6"],
       [0, 0, 0, "Styles should be written using objects.", "7"]
     ],
-    "public/app/core/navigation/GrafanaRouteError.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/core/navigation/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -4881,10 +4878,6 @@ exports[`better eslint`] = {
     "public/app/features/transformers/editors/ReduceTransformerEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/features/transformers/editors/RenameByRegexTransformer.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/features/transformers/editors/SortByTransformerEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
diff --git a/public/app/core/navigation/GrafanaRouteError.tsx b/public/app/core/navigation/GrafanaRouteError.tsx
index 5c5e1ef009f..33c55654fb0 100644
--- a/public/app/core/navigation/GrafanaRouteError.tsx
+++ b/public/app/core/navigation/GrafanaRouteError.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { ErrorInfo, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { locationUtil, PageLayoutType } from '@grafana/data';
+import { GrafanaTheme2, locationUtil, PageLayoutType } from '@grafana/data';
 import { Button, ErrorWithStack, useStyles2 } from '@grafana/ui';
 
 import { Page } from '../components/Page/Page';
@@ -15,7 +15,7 @@ interface Props {
 export function GrafanaRouteError({ error, errorInfo }: Props) {
   const location = useLocation();
   const isChunkLoadingError = error?.name === 'ChunkLoadError';
-  const style = useStyles2(getStyles);
+  const styles = useStyles2(getStyles);
 
   useEffect(() => {
     // Auto reload page 1 time if we have a chunk load error
@@ -28,18 +28,16 @@ export function GrafanaRouteError({ error, errorInfo }: Props) {
 
   return (
     <Page navId="error" layout={PageLayoutType.Canvas}>
-      <div className={style}>
+      <div className={styles.container}>
         {isChunkLoadingError && (
           <div>
             <h2>Unable to find application file</h2>
             <br />
             <h2 className="page-heading">Grafana has likely been updated. Please try reloading the page.</h2>
             <br />
-            <div className="gf-form-group">
-              <Button size="md" variant="secondary" icon="repeat" onClick={() => window.location.reload()}>
-                Reload
-              </Button>
-            </div>
+            <Button size="md" variant="secondary" icon="repeat" onClick={() => window.location.reload()}>
+              Reload
+            </Button>
             <ErrorWithStack title={'Error details'} error={error} errorInfo={errorInfo} />
           </div>
         )}
@@ -51,7 +49,9 @@ export function GrafanaRouteError({ error, errorInfo }: Props) {
   );
 }
 
-const getStyles = () => css`
-  width: 500px;
-  margin: 64px auto;
-`;
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    width: '500px',
+    margin: theme.spacing(8, 'auto'),
+  }),
+});
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
index c1cd7654610..87d8072f153 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
@@ -104,7 +104,7 @@ describe('ShareModal', () => {
       mockLocationHref('http://dashboards.grafana.com/d/abcdefghi/my-dash');
       render(<ShareLink {...props} />);
 
-      const base = 'http://dashboards.grafana.com/render/d-solo/abcdefghi/my-dash';
+      const base = '/render/d-solo/abcdefghi/my-dash';
       const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC';
       expect(
         await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
@@ -115,7 +115,7 @@ describe('ShareModal', () => {
       mockLocationHref('http://dashboards.grafana.com/dashboard/script/my-dash.js');
       render(<ShareLink {...props} />);
 
-      const base = 'http://dashboards.grafana.com/render/dashboard-solo/script/my-dash.js';
+      const base = '/render/dashboard-solo/script/my-dash.js';
       const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC';
       expect(
         await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
@@ -144,13 +144,14 @@ describe('ShareModal', () => {
       mockLocationHref('http://server/#!/test?editPanel=1');
       render(<ShareLink {...props} />);
 
-      const base = 'http://server/#!/test';
+      const base = 'http://server';
+      const path = '/#!/test';
       expect(await screen.findByRole('textbox', { name: 'Link URL' })).toHaveValue(
-        base + '?editPanel=1&from=1000&to=2000&orgId=1'
+        base + path + '?editPanel=1&from=1000&to=2000&orgId=1'
       );
       expect(
         await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
-      ).toHaveAttribute('href', base + '?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
+      ).toHaveAttribute('href', path + '?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
     });
 
     it('should shorten url', async () => {
@@ -197,7 +198,7 @@ describe('when appUrl is set in the grafana config', () => {
       await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
     ).toHaveAttribute(
       'href',
-      `http://dashboards.grafana.com/render/d-solo/${mockDashboard.uid}?orgId=1&from=1000&to=2000&panelId=${mockPanel.id}&width=1000&height=500&tz=UTC`
+      `/render/d-solo/${mockDashboard.uid}?orgId=1&from=1000&to=2000&panelId=${mockPanel.id}&width=1000&height=500&tz=UTC`
     );
   });
 });
diff --git a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
index 0c6ad6c77e0..2ed3637c3eb 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { Alert, ClipboardButton, Field, FieldSet, Icon, Input, Switch } from '@grafana/ui';
+import { Alert, ClipboardButton, Field, FieldSet, Input, Switch, TextLink } from '@grafana/ui';
 import config from 'app/core/config';
 import { t, Trans } from 'app/core/internationalization';
 
@@ -137,13 +137,9 @@ export class ShareLink extends PureComponent<Props, State> {
         {panel && config.rendererAvailable && (
           <>
             {isDashboardSaved && (
-              <div className="gf-form">
-                <a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}>
-                  <Icon name="camera" />
-                  &nbsp;
-                  <Trans i18nKey="share-modal.link.rendered-image">Direct link rendered image</Trans>
-                </a>
-              </div>
+              <TextLink href={imageUrl} external icon={'camera'} aria-label={selectors.linkToRenderedImage}>
+                {t('share-modal.link.rendered-image', 'Direct link rendered image')}
+              </TextLink>
             )}
 
             {!isDashboardSaved && (
@@ -168,14 +164,9 @@ export class ShareLink extends PureComponent<Props, State> {
           >
             <Trans i18nKey="share-modal.link.render-instructions">
               To render a panel image, you must install the
-              <a
-                href="https://grafana.com/grafana/plugins/grafana-image-renderer"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="external-link"
-              >
+              <TextLink href="https://grafana.com/grafana/plugins/grafana-image-renderer" external>
                 Grafana image renderer plugin
-              </a>
+              </TextLink>
               . Please contact your Grafana administrator to install the plugin.
             </Trans>
           </Alert>
diff --git a/public/app/features/playlist/PlaylistForm.tsx b/public/app/features/playlist/PlaylistForm.tsx
index 0d8d1951110..faa468eb144 100644
--- a/public/app/features/playlist/PlaylistForm.tsx
+++ b/public/app/features/playlist/PlaylistForm.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
-import { Button, Field, Form, HorizontalGroup, Input, LinkButton } from '@grafana/ui';
+import { Button, Field, FieldSet, Form, HorizontalGroup, Input, LinkButton } from '@grafana/ui';
 import { DashboardPicker } from 'app/core/components/Select/DashboardPicker';
 import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
 import { Trans, t } from 'app/core/internationalization';
@@ -70,11 +70,7 @@ export const PlaylistForm = ({ onSubmit, playlist }: Props) => {
 
               <PlaylistTable items={items} deleteItem={deleteItem} moveItem={moveItem} />
 
-              <div className="gf-form-group">
-                <h3 className="page-headering">
-                  <Trans i18nKey="playlist-edit.form.heading">Add dashboards</Trans>
-                </h3>
-
+              <FieldSet label={t('playlist-edit.form.heading', 'Add dashboards')}>
                 <Field label={t('playlist-edit.form.add-title-label', 'Add by title')}>
                   <DashboardPicker id="dashboard-picker" onChange={addByUID} key={items.length} />
                 </Field>
@@ -89,7 +85,7 @@ export const PlaylistForm = ({ onSubmit, playlist }: Props) => {
                     placeholder={t('playlist-edit.form.add-tag-placeholder', 'Select a tag')}
                   />
                 </Field>
-              </div>
+              </FieldSet>
 
               <HorizontalGroup>
                 <Button type="submit" variant="primary" disabled={isDisabled} icon={saving ? 'spinner' : undefined}>
diff --git a/public/app/features/playlist/PlaylistTable.tsx b/public/app/features/playlist/PlaylistTable.tsx
index 7b1080e192e..93a7167b1ce 100644
--- a/public/app/features/playlist/PlaylistTable.tsx
+++ b/public/app/features/playlist/PlaylistTable.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 
-import { Trans } from 'app/core/internationalization';
+import { FieldSet } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
 
 import { PlaylistTableRows } from './PlaylistTableRows';
 import { PlaylistItem } from './types';
@@ -20,11 +21,7 @@ export const PlaylistTable = ({ items, deleteItem, moveItem }: Props) => {
   };
 
   return (
-    <div className="gf-form-group">
-      <h3 className="page-headering">
-        <Trans i18nKey="playlist-edit.form.table-heading">Dashboards</Trans>
-      </h3>
-
+    <FieldSet label={t('playlist-edit.form.table-heading', 'Dashboards')}>
       <DragDropContext onDragEnd={onDragEnd}>
         <Droppable droppableId="playlist-list" direction="vertical">
           {(provided) => {
@@ -37,6 +34,6 @@ export const PlaylistTable = ({ items, deleteItem, moveItem }: Props) => {
           }}
         </Droppable>
       </DragDropContext>
-    </div>
+    </FieldSet>
   );
 };
diff --git a/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx b/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
index ef98aa5e5c9..e61ddfd8a3c 100644
--- a/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
@@ -12,7 +12,7 @@ import {
   ConcatenateFrameNameMode,
   ConcatenateTransformerOptions,
 } from '@grafana/data/src/transformations/transformers/concat';
-import { Input, Select } from '@grafana/ui';
+import { InlineField, Input, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
 
@@ -57,29 +57,18 @@ export class ConcatenateTransformerEditor extends React.PureComponent<Concatenat
 
     return (
       <div>
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <div className="gf-form-label width-8">Name</div>
-            <Select
-              className="width-18"
-              options={nameModes}
-              value={nameModes.find((v) => v.value === frameNameMode)}
-              onChange={this.onModeChanged}
-            />
-          </div>
-        </div>
+        <InlineField label="Name" labelWidth={16} grow>
+          <Select
+            width={36}
+            options={nameModes}
+            value={nameModes.find((v) => v.value === frameNameMode)}
+            onChange={this.onModeChanged}
+          />
+        </InlineField>
         {frameNameMode === ConcatenateFrameNameMode.Label && (
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <div className="gf-form-label width-8">Label</div>
-              <Input
-                className="width-18"
-                value={options.frameNameLabel ?? ''}
-                placeholder="frame"
-                onChange={this.onLabelChanged}
-              />
-            </div>
-          </div>
+          <InlineField label="Label" labelWidth={16} grow>
+            <Input width={36} value={options.frameNameLabel ?? ''} placeholder="frame" onChange={this.onLabelChanged} />
+          </InlineField>
         )}
       </div>
     );
diff --git a/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx b/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
index 0f9b89f8809..c1c13ca97f1 100644
--- a/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
@@ -9,7 +9,7 @@ import {
   TransformerCategory,
 } from '@grafana/data';
 import { FilterFramesByRefIdTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByRefId';
-import { HorizontalGroup, FilterPill, FieldValidationMessage } from '@grafana/ui';
+import { HorizontalGroup, FilterPill, FieldValidationMessage, InlineField } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
 
@@ -114,27 +114,24 @@ export class FilterByRefIdTransformerEditor extends React.PureComponent<
             <FieldValidationMessage>Filter data by query expects multiple queries in the input.</FieldValidationMessage>
           </div>
         )}
-        <div className="gf-form-inline">
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label width-8">Series refId</div>
-            <HorizontalGroup spacing="xs" align="flex-start" wrap>
-              {options.map((o, i) => {
-                const label = `${o.refId}${o.count > 1 ? ' (' + o.count + ')' : ''}`;
-                const isSelected = selected.indexOf(o.refId) > -1;
-                return (
-                  <FilterPill
-                    key={`${o.refId}/${i}`}
-                    onClick={() => {
-                      this.onFieldToggle(o.refId);
-                    }}
-                    label={label}
-                    selected={isSelected}
-                  />
-                );
-              })}
-            </HorizontalGroup>
-          </div>
-        </div>
+        <InlineField label="Series refId" labelWidth={16} shrink>
+          <HorizontalGroup spacing="xs" align="flex-start" wrap>
+            {options.map((o, i) => {
+              const label = `${o.refId}${o.count > 1 ? ' (' + o.count + ')' : ''}`;
+              const isSelected = selected.indexOf(o.refId) > -1;
+              return (
+                <FilterPill
+                  key={`${o.refId}/${i}`}
+                  onClick={() => {
+                    this.onFieldToggle(o.refId);
+                  }}
+                  label={label}
+                  selected={isSelected}
+                />
+              );
+            })}
+          </HorizontalGroup>
+        </InlineField>
       </>
     );
   }
diff --git a/public/app/features/transformers/editors/RenameByRegexTransformer.tsx b/public/app/features/transformers/editors/RenameByRegexTransformer.tsx
index 587bbf0112d..5e63e597af8 100644
--- a/public/app/features/transformers/editors/RenameByRegexTransformer.tsx
+++ b/public/app/features/transformers/editors/RenameByRegexTransformer.tsx
@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import React from 'react';
 
 import {
@@ -10,7 +9,7 @@ import {
   TransformerCategory,
 } from '@grafana/data';
 import { RenameByRegexTransformerOptions } from '@grafana/data/src/transformations/transformers/renameByRegex';
-import { Field, Input } from '@grafana/ui';
+import { InlineField, Input } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
 
@@ -83,44 +82,29 @@ export class RenameByRegexTransformerEditor extends React.PureComponent<
     const { regex, renamePattern, isRegexValid } = this.state;
     return (
       <>
-        <div className="gf-form-inline">
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label width-8">Match</div>
-            <Field
-              invalid={!isRegexValid}
-              error={!isRegexValid ? 'Invalid pattern' : undefined}
-              className={css`
-                margin-bottom: 0;
-              `}
-            >
-              <Input
-                placeholder="Regular expression pattern"
-                value={regex || ''}
-                onChange={this.handleRegexChange}
-                onBlur={this.handleRegexBlur}
-                width={25}
-              />
-            </Field>
-          </div>
-        </div>
-        <div className="gf-form-inline">
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label width-8">Replace</div>
-            <Field
-              className={css`
-                margin-bottom: 0;
-              `}
-            >
-              <Input
-                placeholder="Replacement pattern"
-                value={renamePattern || ''}
-                onChange={this.handleRenameChange}
-                onBlur={this.handleRenameBlur}
-                width={25}
-              />
-            </Field>
-          </div>
-        </div>
+        <InlineField
+          label="Match"
+          labelWidth={16}
+          invalid={!isRegexValid}
+          error={!isRegexValid ? 'Invalid pattern' : undefined}
+        >
+          <Input
+            placeholder="Regular expression pattern"
+            value={regex || ''}
+            onChange={this.handleRegexChange}
+            onBlur={this.handleRegexBlur}
+            width={25}
+          />
+        </InlineField>
+        <InlineField label="Replace" labelWidth={16}>
+          <Input
+            placeholder="Replacement pattern"
+            value={renamePattern || ''}
+            onChange={this.handleRenameChange}
+            onBlur={this.handleRenameBlur}
+            width={25}
+          />
+        </InlineField>
       </>
     );
   }