Chore: Use theme.shape.radius.circle everywhere (#70896)

* use theme.shape.radius.circle everywhere

* add useTheme2 import

public/app/features/admin/LicenseChrome.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { useStyles2, useTheme2 } from '@grafana/ui';
 
 const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };
 
@@ -77,6 +77,7 @@ interface CircleProps {
 }
 
 export const Circle = ({ size, style, children }: React.PropsWithChildren<CircleProps>) => {
+  const theme = useTheme2();
   return (
     <div
       style={{
@@ -85,7 +86,7 @@ export const Circle = ({ size, style, children }: React.PropsWithChildren<Circle
         position: 'absolute',
         bottom: 0,
         right: 0,
-        borderRadius: '50%',
+        borderRadius: theme.shape.radius.circle,
         ...style,
       }}
     >

public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx

@@ -57,7 +57,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     width: ${theme.spacing(4)};
     height: ${theme.spacing(4)};
     line-height: ${theme.spacing(4)};
-    border-radius: 100%;
+    border-radius: ${theme.shape.radius.circle};
     text-align: center;
     color: ${theme.colors.text.maxContrast};
     background-color: ${theme.colors.background.canvas};

public/app/features/dashboard/components/PanelEditor/OptionsPaneItemOverrides.tsx

@@ -28,7 +28,7 @@ const getStyles = (theme: GrafanaTheme2) => {
   const common: CSSObject = {
     width: 8,
     height: 8,
-    borderRadius: '50%',
+    borderRadius: theme.shape.radius.circle,
     marginLeft: theme.spacing(1),
     position: 'relative',
     top: '-1px',

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx

@@ -40,7 +40,7 @@ function getStyles(theme: GrafanaTheme2) {
       height: 10px;
       background: ${theme.colors.text.disabled};
       box-shadow: 0 0 2px ${theme.colors.text.disabled};
-      border-radius: 50%;
+      border-radius: ${theme.shape.radius.circle};
       position: relative;
       top: 6px;
       right: 1px;

public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx

@@ -52,7 +52,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       font-size: ${theme.typography.bodySmall.fontSize};
     `,
     userAvatar: css`
-      border-radius: 50%;
+      border-radius: ${theme.shape.radius.circle};
       box-sizing: content-box;
       width: 22px;
       height: 22px;

public/app/features/logs/components/LogDetailsRow.tsx

@@ -46,7 +46,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme2) => {
         color: ${theme.colors.text.secondary};
         padding: 0;
         justify-content: center;
-        border-radius: 50%;
+        border-radius: ${theme.shape.radius.circle};
         height: ${theme.spacing(theme.components.height.sm)};
         width: ${theme.spacing(theme.components.height.sm)};
         svg {