1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
import React, { Component } from 'react';
import marked from 'marked';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import injectSheet from 'react-jss';
import { themeSidebarWidth } from '../../../../packages/theme/lib/themes/legacy';
import { announcementsStore } from '../index';
const messages = defineMessages({
headline: {
id: 'feature.announcements.headline',
defaultMessage: '!!!What\'s new in Franz {version}?',
},
});
const styles = theme => ({
container: {
background: theme.colorBackground,
position: 'absolute',
top: 0,
zIndex: 140,
width: `calc(100% - ${themeSidebarWidth})`,
display: 'flex',
'flex-direction': 'column',
'align-items': 'center',
'justify-content': 'center',
},
headline: {
color: theme.colorHeadline,
margin: [25, 0, 40],
'max-width': 500,
'text-align': 'center',
'line-height': '1.3em',
},
body: {
'& h3': {
fontSize: '24px',
margin: '1.5em 0 1em 0',
},
'& li': {
marginBottom: '1em',
},
},
});
@inject('actions') @injectSheet(styles) @observer
class AnnouncementScreen extends Component {
static propTypes = {
classes: PropTypes.object.isRequired,
};
static contextTypes = {
intl: intlShape,
};
render() {
const { classes } = this.props;
const { intl } = this.context;
return (
<div className={`${classes.container}`}>
<h1 className={classes.headline}>
{intl.formatMessage(messages.headline, {
version: announcementsStore.currentVersion,
})}
</h1>
<div
className={classes.body}
dangerouslySetInnerHTML={{
__html: marked(announcementsStore.announcement, { sanitize: true }),
}}
/>
</div>
);
}
}
export default AnnouncementScreen;
|
