Theme: Border radius nit fixes (#111625)

* increase border radius on login box

* increase command palette border radius

* decrease TagBadge border radius

* increase border radius for alerting homepage containers

* increase border radius of EnterpriseAuthFeaturesCard

* increase border radius on cloud migration containers

* fix border-radius on edit alert rule page

* fix overflow on notification templates page

* add border radius to EmptyArea

* add border radius to image preview in Carousel component

* add border radius to PluginDetailsPanel

* add border radius to licensechrome

* add border radius to empty alerts state

* apply container styles on top of default styles

packages/grafana-ui/src/components/Carousel/Carousel.tsx

@@ -183,6 +183,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     flex: 1,
   }),
   imagePreview: css({
+    borderRadius: theme.shape.radius.lg,
     maxWidth: '100%',
     maxHeight: '80vh',
     objectFit: 'contain',

packages/grafana-ui/src/components/Monaco/CodeEditor.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
 import { PureComponent } from 'react';
 
@@ -136,7 +136,7 @@ class UnthemedCodeEditor extends PureComponent<Props> {
     const value = this.props.value ?? '';
     const longText = value.length > 100;
 
-    const containerStyles = this.props.containerStyles ?? getStyles(theme).container;
+    const containerStyles = cx(getStyles(theme).container, this.props.containerStyles);
 
     const options: MonacoOptions = {
       wordWrap: wordWrap ? 'on' : 'off',
@@ -203,6 +203,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     container: css({
       borderRadius: theme.shape.radius.default,
       border: `1px solid ${theme.components.input.borderColor}`,
+      overflow: 'hidden',
     }),
   };
 };

public/app/core/components/Login/LoginLayout.tsx

@@ -150,7 +150,7 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
       justifyContent: 'flex-start',
       zIndex: 1,
       minHeight: 320,
-      borderRadius: theme.shape.radius.default,
+      borderRadius: theme.shape.radius.lg,
       padding: theme.spacing(2, 0),
       opacity: 0,
       [theme.transitions.handleMotion('no-preference', 'reduce')]: {

public/app/core/components/TagFilter/TagBadge.tsx

@@ -34,7 +34,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   badge: css({
     ...theme.typography.bodySmall,
     backgroundColor: theme.v1.palette.gray1,
-    borderRadius: theme.shape.radius.default,
+    borderRadius: theme.shape.radius.sm,
     color: theme.v1.palette.white,
     display: 'inline-block',
     height: '20px',

public/app/features/admin/EnterpriseAuthFeaturesCard.tsx

@@ -91,7 +91,7 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'flex',
       flexDirection: 'column',
       gap: theme.spacing(1.5),
-      borderRadius: theme.shape.radius.default,
+      borderRadius: theme.shape.radius.lg,
       marginTop: theme.spacing(3),
       strong: {
         color: theme.colors.text.primary,

public/app/features/admin/LicenseChrome.tsx

@@ -22,12 +22,14 @@ const getStyles = (theme: GrafanaTheme2) => {
       textAlign: 'center',
       padding: theme.spacing(2),
       background: footerBg,
+      borderRadius: theme.shape.radius.lg,
     }),
     header: css({
       height: '137px',
       padding: theme.spacing(4, 0, 0, 4),
       position: 'relative',
       background: `url('${backgroundUrl}') right`,
+      borderRadius: theme.shape.radius.lg,
     }),
   };
 };

public/app/features/alerting/unified/AlertsFolderView.tsx

@@ -213,6 +213,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   noResults: css({
     padding: theme.spacing(2),
     backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.lg,
     fontStyle: 'italic',
   }),
 });

public/app/features/alerting/unified/components/EmptyArea.tsx

@@ -13,6 +13,7 @@ export const EmptyArea = ({ children }: React.PropsWithChildren<{}>) => {
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     container: css({
+      borderRadius: theme.shape.radius.lg,
       backgroundColor: theme.colors.background.secondary,
       color: theme.colors.text.secondary,
       padding: theme.spacing(4),

public/app/features/alerting/unified/components/expressions/Expression.tsx

@@ -541,6 +541,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
       flex: 1,
       flexBasis: '400px',
       borderRadius: theme.shape.radius.default,
+      overflow: 'hidden',
     }),
     stack: css({
       display: 'flex',

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

@@ -70,7 +70,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     flexDirection: 'row',
     border: `solid 1px ${theme.colors.border.weak}`,
-    borderRadius: theme.shape.radius.default,
+    borderRadius: theme.shape.radius.lg,
     padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
   }),
   description: css({

public/app/features/alerting/unified/home/AdCard.tsx

@@ -133,7 +133,7 @@ const getAddCardStyles = (theme: GrafanaTheme2) => ({
   cardBody: css({
     padding: `${theme.spacing(3)} ${theme.spacing(4)} ${theme.spacing(2.25)} ${theme.spacing(4)}`,
     backgroundColor: theme.colors.background.secondary,
-    borderRadius: theme.shape.radius.default,
+    borderRadius: theme.shape.radius.lg,
     border: `1px solid ${theme.colors.border.weak}`,
     flex: 1,
   }),

public/app/features/alerting/unified/home/GettingStarted.tsx

@@ -241,6 +241,6 @@ const getContentBoxStyles = (theme: GrafanaTheme2) => ({
   box: css({
     padding: theme.spacing(2),
     backgroundColor: theme.colors.background.secondary,
-    borderRadius: theme.shape.radius.default,
+    borderRadius: theme.shape.radius.lg,
   }),
 });

public/app/features/alerting/unified/styles/table.ts

@@ -8,6 +8,7 @@ export const getAlertTableStyles = (theme: GrafanaTheme2) => ({
     borderRadius: theme.shape.radius.default,
     border: `solid 1px ${theme.colors.border.weak}`,
     backgroundColor: theme.colors.background.secondary,
+    overflow: 'hidden',
 
     th: {
       padding: theme.spacing(1),

public/app/features/commandPalette/CommandPalette.tsx

@@ -230,7 +230,7 @@ const getSearchStyles = (theme: GrafanaTheme2, lateralSpace: number) => {
       maxWidth: theme.breakpoints.values.md,
       background: theme.colors.background.primary,
       color: theme.colors.text.primary,
-      borderRadius: theme.shape.radius.default,
+      borderRadius: theme.shape.radius.lg,
       border: `1px solid ${theme.colors.border.weak}`,
       overflow: 'hidden',
       boxShadow: theme.shadows.z3,

public/app/features/migrate-to-cloud/cloud/Page.tsx

@@ -6,7 +6,7 @@ import { MigrationTokenPane } from './MigrationTokenPane/MigrationTokenPane';
 
 export const Page = () => {
   return (
-    <Box backgroundColor="secondary" display="flex" alignItems="center" direction="column">
+    <Box borderRadius="lg" backgroundColor="secondary" display="flex" alignItems="center" direction="column">
       <Box maxWidth={90} paddingY={6} paddingX={2} gap={6} direction="column" display="flex">
         <Stack gap={2} direction="column">
           <InfoPane />

public/app/features/migrate-to-cloud/onprem/EmptyState/EmptyState.tsx

@@ -6,7 +6,7 @@ import { InfoPaneRight } from './InfoPaneRight';
 
 export const EmptyState = () => {
   return (
-    <Box backgroundColor="secondary" display="flex" alignItems="center" direction="column">
+    <Box borderRadius="lg" backgroundColor="secondary" display="flex" alignItems="center" direction="column">
       <Box maxWidth={180} paddingY={6} paddingX={2}>
         <Stack gap={5} direction="column">
           <CallToAction />

public/app/features/migrate-to-cloud/onprem/MigrationSummary.tsx

@@ -60,6 +60,7 @@ export function MigrationSummary(props: MigrationSummaryProps) {
 
   return (
     <Box
+      borderRadius="lg"
       borderColor="weak"
       borderStyle="solid"
       padding={2}

public/app/features/plugins/admin/components/PluginDetailsPanel.tsx

@@ -69,7 +69,7 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
   return (
     <>
       <Stack direction="column" gap={3} shrink={0} grow={0} width={width} data-testid="plugin-details-panel">
-        <Box padding={2} borderColor="medium" borderStyle="solid">
+        <Box borderRadius="lg" padding={2} borderColor="medium" borderStyle="solid">
           <Stack direction="column" gap={2}>
             {pluginExtentionsInfo.map((infoItem, index) => {
               return (
@@ -97,7 +97,13 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
         </Box>
         {shouldRenderLinks && (
           <>
-            <Box padding={2} borderColor="medium" borderStyle="solid" data-testid="plugin-details-regular-links">
+            <Box
+              borderRadius="lg"
+              padding={2}
+              borderColor="medium"
+              borderStyle="solid"
+              data-testid="plugin-details-regular-links"
+            >
               <Stack direction="column" gap={2}>
                 {plugin.details?.repositoryUrl && (
                   <LinkButton
@@ -164,7 +170,13 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
           </>
         )}
         {customLinks && customLinks?.length > 0 && (
-          <Box padding={2} borderColor="medium" borderStyle="solid" data-testid="plugin-details-custom-links">
+          <Box
+            borderRadius="lg"
+            padding={2}
+            borderColor="medium"
+            borderStyle="solid"
+            data-testid="plugin-details-custom-links"
+          >
             <CollapsableSection
               isOpen={true}
               label={
@@ -197,7 +209,7 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
           </Box>
         )}
         {!plugin?.isCore && (
-          <Box padding={2} borderColor="medium" borderStyle="solid">
+          <Box borderRadius="lg" padding={2} borderColor="medium" borderStyle="solid">
             <CollapsableSection
               headerDataTestId="reportConcern"
               isOpen={false}