diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js index f0e407033..306303417 100644 --- a/app/soapbox/components/sidebar_menu.js +++ b/app/soapbox/components/sidebar_menu.js @@ -37,6 +37,7 @@ const messages = defineMessages({ apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' }, news: { id: 'tabs_bar.news', defaultMessage: 'News' }, donate: { id: 'donate', defaultMessage: 'Donate' }, + info: { id: 'column.info', defaultMessage: 'Server information' }, }); const mapStateToProps = state => { @@ -191,6 +192,13 @@ class SidebarMenu extends ImmutablePureComponent { +
+ + + {intl.formatMessage(messages.info)} + +
+
{intl.formatMessage(messages.logout)} diff --git a/app/soapbox/features/server_info/index.js b/app/soapbox/features/server_info/index.js new file mode 100644 index 000000000..c79e54f42 --- /dev/null +++ b/app/soapbox/features/server_info/index.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { defineMessages, injectIntl } from 'react-intl'; +import { connect } from 'react-redux'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import PropTypes from 'prop-types'; +import Column from '../ui/components/column'; +import PromoPanel from '../ui/components/promo_panel'; +import LinkFooter from '../ui/components/link_footer'; + +const messages = defineMessages({ + heading: { id: 'column.info', defaultMessage: 'Server information' }, +}); + +const mapStateToProps = (state, props) => ({ + instance: state.get('instance'), +}); + +export default @connect(mapStateToProps) +@injectIntl +class ServerInfo extends ImmutablePureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + }; + + render() { + const { intl, instance } = this.props; + + return ( + +
+
+
+

{instance.get('title')}

+
+
+ {instance.get('description')} +
+
+ + +
+
+ ); + } + +} diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index e604bfd88..9f0085772 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -84,6 +84,7 @@ import { MfaForm, ChatIndex, ChatRoom, + ServerInfo, } from './util/async-components'; // Dummy import, to make sure that ends up in the application bundle. @@ -271,6 +272,8 @@ class SwitchingColumnsArea extends React.PureComponent { + + ); diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 83f26c270..01838b156 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -209,3 +209,7 @@ export function ChatIndex() { export function ChatRoom() { return import(/* webpackChunkName: "features/chats/chat_room" */'../../chats/chat_room'); } + +export function ServerInfo() { + return import(/* webpackChunkName: "features/server_info" */'../../server_info'); +} diff --git a/app/styles/application.scss b/app/styles/application.scss index 472663563..45804b491 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -71,6 +71,7 @@ @import 'components/mfa_form'; @import 'components/snackbar'; @import 'components/accordion'; +@import 'components/server-info'; // Holiday @import 'holiday/halloween'; diff --git a/app/styles/components/server-info.scss b/app/styles/components/server-info.scss new file mode 100644 index 000000000..f2714d68b --- /dev/null +++ b/app/styles/components/server-info.scss @@ -0,0 +1,22 @@ +.columns-area { + .info_column_area { + padding: 15px; + + .wtf-panel { + border: 1px solid var(--brand-color--med); + } + } +} + +.info__brand { + .brand h1 { + color: var(--primary-text-color); + font-size: 26px; + } + + .brand__tagline { + font-size: 20px; + line-height: 1.15; + margin-top: 15px; + } +}