👌 adapt <LoginView /> and <SignupView /> to mobile

client/modules/App/App.jsx

@@ -41,7 +41,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/User/components/ResponsiveForm.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { remSize } from '../../../theme';
+
+
+const ResponsiveFormWrapper = styled.div`
+  .form-container__content {
+    width: unset !important;
+    padding-top: ${remSize(16)};
+    padding-bottom: ${remSize(64)};
+  }
+  
+  .form__input {
+    min-width: unset;
+    padding: 0px ${remSize(12)};
+    height: ${remSize(28)};
+  }
+  .form-container__title { margin-bottom: ${remSize(14)}}
+  p.form__field { margin-top: 0px !important; }
+  label.form__label { margin-top: ${remSize(8)} !important; }
+
+  .form-error { width: 100% }
+
+  .nav__items-right:last-child { display: none }
+
+  .form-container {
+    height: 100%
+  }
+
+  .form-container__stack {
+    svg {
+      width: ${remSize(12)};
+      height: ${remSize(12)}
+    }
+    a { padding: 0px }
+  }
+`;
+
+const ResponsiveForm = props =>
+  (props.mobile === true
+    ? (
+      <ResponsiveFormWrapper>
+        {props.children}
+      </ResponsiveFormWrapper>
+
+    )
+    : props.children);
+
+ResponsiveForm.propTypes = {
+  mobile: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+};
+ResponsiveForm.defaultProps = {
+  mobile: false,
+  children: []
+};
+
+export default ResponsiveForm;

client/modules/User/pages/LoginView.jsx

@@ -10,6 +10,7 @@ import LoginForm from '../components/LoginForm';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
+import ResponsiveForm from '../components/ResponsiveForm';
 
 class LoginView extends React.Component {
   constructor(props) {
@@ -27,11 +28,14 @@ class LoginView extends React.Component {
   }
 
   render() {
+    const isMobile = () => (window.innerWidth < 770);
     if (this.props.user.authenticated) {
       this.gotoHomePage();
       return null;
     }
+    // TODO: mobile currently forced to true
     return (
+      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
         <div className="login">
           <Nav layout="dashboard" />
           <main className="form-container">
@@ -57,6 +61,7 @@ class LoginView extends React.Component {
             </div>
           </main>
         </div>
+      </ResponsiveForm>
     );
   }
 }
@@ -79,13 +84,15 @@ LoginView.propTypes = {
   user: PropTypes.shape({
     authenticated: PropTypes.bool
   }),
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  mobile: PropTypes.bool
 };
 
 LoginView.defaultProps = {
   user: {
     authenticated: false
-  }
+  },
+  mobile: false
 };
 
 export default withTranslation()(reduxForm({

client/modules/User/pages/SignupView.jsx

@@ -11,6 +11,9 @@ import apiClient from '../../../utils/apiClient';
 import { validateSignup } from '../../../utils/reduxFormUtils';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
+import ResponsiveForm from '../components/ResponsiveForm';
+
+const isMobile = () => (window.innerWidth < 770);
 
 class SignupView extends React.Component {
   gotoHomePage = () => {
@@ -23,6 +26,7 @@ class SignupView extends React.Component {
       return null;
     }
     return (
+      <ResponsiveForm mobile={isMobile() || this.props.mobile}>
         <div className="signup">
           <Nav layout="dashboard" />
           <main className="form-container">
@@ -44,6 +48,7 @@ class SignupView extends React.Component {
             </div>
           </main>
         </div>
+      </ResponsiveForm>
     );
   }
 }
@@ -110,13 +115,15 @@ SignupView.propTypes = {
   user: PropTypes.shape({
     authenticated: PropTypes.bool
   }),
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  mobile: PropTypes.bool
 };
 
 SignupView.defaultProps = {
   user: {
     authenticated: false
-  }
+  },
+  mobile: false
 };
 
 export default withTranslation()(reduxForm({