diff --git a/.gitignore b/.gitignore index b7ca75522..d6cff3458 100644 --- a/.gitignore +++ b/.gitignore @@ -12,10 +12,3 @@ npm-debug.log* #Mac specific files .DS_Store -client/package-lock.json -client/package-lock.json -server/package-lock.json -server/package-lock.json -client/package-lock.json -server/package-lock.json -client/package-lock.json diff --git a/client/package-lock.json b/client/package-lock.json index 7080a7b91..a053396e6 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -46,9 +46,9 @@ } }, "@advancedalgos/teams-client": { - "version": "0.0.26", - "resolved": "https://registry.npmjs.org/@advancedalgos/teams-client/-/teams-client-0.0.26.tgz", - "integrity": "sha512-7WgJ3OFDZql2h7A1AlAGq7PevfhNs9KL2hnd1oBNyjKSezsJ4j6JUIQt/GTl+0W19S22EHUjUhUVpnnCi8g0mg==", + "version": "0.0.27", + "resolved": "https://registry.npmjs.org/@advancedalgos/teams-client/-/teams-client-0.0.27.tgz", + "integrity": "sha512-TBawzPu+zn/VSf3CGG+5zh1KPwxfetKIwKaXZsU/kgmLllArXDUXEdVbznD6oYlkOUp0naenxA/SLu+XuuaGeg==", "dev": true, "requires": { "@advancedalgos/web-components": "0.0.13", @@ -81,9 +81,9 @@ } }, "@advancedalgos/users-client": { - "version": "0.0.19", - "resolved": "https://registry.npmjs.org/@advancedalgos/users-client/-/users-client-0.0.19.tgz", - "integrity": "sha512-quYzZvQVIN4UFQFPIvt21Dko7mRdRpRbQXxRdvithoIB5ej/NNamwJAIZJ0ILXRkEQiuEfAi/f4DEmAKOShVGA==", + "version": "0.0.22", + "resolved": "https://registry.npmjs.org/@advancedalgos/users-client/-/users-client-0.0.22.tgz", + "integrity": "sha512-kjLBUdpnh9jYwesfsOBwAe5jPydKF0pt1ts9QBk3KKjcv4FATnCQ8uHsWtltg1gSAE781ozJaUSB0jjNrYVICg==", "dev": true, "requires": { "@material-ui/core": "^3.2.0", @@ -1736,9 +1736,9 @@ "dev": true }, "acorn-walk": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.0.tgz", - "integrity": "sha512-ugTb7Lq7u4GfWSqqpwE0bGyoBZNMTok/zDBXxfEG0QM50jNlGhIWjRC1pPN7bvV1anhF+bs+/gNcRw+o55Evbg==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.1.tgz", + "integrity": "sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==", "dev": true }, "address": { @@ -2271,7 +2271,7 @@ }, "array-equal": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=", "dev": true }, @@ -2731,7 +2731,7 @@ "dependencies": { "jsesc": { "version": "1.3.0", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz", + "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz", "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=", "dev": true }, @@ -6111,16 +6111,16 @@ "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=" }, "fast-glob": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.3.tgz", - "integrity": "sha512-NiX+JXjnx43RzvVFwRWfPKo4U+1BrK5pJPsHQdKMlLoFHrrGktXglQhHliSihWAq+m1z6fHk3uwGHrtRbS9vLA==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.4.tgz", + "integrity": "sha512-FjK2nCGI/McyzgNtTESqaWP3trPvHyRyoyY70hxjc3oKPNmDe8taohLZpoVKoUjW85tbU5txaYUZCNtVzygl1g==", "dev": true, "requires": { "@mrmlnc/readdir-enhanced": "^2.2.1", - "@nodelib/fs.stat": "^1.0.1", + "@nodelib/fs.stat": "^1.1.2", "glob-parent": "^3.1.0", "is-glob": "^4.0.0", - "merge2": "^1.2.1", + "merge2": "^1.2.3", "micromatch": "^3.1.10" }, "dependencies": { @@ -8162,7 +8162,7 @@ }, "hoek": { "version": "4.2.1", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", + "resolved": "http://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==", "dev": true }, @@ -9772,7 +9772,7 @@ }, "jest-get-type": { "version": "22.4.3", - "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz", + "resolved": "http://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz", "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==", "dev": true }, @@ -14298,9 +14298,9 @@ } }, "object-hash": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-1.3.0.tgz", - "integrity": "sha512-05KzQ70lSeGSrZJQXE5wNDiTkBJDlUT/myi6RX9dVIvz7a7Qh4oH93BQdiPMn27nldYvVQCKMUaM83AfizZlsQ==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-1.3.1.tgz", + "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==", "dev": true }, "object-keys": { @@ -16963,7 +16963,7 @@ }, "cacache": { "version": "10.0.4", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz", + "resolved": "http://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz", "integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==", "dev": true, "requires": { @@ -20540,7 +20540,7 @@ }, "topo": { "version": "2.0.2", - "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz", + "resolved": "http://registry.npmjs.org/topo/-/topo-2.0.2.tgz", "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=", "dev": true, "requires": { diff --git a/client/src/styles/index.js b/client/src/styles/index.js index 272bbcf66..f039c7dca 100644 --- a/client/src/styles/index.js +++ b/client/src/styles/index.js @@ -1,6 +1,15 @@ import { createMuiTheme } from '@material-ui/core/styles' export const theme = createMuiTheme({ + breakpoints: { + values: { + xs: 0, + sm: 768, + md: 992, + lg: 1200, + xl: 1920 + } + }, palette: { primary: { main: '#303036', diff --git a/client/src/styles/styles.scss b/client/src/styles/styles.scss index 55ee88646..1d1baef21 100644 --- a/client/src/styles/styles.scss +++ b/client/src/styles/styles.scss @@ -1,10 +1,9 @@ -$break-big: 1280px; -$break-middle: 992px; -$break-small: 768px; -$break-extra-small: 532px; +$break-lg: 1200px; +$break-md: 992px; +$break-sm: 768px; +$break-xs: 540px; -$height-large-device: 131px; -$height-small-device: 220px; +$height-nav-bar: 131px; $height-not-top: 87px; @@ -65,6 +64,23 @@ body{ } } +.container{ + padding: 15px 15px 15px 15px; + margin-left: auto; + margin-right: auto; + + width: 100%; + @media screen and (min-width: $break-sm) { + width: 768px; + } + @media screen and (min-width: $break-md) { + width: 970px; + } + @media screen and (min-width: $break-lg) { + width: 1170px; + } +} + header.menu{ transition: $transition-time; &.notOnTop{ @@ -82,7 +98,7 @@ header.menu{ margin-bottom: ( $height-not-top - $mobile-handle-height ) / 2 ; } nav.links{ - @media screen and (min-width: $break-big) { + @media screen and (min-width: $break-lg) { ul.primaryMenu{ li.primaryLink{ padding-top: ( $height-not-top - $text-height ) / 2; @@ -94,36 +110,23 @@ header.menu{ } } position: fixed; - height: $height-large-device; + height: $height-nav-bar; width: 100vw; z-index: 125; - @media screen and (max-width: $break-extra-small) { - height: $height-small-device; - } .container{ + padding-top: 0px; + padding-bottom: 0px; height: 100%; border-bottom: 1px solid rgba(142, 144, 146, 0.3); - - width: 100%; - @media screen and (min-width: $break-small) { - width: 750px; - } - @media screen and (min-width: $break-middle) { - width: 970px; - } - @media screen and (min-width: $break-big) { - width: 1270px; - } - - padding-left: 15px; - padding-right: 15px; - margin-left: auto; - margin-right: auto; img.logo{ transition: $transition-time; - margin-top: ( $height-large-device - $image-height-big ) / 2 ; + margin-top: ( $height-nav-bar - $image-height-big ) / 2 ; height: $image-height-big; + @media screen and (max-width: $break-xs) { + height: $image-height-small; + margin-top: ( $height-nav-bar - $image-height-small ) / 2 ; + } } .mobileHandle.openedMobile{ &:before{ @@ -169,21 +172,21 @@ header.menu{ float: right; width: auto; clear: none; - margin-top: ( $height-large-device - $mobile-handle-height ) / 2 ; - margin-bottom: ( $height-large-device - $mobile-handle-height ) / 2 ; - margin-left: 0; + margin-top: ( $height-nav-bar - $mobile-handle-height ) / 2 ; + margin-bottom: ( $height-nav-bar - $mobile-handle-height ) / 2 ; + margin-left: 0 !important; margin-right: 20px; margin: 41px 0 42px 20px; padding: 0 18px 0 40px; position: relative; text-decoration: none; border-radius: 31px; - @media screen and (min-width: $break-big) { + @media screen and (min-width: $break-lg) { display: none; } } nav.links{ - @media screen and (max-width: $break-big - 1) { + @media screen and (max-width: $break-lg - 1) { display: none; &.openedMobile{ display: block; @@ -209,7 +212,7 @@ header.menu{ border: solid white; border-width: 0 2px 2px 0; padding: 3px; - margin-top: 18px; + margin-top: -32px; margin-right: 7px; transform: rotate(45deg); -webkit-transform: rotate(45deg); @@ -232,6 +235,9 @@ header.menu{ &:hover{ color: $advanced-algos-red; } + svg{ + padding-top: 10px; + } } ul.subMenu{ display: none; @@ -245,7 +251,7 @@ header.menu{ } } } - @media screen and (min-width: $break-big) { + @media screen and (min-width: $break-lg) { display: block; float: right; ul.primaryMenu{ @@ -262,10 +268,10 @@ header.menu{ display: block; float: left; position: relative; - padding-top: ( $height-large-device - $text-height ) / 2; - padding-bottom: ( $height-large-device - $text-height ) / 2; - padding-right: 21px; - padding-left: 21px; + padding-top: ( $height-nav-bar - $text-height ) / 2; + padding-bottom: ( $height-nav-bar - $text-height ) / 2; + padding-right: 14px; + padding-left: 14px; &.hasChildren{ &:after{ content: ''; @@ -290,6 +296,9 @@ header.menu{ &.selected{ color: $advanced-algos-red; } + svg{ + padding-top: 10px; + } } ul.subMenu{ display: none; @@ -327,6 +336,7 @@ header.menu{ .bannerTopBar{ background-position: center center; + background-size: cover; background-image: url(https://advancedalgos.net/img/photos/teams.jpg); width: 100%; height: 220px; @@ -354,42 +364,31 @@ header.menu{ font-size: 64px; line-height: 78px; font-weight: 100; - @include fluid-type($break-extra-small, $break-big, 26px, 64px); + @include fluid-type($break-xs, $break-lg, 26px, 64px); } .text{ color: white; line-height: 30px; font-weight: 600; padding: 20px 0 0.5em 0; - @include fluid-type($break-extra-small, $break-big, 18px, 20px); + @include fluid-type($break-xs, $break-lg, 18px, 20px); } } } -.homePage{ +.homePage.container{ padding-top: 70px; padding-bottom: 70px; - margin-right: auto; - margin-left: auto; - @media screen and (min-width: $break-small) { - width: 750px; - } - @media screen and (min-width: $break-middle) { - width: 970px; - } - @media screen and (min-width: 1200px) { - width: 1170px; - } .title{ padding: 0 0 10px 0; - font-size: 45px; + @include fluid-type($break-xs, $break-lg, 24px, 45px); line-height: 55px; padding: 40px 0 0.5em 0; font-weight: 100; } .subtitle{ padding-bottom: 5px; - font-size: 20px; + @include fluid-type($break-xs, $break-lg, 18px, 20px); line-height: 19px; font-weight: 100; text-transform: uppercase; @@ -402,7 +401,7 @@ header.menu{ display: inline-block; width: 100%; padding: 10px; - @media screen and (min-width: $break-small) { + @media screen and (min-width: $break-sm) { width: 50%; } p{ @@ -421,5 +420,26 @@ header.menu{ } } } +} +.toTop{ + position: fixed; + height: 40px; + width: 40px; + bottom: 20px; + right: 20px; + z-index: 1; + background-color: #1a1a1a; + border-radius: 100%; + &:after{ + content: ''; + float: right; + border: solid white; + border-width: 0 3px 3px 0; + padding: 3px; + margin-top: 18px; + margin-right: 15px; + transform: rotate(-135deg); + -webkit-transform: rotate(-135deg); + } } diff --git a/client/src/views/email-verification/components/SignupForm.js b/client/src/views/email-verification/components/SignupForm.js index 408fd5c3a..d8db5a03a 100644 --- a/client/src/views/email-verification/components/SignupForm.js +++ b/client/src/views/email-verification/components/SignupForm.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import classNames from 'classnames' import { withStyles } from '@material-ui/core/styles' import withWidth from '@material-ui/core/withWidth' import { Mutation } from 'react-apollo' @@ -45,8 +46,8 @@ export class SignupForm extends Component { {(NewsletterSignup, { loading, error, data }) => { return ( - {displayTitle && Stay in touch!} - {displayIntro && Opt-in our mailing list to stay up to date with the Advanced Algos Project.} + {displayTitle && Stay in touch!} + {displayIntro && Opt-in our mailing list to stay up to date with the Advanced Algos Project.}
) diff --git a/client/src/views/email-verification/components/styles.js b/client/src/views/email-verification/components/styles.js index 5c70b4544..0fce0555f 100644 --- a/client/src/views/email-verification/components/styles.js +++ b/client/src/views/email-verification/components/styles.js @@ -29,11 +29,18 @@ const styles = theme => ({ textAlign: 'center' } }, + signupTitle: { + fontSize: '25px', + marginBottom: theme.spacing.unit * 5 + }, + signupText: { + fontSize: '16px' + }, signupInput: { borderRadius: 4, backgroundColor: theme.palette.common.white, border: '1px solid #ced4da', - fontSize: 16, + fontSize: 20, padding: '10px 12px', transition: theme.transitions.create(['border-color', 'box-shadow']), marginRight: theme.spacing.unit * 1 @@ -41,7 +48,7 @@ const styles = theme => ({ signupInputSubmit: { boxShadow: 'none', textTransform: 'none', - fontSize: 16, + fontSize: 20, lineHeight: '1.1875em', color: theme.palette.common.white, padding: '10px 12px', diff --git a/client/src/views/home/index.js b/client/src/views/home/index.js index f9473faaa..1600ff648 100644 --- a/client/src/views/home/index.js +++ b/client/src/views/home/index.js @@ -12,7 +12,7 @@ class Home extends Component { text='Enabling the evolutionary race towards the emergence of superalgos' backgroundUrl='https://aacorporatesitedevelop.azurewebsites.net/img/photos/superalgos-platform.jpg' /> -
+
Welcome to the Advanced Algos Platform! CO-CREATE >> COMPETE >> EVOLVE
diff --git a/client/src/views/layout/footer/index.js b/client/src/views/layout/footer/index.js index 1989fcde2..199f4920c 100644 --- a/client/src/views/layout/footer/index.js +++ b/client/src/views/layout/footer/index.js @@ -35,13 +35,13 @@ class Footer extends Component { > - + - Advanced Algos Ltd. - Ground Floor, Palace Court, Church Street,
St. Julians STJ3049, Malta - - Privacy Statement | Terms of Service + Advanced Algos Ltd. + Ground Floor, Palace Court, Church Street,
St. Julians STJ3049, Malta + + Privacy Statement | Terms of Service © Advanced Algos, Ltd. 2018 | All Rights Reserved. diff --git a/client/src/views/layout/footer/styles.js b/client/src/views/layout/footer/styles.js index 4eac95289..4bc6469fa 100644 --- a/client/src/views/layout/footer/styles.js +++ b/client/src/views/layout/footer/styles.js @@ -11,21 +11,22 @@ const styles = theme => ({ color: lightGreen[400] }, copyright: { - paddingTop: theme.spacing.unit * 3 + paddingTop: theme.spacing.unit * 9, + fontSize: '16px' }, linkLight: { color: theme.palette.secondary.main, textDecoration: 'none' }, descriptionLeft: { - marginLeft: theme.spacing.unit * 8, - [theme.breakpoints.down('sm')]: { - marginLeft: 0 - }, + marginLeft: 0, [theme.breakpoints.down('xs')]: { textAlign: 'center' } }, + descriptionText: { + fontSize: '16px' + }, signupRight: { marginTop: theme.spacing.unit * 2, [theme.breakpoints.down('xs')]: { @@ -46,14 +47,15 @@ const styles = theme => ({ }, footerContainer: { width: 'auto', - marginLeft: theme.spacing.unit * 3, - marginRight: theme.spacing.unit * 3, [theme.breakpoints.up(1200 + theme.spacing.unit * 3 * 2)]: { width: 1200, marginLeft: 'auto', marginRight: 'auto' } }, + footerLogo: { + marginBottom: theme.spacing.unit * 2 + }, footerLink: { textDecoration: 'none', '&:hover': { @@ -101,7 +103,7 @@ const styles = theme => ({ }, icon: { margin: theme.spacing.unit * 1, - fontSize: 24 + fontSize: 30 }, iconHover: { margin: theme.spacing.unit * 1, diff --git a/client/src/views/layout/header/imports.js b/client/src/views/layout/header/imports.js index fb9855a27..340d8e6d3 100644 --- a/client/src/views/layout/header/imports.js +++ b/client/src/views/layout/header/imports.js @@ -9,23 +9,26 @@ import { Group, Adb, VpnKey, + Home, AddCircleOutline } from '@material-ui/icons' const usersMenus = { title: 'Users', to: '/users', + icon: Home, submenus: [ + { title: 'Your Profile', to: '/users/user', icon: People, authenticated: true }, { title: 'Directory', to: '/users/browse', icon: ImportContacts }, { title: 'Search', to: '/users/search', icon: Search }, - { title: 'Report', to: 'https://github.com/AdvancedAlgos/UsersModule/issues/new', icon: BugReport, externalLink: true }, - { title: 'Your Profile', to: '/users/user', icon: People, authenticated: true } + { title: 'Report', to: 'https://github.com/AdvancedAlgos/UsersModule/issues/new', icon: BugReport, externalLink: true } ] } const teamsMenus = { title: 'Teams', to: '/teams', + icon: Home, submenus: [ { title: 'Explore teams', to: '/teams/explore', icon: Search }, { title: 'Your teams', to: '/teams/manage-teams', icon: Group, authenticated: true }, @@ -38,6 +41,7 @@ const teamsMenus = { const eventsMenus = { title: 'Events', to: '/events', + icon: Home, submenus: [ { title: 'All events', to: '/events', icon: Search }, { title: 'Your events', to: '/events/my', icon: GamepadRounded, authenticated: true }, @@ -50,6 +54,7 @@ const eventsMenus = { const keyvaultMenus = { title: 'Key Vault', to: '/key-vault', + icon: Home, authenticated: true, submenus: [ { title: 'Manage keys', to: '/key-vault/browse', icon: VpnKey }, diff --git a/client/src/views/layout/header/index.js b/client/src/views/layout/header/index.js index a812d69b8..cb4c821a4 100644 --- a/client/src/views/layout/header/index.js +++ b/client/src/views/layout/header/index.js @@ -29,6 +29,11 @@ class Header extends Component { } } + scrollToTop () { + document.body.scrollTop = 0 // For Safari + document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera + } + toggleMobileOpen () { this.setState({ mobileOpen: !this.state.mobileOpen }) } @@ -75,7 +80,7 @@ class Header extends Component { } let user = JSON.parse(this.state.user) - const menus = allMenus.map(({ to, title, submenus, authenticated }, index) => { + const menus = allMenus.map(({ icon: Icon, to, title, submenus, authenticated }, index) => { if (authenticated && !(this.state.user !== undefined && this.state.user !== null)) { return } @@ -86,20 +91,27 @@ class Header extends Component { key={index} className={openedMenu === index ? 'primaryLink hasChildren selected' : 'primaryLink hasChildren'} > - this.toggleMenuOpen(index, true)}> {title} + { bigScreen + ? this.toggleMenuOpen(index, true)}> {title} + : this.toggleMenuOpen(index, true)}> {title} + }
    + { bigScreen + ? '' + :
  • Homepage
    • + } { - submenus.map(({ icon: Icon, to: subTo, title: subTitle, externalLink, authenticated: subAuthenticated }, subindex) => { + submenus.map(({ icon: SubIcon, to: subTo, title: subTitle, externalLink, authenticated: subAuthenticated }, subindex) => { if (subAuthenticated && !(this.state.user !== undefined && this.state.user !== null)) { return } if (externalLink) { return ( -
  • {subTitle}
    • +
  • {subTitle}
    • ) } return ( -
  • this.closeAll(index)}> {subTitle}
    • +
  • this.closeAll(index)}> {subTitle}
    • ) })}
@@ -108,41 +120,44 @@ class Header extends Component { }) return ( -
-
- Advanced Algos -
this.toggleMobileOpen()}> - Menu -
- +
+
+ {onTop ? '' :
{ this.scrollToTop() }} />} + ) } }