diff --git a/web/.eslintrc.json b/web/.eslintrc.json index a885b0df..dc9d3417 100644 --- a/web/.eslintrc.json +++ b/web/.eslintrc.json @@ -11,6 +11,7 @@ "jest" ], "rules": { + "no-return-assign": 0, "no-param-reassign": 0, "import/prefer-default-export": 0, "prefer-template": 0, diff --git a/web/assets/logo.png b/web/assets/logo.png deleted file mode 100644 index 939bf833..00000000 Binary files a/web/assets/logo.png and /dev/null differ diff --git a/web/assets/logo.svg b/web/assets/logo.svg new file mode 100644 index 00000000..f5b78997 --- /dev/null +++ b/web/assets/logo.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/components/Main.js b/web/components/Main.js index ccb4e5ab..eed59f4b 100644 --- a/web/components/Main.js +++ b/web/components/Main.js @@ -1,5 +1,5 @@ import React from 'react'; -const Main = () => (
HOME PAGE
); +const Main = () => (
HOME PAGE
); export default Main; diff --git a/web/components/auth/Login/Login.js b/web/components/auth/Login/Login.js index 3be0de49..4f55bab6 100644 --- a/web/components/auth/Login/Login.js +++ b/web/components/auth/Login/Login.js @@ -59,7 +59,7 @@ class Login extends React.Component { className="input-group">

Sign in

-
+
{ content = 'you didn\'t apply as hacker'; } - return (
{content}
); + return (
{content}
); }; const mapStateToProps = (state) => { diff --git a/web/components/demo/Demo.sass b/web/components/demo/Demo.sass index 2a84adde..6f4c322c 100644 --- a/web/components/demo/Demo.sass +++ b/web/components/demo/Demo.sass @@ -1,3 +1,4 @@ div#demo width: 50% margin-left: 25% + height: 90000000px diff --git a/web/components/demo/index.js b/web/components/demo/index.js index 4f8e4f36..52625dc7 100644 --- a/web/components/demo/index.js +++ b/web/components/demo/index.js @@ -35,7 +35,7 @@ class FrontEndComponents extends React.Component { const { active } = this.state; return ( -
+

Buttons


diff --git a/web/components/navbar/Navbar.sass b/web/components/navbar/Navbar.sass index c2dc7a34..8c55da56 100644 --- a/web/components/navbar/Navbar.sass +++ b/web/components/navbar/Navbar.sass @@ -1,43 +1,21 @@ nav - display: flex + z-index: 500 background: $white - box-shadow: 0px 4px 6px $shadow height: 64px position: fixed - width: 100% + transition: background $transition-time-long, shadow $transition-time-long, opacity $transition-time - > div - display: inline-flex - > div:last-of-type - width: 80% - justify-content: flex-end - > div:first-of-type - width: 20% - justify-content: flex-start - > div > div - display: flex - margin-top: 12px - margin-bottom: 12px - align-items: center - margin-right: 7.5% - > div > div:first-of-type - margin-left: 24px - > div > div:last-of-type - margin-right: 24px a - display: flex - align-items: center text-decoration: none font-family: Apercu Pro font-size: 18px - color: $primary - a:visited - color: $primary - a:hover - color: #00D5D5 img + margin-top: 4px width: 32px -.below-nav - padding-top: 64px + &.transparent + background: transparent + + &.hide + opacity: 0 diff --git a/web/components/navbar/index.js b/web/components/navbar/index.js index ded20563..290dccfc 100644 --- a/web/components/navbar/index.js +++ b/web/components/navbar/index.js @@ -1,14 +1,11 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { DISPLAY_TYPE } from '../../containers/navbar/DisplayTypes'; import { BUTTON_TYPE } from '../../containers/navbar/ButtonTypes'; import { SecondaryButton } from '../input/buttons'; -import logo from '../../assets/logo.png'; - -const getLogo = () => ( - -); +import logo from '../../assets/logo.svg'; const getButton = (buttonType) => { switch (buttonType) { @@ -23,43 +20,96 @@ const getButton = (buttonType) => { } }; -const Navbar = ({ displayType, buttonType }) => { - switch (displayType) { - case DISPLAY_TYPE.ONLY_LOGO: - return ( - - ); - case DISPLAY_TYPE.LOGO_AND_BUTTON: - return ( - - ); - default: - return ( - + ); } +} + +Navbar.propTypes = { + displayType: PropTypes.symbol, + buttonType: PropTypes.symbol, }; export default Navbar; diff --git a/web/components/navbar/navbar.component.test.js b/web/components/navbar/navbar.component.test.js index 65f1a396..da19e36b 100644 --- a/web/components/navbar/navbar.component.test.js +++ b/web/components/navbar/navbar.component.test.js @@ -27,8 +27,8 @@ describe('Navbar component', () => { wrapper = getWrapper(); }); - test('there are six Links', () => { - expect(wrapper.find(Link)).toHaveProperty('length', 6); + test('there are seven Links', () => { + expect(wrapper.find(Link)).toHaveProperty('length', 7); }); test('the first link is to home page', () => { @@ -50,8 +50,8 @@ describe('Navbar component', () => { wrapper = getWrapper(); }); - test('there are six Links', () => { - expect(wrapper.find(Link)).toHaveProperty('length', 6); + test('there are seven Links', () => { + expect(wrapper.find(Link)).toHaveProperty('length', 7); }); test('the first link is to home page', () => { diff --git a/web/containers/navbar/index.js b/web/containers/navbar/index.js index 1216ec74..389dd593 100644 --- a/web/containers/navbar/index.js +++ b/web/containers/navbar/index.js @@ -16,6 +16,9 @@ const getDisplayType = (location) => { let displayType = DISPLAY_TYPE.ONLY_LOGO; + // For demo only - todo: remove + if (pathname === '/ui_demo') return DISPLAY_TYPE.LOGO_BUTTON_AND_LINKS; + if (isHomePage) { displayType = DISPLAY_TYPE.LOGO_BUTTON_AND_LINKS; } else if (isDashBoardPage) { diff --git a/web/styles/animations.sass b/web/styles/animations.sass index 9cd1262f..594d3e71 100644 --- a/web/styles/animations.sass +++ b/web/styles/animations.sass @@ -1,4 +1,13 @@ +///////////////////////// +// TRANSITIONS // +///////////////////////// + $transition-time: .2s +$transition-time-long: 1.5s + +///////////////////////// +// MIXINS // +///////////////////////// // This is a hack to allow transitions of linear-gradient backgrounds. // https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759 diff --git a/web/styles/breakpoints.sass b/web/styles/breakpoints.sass index 0fc06557..40bf55e2 100644 --- a/web/styles/breakpoints.sass +++ b/web/styles/breakpoints.sass @@ -1,3 +1,7 @@ +///////////////////////// +// BREAKPOINTS // +///////////////////////// + $desktop: 1300px; $laptop: 1080px; $tablet: 900px; diff --git a/web/styles/colors.sass b/web/styles/colors.sass index 4725513c..f92f86ab 100644 --- a/web/styles/colors.sass +++ b/web/styles/colors.sass @@ -1,10 +1,16 @@ -/* colors */ +///////////////////////// +// BASE COLORS // +///////////////////////// + $white: #FFFFFF $grey-dark: #363131 $grey-light: #BDBDBD $grey-slate: #9195A5 -/* classes */ +///////////////////////// +// COLOR CLASSES // +///////////////////////// + $error: #EB5757 // figma "red" $error-dark: #D41818 // figma "dark red" $primary: #21258A // figma "body text" @@ -13,11 +19,17 @@ $secondary: #00BCBC // figma "link text" $secondary-highlight: #00D5D5 // figma "link text/hover" $background: #F2F7FE -/* gradients */ +///////////////////////// +// GRADIENTS // +///////////////////////// + $gradient-primary: linear-gradient(180deg, #4DE8C2 0%, #19CBCB 100%, #18CDCD 100%) $gradient-primary-highlight: linear-gradient(180deg, #92F1DA 0%, #43DEDE 100%) $gradient-primary-subdued: linear-gradient(180deg, #4DE8C2 0%, #18CDCD 100%, #19CBCB 100%); $gradient-secondary: linear-gradient(180deg, #FFFFFF 0%, #EDFFFC 100%) -/* misc */ +///////////////////////// +// MISC // +///////////////////////// + $shadow: rgba(0, 82, 174, 0.15) diff --git a/web/styles/decoration.sass b/web/styles/decoration.sass index c71be32c..a627819e 100644 --- a/web/styles/decoration.sass +++ b/web/styles/decoration.sass @@ -1,3 +1,7 @@ +///////////////////////// +// ELEMENT DECORATIONS // +///////////////////////// + .shadow box-shadow: 0px 4px 6px $shadow diff --git a/web/styles/index.sass b/web/styles/index.sass index 36a476ab..f392165b 100644 --- a/web/styles/index.sass +++ b/web/styles/index.sass @@ -1,4 +1,8 @@ -/* core */ +///////////////////////// +// ALL STYLESHEETS // +///////////////////////// + +// core @import ./spacing @import ./colors @import ./typography @@ -7,12 +11,16 @@ @import ./breakpoints @import ./decoration -/* components */ +// components @import ../components/index -/* containers */ +// containers @import ../containers/index +///////////////////////// +// DEFAULTS // +///////////////////////// + // Remove from here once definitions are set up html, body, div, span, applet, object, iframe, h1, h3, h4, h5, h6, blockquote, pre, diff --git a/web/styles/spacing.sass b/web/styles/spacing.sass index bebb4655..d5a6fc52 100644 --- a/web/styles/spacing.sass +++ b/web/styles/spacing.sass @@ -1,3 +1,7 @@ +///////////////////////// +// SPACING DEFINITIONS // +///////////////////////// + $spacing-xxs: 4px; $spacing-xs: 8px; $spacing-s: 16px; @@ -5,7 +9,70 @@ $spacing-m: 24px; $spacing-l: 32px; $spacing-xl: 40px; $spacing-xxl: 48px; - -// for extra large spaces... $spacing-mega: 56px; $spacing-giga: 64px; +$navbar: $spacing-giga + +///////////////////////// +// SPACING CLASSES // +///////////////////////// + +.pad + // navbar + &-nav + padding-top: $navbar + + // sides + &-left, &-sides + &-xxl + padding-left: $spacing-xxl + &-right, &-sides + &-xxl + padding-right: $spacing-xxl + + // ends + &-top, &-ends + &-xxl + padding-top: $spacing-xxl + &-mega + padding-top: $spacing-mega + &-bottom, &-ends + &-xxl + padding-bottom: $spacing-xxl + &-mega + padding-bottom: $spacing-mega + +.margin + // sides + &-left, &-sides + &-xs + padding-left: $spacing-xs + &-m + padding-left: $spacing-s + &-l + padding-left: $spacing-l + &-right, &-sides + &-s + padding-right: $spacing-xs + &-m + padding-right: $spacing-s + &-l + padding-right: $spacing-l + + // repeating vertical elements + &-vertical + &-text-inputs + > .text-input + &:first-of-type + margin-bottom: $spacing-xl + &:last-of-type + margin-bottom: $spacing-mega + + // repeating horizontal elements + &-horizontal + &-divs + > div + &:first-of-type + margin-left: $spacing-m + &:last-of-type + margin-right: $spacing-m diff --git a/web/styles/typography.sass b/web/styles/typography.sass index c14288b9..f1680f71 100644 --- a/web/styles/typography.sass +++ b/web/styles/typography.sass @@ -1,3 +1,7 @@ +///////////////////////// +// FONTS // +///////////////////////// + @font-face font-family: 'Apercu Pro' font-weight: bold @@ -16,6 +20,10 @@ font-style: normal src: url(./fonts/apercu_regular_pro.otf) format('opentype') +///////////////////////// +// TEXT CLASSES // +///////////////////////// + a &:visited color: $primary diff --git a/web/styles/utils.sass b/web/styles/utils.sass index 06eda738..6abfa434 100644 --- a/web/styles/utils.sass +++ b/web/styles/utils.sass @@ -1,3 +1,7 @@ +////////////////////////// +// WIDTH/HEIGHT CLASSES // +////////////////////////// + .fill &-width width: 100% @@ -9,51 +13,16 @@ > * width: 50% -// padding declarations -.pad - // sides - &-left, &-sides - &-xxl - padding-left: $spacing-xxl - &-right, &-sides - &-xxl - padding-right: $spacing-xxl - - // ends - &-top, &-ends - &-xxl - padding-top: $spacing-xxl - &-mega - padding-top: $spacing-mega - &-bottom, &-ends - &-xxl - padding-bottom: $spacing-xxl - &-mega - padding-bottom: $spacing-mega - -// margin declarations -.margin - &-left, &-sides - &-xs - padding-left: $spacing-xs - &-m - padding-left: $spacing-s - &-right, &-sides - &-s - padding-right: $spacing-xs - &-m - padding-right: $spacing-s - &-text-inputs - > .text-input - &:first-of-type - margin-bottom: 40px - &:last-of-type - margin-bottom: 56px +////////////////////////// +// FLEXBOX CLASSES // +////////////////////////// -// flexbox utility classes .flex display: flex + &-inline + display: inline-flex + // flex-directions &.dir &-col @@ -61,6 +30,12 @@ // justify-content &.jc + &-start + justify-content: flex-start + + &-end + justify-content: flex-end + &-center justify-content: center