diff options
Diffstat (limited to 'app/assets/javascripts/components/features/notifications')
3 files changed, 16 insertions, 48 deletions
diff --git a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx index 41c2e7d36..30063010c 100644 --- a/app/assets/javascripts/components/features/notifications/components/column_settings.jsx +++ b/app/assets/javascripts/components/features/notifications/components/column_settings.jsx @@ -8,21 +8,6 @@ const messages = defineMessages({ settings: { id: 'notifications.settings', defaultMessage: 'Column settings' } }); -const outerStyle = { - padding: '15px' -}; - -const sectionStyle = { - cursor: 'default', - display: 'block', - fontWeight: '500', - marginBottom: '10px' -}; - -const rowStyle = { - -}; - class ColumnSettings extends React.PureComponent { render () { @@ -34,34 +19,34 @@ class ColumnSettings extends React.PureComponent { return ( <ColumnCollapsable icon='sliders' title={intl.formatMessage(messages.settings)} fullHeight={616} onCollapse={onSave}> - <div className='column-settings--outer' style={outerStyle}> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span> + <div className='column-settings__outer'> + <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['alerts', 'follow']} onChange={onChange} label={alertStr} /> <SettingToggle settings={settings} settingKey={['shows', 'follow']} onChange={onChange} label={showStr} /> <SettingToggle settings={settings} settingKey={['sounds', 'follow']} onChange={onChange} label={soundStr} /> </div> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span> + <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['alerts', 'favourite']} onChange={onChange} label={alertStr} /> <SettingToggle settings={settings} settingKey={['shows', 'favourite']} onChange={onChange} label={showStr} /> <SettingToggle settings={settings} settingKey={['sounds', 'favourite']} onChange={onChange} label={soundStr} /> </div> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span> + <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['alerts', 'mention']} onChange={onChange} label={alertStr} /> <SettingToggle settings={settings} settingKey={['shows', 'mention']} onChange={onChange} label={showStr} /> <SettingToggle settings={settings} settingKey={['sounds', 'mention']} onChange={onChange} label={soundStr} /> </div> - <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span> + <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span> - <div style={rowStyle}> + <div className='column-settings__row'> <SettingToggle settings={settings} settingKey={['alerts', 'reblog']} onChange={onChange} label={alertStr} /> <SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={showStr} /> <SettingToggle settings={settings} settingKey={['sounds', 'reblog']} onChange={onChange} label={soundStr} /> diff --git a/app/assets/javascripts/components/features/notifications/components/notification.jsx b/app/assets/javascripts/components/features/notifications/components/notification.jsx index dadc6696a..34dd76bb7 100644 --- a/app/assets/javascripts/components/features/notifications/components/notification.jsx +++ b/app/assets/javascripts/components/features/notifications/components/notification.jsx @@ -6,17 +6,13 @@ import Permalink from '../../../components/permalink'; import emojify from '../../../emoji'; import escapeTextContentForBrowser from 'escape-html'; -const linkStyle = { - fontWeight: '500' -}; - class Notification extends React.PureComponent { renderFollow (account, link) { return ( <div className='notification notification-follow'> <div className='notification__message'> - <div style={{ position: 'absolute', 'left': '-26px'}}> + <div className='notification__favourite-icon-wrapper'> <i className='fa fa-fw fa-user-plus' /> </div> @@ -36,8 +32,8 @@ class Notification extends React.PureComponent { return ( <div className='notification notification-favourite'> <div className='notification__message'> - <div style={{ position: 'absolute', 'left': '-26px'}}> - <i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} /> + <div className='notification__favourite-icon-wrapper'> + <i className='fa fa-fw fa-star star-icon'/> </div> <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /> @@ -52,7 +48,7 @@ class Notification extends React.PureComponent { return ( <div className='notification notification-reblog'> <div className='notification__message'> - <div style={{ position: 'absolute', 'left': '-26px'}}> + <div className='notification__favourite-icon-wrapper'> <i className='fa fa-fw fa-retweet' /> </div> @@ -69,7 +65,7 @@ class Notification extends React.PureComponent { const account = notification.get('account'); const displayName = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username'); const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; - const link = <Permalink className='notification__display-name' style={linkStyle} href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />; + const link = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />; switch(notification.get('type')) { case 'follow': diff --git a/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx b/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx index 1c3957651..e9bca5928 100644 --- a/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx +++ b/app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx @@ -2,23 +2,10 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Toggle from 'react-toggle'; -const labelStyle = { - display: 'block', - lineHeight: '24px', - verticalAlign: 'middle' -}; - -const labelSpanStyle = { - display: 'inline-block', - verticalAlign: 'middle', - marginBottom: '14px', - marginLeft: '8px' -}; - const SettingToggle = ({ settings, settingKey, label, onChange, htmlFor = '' }) => ( - <label htmlFor={htmlFor} style={labelStyle}> + <label htmlFor={htmlFor} className='setting-toggle__label'> <Toggle checked={settings.getIn(settingKey)} onChange={(e) => onChange(settingKey, e.target.checked)} /> - <span className='setting-toggle' style={labelSpanStyle}>{label}</span> + <span className='setting-toggle'>{label}</span> </label> ); |