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 (
-        <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>
+      <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,26 +34,20 @@ 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) => {
-                  this.setState({ pass: data.value });
-                }} />
-              <Form.Input placeholder='Password Confirm' type='password' onChange={
-                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                  this.setState({ passCon: data.value });
-                }} />
-              <Form.Group>
-                <Button primary fluid style={{margin:'7'}} onClick={this.passChangeClick}>    Submit  </Button>
-                <Button fluid style={{margin:'7'}}>    Cancel  </Button>
-              </Form.Group>
-            </Form>
-          </Grid.Column>
-        </Grid>
-      </Container>
+      <Form>
+        <Form.Input placeholder='Password' type='password' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ pass: data.value });
+          }} />
+        <Form.Input placeholder='Password Confirm' type='password' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ passCon: data.value });
+          }} />
+        <Form.Group>
+          <Button primary fluid style={{margin:'7'}} onClick={this.passChangeClick}>    Submit  </Button>
+          <Button fluid style={{margin:'7'}}>    Cancel  </Button>
+        </Form.Group>
+      </Form>
     );
   }
 

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,57 +49,52 @@ 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) => {
-                this.setState({ email: data.value });
-              }} />
-              <Form.Input fluid placeholder='Password' type='password' onChange={
-              (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                this.setState({ pass: data.value });
-              }} />
-              <div style={{textAlign:'right'}}>
-                <a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
-              </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>
+      <Form>
+        <Form.Input fluid placeholder='Email' onChange={
+        (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ email: data.value });
+        }} />
+        <Form.Input fluid placeholder='Password' type='password' onChange={
+        (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ pass: data.value });
+        }} />
+        <div style={{textAlign:'right'}}>
+          <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>
 
-            <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}>
-                  <Input fluid placeholder='Email' />
-                  </Grid.Column>
-                </Grid>
-              </Modal.Content>
-              <Modal.Actions>
-                <Button primary onClick={this.sendComOpen}>              Submit      </Button>
-                <Button onClick={this.PopupClose}>              Cancel      </Button>
-              </Modal.Actions>
-            </Modal>
+        <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={10} computer={10}>
+              <Input fluid placeholder='Email' />
+              </Grid.Column>
+            </Grid>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button primary onClick={this.sendComOpen}>              Submit      </Button>
+            <Button onClick={this.PopupClose}>              Cancel      </Button>
+          </Modal.Actions>
+        </Modal>
 
-            <Modal size='small' open={this.state.sendComPopup} onClose={this.PopupClose}>
-              <Modal.Header>Send Complete</Modal.Header>
-              <Modal.Content>
-                <Modal.Description>
-                  <Header>비밀번호 변경이 신청 되었습니다.</Header>
-                  <p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</p>
-                </Modal.Description>
-              </Modal.Content>
-              <Modal.Actions>
-                <Button primary onClick={this.PopupClose}>              Ok      </Button>
-              </Modal.Actions>
-            </Modal>
-
-        </Grid.Column>
-      </Grid>
+        <Modal size='small' open={this.state.sendComPopup} onClose={this.PopupClose}>
+          <Modal.Header>Send Complete</Modal.Header>
+          <Modal.Content>
+            <Modal.Description>
+              <Header>비밀번호 변경이 신청 되었습니다.</Header>
+              <p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</p>
+            </Modal.Description>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button primary onClick={this.PopupClose}>              Ok      </Button>
+          </Modal.Actions>
+        </Modal>
+      </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,53 +56,46 @@ 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) => {
-                  this.setState({ email: data.value });
-                }} />
-              <Form.Input fluid placeholder='Name' onChange= {
-                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                  this.setState({ name: data.value });
-                }
-              }/>
-              <Form.Input fluid placeholder='Password' type='password' onChange={
-                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                  this.setState({ pass: data.value });
-                }
-              } />
-              <Form.Input fluid placeholder='Password Confirm' type='password' onChange={
-                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                  this.setState({ passCon: data.value });
-                }
-              } />
-              <Form.Input fluid placeholder='Company' onChange={
-                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                  this.setState({ company: data.value });
-                }
-              }/>
-              <Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={
-                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                  this.setState({ country: data.value });
-                }
-              } />
-              <Form.Input fluid placeholder='phone' onChange={
-                (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                  this.setState({ phone: data.value });
-                }
-              } />
-              <Form.Group>
-                <Button primary fluid style={{margin:'7'}} onClick={this.signUpClick}>   Sign Up  </Button>
-                <Button fluid style={{margin:'7'}}>    Cancel  </Button>
-              </Form.Group>
-            </Form>
-          </Grid.Column>
-        </Grid>
-      </Container>
-
+      <Form>
+        <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ email: data.value });
+          }} />
+        <Form.Input fluid placeholder='Name' onChange= {
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ name: data.value });
+          }
+        }/>
+        <Form.Input fluid placeholder='Password' type='password' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ pass: data.value });
+          }
+        } />
+        <Form.Input fluid placeholder='Password Confirm' type='password' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ passCon: data.value });
+          }
+        } />
+        <Form.Input fluid placeholder='Company' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ company: data.value });
+          }
+        }/>
+        <Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ country: data.value });
+          }
+        } />
+        <Form.Input fluid placeholder='phone' onChange={
+          (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+            this.setState({ phone: data.value });
+          }
+        } />
+        <Form.Group>
+          <Button primary fluid style={{margin:'7'}} onClick={this.signUpClick}>   Sign Up  </Button>
+          <Button fluid style={{margin:'7'}}>    Cancel  </Button>
+        </Form.Group>
+      </Form>
     );
   }