From 2966989525ccf4525f6bf89e5f52ce9a864c91d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 24 May 2023 15:10:46 +0200
Subject: [PATCH] ResourcePicker: Fix missing border bug on cancel button
 (#68966)

* ResourcePicker: Fix missing border bug

* remove unused imports
---
 .../ColorPicker/ColorPickerPopover.tsx        |  2 +-
 .../editors/ResourcePickerPopover.tsx         | 24 +++++++++----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index 5c5dad1ae12..63c463178ae 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -144,7 +144,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       border-radius: ${theme.shape.borderRadius()};
       box-shadow: ${theme.shadows.z3};
       background: ${theme.colors.background.primary};
-      border: 1px solid ${theme.colors.border.medium};
+      border: 1px solid ${theme.colors.border.weak};
 
       .ColorPickerPopover__tab {
         width: 50%;
diff --git a/public/app/features/dimensions/editors/ResourcePickerPopover.tsx b/public/app/features/dimensions/editors/ResourcePickerPopover.tsx
index d3fffba9c48..4eaae4a512f 100644
--- a/public/app/features/dimensions/editors/ResourcePickerPopover.tsx
+++ b/public/app/features/dimensions/editors/ResourcePickerPopover.tsx
@@ -6,7 +6,7 @@ import React, { createRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
-import { Button, ButtonGroup, useStyles2 } from '@grafana/ui';
+import { Button, useStyles2 } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 import { MediaType, PickerTabType, ResourceFolderName } from '../types';
@@ -98,12 +98,11 @@ export const ResourcePickerPopover = (props: Props) => {
           </div>
           <div className={styles.resourcePickerPopoverContent}>
             {renderPicker()}
-            <ButtonGroup className={styles.buttonGroup}>
-              <Button className={styles.button} variant={'secondary'} onClick={() => onClose()} fill="outline">
+            <div className={styles.buttonRow}>
+              <Button variant={'secondary'} onClick={() => onClose()} fill="outline">
                 Cancel
               </Button>
               <Button
-                className={styles.button}
                 variant={newValue && newValue !== value ? 'primary' : 'secondary'}
                 onClick={() => {
                   if (upload) {
@@ -133,7 +132,7 @@ export const ResourcePickerPopover = (props: Props) => {
               >
                 Select
               </Button>
-            </ButtonGroup>
+            </div>
           </div>
         </div>
       </section>
@@ -146,7 +145,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     border-radius: ${theme.shape.borderRadius()};
     box-shadow: ${theme.shadows.z3};
     background: ${theme.colors.background.primary};
-    border: 1px solid ${theme.colors.border.medium};
+    border: 1px solid ${theme.colors.border.weak};
   `,
   resourcePickerPopoverTab: css`
     width: 50%;
@@ -185,11 +184,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
     width: 100%;
     border-radius: ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0;
   `,
-  buttonGroup: css`
-    align-self: center;
-    flex-direction: row;
-  `,
-  button: css`
-    margin: 12px 20px 5px;
-  `,
+  buttonRow: css({
+    display: 'flex',
+    justifyContent: 'center',
+    gap: theme.spacing(2),
+    padding: theme.spacing(1),
+  }),
 });