[Mobile] Improve show dialog in mobile size & some small improvements

src/components/circle/CircleComponent.tsx

@@ -61,6 +61,14 @@ const styles = (theme: any) => ({
   },
   dialogPaper: {
     minWidth: 400
+  },
+  fullPageXs: {
+    [theme.breakpoints.down('xs')]: {
+      width: '100%',
+      height: '100%',
+      margin: 0,
+      overflowY: 'auto'
+    }
   }
 })
 
@@ -306,6 +314,7 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
           </List>
         </Collapse>
         <Dialog
+        PaperProps={{className: classes.fullPageXs}}
           key={this.props.id}
           open={this.props.openSetting!}
           onClose={this.props.closeCircleSettings}

src/components/editProfile/EditProfileComponent.tsx

@@ -47,6 +47,14 @@ import { Profile } from 'core/domain/users'
 const styles = (theme: any) => ({
   dialogTitle: {
     padding: 0
+  },
+  fullPageXs: {
+    [theme.breakpoints.down('xs')]: {
+      width: '100%',
+      height: '100%',
+      margin: 0,
+      overflowY: 'auto'
+    }
   }
 })
 
@@ -314,6 +322,7 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
       <div>
         {/* Edit profile dialog */}
         <Dialog
+        PaperProps={{className: classes.fullPageXs}}
           key='Edit-Profile'
           open={this.props.open!}
           onClose={this.props.onRequestClose}
@@ -388,6 +397,7 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
 
         {/* Image gallery for banner*/}
         <Dialog
+        PaperProps={{className: classes.fullPageXs}}
           open={this.state.openBanner}
           onClose={this.handleCloseBannerGallery}
 
@@ -400,6 +410,7 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
 
         {/* Image gallery for avatar */}
         <Dialog
+        PaperProps={{className: classes.fullPageXs}}
           open={this.state.openAvatar}
           onClose={this.handleCloseAvatarGallery}
         >

src/components/emailVerification/EmailVerificationComponent.tsx

@@ -8,12 +8,33 @@ import TextField from 'material-ui/TextField'
 import RaisedButton from 'material-ui/Button'
 import Button from 'material-ui/Button'
 import config from 'src/config'
+import { withStyles } from 'material-ui/styles'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 
 // - Import actions
 import * as authorizeActions from 'actions/authorizeActions'
 import { IEmailVerificationComponentProps } from './IEmailVerificationComponentProps'
 import { IEmailVerificationComponentState } from './IEmailVerificationComponentState'
+import { Grid } from 'material-ui'
+
+const styles = (theme: any) => ({
+  textField: {
+    minWidth: 280,
+    marginTop: 20
+
+  },
+  contain: {
+    margin: '0 auto'
+  },
+  paper: {
+    minHeight: 370,
+    maxWidth: 450,
+    minWidth: 337,
+    textAlign: 'center',
+    display: 'block',
+    margin: 'auto'
+  }
+})
 
 /**
  * Create component class
@@ -22,7 +43,7 @@ import { IEmailVerificationComponentState } from './IEmailVerificationComponentS
  * @class EmailVerificationComponent
  * @extends {Component}
  */
-export class EmailVerificationComponent extends Component<IEmailVerificationComponentProps,IEmailVerificationComponentState> {
+export class EmailVerificationComponent extends Component<IEmailVerificationComponentProps, IEmailVerificationComponentState> {
 
   styles = {
     message: {
@@ -32,7 +53,18 @@ export class EmailVerificationComponent extends Component<IEmailVerificationComp
       marginTop: 60
     },
     homeButton: {
-      marginRight: 10 
+      marginRight: 10
+    },
+    contain: {
+      margin: '0 auto'
+    },
+    paper: {
+      minHeight: 370,
+      maxWidth: 450,
+      minWidth: 337,
+      textAlign: 'center',
+      display: 'block',
+      margin: 'auto'
     }
 
   }
@@ -41,7 +73,7 @@ export class EmailVerificationComponent extends Component<IEmailVerificationComp
    * Component constructor
    * @param  {object} props is an object properties of component
    */
-  constructor (props: IEmailVerificationComponentProps) {
+  constructor(props: IEmailVerificationComponentProps) {
     super(props)
 
     // Binding function to `this`
@@ -52,47 +84,26 @@ export class EmailVerificationComponent extends Component<IEmailVerificationComp
    * Reneder component DOM
    * @return {react element} return the DOM which rendered by component
    */
-  render () {
+  render() {
-    const {translate} = this.props
+    const { translate, classes } = this.props
-    const paperStyle = {
-      minHeight: 370,
-      width: 450,
-      textAlign: 'center',
-      display: 'block',
-      margin: 'auto'
-    }
     return (
-      <div>
+      <Grid container spacing={24}>
+        <Grid item xs={12} className={classes.contain}>
 
-        <h1 style={{
+          <h1 className='g__app-name'>{config.settings.appName}</h1>
-          textAlign: 'center',
-          padding: '20px',
-          fontSize: '30px',
-          fontWeight: 500,
-          lineHeight: '32px',
-          margin: 'auto',
-          color: 'rgba(138, 148, 138, 0.2)'
-        }}>{config.settings.appName}</h1>
 
-        <div className='animate-bottom'>
+          <div className='animate-bottom'>
-          <Paper style={paperStyle} elevation={1} >
+            <Paper className={classes.paper} elevation={1} >
-            <div style={{ padding: '48px 40px 36px' }}>
+              <div style={{ padding: '48px 40px 36px' }}>
-              <div style={{
+                <div style={{
-                paddingLeft: '40px',
+                  paddingLeft: '40px',
-                paddingRight: '40px'
+                  paddingRight: '40px'
-              }}>
+                }}>
 
-                <h2 style={{
+                  <h2 className='zoomOutLCorner animated g__paper-title'>{translate!('emailVerification.title')}</h2>
-                  textAlign: 'left',
+                </div>
-                  paddingTop: '16px',
+                <p style={this.styles.message as any}>
-                  fontSize: '24px',
+                  {translate!('emailVerification.description')}
-                  fontWeight: 400,
-                  lineHeight: '32px',
-                  margin: 0
-                }} className='zoomOutLCorner animated'>{translate!('emailVerification.title')}</h2>
-              </div>
-              <p style={this.styles.message as any}>
-              {translate!('emailVerification.description')}
                 </p>
                 <div style={this.styles.buttons}>
                   <Button variant='raised' style={this.styles.homeButton} color='primary' onClick={() => this.props.homePage()}> {translate!('emailVerification.homeButton')} </Button>
@@ -101,10 +112,11 @@ export class EmailVerificationComponent extends Component<IEmailVerificationComp
                 <div>
                 </div>
 
-            </div>
+              </div>
-          </Paper>
+            </Paper>
-        </div>
+          </div>
-      </div>
+        </Grid>
+      </Grid>
     )
   }
 }
@@ -137,4 +149,4 @@ const mapStateToProps = (state: any, ownProps: IEmailVerificationComponentProps)
 }
 
 // - Connect component to redux store
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(EmailVerificationComponent as any) as any)
+export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(EmailVerificationComponent as any) as any)) as typeof EmailVerificationComponent

src/components/emailVerification/IEmailVerificationComponentProps.ts

@@ -10,6 +10,11 @@ export interface IEmailVerificationComponentProps {
    */
   homePage: () => any
 
+  /**
+   * Styles
+   */
+  classes?: any
+
   /**
    * Translate to locale string
    */

src/components/imageGallery/IImageGalleryComponentProps.ts

@@ -39,6 +39,11 @@ export interface IImageGalleryComponentProps {
    */
   images?: Image[]
 
+  /**
+   * Styles
+   */
+  classes?: any
+
   /**
    * Translate to locale string
    */

src/components/imageGallery/ImageGalleryComponent.tsx

@@ -10,6 +10,7 @@ import SvgUpload from 'material-ui-icons/CloudUpload'
 import SvgAddImage from 'material-ui-icons/AddAPhoto'
 import SvgDelete from 'material-ui-icons/Delete'
 import { grey } from 'material-ui/colors'
+import { withStyles } from 'material-ui/styles'
 import uuid from 'uuid'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 
@@ -26,6 +27,17 @@ import { IImageGalleryComponentProps } from './IImageGalleryComponentProps'
 import { IImageGalleryComponentState } from './IImageGalleryComponentState'
 import { Image } from 'core/domain/imageGallery'
 
+const styles = (theme: any) => ({
+  fullPageXs: {
+    [theme.breakpoints.down('xs')]: {
+      width: '100%',
+      height: '100%',
+      margin: 0,
+      overflowY: 'auto'
+    }
+  }
+})
+
 /**
  * Create ImageGallery component class
  */
@@ -252,4 +264,4 @@ const mapStateToProps = (state: any) => {
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(ImageGalleryComponent as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(ImageGalleryComponent as any) as any)

src/components/login/LoginComponent.tsx

@@ -19,17 +19,37 @@ import * as authorizeActions from 'actions/authorizeActions'
 import { ILoginComponentProps } from './ILoginComponentProps'
 import { ILoginComponentState } from './ILoginComponentState'
 import { OAuthType } from 'core/domain/authorize'
+import Grid from 'material-ui/Grid/Grid'
 
 const styles = (theme: any) => ({
   textField: {
     minWidth: 280,
     marginTop: 20
-
+  },
+  contain: {
+    margin: '0 auto'
+  },
+  paper: {
+    minHeight: 370,
+    maxWidth: 450,
+    minWidth: 337,
+    textAlign: 'center',
+    display: 'block',
+    margin: 'auto'
+  },
+  bottomPaper: {
+    display: 'inherit',
+    fontSize: 'small',
+    marginTop: '50px'
+  },
+  link: {
+    color: '#0095ff',
+    display: 'inline-block'
   }
 })
 
 // - Create Login component class
-export class LoginComponent extends Component<ILoginComponentProps,ILoginComponentState> {
+export class LoginComponent extends Component<ILoginComponentProps, ILoginComponentState> {
 
   styles = {
     singinOptions: {
@@ -40,14 +60,6 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
     divider: {
       marginBottom: 10,
       marginTop: 15
-    },
-    restPassword: {
-      lineHeight: 6,
-      fontWeight: 400,
-      fontSize: 'small'
-    },
-    restPasswordLink: {
-      color: '#0095ff'
     }
   }
 
@@ -55,7 +67,7 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
    * Component constructor
    * @param  {object} props is an object properties of component
    */
-  constructor (props: ILoginComponentProps) {
+  constructor(props: ILoginComponentProps) {
     super(props)
 
     this.state = {
@@ -105,7 +117,7 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
    * Handle register form
    */
   handleForm = () => {
-    const {translate} = this.props
+    const { translate } = this.props
     let error = false
     if (this.state.emailInput === '') {
       this.setState({
@@ -135,96 +147,77 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
    * Reneder component DOM
    * @return {react element} return the DOM which rendered by component
    */
-  render () {
+  render() {
-    const {classes, loginWithOAuth, translate} = this.props
+    const { classes, loginWithOAuth, translate } = this.props
-
-    const paperStyle = {
-      minHeight: 370,
-      width: 450,
-      textAlign: 'center',
-      display: 'block',
-      margin: 'auto'
-    }
 
     return (
-      <form>
+      <Grid container spacing={24}>
+        <Grid item xs={12} className={classes.contain}>
 
-        <h1 style={{
+          <h1 className='g__app-name'>{config.settings.appName}</h1>
-          textAlign: 'center',
-          padding: '20px',
-          fontSize: '30px',
-          fontWeight: 500,
-          lineHeight: '32px',
-          margin: 'auto',
-          color: 'rgba(138, 148, 138, 0.2)'
-        }}>{config.settings.appName}</h1>
 
-        <div className='animate-bottom'>
+          <div className='animate-bottom'>
-          <Paper style={paperStyle} elevation={1} >
+            <Paper className={classes.paper} elevation={1} >
-            <div style={{ padding: '48px 40px 36px' }}>
+              <form>
-              <div style={{
+                <div style={{ padding: '48px 40px 36px' }}>
-                paddingLeft: '40px',
+                  <div style={{
-                paddingRight: '40px'
+                    paddingLeft: '40px',
-              }}>
+                    paddingRight: '40px'
+                  }}>
 
-                <h2 style={{
+                    <h2 className='zoomOutLCorner animated g__paper-title'>{translate!('login.title')}</h2>
-                  textAlign: 'left',
+                  </div>
-                  paddingTop: '16px',
+                  <div style={this.styles.singinOptions as any}>
-                  fontSize: '24px',
+                    <IconButton
-                  fontWeight: 400,
+                      onClick={() => loginWithOAuth!(OAuthType.FACEBOOK)}
-                  lineHeight: '32px',
+                    ><div className='icon-fb icon'></div></IconButton>
-                  margin: 0
+                    <IconButton
-                }} className='zoomOutLCorner animated'>{translate!('login.title')}</h2>
+                      onClick={() => loginWithOAuth!(OAuthType.GOOGLE)}
-              </div>
+                    > <div className='icon-google icon'></div> </IconButton>
-              <div style={this.styles.singinOptions as any}>
+                    <IconButton
-              <IconButton
+                      onClick={() => loginWithOAuth!(OAuthType.GITHUB)}
-                onClick={() => loginWithOAuth!(OAuthType.FACEBOOK)}
+                    > <div className='icon-github icon'></div> </IconButton>
-              ><div className='icon-fb icon'></div></IconButton>
-              <IconButton
-                onClick={() => loginWithOAuth!(OAuthType.GOOGLE)}
-              > <div className='icon-google icon'></div> </IconButton>
-              <IconButton
-                onClick={() => loginWithOAuth!(OAuthType.GITHUB)}
-              > <div className='icon-github icon'></div> </IconButton>
 
-              </div>
+                  </div>
-              <Divider style={this.styles.divider} />
+                  <Divider style={this.styles.divider} />
-              <TextField
+                  <TextField
-              className={classes.textField}
+                    className={classes.textField}
-               autoFocus
+                    autoFocus
-                onChange={this.handleInputChange}
+                    onChange={this.handleInputChange}
-                helperText={this.state.emailInputError}
+                    helperText={this.state.emailInputError}
-                error={this.state.emailInputError.trim() !== ''}
+                    error={this.state.emailInputError.trim() !== ''}
-                name='emailInput'
+                    name='emailInput'
-                label={translate!('login.emailLabel')}
+                    label={translate!('login.emailLabel')}
-                type='email'
+                    type='email'
-                tabIndex={1}
+                    tabIndex={1}
-              /><br />
+                  /><br />
-              <TextField
+                  <TextField
-              className={classes.textField}
+                    className={classes.textField}
-                onChange={this.handleInputChange}
+                    onChange={this.handleInputChange}
-                helperText={this.state.passwordInputError}
+                    helperText={this.state.passwordInputError}
-                error={this.state.passwordInputError.trim() !== ''}
+                    error={this.state.passwordInputError.trim() !== ''}
-                name='passwordInput'
+                    name='passwordInput'
-                label={translate!('login.passwordLabel')}
+                    label={translate!('login.passwordLabel')}
-                type='password'
+                    type='password'
-                tabIndex={2}
+                    tabIndex={2}
-              /><br />
+                  /><br />
-              <br />
+                  <br />
-              <br />
+                  <br />
-              <div className='login__button-box'>
+                  <div className='login__button-box'>
-                <div>
+                    <div>
-                  <Button onClick={this.props.signupPage} tabIndex={4}>{translate!('login.createAccountButton')}</Button>
+                      <Button onClick={this.props.signupPage} tabIndex={4}>{translate!('login.createAccountButton')}</Button>
+                    </div>
+                    <div >
+                      <Button variant='raised' color='primary' onClick={this.handleForm} tabIndex={3} >{translate!('login.loginButton')}</Button>
+                    </div>
+                  </div>
+                  <span className={classes.bottomPaper}>{translate!('login.forgetPasswordMessage')} <NavLink to='/resetPassword' className={classes.link}>{translate!('login.resetPasswordLabel')}</NavLink></span>
                 </div>
-                <div >
+              </form>
-                  <Button variant='raised' color='primary' onClick={this.handleForm} tabIndex={3} >{translate!('login.loginButton')}</Button>
+            </Paper>
-                </div>
+          </div>
-              </div>
+        </Grid>
-                <span style={this.styles.restPassword as any}>{translate!('login.forgetPasswordMessage')} <NavLink to='/resetPassword' style={this.styles.restPasswordLink}>{translate!('login.resetPasswordLabel')}</NavLink></span>
+      </Grid>
-            </div>
-          </Paper>
-        </div>
-      </form>
     )
   }
 }
@@ -260,4 +253,4 @@ const mapStateToProps = (state: any, ownProps: ILoginComponentProps) => {
 }
 
 // - Connect component to redux store
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(LoginComponent as any) as any) as any)
+export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(LoginComponent as any) as any)) as typeof LoginComponent

src/components/notify/NotifyComponent.tsx

@@ -54,6 +54,14 @@ const styles = (theme: any) => ({
     maxHeight: 380,
     overflowY: 'auto'
 
+  },
+  fullPageXs: {
+    [theme.breakpoints.down('xs')]: {
+      width: '100%',
+      height: '100%',
+      margin: 0,
+      overflowY: 'auto'
+    }
   }
 })
 

src/components/postWrite/PostWriteComponent.tsx

@@ -49,8 +49,17 @@ import * as postActions from 'actions/postActions'
 import { IPostWriteComponentProps } from './IPostWriteComponentProps'
 import { IPostWriteComponentState } from './IPostWriteComponentState'
 import { Post } from 'core/domain/posts'
+import Grid from 'material-ui/Grid/Grid'
 
 const styles = (theme: any) => ({
+  fullPageXs: {
+    [theme.breakpoints.down('xs')]: {
+      width: '100%',
+      height: '100%',
+      margin: 0,
+      overflowY: 'auto'
+    }
+  },
   backdrop: {
     top: 0,
     left: 0,
@@ -62,7 +71,7 @@ const styles = (theme: any) => ({
     backgroundColor: 'rgba(251, 249, 249, 0.5)',
     WebkitTapHighlightColor: 'transparent'
   },
-  root: {
+  content: {
     padding: 0,
     paddingTop: 0
   },
@@ -88,7 +97,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
    * Component constructor
    * @param  {object} props is an object properties of component
    */
-  constructor (props: IPostWriteComponentProps) {
+  constructor(props: IPostWriteComponentProps) {
 
     super(props)
 
@@ -324,7 +333,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
     })
   }
 
-  componentWillReceiveProps (nextProps: IPostWriteComponentProps) {
+  componentWillReceiveProps(nextProps: IPostWriteComponentProps) {
     if (!nextProps.open) {
       const { postModel } = this.props
       this.setState({
@@ -365,7 +374,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
    * Reneder component DOM
    * @return {react element} return the DOM which rendered by component
    */
-  render () {
+  render() {
 
     const { classes, translate } = this.props
     const { menuOpen } = this.state
@@ -423,28 +432,28 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
      */
     const loadImage = (this.state.image && this.state.image !== '')
       ? (
-      <div>
+        <div>
-        <div style={{ position: 'relative', overflowY: 'hidden', overflowX: 'auto' }}>
+          <div style={{ position: 'relative', overflowY: 'hidden', overflowX: 'auto' }}>
-          <ul style={{ position: 'relative', whiteSpace: 'nowrap', padding: '0 0 0 16px', margin: '8px 0 0 0', paddingRight: '16px', verticalAlign: 'bottom', flexShrink: 0, listStyleType: 'none' }}>
+            <ul style={{ position: 'relative', whiteSpace: 'nowrap', padding: '0 0 0 16px', margin: '8px 0 0 0', paddingRight: '16px', verticalAlign: 'bottom', flexShrink: 0, listStyleType: 'none' }}>
-            <div style={{ display: 'flex', position: 'relative' }}>
+              <div style={{ display: 'flex', position: 'relative' }}>
-              <span onClick={this.handleRemoveImage} style={{
+                <span onClick={this.handleRemoveImage} style={{
-                position: 'absolute', width: '28px', backgroundColor: 'rgba(255, 255, 255, 0.22)',
+                  position: 'absolute', width: '28px', backgroundColor: 'rgba(255, 255, 255, 0.22)',
-                height: '28px', right: 12, top: 4, cursor: 'pointer', borderRadius: '50%',
+                  height: '28px', right: 12, top: 4, cursor: 'pointer', borderRadius: '50%',
-                display: 'flex', alignItems: 'center', justifyContent: 'center'
+                  display: 'flex', alignItems: 'center', justifyContent: 'center'
-              }}>
+                }}>
-                <SvgRemoveImage style={{ color: 'rgba(0, 0, 0, 0.53)' }} />
+                  <SvgRemoveImage style={{ color: 'rgba(0, 0, 0, 0.53)' }} />
-              </span>
+                </span>
 
-              <div style={{ display: 'inline-block', width: '100%', marginRight: '8px', transition: 'transform .25s' }}>
+                <div style={{ display: 'inline-block', width: '100%', marginRight: '8px', transition: 'transform .25s' }}>
-                <li style={{ width: '100%', margin: 0, verticalAlign: 'bottom', position: 'static' }}>
+                  <li style={{ width: '100%', margin: 0, verticalAlign: 'bottom', position: 'static' }}>
-                  <Img fileName={this.state.image} style={{ width: '100%', height: 'auto' }} />
+                    <Img fileName={this.state.image} style={{ width: '100%', height: 'auto' }} />
-                </li>
+                  </li>
+                </div>
               </div>
-            </div>
 
-          </ul>
+            </ul>
+          </div>
         </div>
-      </div>
       ) : ''
 
     const styles = {
@@ -459,14 +468,15 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
       <div style={this.props.style}>
         {this.props.children}
         <Dialog
-        BackdropProps={{className: classes.backdrop} as any}
+          BackdropProps={{ className: classes.backdrop } as any}
+          PaperProps={{className: classes.fullPageXs}}
           key={this.props.id || 0}
           open={this.props.open}
           onClose={this.props.onRequestClose}
         >
           <DialogContent
-          className={classes.root}
+            className={classes.content}
-          style={{paddingTop: 0}}
+            style={{ paddingTop: 0 }}
 
           >
 
@@ -478,10 +488,11 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
               >
               </CardHeader>
               <CardContent>
+                <Grid item xs={12}>
                 <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, overflow: 'hidden' }}>
                   <div style={{ position: 'relative', flexDirection: 'column', display: 'flex', flexGrow: 1, overflow: 'hidden', overflowY: 'auto', maxHeight: '300px' }}>
                     <TextField
-                     autoFocus
+                      autoFocus
                       value={this.state.postText}
                       onChange={this.handleOnChange}
                       placeholder={translate!('post.textareaPlaceholder')}
@@ -504,6 +515,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
                     </div>
                   </div>
                 </div>
+                </Grid>
               </CardContent>
             </Card>
           </DialogContent>
@@ -515,8 +527,8 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
               onClick={this.props.onRequestClose}
               style={{ color: grey[800] }}
             >
-            {translate!('post.cancelButton')}
+              {translate!('post.cancelButton')}
-      </Button>
+            </Button>
             <Button
               color='primary'
               disableFocusRipple={true}
@@ -529,6 +541,7 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
           </DialogActions>
         </Dialog>
         <Dialog
+        PaperProps={{className: classes.fullPageXs}}
           open={this.state.galleryOpen}
           onClose={this.handleCloseGallery}
 
@@ -545,11 +558,11 @@ export class PostWriteComponent extends Component<IPostWriteComponentProps, IPos
               style={{ color: grey[800] }}
             >
               {translate!('post.cancelButton')}
-        </Button>
+            </Button>
           </DialogActions>
         </Dialog>
 
-      </div>
+      </div >
     )
   }
 }

src/components/resetPassword/ResetPasswordComponent.tsx

@@ -3,14 +3,17 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { NavLink, withRouter } from 'react-router-dom'
 import { push } from 'react-router-redux'
+import config from 'src/config'
+import { getTranslate, getActiveLanguage } from 'react-localize-redux'
+
+// - Material UI
 import Paper from 'material-ui/Paper'
 import TextField from 'material-ui/TextField'
 import RaisedButton from 'material-ui/Button'
 import Button from 'material-ui/Button'
 import { withStyles } from 'material-ui/styles'
 import Typography from 'material-ui/Typography'
-import config from 'src/config'
+import { Grid } from 'material-ui'
-import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 
 // - Import actions
 import * as authorizeActions from 'actions/authorizeActions'
@@ -25,6 +28,17 @@ const styles = (theme: any) => ({
   },
   caption: {
     marginTop: 30
+  },
+  contain: {
+    margin: '0 auto'
+  },
+  paper: {
+    minHeight: 370,
+    maxWidth: 450,
+    minWidth: 337,
+    textAlign: 'center',
+    display: 'block',
+    margin: 'auto'
   }
 })
 
@@ -93,42 +107,21 @@ export class ResetPasswordComponent extends Component<IResetPasswordComponentPro
 
     const {classes, translate} = this.props
 
-    const paperStyle = {
-      minHeight: 370,
-      width: 450,
-      textAlign: 'center',
-      display: 'block',
-      margin: 'auto'
-    }
     return (
-      <div>
+      <Grid container spacing={24}>
+      <Grid item xs={12} className={classes.contain}>
 
-        <h1 style={{
+        <h1 className='g__app-name'>{config.settings.appName}</h1>
-          textAlign: 'center',
-          padding: '20px',
-          fontSize: '30px',
-          fontWeight: 500,
-          lineHeight: '32px',
-          margin: 'auto',
-          color: 'rgba(138, 148, 138, 0.2)'
-        }}>{config.settings.appName}</h1>
 
         <div className='animate-bottom'>
-          <Paper style={paperStyle} elevation={1}>
+          <Paper style={classes.paper} elevation={1}>
             <div style={{ padding: '48px 40px 36px' }}>
               <div style={{
                 paddingLeft: '40px',
                 paddingRight: '40px'
               }}>
 
-                <h2 style={{
+                <h2 className='zoomOutLCorner animated g__paper-title'>{translate!('resetPassword.title')}</h2>
-                  textAlign: 'left',
-                  paddingTop: '16px',
-                  fontSize: '24px',
-                  fontWeight: 400,
-                  lineHeight: '32px',
-                  margin: 0
-                }} className='zoomOutLCorner animated'>{translate!('resetPassword.title')}</h2>
               </div>
 
               <TextField
@@ -157,7 +150,8 @@ export class ResetPasswordComponent extends Component<IResetPasswordComponentPro
             </div>
           </Paper>
         </div>
-      </div>
+        </Grid>
+      </Grid>
     )
   }
 }
@@ -190,4 +184,4 @@ const mapStateToProps = (state: any, ownProps: IResetPasswordComponentProps) =>
 }
 
 // - Connect component to redux store
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ResetPasswordComponent as any) as any) as any)
+export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ResetPasswordComponent as any) as any)) as typeof ResetPasswordComponent

src/components/setting/SettingComponent.tsx

@@ -15,13 +15,25 @@ import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import * as authorizeActions from 'actions/authorizeActions'
 import { ISettingComponentProps } from './ISettingComponentProps'
 import { ISettingComponentState } from './ISettingComponentState'
+import { Grid } from 'material-ui'
 
 const styles = (theme: any) => ({
   textField: {
     minWidth: 280,
     marginTop: 20
 
-  }
+  },
+  contain: {
+    margin: '0 auto'
+  },
+  paper: {
+    minHeight: 370,
+    maxWidth: 450,
+    minWidth: 337,
+    textAlign: 'center',
+    display: 'block',
+    margin: 'auto'
+  },
 })
 /**
  * Create component class
@@ -123,28 +135,15 @@ export class SettingComponent extends Component<ISettingComponentProps,ISettingC
   render () {
 
     const {classes, translate} = this.props
-    const paperStyle = {
-      minHeight: 370,
-      width: 450,
-      textAlign: 'center',
-      display: 'block',
-      margin: 'auto'
-    }
-    return (
-      <div>
 
-        <h1 style={{
+    return (
-          textAlign: 'center',
+      <Grid container spacing={24}>
-          padding: '20px',
+        <Grid item xs={12} className={classes.contain}>
-          fontSize: '30px',
+
-          fontWeight: 500,
+        <h1 className='g__app-name'>{config.settings.appName}</h1>
-          lineHeight: '32px',
-          margin: 'auto',
-          color: 'rgba(138, 148, 138, 0.2)'
-        }}>{config.settings.appName}</h1>
 
         <div className='animate-bottom'>
-          <Paper style={paperStyle} elevation={1} >
+          <Paper className={classes.paper} elevation={1} >
             <div style={{ padding: '48px 40px 36px' }}>
               <div style={{
                 paddingLeft: '40px',
@@ -158,7 +157,7 @@ export class SettingComponent extends Component<ISettingComponentProps,ISettingC
                   fontWeight: 400,
                   lineHeight: '32px',
                   margin: 0
-                }} className='zoomOutLCorner animated'>{translate!('changePassword.title')}</h2>
+                }} className='zoomOutLCorner animated g__paper-title'>{translate!('changePassword.title')}</h2>
               </div>
 
               <TextField
@@ -195,7 +194,8 @@ export class SettingComponent extends Component<ISettingComponentProps,ISettingC
             </div>
           </Paper>
         </div>
-      </div>
+        </Grid>
+      </Grid>
     )
   }
 }

src/components/signup/SignupComponent.tsx

@@ -1,5 +1,5 @@
 // - Import react components
-import React,{ Component } from 'react'
+import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { push } from 'react-router-redux'
 import { NavLink, withRouter } from 'react-router-dom'
@@ -21,23 +21,35 @@ import StringAPI from 'api/StringAPI'
 import { ISignupComponentProps } from './ISignupComponentProps'
 import { ISignupComponentState } from './ISignupComponentState'
 import { UserRegisterModel } from 'models/users/userRegisterModel'
+import { Grid } from 'material-ui'
 
 const styles = (theme: any) => ({
   textField: {
     minWidth: 280,
     marginTop: 20
 
+  },
+  contain: {
+    margin: '0 auto'
+  },
+  paper: {
+    minHeight: 370,
+    maxWidth: 450,
+    minWidth: 337,
+    textAlign: 'center',
+    display: 'block',
+    margin: 'auto'
   }
 })
 
 // - Create Signup component class
-export class SignupComponent extends Component<ISignupComponentProps,ISignupComponentState> {
+export class SignupComponent extends Component<ISignupComponentProps, ISignupComponentState> {
 
   /**
    * Component constructor
    * @param  {object} props is an object properties of component
    */
-  constructor (props: ISignupComponentProps) {
+  constructor(props: ISignupComponentProps) {
     super(props)
 
     this.state = {
@@ -105,12 +117,12 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
    */
   handleForm = () => {
 
-    const {fullNameInput, emailInput, passwordInput, confirmInput} = this.state
+    const { fullNameInput, emailInput, passwordInput, confirmInput } = this.state
-    const {register, translate} = this.props
+    const { register, translate } = this.props
 
     let error = false
 
-     // Validate full name
+    // Validate full name
     let fullNameCheck = fullNameInput.trim().toLowerCase()
 
     if (fullNameCheck.indexOf('test') > -1
@@ -123,7 +135,7 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
       error = true
     }
 
-     /* Validate email*/
+    /* Validate email*/
     if (!StringAPI.isValidEmail(emailInput)) {
       this.setState({
         emailInputError: translate!('signup.validEmailError')
@@ -164,102 +176,84 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
 
   }
 
-/**
+  /**
- * Reneder component DOM
+   * Reneder component DOM
- * @return {react element} return the DOM which rendered by component
+   * @return {react element} return the DOM which rendered by component
- */
+   */
-  render () {
+  render() {
 
-    const {classes, translate} = this.props
+    const { classes, translate } = this.props
-    const paperStyle = {
-      minHeight: 500,
-      width: 450,
-      textAlign: 'center',
-      display: 'block',
-      margin: 'auto'
-    }
 
     return (
 
-  <div>
+      <Grid container spacing={24}>
-
+        <Grid item xs={12} className={classes.contain}>
-      <h1 style={{
+          <h1 className='g__app-name'>{config.settings.appName}</h1>
-        textAlign: 'center',
-        padding: '20px',
-        fontSize: '30px',
-        fontWeight: 500,
-        lineHeight: '32px',
-        margin: 'auto',
-        color: 'rgba(138, 148, 138, 0.2)'
-      }}>{config.settings.appName}</h1>
 
           <div className='animate-bottom'>
-   <Paper style={paperStyle} elevation={1} >
+            <Paper className={classes.paper} elevation={1} >
-     <div style={{padding: '48px 40px 36px'}}>
+              <div style={{ padding: '48px 40px 36px' }}>
-     <div style={{paddingLeft: '40px',
+                <div style={{
-       paddingRight: '40px'}}>
+                  paddingLeft: '40px',
+                  paddingRight: '40px'
+                }}>
 
-     <h2 style={{
+                  <h2 className='zoomOutLCorner animated g__paper-title'>{translate!('signup.title')}</h2>
-       textAlign: 'left',
+                </div>
-       paddingTop: '16px',
-       fontSize: '24px',
-       fontWeight: 400,
-       lineHeight: '32px',
-       margin: 0}} className='zoomOutLCorner animated'>{translate!('signup.title')}</h2>
-         </div>
 
-     <TextField
+                <TextField
-     className={classes.textField}
+                  className={classes.textField}
-     autoFocus
+                  autoFocus
-       onChange={this.handleInputChange}
+                  onChange={this.handleInputChange}
-       helperText={this.state.fullNameInputError}
+                  helperText={this.state.fullNameInputError}
-       error={this.state.fullNameInputError.trim() !== ''}
+                  error={this.state.fullNameInputError.trim() !== ''}
-       name='fullNameInput'
+                  name='fullNameInput'
-      label={translate!('signup.fullNameLabel')}
+                  label={translate!('signup.fullNameLabel')}
-      type='text'
+                  type='text'
-    /><br />
+                /><br />
-    <TextField
+                <TextField
-    className={classes.textField}
+                  className={classes.textField}
-      onChange={this.handleInputChange}
+                  onChange={this.handleInputChange}
-      helperText={this.state.emailInputError}
+                  helperText={this.state.emailInputError}
-      error={this.state.emailInputError.trim() !== ''}
+                  error={this.state.emailInputError.trim() !== ''}
-      name='emailInput'
+                  name='emailInput'
-     label={translate!('signup.emailLabel')}
+                  label={translate!('signup.emailLabel')}
-     type='email'
+                  type='email'
-   /><br />
+                /><br />
-   <TextField
+                <TextField
-   className={classes.textField}
+                  className={classes.textField}
-     onChange={this.handleInputChange}
+                  onChange={this.handleInputChange}
-     helperText={this.state.passwordInputError}
+                  helperText={this.state.passwordInputError}
-     error={this.state.passwordInputError.trim() !== ''}
+                  error={this.state.passwordInputError.trim() !== ''}
-     name='passwordInput'
+                  name='passwordInput'
-    label={translate!('signup.passwordLabel')}
+                  label={translate!('signup.passwordLabel')}
-    type='password'
+                  type='password'
-  /><br />
+                /><br />
-  <TextField
+                <TextField
-  className={classes.textField}
+                  className={classes.textField}
-    onChange={this.handleInputChange}
+                  onChange={this.handleInputChange}
-    helperText={this.state.confirmInputError}
+                  helperText={this.state.confirmInputError}
-    error={this.state.confirmInputError.trim() !== ''}
+                  error={this.state.confirmInputError.trim() !== ''}
-    name='confirmInput'
+                  name='confirmInput'
-   label={translate!('signup.confirmPasswordLabel')}
+                  label={translate!('signup.confirmPasswordLabel')}
-   type='password'
+                  type='password'
- /><br />
+                /><br />
-<br />
+                <br />
-  <div className='signup__button-box'>
+                <div className='signup__button-box'>
-    <div>
+                  <div>
-      <Button onClick={this.props.loginPage}>{translate!('signup.loginButton')}</Button>
+                    <Button onClick={this.props.loginPage}>{translate!('signup.loginButton')}</Button>
-    </div>
+                  </div>
-    <div>
+                  <div>
-      <Button variant='raised' color='primary' onClick={this.handleForm}>{translate!('signup.createButton')}</Button>
+                    <Button variant='raised' color='primary' onClick={this.handleForm}>{translate!('signup.createButton')}</Button>
 
-    </div>
+                  </div>
-  </div>
+                </div>
 
-</div>
+              </div>
-   </Paper>
+            </Paper>
- </div>
+          </div>
-  </div>
+        </Grid>
+      </Grid>
 
     )
   }
@@ -271,7 +265,7 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
  * @param  {object} ownProps is the props belong to component
  * @return {object}          props of component
  */
-const mapDispatchToProps = (dispatch: any,ownProps: ISignupComponentProps) => {
+const mapDispatchToProps = (dispatch: any, ownProps: ISignupComponentProps) => {
   return {
     showError: (message: string) => {
       dispatch(globalActions.showMessage(message))
@@ -291,11 +285,11 @@ const mapDispatchToProps = (dispatch: any,ownProps: ISignupComponentProps) => {
  * @param  {object} ownProps is the props belong to component
  * @return {object}          props of component
  */
-const mapStateToProps = (state: any,ownProps: ISignupComponentProps) => {
+const mapStateToProps = (state: any, ownProps: ISignupComponentProps) => {
-  return{
+  return {
     translate: getTranslate(state.locale),
   }
 }
 
 // - Connect component to redux store
-export default withRouter(connect(mapStateToProps,mapDispatchToProps)(withStyles(styles)(SignupComponent as any) as any) as any)
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SignupComponent as any) as any) as any)

src/components/userBox/UserBoxComponent.tsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { push } from 'react-router-redux'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
+import classNames from 'classnames'
 
 // - Material UI
 import Paper from 'material-ui/Paper'
@@ -51,6 +52,14 @@ const styles = (theme: any) => ({
     maxWidth: 360,
     backgroundColor: theme.palette.background.paper
   },
+  paper: {
+    height: 254,
+    width: 243,
+    margin: 10,
+    textAlign: 'center',
+    minWidth: 230,    
+    maxWidth: '257px'
+  },
   dialogContent: {
     paddingTop: '5px',
     padding: '0px 5px 5px 5px'
@@ -60,6 +69,14 @@ const styles = (theme: any) => ({
   },
   space: {
     height: 20
+  },
+  fullPageXs: {
+    [theme.breakpoints.down('xs')]: {
+      width: '100%',
+      height: '100%',
+      margin: 0,
+      overflowY: 'auto'
+    }
   }
 })
 
@@ -83,13 +100,6 @@ export class UserBoxComponent extends Component<IUserBoxComponentProps, IUserBox
   }
 
   styles = {
-    paper: {
-      height: 254,
-      width: 243,
-      margin: 10,
-      textAlign: 'center',
-      maxWidth: '257px'
-    },
     followButton: {
       position: 'absolute',
       bottom: '30px',
@@ -301,7 +311,7 @@ export class UserBoxComponent extends Component<IUserBoxComponentProps, IUserBox
     const { isFollowed, followRequest, userId, isSelecteCirclesOpen, addToCircleRequest, deleteFollowingUserRequest, classes, translate } = this.props
 
     return (
-      <Paper key={userId} style={this.styles.paper} elevation={1} className='grid-cell'>
+      <Paper key={userId} elevation={1} className={classNames('grid-cell', classes.paper)}>
         <div style={{
           display: 'flex',
           flexDirection: 'column',
@@ -339,6 +349,7 @@ export class UserBoxComponent extends Component<IUserBoxComponentProps, IUserBox
           </div>
         </div>
         <Dialog
+        PaperProps={{className: classes.fullPageXs}}
           key={this.props.userId || 0}
           open={isSelecteCirclesOpen === true}
           onClose={this.onRequestCloseAddCircle}

src/styles/app.css

@@ -491,6 +491,23 @@ g__input-underline::before {
 g__input-underline::after {
   display: none; }
 
+.g__app-name {
+  text-align: center;
+  padding: 20px;
+  font-size: 30px;
+  font-weight: 500;
+  line-height: 32px;
+  margin: auto;
+  color: rgba(138, 148, 138, 0.2); }
+
+.g__paper-title {
+  text-align: left;
+  padding-top: 16px;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  margin: 0; }
+
 .master__progress {
   position: fixed;
   top: 0;

src/styles/components/_global.scss

@@ -209,4 +209,23 @@ g__input-underline {
     &::after {
         display: none;
     }
+}
+
+.g__app-name {
+    text-align: center;
+    padding: 20px;
+    font-size: 30px;
+    font-weight: 500;
+    line-height: 32px;
+    margin: auto;
+    color: rgba(138, 148, 138, 0.2);
+}
+
+.g__paper-title {
+    text-align: left;
+    padding-top: 16px;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 32px;
+    margin: 0
 }