diff options
Diffstat (limited to 'packages/website/ts/pages/about')
| -rw-r--r-- | packages/website/ts/pages/about/about.tsx | 97 | ||||
| -rw-r--r-- | packages/website/ts/pages/about/profile.tsx | 54 |
2 files changed, 58 insertions, 93 deletions
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 722e819ff..3ff16f9fe 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,13 +1,13 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import {Footer} from 'ts/components/footer'; -import {TopBar} from 'ts/components/top_bar'; -import {Profile} from 'ts/pages/about/profile'; -import {ProfileInfo, Styles} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar'; +import { Profile } from 'ts/pages/about/profile'; +import { ProfileInfo, Styles } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; const teamRow1: ProfileInfo[] = [ { @@ -155,73 +155,61 @@ export class About extends React.Component<AboutProps, AboutState> { } public render() { return ( - <div style={{backgroundColor: colors.lightestGrey}}> - <DocumentTitle title="0x About Us"/> + <div style={{ backgroundColor: colors.lightestGrey }}> + <DocumentTitle title="0x About Us" /> <TopBar blockchainIsLoaded={false} location={this.props.location} - style={{backgroundColor: colors.lightestGrey}} + style={{ backgroundColor: colors.lightestGrey }} /> - <div - id="about" - className="mx-auto max-width-4 py4" - style={{color: colors.grey800}} - > - <div - className="mx-auto pb4 sm-px3" - style={{maxWidth: 435}} - > - <div - style={styles.header} - > - About us: - </div> + <div id="about" className="mx-auto max-width-4 py4" style={{ color: colors.grey800 }}> + <div className="mx-auto pb4 sm-px3" style={{ maxWidth: 435 }}> + <div style={styles.header}>About us:</div> <div className="pt3" - style={{fontSize: 17, color: colors.darkestGrey, lineHeight: 1.5}} + style={{ + fontSize: 17, + color: colors.darkestGrey, + lineHeight: 1.5, + }} > - Our team is a diverse and globally distributed group with backgrounds - in engineering, research, business and design. We are passionate about - decentralized technology and its potential to act as an equalizing force - in the world. + Our team is a diverse and globally distributed group with backgrounds in engineering, + research, business and design. We are passionate about decentralized technology and its + potential to act as an equalizing force in the world. </div> </div> <div className="pt3 md-px4 lg-px0"> - <div className="clearfix pb3"> - {this._renderProfiles(teamRow1)} - </div> - <div className="clearfix"> - {this._renderProfiles(teamRow2)} - </div> + <div className="clearfix pb3">{this._renderProfiles(teamRow1)}</div> + <div className="clearfix">{this._renderProfiles(teamRow2)}</div> </div> <div className="pt3 pb2"> <div className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3" - style={{color: colors.grey, fontSize: 24, fontFamily: 'Roboto Mono'}} + style={{ + color: colors.grey, + fontSize: 24, + fontFamily: 'Roboto Mono', + }} > Advisors: </div> - <div className="clearfix"> - {this._renderProfiles(advisors)} - </div> + <div className="clearfix">{this._renderProfiles(advisors)}</div> </div> - <div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}> - <div - className="pb2" - style={styles.weAreHiring} - > + <div className="mx-auto py4 sm-px3" style={{ maxWidth: 308 }}> + <div className="pb2" style={styles.weAreHiring}> WE'RE HIRING </div> <div className="pb4 mb4" - style={{fontSize: 16, color: colors.darkestGrey, lineHeight: 1.5, letterSpacing: '0.5px'}} + style={{ + fontSize: 16, + color: colors.darkestGrey, + lineHeight: 1.5, + letterSpacing: '0.5px', + }} > We are seeking outstanding candidates to{' '} - <a - href={constants.URL_ANGELLIST} - target="_blank" - style={{color: 'black'}} - > + <a href={constants.URL_ANGELLIST} target="_blank" style={{ color: 'black' }}> join our team </a> . We value passion, diversity and unique perspectives. @@ -237,13 +225,8 @@ export class About extends React.Component<AboutProps, AboutState> { const colSize = utils.getColSize(numIndiv); return _.map(profiles, profile => { return ( - <div - key={`profile-${profile.name}`} - > - <Profile - colSize={colSize} - profileInfo={profile} - /> + <div key={`profile-${profile.name}`}> + <Profile colSize={colSize} profileInfo={profile} /> </div> ); }); diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index ef74f268a..bd2316f31 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {ProfileInfo, Styles} from 'ts/types'; -import {colors} from 'ts/utils/colors'; +import { ProfileInfo, Styles } from 'ts/types'; +import { colors } from 'ts/utils/colors'; const IMAGE_DIMENSION = 149; const styles: Styles = { @@ -24,43 +24,30 @@ interface ProfileProps { export function Profile(props: ProfileProps) { return ( - <div - className={`lg-col md-col lg-col-${props.colSize} md-col-6`} - > - <div - style={{maxWidth: 300}} - className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3" - > - <div - className="circle overflow-hidden mx-auto" - style={styles.imageContainer} - > - <img - width={IMAGE_DIMENSION} - src={props.profileInfo.image} - /> + <div className={`lg-col md-col lg-col-${props.colSize} md-col-6`}> + <div style={{ maxWidth: 300 }} className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3"> + <div className="circle overflow-hidden mx-auto" style={styles.imageContainer}> + <img width={IMAGE_DIMENSION} src={props.profileInfo.image} /> </div> - <div - className="center" - style={{fontSize: 18, fontWeight: 'bold', paddingTop: 20}} - > + <div className="center" style={{ fontSize: 18, fontWeight: 'bold', paddingTop: 20 }}> {props.profileInfo.name} </div> - {!_.isUndefined(props.profileInfo.title) && + {!_.isUndefined(props.profileInfo.title) && ( <div className="pt1 center" - style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGrey}} + style={{ + fontSize: 14, + fontFamily: 'Roboto Mono', + color: colors.darkGrey, + }} > {props.profileInfo.title.toUpperCase()} </div> - } - <div - style={{minHeight: 60, lineHeight: 1.4}} - className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center" - > + )} + <div style={{ minHeight: 60, lineHeight: 1.4 }} className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center"> {props.profileInfo.description} </div> - <div className="flex pb3 mx-auto sm-hide xs-hide" style={{width: 180, opacity: 0.5}}> + <div className="flex pb3 mx-auto sm-hide xs-hide" style={{ width: 180, opacity: 0.5 }}> {renderSocialMediaIcons(props.profileInfo)} </div> </div> @@ -84,13 +71,8 @@ function renderSocialMediaIcon(iconName: string, url: string) { return ( <div key={url} className="pr1"> - <a - href={url} - style={{color: 'inherit'}} - target="_blank" - className="text-decoration-none" - > - <i className={`zmdi ${iconName}`} style={{...styles.socalIcon}} /> + <a href={url} style={{ color: 'inherit' }} target="_blank" className="text-decoration-none"> + <i className={`zmdi ${iconName}`} style={{ ...styles.socalIcon }} /> </a> </div> ); |