diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index 957ae9a87cb..a8ba6290504 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -54,7 +54,8 @@ export const Alert = React.forwardRef( ref ) => { const theme = useTheme2(); - const styles = getStyles(theme, severity, elevated, bottomSpacing, topSpacing); + const hasTitle = Boolean(title); + const styles = getStyles(theme, severity, hasTitle, elevated, bottomSpacing, topSpacing); const titleId = useId(); return ( @@ -101,6 +102,7 @@ Alert.displayName = 'Alert'; const getStyles = ( theme: GrafanaTheme2, severity: AlertVariant, + hasTitle: boolean, elevated?: boolean, bottomSpacing?: number, topSpacing?: number @@ -157,7 +159,7 @@ const getStyles = ( `, content: css` color: ${theme.colors.text.secondary}; - padding-top: ${theme.spacing(1)}; + padding-top: ${hasTitle ? theme.spacing(1) : 0}; max-height: 50vh; overflow-y: auto; `, diff --git a/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx b/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx index d6b691cac79..fb959d6e15e 100644 --- a/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx +++ b/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx @@ -12,10 +12,11 @@ const getStyles = (theme: GrafanaTheme2) => ({ flex-direction: row; padding: 0; justify-content: space-between; + align-items: center; `, alertParagraph: css` margin: 0 ${theme.spacing(1)} 0 0; - line-height: ${theme.spacing(theme.components.height.md)}; + line-height: ${theme.spacing(theme.components.height.sm)}; color: ${theme.colors.text.primary}; `, }); @@ -34,14 +35,14 @@ export function ConnectionsRedirectNotice({ destinationPage }: { destinationPage const styles = useStyles2(getStyles); return ( - +

- You can discover new data sources or manage existing ones in the new Connections section, accessible from the - left-hand navigation, or click the button here. + Data sources have a new home! You can discover new data sources or manage existing ones in the new Connections + page, accessible from the lefthand nav.

- - Connections + + See data sources in Connections