opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-31 23:22:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Alert: Fixes a minor issue with new Alert design and updated scss files (#67589)

Browse Source
This commit is contained in:
Torkel Ödegaard
2023-05-01 19:33:30 +02:00
committed by GitHub
parent 55df8afe8f
commit d189b8b47f
4 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/Alert/Alert.tsx
View File

@ -171,10 +171,12 @@ const getStyles = (
overflow-y: auto; overflow-y: auto;
`, `,
buttonWrapper: css` buttonWrapper: css`
padding: ${theme.spacing(1)}; margin-left: ${theme.spacing(1)};
background: none; background: none;
display: flex; display: flex;
align-items: center; align-items: center;
align-self: center;
background: ${theme.colors.background.primary};
`, `,
close: css` close: css`
position: relative; position: relative;

7
packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx
View File

@ -80,12 +80,7 @@ export const Examples: ComponentStory<typeof Alert> = () => {
<StoryExample name="Severities"> <StoryExample name="Severities">
<VerticalGroup> <VerticalGroup>
{severities.map((severity) => ( {severities.map((severity) => (
<Alert <Alert title={`Severity: ${severity}`} severity={severity} key={severity}>
title={`Severity: ${severity}`}
severity={severity}
key={severity}
onRemove={action('Remove button clicked')}
>
Child content Child content
</Alert> </Alert>
))} ))}

10
public/sass/_variables.dark.generated.scss
View File

@ -80,7 +80,7 @@ $variable: #6E9FFF;
$brand-primary: #eb7b18; $brand-primary: #eb7b18;
$brand-success: #1A7F4B; $brand-success: #1A7F4B;
$brand-warning: #F5B73D; $brand-warning: #FF9900;
$brand-danger: #D10E5C; $brand-danger: #D10E5C;
$query-red: #FF5286; $query-red: #FF5286;
@ -91,7 +91,7 @@ $query-orange: #eb7b18;
// Status colors // Status colors
// -------------------------¨ // -------------------------¨
$online: #6CCF8E; $online: #6CCF8E;
$warn: #F8D06B; $warn: #fbad37;
$critical: #FF5286; $critical: #FF5286;
// Scaffolding // Scaffolding
@ -275,14 +275,14 @@ $tab-border-color: $dark-9;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
$warning-text-color: #F8D06B; $warning-text-color: #fbad37;
$error-text-color: #FF5286; $error-text-color: #FF5286;
$success-text-color: #6CCF8E; $success-text-color: #6CCF8E;
$alert-error-bg: #D10E5C; $alert-error-bg: #D10E5C;
$alert-success-bg: #1A7F4B; $alert-success-bg: #1A7F4B;
$alert-warning-bg: #F5B73D; $alert-warning-bg: #FF9900;
$alert-info-bg: #F5B73D; $alert-info-bg: #FF9900;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------

10
public/sass/_variables.light.generated.scss
View File

@ -75,7 +75,7 @@ $variable: #1F62E0;
$brand-primary: #eb7b18; $brand-primary: #eb7b18;
$brand-success: #1B855E; $brand-success: #1B855E;
$brand-warning: #FAD34A; $brand-warning: #FF9900;
$brand-danger: #E0226E; $brand-danger: #E0226E;
$query-red: #CF0E5B; $query-red: #CF0E5B;
@ -86,7 +86,7 @@ $query-orange: #eb7b18;
// Status colors // Status colors
// ------------------------- // -------------------------
$online: #0A764E; $online: #0A764E;
$warn: #8A6C00; $warn: #B5510D;
$critical: #CF0E5B; $critical: #CF0E5B;
@ -272,14 +272,14 @@ $tab-border-color: $gray-5;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
$warning-text-color: #8A6C00; $warning-text-color: #B5510D;
$error-text-color: #CF0E5B; $error-text-color: #CF0E5B;
$success-text-color: #0A764E; $success-text-color: #0A764E;
$alert-error-bg: #E0226E; $alert-error-bg: #E0226E;
$alert-success-bg: #1B855E; $alert-success-bg: #1B855E;
$alert-warning-bg: #FAD34A; $alert-warning-bg: #FF9900;
$alert-info-bg: #FAD34A; $alert-info-bg: #FF9900;
// Tooltips and popovers // Tooltips and popovers
$tooltipBackground: #F4F5F5; $tooltipBackground: #F4F5F5;