From ab355f308331f4a8619d73d5fc227450c01a95b6 Mon Sep 17 00:00:00 2001 From: maxbittker Date: Mon, 12 Feb 2018 10:35:16 -0800 Subject: [PATCH 1/3] use withTheme --- src/sentry/static/sentry/app/components/alert.jsx | 5 +++-- src/sentry/static/sentry/app/components/alertMessage.jsx | 9 +++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/sentry/static/sentry/app/components/alert.jsx b/src/sentry/static/sentry/app/components/alert.jsx index b5ab6d4e0f65dd..f1cab8dbd7b7d8 100644 --- a/src/sentry/static/sentry/app/components/alert.jsx +++ b/src/sentry/static/sentry/app/components/alert.jsx @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {cx} from 'emotion'; import styled from 'react-emotion'; +import {withTheme} from 'emotion-theming'; import TextBlock from '../views/settings/components/text/textBlock'; import InlineSvg from './inlineSvg'; @@ -13,7 +14,7 @@ const getAlertColorStyles = ({backgroundLight, border, iconColor}) => ` } `; -const AlertWrapper = styled.div` +const AlertWrapper = withTheme(styled.div` margin: 0 0 ${p => p.theme.grid * 3}px; padding: ${p => p.theme.grid * 2}px; font-size: 15px; @@ -24,7 +25,7 @@ const AlertWrapper = styled.div` border: 1px solid ${p => p.theme.borderDark}; ${p => p.type && getAlertColorStyles(p.theme.alert[p.type])}; -`; +`); const StyledTextBlock = styled(TextBlock)` line-height: 1.4; diff --git a/src/sentry/static/sentry/app/components/alertMessage.jsx b/src/sentry/static/sentry/app/components/alertMessage.jsx index 00ad1eb4954f62..9e883f09984900 100644 --- a/src/sentry/static/sentry/app/components/alertMessage.jsx +++ b/src/sentry/static/sentry/app/components/alertMessage.jsx @@ -1,24 +1,25 @@ import PropTypes from 'prop-types'; import React from 'react'; import styled from 'react-emotion'; +import {withTheme} from 'emotion-theming'; import Alert from '../components/alert'; import AlertActions from '../actions/alertActions'; import InlineSvg from '../components/inlineSvg'; import {t} from '../locale'; -const StyledAlert = styled(Alert)` +const StyledAlert = withTheme(styled(Alert)` padding: ${p => p.theme.grid}px ${p => p.theme.grid * 2}px; position: relative; margin: 0; padding-right: ${p => p.theme.grid * 4}px; -`; +`); const StyledInlineSvg = styled(InlineSvg)` /* Exists soley to enable its use as a selector in StyledCloseButton */ `; -const StyledCloseButton = styled.button` +const StyledCloseButton = withTheme(styled.button` background: none; border: 0; opacity: 0.4; @@ -34,7 +35,7 @@ const StyledCloseButton = styled.button` &:hover { opacity: 0.8; } -`; +`); export default class AlertMessage extends React.PureComponent { static propTypes = { From f7bab258bce325c89e5dbecfa305e4f8da112866 Mon Sep 17 00:00:00 2001 From: maxbittker Date: Mon, 12 Feb 2018 10:45:56 -0800 Subject: [PATCH 2/3] Revert "use withTheme" This reverts commit ab355f308331f4a8619d73d5fc227450c01a95b6. --- src/sentry/static/sentry/app/components/alert.jsx | 5 ++--- src/sentry/static/sentry/app/components/alertMessage.jsx | 9 ++++----- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/sentry/static/sentry/app/components/alert.jsx b/src/sentry/static/sentry/app/components/alert.jsx index f1cab8dbd7b7d8..b5ab6d4e0f65dd 100644 --- a/src/sentry/static/sentry/app/components/alert.jsx +++ b/src/sentry/static/sentry/app/components/alert.jsx @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import {cx} from 'emotion'; import styled from 'react-emotion'; -import {withTheme} from 'emotion-theming'; import TextBlock from '../views/settings/components/text/textBlock'; import InlineSvg from './inlineSvg'; @@ -14,7 +13,7 @@ const getAlertColorStyles = ({backgroundLight, border, iconColor}) => ` } `; -const AlertWrapper = withTheme(styled.div` +const AlertWrapper = styled.div` margin: 0 0 ${p => p.theme.grid * 3}px; padding: ${p => p.theme.grid * 2}px; font-size: 15px; @@ -25,7 +24,7 @@ const AlertWrapper = withTheme(styled.div` border: 1px solid ${p => p.theme.borderDark}; ${p => p.type && getAlertColorStyles(p.theme.alert[p.type])}; -`); +`; const StyledTextBlock = styled(TextBlock)` line-height: 1.4; diff --git a/src/sentry/static/sentry/app/components/alertMessage.jsx b/src/sentry/static/sentry/app/components/alertMessage.jsx index 9e883f09984900..00ad1eb4954f62 100644 --- a/src/sentry/static/sentry/app/components/alertMessage.jsx +++ b/src/sentry/static/sentry/app/components/alertMessage.jsx @@ -1,25 +1,24 @@ import PropTypes from 'prop-types'; import React from 'react'; import styled from 'react-emotion'; -import {withTheme} from 'emotion-theming'; import Alert from '../components/alert'; import AlertActions from '../actions/alertActions'; import InlineSvg from '../components/inlineSvg'; import {t} from '../locale'; -const StyledAlert = withTheme(styled(Alert)` +const StyledAlert = styled(Alert)` padding: ${p => p.theme.grid}px ${p => p.theme.grid * 2}px; position: relative; margin: 0; padding-right: ${p => p.theme.grid * 4}px; -`); +`; const StyledInlineSvg = styled(InlineSvg)` /* Exists soley to enable its use as a selector in StyledCloseButton */ `; -const StyledCloseButton = withTheme(styled.button` +const StyledCloseButton = styled.button` background: none; border: 0; opacity: 0.4; @@ -35,7 +34,7 @@ const StyledCloseButton = withTheme(styled.button` &:hover { opacity: 0.8; } -`); +`; export default class AlertMessage extends React.PureComponent { static propTypes = { From cf6f16e14fa4dd3b38bd29fcc208973ae6b21894 Mon Sep 17 00:00:00 2001 From: maxbittker Date: Mon, 12 Feb 2018 10:46:25 -0800 Subject: [PATCH 3/3] warn warning --- src/sentry/static/sentry/app/utils/theme.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/sentry/static/sentry/app/utils/theme.jsx b/src/sentry/static/sentry/app/utils/theme.jsx index 70e6f470f93be0..92e036287076eb 100644 --- a/src/sentry/static/sentry/app/utils/theme.jsx +++ b/src/sentry/static/sentry/app/utils/theme.jsx @@ -108,4 +108,7 @@ theme.alert.warning.iconColor = theme.yellowDark; theme.alert.success.iconColor = theme.greenDark; theme.alert.error.iconColor = theme.redDark; +//alias warn to warning +theme.alert.warn = theme.alert.warning; + export default theme;