layout

src/ts/@overflow/app/views/layout/AccountLayout.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
+import { RouteComponentProps, RouteProps, Route, Switch, } from 'react-router-dom';
+import {
+  Header,
+  Grid,
+  Image,
+  Segment,
+} from 'semantic-ui-react';
 
 import SignIn from '../member/SignIn';
 import SignUp from '../member/SignUp';
@@ -20,12 +26,22 @@ class AccountLayout extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     return (
+      <Grid textAlign='center' className='fullHeight' verticalAlign='middle' style={{background:'#1a1b37'}}>
+        <Grid.Column style={{ maxWidth: 450 }}>
+          <Header as='h2' color='teal' textAlign='center'>
+            <Image src='../asset/image/overFlow_CI_blue_180.png' /><br />
+            {' '}Log-in to your account
+          </Header>
+          <Segment raised>
             <Switch>
               <Route path={`${this.props.match.url}/signin`} component={SignIn}/>
               <Route path={`${this.props.match.url}/signup`} component={SignUp}/>
               <Route path={`${this.props.match.url}/check_email`} component={EmailConfirm}/>
               <Route path={`${this.props.match.url}/forgot_password`} component={ForgotPassword}/>
             </Switch>
+          </Segment>
+        </Grid.Column>
+      </Grid>
     );
   }
 

src/ts/@overflow/member/react/components/PWChange.tsx

@@ -2,11 +2,9 @@ import *as React from 'react';
 import {
   Input,
   InputOnChangeData,
-  Select,
   Button,
-  Grid,
   Form,
-  Container, ButtonProps,
+  ButtonProps,
 } from 'semantic-ui-react';
 
 export interface StateProps {
@@ -36,9 +34,6 @@ export class PWChange extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     return (
-      <Container fluid>
-        <Grid centered verticalAlign='middle'>
-          <Grid.Column mobile={16} tablet={6} computer={5}>
       <Form>
         <Form.Input placeholder='Password' type='password' onChange={
           (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
@@ -53,9 +48,6 @@ export class PWChange extends React.Component<Props, State> {
           <Button fluid style={{margin:'7'}}>    Cancel  </Button>
         </Form.Group>
       </Form>
-          </Grid.Column>
-        </Grid>
-      </Container>
     );
   }
 

src/ts/@overflow/member/react/components/SignIn.tsx

@@ -4,12 +4,11 @@ import {
   InputOnChangeData,
   Select,
   Button,
-  Header,
   Modal,
-  Grid,
   Form,
-  Container,
   ButtonProps,
+  Grid,
+  Header,
 } from 'semantic-ui-react';
 
 const options = [
@@ -50,8 +49,6 @@ export class SignIn extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     return (
-        <Grid textAlign='center' className='fullHeight' verticalAlign='middle'>
-          <Grid.Column mobile={16} tablet={6} computer={5}>
       <Form>
         <Form.Input fluid placeholder='Email' onChange={
         (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
@@ -62,20 +59,19 @@ export class SignIn extends React.Component<Props, State> {
           this.setState({ pass: data.value });
         }} />
         <div style={{textAlign:'right'}}>
-                <a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
+          <Button size='tiny' style={{background:'#fff'}} onClick={this.forgotPopupOpen}>Forgot Password?</Button>
         </div>
         <Form.Group>
         <Button fluid primary style={{margin:'7'}} onClick={ this.signInClick.bind(this) }>    Sign In  </Button>
         <Button fluid style={{margin:'7'}} href='/#/test2'>    Sign Up  </Button>
         </Form.Group>
-            </Form>
 
         <Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}>
           <Modal.Header>Change your password</Modal.Header>
           <Modal.Content >
             Enter email address
             <Grid centered>
-                  <Grid.Column mobile={14} tablet={8} computer={6}>
+              <Grid.Column mobile={14} tablet={10} computer={10}>
               <Input fluid placeholder='Email' />
               </Grid.Column>
             </Grid>
@@ -98,9 +94,7 @@ export class SignIn extends React.Component<Props, State> {
             <Button primary onClick={this.PopupClose}>              Ok      </Button>
           </Modal.Actions>
         </Modal>
-
-        </Grid.Column>
-      </Grid>
+      </Form>
     );
   }
 

src/ts/@overflow/member/react/components/SignUp.tsx

@@ -4,9 +4,8 @@ import Member from '../../api/model/Member';
 import {
   InputOnChangeData,
   Button,
-  Grid,
   Form,
-  Container, ButtonProps,
+  ButtonProps,
 } from 'semantic-ui-react';
 
 export interface StateProps {
@@ -57,9 +56,6 @@ export class SignUp extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     return (
-      <Container fluid>
-        <Grid centered verticalAlign='middle'>
-          <Grid.Column mobile={16} tablet={6} computer={5}>
       <Form>
         <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
           (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
@@ -100,10 +96,6 @@ export class SignUp extends React.Component<Props, State> {
           <Button fluid style={{margin:'7'}}>    Cancel  </Button>
         </Form.Group>
       </Form>
-          </Grid.Column>
-        </Grid>
-      </Container>
-
     );
   }