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.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;
+ }
+}