Adding styling in the main auth App

src/core/client/auth/components/App.tsx

@@ -1,23 +1,25 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
+import * as styles from "./App.css";
 
 import ForgotPasswordContainer from "../containers/ForgotPasswordContainer";
 import ResetPasswordContainer from "../containers/ResetPasswordContainer";
 import SignInContainer from "../containers/SignInContainer";
 import SignUpContainer from "../containers/SignUpContainer";
 
+// TODO: (cvle) Remove %future added value when we have Relay 1.6
+// https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
+export type View =
+  | "SIGN_UP"
+  | "SIGN_IN"
+  | "FORGOT_PASSWORD"
+  | "RESET_PASSWORD"
+  | "%future added value";
+
 export interface AppProps {
-  // TODO: (cvle) Remove %future added value when we have Relay 1.6
-  // https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
-  view:
-    | "SIGN_UP"
-    | "SIGN_IN"
-    | "FORGOT_PASSWORD"
-    | "RESET_PASSWORD"
-    | "%future added value";
+  view: View;
 }
 
-const App: StatelessComponent<AppProps> = ({ view }) => {
+const renderView = (view: View) => {
   switch (view) {
     case "SIGN_UP":
       return <SignUpContainer />;
@@ -32,4 +34,8 @@ const App: StatelessComponent<AppProps> = ({ view }) => {
   }
 };
 
+const App: StatelessComponent<AppProps> = ({ view }) => (
+  <div className={styles.root}>{renderView(view)}</div>
+);
+
 export default App;

src/core/client/auth/components/SignIn.tsx

@@ -19,7 +19,7 @@ import {
   Typography,
   ValidationMessage,
 } from "talk-ui/components";
-import { View } from "../containers/SignInContainer";
+
 import * as styles from "./SignIn.css";
 
 interface FormProps {
@@ -29,7 +29,8 @@ interface FormProps {
 
 export interface SignInForm {
   onSubmit: OnSubmit<FormProps>;
-  setView: (view: View) => void;
+  goToSignUp: () => void;
+  goToForgotPassword: () => void;
   error: string | null;
 }
 
@@ -95,9 +96,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                       variant="underlined"
                       color="primary"
                       size="small"
-                      onClick={() => {
-                        props.setView("FORGOT_PASSWORD");
-                      }}
+                      onClick={props.goToForgotPassword}
                     >
                       Forgot your password?
                     </Button>
@@ -126,9 +125,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                   variant="underlined"
                   size="small"
                   color="primary"
-                  onClick={() => {
-                    props.setView("SIGN_UP");
-                  }}
+                  onClick={props.goToSignUp}
                 >
                   Sign Up
                 </Button>

src/core/client/auth/components/SignUp.tsx

@@ -21,7 +21,7 @@ import {
   Typography,
   ValidationMessage,
 } from "talk-ui/components";
-import { View } from "../containers/SignUpContainer";
+
 import * as styles from "./SignUp.css";
 
 interface FormProps {
@@ -33,7 +33,7 @@ interface FormProps {
 
 export interface SignUpForm {
   onSubmit: OnSubmit<FormProps>;
-  setView: (view: View) => void;
+  goToSignIn: () => void;
   error: string | null;
 }
 
@@ -160,7 +160,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 )}
               </Field>
             </Flex>
-            <div className={styles.footer}>
+            <div>
               <Button
                 variant="filled"
                 color="primary"
@@ -170,19 +170,13 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
               >
                 Sign up and join the conversation
               </Button>
-              <Flex
-                itemGutter="half"
-                justifyContent="center"
-                className={styles.subFooter}
-              >
+              <Flex itemGutter="half" justifyContent="center">
                 <Typography>Already have an account?</Typography>
                 <Button
                   variant="underlined"
                   size="small"
                   color="primary"
-                  onClick={() => {
-                    props.setView("SIGN_IN");
-                  }}
+                  onClick={props.goToSignIn}
                 >
                   Sign In
                 </Button>

src/core/client/auth/containers/SignInContainer.tsx

@@ -44,11 +44,14 @@ class SignInContainer extends Component<
     }
     return undefined;
   };
+  private goToForgotPassword = () => this.setView("FORGOT_PASSWORD");
+  private goToSignUp = () => this.setView("SIGN_UP");
   public render() {
     return (
       <SignIn
         onSubmit={this.onSubmit}
-        setView={this.setView}
+        goToForgotPassword={this.goToForgotPassword}
+        goToSignUp={this.goToSignUp}
         error={this.state.error}
       />
     );

src/core/client/auth/containers/SignUpContainer.tsx

@@ -44,11 +44,12 @@ class SignUpContainer extends Component<
     }
     return undefined;
   };
+  private goToSignIn = () => this.setView("SIGN_IN");
   public render() {
     return (
       <SignUp
         onSubmit={this.onSubmit}
-        setView={this.setView}
+        goToSignIn={this.goToSignIn}
         error={this.state.error}
       />
     );