diff --git a/README.md b/README.md index 6c782243..1d8ddb59 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![Build Status](https://travis-ci.org/Code-4-Community/speak-for-the-trees-frontend.svg?branch=master)](https://travis-ci.org/Code-4-Community/frontend-scaffold) +[![Build Status](https://travis-ci.org/Code-4-Community/speak-for-the-trees-frontend.svg?branch=master)](https://travis-ci.com/Code-4-Community/speak-for-the-trees-frontend.svg?branch=master) [![Coverage Status](https://coveralls.io/repos/github/Code-4-Community/speak-for-the-trees-frontend/badge.svg?branch=master)](https://coveralls.io/github/Code-4-Community/speak-for-the-trees-frontend?branch=master) diff --git a/antd.customize.less b/antd.customize.less index 43f80e9f..b6fc40e7 100644 --- a/antd.customize.less +++ b/antd.customize.less @@ -1,4 +1,23 @@ -@antd-blue: #1890ff; -@link-color: @antd-blue; -@primary-color: #1da57a; +@text-grey: #AFAEAE; +@header-grey: #F5F5F5; +@light-green: #9AC356; +@mid-green: #61802E; +@dark-green: #3A681A; +@black: #000000; +@white: #FFFFFF; +@body-background: @white; +@component-background: @white; @font-family: 'IBM Plex Sans', sans-serif; +@heading-color: @mid-green; +@heading-color-secondary: @dark-green; +@text-color: @black; +@text-color-secondary: @mid-green; +@link-color: @mid-green; +@line-height-base: 2.15; +@font-size-base: 13px; +@font-weight-base: 400; +@layout-header-background: @header-grey; +@layout-body-background: @body-background; +@layout-header-color: @black; +@btn-primary-bg: @light-green; +@border-radius-base: 4px; diff --git a/craco.config.js b/craco.config.js index 31be137c..d15883f5 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,19 +1,23 @@ const CracoAntDesignPlugin = require('craco-antd'); -process.env.BROWSER = "none"; +process.env.BROWSER = 'none'; module.exports = { plugins: [ { plugin: CracoAntDesignPlugin, options: { - customizeTheme: { - }, + customizeTheme: {}, }, }, ], babel: { presets: [], - plugins: [['babel-plugin-styled-components', { - namespace: 'scaffold', - }]], + plugins: [ + [ + 'babel-plugin-styled-components', + { + namespace: 'speak-for-the-trees', + }, + ], + ], }, }; diff --git a/src/colors.tsx b/src/colors.tsx index a4c9c6d0..c8991f07 100644 --- a/src/colors.tsx +++ b/src/colors.tsx @@ -1,2 +1,4 @@ export const PRIMARY = '#1da57a'; export const LINK = '#1890ff'; +export const BLACK = '#000000'; +export const TEXT_GREY = '#AFAEAE'; diff --git a/src/components/greeting-container/GreetingContainer.tsx b/src/components/greeting-container/GreetingContainer.tsx new file mode 100644 index 00000000..f5c33272 --- /dev/null +++ b/src/components/greeting-container/GreetingContainer.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { Typography } from 'antd'; +import { BLACK } from '../../colors'; +import styled from 'styled-components'; +import logo from '../../SFTTicon.png'; + +const { Paragraph, Title } = Typography; + +interface GreetingContainerProps { + readonly header: string; + readonly body: string; +} + +const InfoContainer = styled.div` + padding: 70px 70px 20px; + height: 481px; + background: url(${logo}) no-repeat bottom right #d4edaa; + box-shadow: 1.58105px 3.16211px 6.32421px rgba(0, 0, 0, 0.09); + border-radius: 6.32421px; + min-width: 500px; +`; + +const TextContainer = styled.div` + width: 380px; +`; + +const GreetingContainer: React.FC = ({ + header, + body, +}) => { + return ( + + {header} + + {body} + + + ); +}; + +export default GreetingContainer; diff --git a/src/components/info-card/InfoCard.tsx b/src/components/info-card/InfoCard.tsx index d9f56949..afc59b84 100644 --- a/src/components/info-card/InfoCard.tsx +++ b/src/components/info-card/InfoCard.tsx @@ -1,20 +1,32 @@ import React from 'react'; import { Card, Typography } from 'antd'; -import './info-card.less'; +import { ParagraphProps } from 'antd/lib/typography/Paragraph'; +import { TitleProps } from 'antd/lib/typography/Title'; +import styled from 'styled-components'; +import { TEXT_GREY } from '../../colors'; type InfoCardProps = { readonly header: string; readonly body: string; }; +const CardHeader: typeof Typography.Paragraph = styled(Typography.Paragraph)< + ParagraphProps +>` + color: ${TEXT_GREY}; + font-size: 18px; + line-height: 1; +`; +const CardBody: typeof Typography.Title = styled(Typography.Title)` + margin-bottom: 0px; +`; + const InfoCard: React.FC = ({ header, body }) => { return (
- {header} - - {body} - + {header} + {body}
); diff --git a/src/components/info-card/info-card.less b/src/components/info-card/info-card.less deleted file mode 100644 index cea37f0a..00000000 --- a/src/components/info-card/info-card.less +++ /dev/null @@ -1,7 +0,0 @@ -.header { - margin-bottom: 10px; -} - -.body { - margin: 0px; -} diff --git a/src/components/landing-tree-stats/landing-tree-stats.less b/src/components/landing-tree-stats/landing-tree-stats.less index c1ae7284..e038a040 100644 --- a/src/components/landing-tree-stats/landing-tree-stats.less +++ b/src/components/landing-tree-stats/landing-tree-stats.less @@ -1,7 +1,3 @@ -.dark-green { - color: #61802e; -} - .tree-stats-container { margin-top: 35px; } diff --git a/src/components/map-page-components/map-sidebar/map-sidebar.less b/src/components/map-page-components/map-sidebar/map-sidebar.less index bc5ec3f2..9a922c27 100644 --- a/src/components/map-page-components/map-sidebar/map-sidebar.less +++ b/src/components/map-page-components/map-sidebar/map-sidebar.less @@ -1,7 +1,3 @@ -.title { - color: #61802e; -} - .sidebar-content-container { display: block; padding: 94px 42px; diff --git a/src/containers/login/Login.tsx b/src/containers/login/Login.tsx index f0370496..8c8d0b59 100644 --- a/src/containers/login/Login.tsx +++ b/src/containers/login/Login.tsx @@ -1,12 +1,23 @@ import React from 'react'; import './login.less'; import { Button, Col, Form, Input, Row, Typography } from 'antd'; +import { ParagraphProps } from 'antd/lib/typography/Paragraph'; import { Link } from 'react-router-dom'; import { Helmet } from 'react-helmet'; +import GreetingContainer from '../../components/greeting-container/GreetingContainer'; import { login } from '../../auth/ducks/thunks'; import { connect, useDispatch } from 'react-redux'; import { C4CState } from '../../store'; import { UserAuthenticationReducerState } from '../../auth/ducks/types'; +import { BLACK, TEXT_GREY } from '../../colors'; +import styled from 'styled-components'; + +const { Paragraph, Title } = Typography; + +const Footer: typeof Paragraph = styled(Paragraph)` + color: ${TEXT_GREY}; + line-height: 1.5; +`; type LoginProps = UserAuthenticationReducerState; @@ -15,6 +26,9 @@ const Login: React.FC = ({ tokens }) => { const onFinish = (values: any) => { dispatch(login({ email: values.email, password: values.password })); }; + + const greetingHeader = 'Welcome Back!'; + return ( <> @@ -24,7 +38,9 @@ const Login: React.FC = ({ tokens }) => {
-

Log In

+ + Log In +
= ({ tokens }) => { -
-

- - Forgot Password? - -

+ + Forgot Password? + -

New to speak for the trees?

-

- Sign up{' '} - - here! - -

+
+ NEW TO SPEAK FOR THE TREES? +
+ SIGN UP HERE! +
- -

Welcome Back!

-

- Dreamcatcher kogi taiyaki keytar. Swag typewriter craft beer - cronut pok pok gentrify flannel salvia deep v pork belly - pitchfork. Swag fashion axe fam. Occupy biodiesel jean shorts - affogato PBR&B freegan bushwick vegan four loko pickled. -

+ + +
diff --git a/src/containers/login/login.less b/src/containers/login/login.less index 1e437bf3..02eaacc8 100644 --- a/src/containers/login/login.less +++ b/src/containers/login/login.less @@ -4,19 +4,15 @@ padding: 8%; height: 100%; width: 100%; - background: white; + background: @white; overflow: auto; } -.Link { - color: #3a681a; -} - hr { display: block; width: 100%; margin-top: 5%; - border-top: 1.58px solid white; + border-top: 1.58px solid @white; } .input-container { @@ -28,19 +24,6 @@ hr { min-width: 500px; } -.input-container h1 { - font-size: 30px; - line-height: 36px; -} - -.input-container p { - font-family: Roboto; - text-transform: uppercase; - margin-bottom: 0px; - font-size: 10px; - color: #afaeae; -} - #inputs { margin-top: 80px; } @@ -50,29 +33,6 @@ hr { margin-bottom: 35px; } -.info-container { - padding: 70px 70px 20px; - height: 481px; - background: url('../../SFTTicon.png') no-repeat bottom right #d4edaa; - box-shadow: 1.58105px 3.16211px 6.32421px rgba(0, 0, 0, 0.09); - border-radius: 6.32421px; - min-width: 500px; -} - -.info-container h1 { - font-weight: bold; - font-size: 44px; - line-height: 76px; - margin-bottom: 5px; -} - -.info-container p { - font-size: 13px; - line-height: 28px; - color: #000000; - width: 380px; -} - #forgotPassword { margin-bottom: 12%; } diff --git a/src/containers/signup/Signup.tsx b/src/containers/signup/Signup.tsx index 958abff6..7dedfbd2 100644 --- a/src/containers/signup/Signup.tsx +++ b/src/containers/signup/Signup.tsx @@ -1,12 +1,23 @@ import React from 'react'; import './signup.less'; import { Button, Col, Form, Input, Row, Typography } from 'antd'; +import { ParagraphProps } from 'antd/lib/typography/Paragraph'; import { Link } from 'react-router-dom'; import { Helmet } from 'react-helmet'; +import GreetingContainer from '../../components/greeting-container/GreetingContainer'; import { signup } from '../../auth/ducks/thunks'; import { connect, useDispatch } from 'react-redux'; import { UserAuthenticationReducerState } from '../../auth/ducks/types'; import { C4CState } from '../../store'; +import { BLACK, TEXT_GREY } from '../../colors'; +import styled from 'styled-components'; + +const { Paragraph, Title } = Typography; + +const Footer: typeof Paragraph = styled(Paragraph)` + color: ${TEXT_GREY}; + line-height: 1.5; +`; const hSpan = 8; const fSpan = 17; @@ -26,6 +37,8 @@ const Signup: React.FC = ({ tokens }) => { ); }; + const greetingHeader = 'Welcome Back!'; + return ( <> @@ -35,7 +48,9 @@ const Signup: React.FC = ({ tokens }) => {
-

Sign Up

+ + Sign Up +
= ({ tokens }) => { - - -

Already have an account?

-

- Log in{' '} - - here! - -

+ +
+ ALREADY HAVE AN ACCOUNT? +
+ LOGIN HERE! +
@@ -147,14 +148,14 @@ const Signup: React.FC = ({ tokens }) => { - -

Nice to meet you!

-

- Dreamcatcher kogi taiyaki keytar. Swag typewriter craft beer + +

diff --git a/src/containers/signup/signup.less b/src/containers/signup/signup.less index 362b3801..48092182 100644 --- a/src/containers/signup/signup.less +++ b/src/containers/signup/signup.less @@ -4,33 +4,16 @@ padding: 8%; height: 100%; width: 100%; - background: white; + background: @white; overflow: auto; } -.body-content-container .Link { - color: #3a681a; -} - hr { display: block; width: 100%; margin-top: 5%; margin-bottom: 7%; - border-top: 1.58px solid white; -} - -.input-container h1 { - font-size: 30px; - line-height: 36px; -} - -.input-container p { - font-family: Roboto; - font-size: 10px; - text-transform: uppercase; - color: #afaeae; - margin-bottom: 0px; + border-top: 1.58px solid @white; } .leftInput { @@ -38,17 +21,3 @@ hr { margin-right: 25px; margin-bottom: -10px; } - -.info-container h1 { - font-weight: bold; - font-size: 44px; - line-height: 76px; -} - -.info-container p { - font-size: 13px; - line-height: 28px; - color: #000000; - width: 380px; - margin-right: 500px; -}