[v10.0.x] ResourcePicker: Fix missing border bug on cancel button (#69113)

ResourcePicker: Fix missing border bug on cancel button (#68966)

* ResourcePicker: Fix missing border bug

* remove unused imports

(cherry picked from commit 2966989525)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

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%;

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()}>
+            <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),
+  }),
 });