Add server information page for mobile devices

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 {
               </NavLink>
             </div>
 
+            <div className='sidebar-menu__section'>
+              <Link className='sidebar-menu-item' to='/info' onClick={onClose}>
+                <Icon id='info' />
+                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.info)}</span>
+              </Link>
+            </div>
+
             <div className='sidebar-menu__section'>
               <Link className='sidebar-menu-item' to='/auth/sign_out' onClick={onClickLogOut}>
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span>

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 (
+      <Column icon='info' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <div className='info_column_area'>
+          <div className='info__brand'>
+            <div className='brand'>
+              <h1>{instance.get('title')}</h1>
+            </div>
+            <div className='brand__tagline'>
+              <span>{instance.get('description')}</span>
+            </div>
+          </div>
+          <PromoPanel />
+          <LinkFooter />
+        </div>
+      </Column>
+    );
+  }
+
+}

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 <Status /> ends up in the application bundle.
@@ -271,6 +272,8 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/settings/import' layout={LAYOUT.DEFAULT} component={ImportData} content={children} />
         <WrappedRoute path='/soapbox/config' layout={LAYOUT.DEFAULT} component={SoapboxConfig} content={children} />
 
+        <WrappedRoute path='/info' layout={LAYOUT.EMPTY} component={ServerInfo} content={children} />
+
         <WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />
       </Switch>
     );

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');
+}

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';

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