Global style

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)
 

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;

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',
+        },
+      ],
+    ],
   },
 };

src/colors.tsx

@@ -1,2 +1,4 @@
 export const PRIMARY = '#1da57a';
 export const LINK = '#1890ff';
+export const BLACK = '#000000';
+export const TEXT_GREY = '#AFAEAE';

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<GreetingContainerProps> = ({
+  header,
+  body,
+}) => {
+  return (
+    <InfoContainer>
+      <Title style={{ color: BLACK }}>{header}</Title>
+      <TextContainer>
+        <Paragraph>{body}</Paragraph>
+      </TextContainer>
+    </InfoContainer>
+  );
+};
+
+export default GreetingContainer;

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)<TitleProps>`
+  margin-bottom: 0px;
+`;
+
 const InfoCard: React.FC<InfoCardProps> = ({ header, body }) => {
   return (
     <div>
       <Card>
-        <Typography.Paragraph className="header">{header}</Typography.Paragraph>
-        <Typography.Title className="body" level={3}>
-          {body}
-        </Typography.Title>
+        <CardHeader>{header}</CardHeader>
+        <CardBody level={3}>{body}</CardBody>
       </Card>
     </div>
   );

src/components/landing-tree-stats/landing-tree-stats.less

@@ -1,7 +1,3 @@
-.dark-green {
-  color: #61802e;
-}
-
 .tree-stats-container {
   margin-top: 35px;
 }

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;

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)<ParagraphProps>`
+  color: ${TEXT_GREY};
+  line-height: 1.5;
+`;
 
 type LoginProps = UserAuthenticationReducerState;
 
@@ -15,6 +26,9 @@ const Login: React.FC<LoginProps> = ({ tokens }) => {
   const onFinish = (values: any) => {
     dispatch(login({ email: values.email, password: values.password }));
   };
+
+  const greetingHeader = 'Welcome Back!';
+
   return (
     <>
       <Helmet>
@@ -24,7 +38,9 @@ const Login: React.FC<LoginProps> = ({ tokens }) => {
       <div className="body-content-container">
         <Row>
           <Col span={10} className="input-container">
-            <h1>Log In</h1>
+            <Title level={2} style={{ color: BLACK }}>
+              Log In
+            </Title>
             <hr />
             <Form
               name="basic"
@@ -61,40 +77,32 @@ const Login: React.FC<LoginProps> = ({ tokens }) => {
               </Row>
 
               <Form.Item id={'loginButton'} style={{ marginBottom: '10px' }}>
-                <Button
-                  type="primary"
-                  htmlType="submit"
-                  size={'large'}
-                  style={{ backgroundColor: '#9AC356', borderColor: '#9AC356' }}
-                >
+                <Button type="primary" htmlType="submit" size={'large'}>
                   Log In
                 </Button>
               </Form.Item>
             </Form>
 
-            <p id="forgotPassword">
-              <Link to="/" component={Typography.Link} className="Link">
-                Forgot Password?
-              </Link>
-            </p>
+            <Paragraph>
+              <Link to="/">Forgot Password?</Link>
+            </Paragraph>
 
-            <p>New to speak for the trees?</p>
-            <p>
-              Sign up{' '}
-              <Link className="Link" to="/signup" component={Typography.Link}>
-                here!
-              </Link>
-            </p>
+            <Footer>
+              NEW TO SPEAK FOR THE TREES?
+              <br />
+              SIGN UP <Link to="/signup">HERE!</Link>
+            </Footer>
           </Col>
           <Col span={2}></Col>
-          <Col span={12} className="info-container">
-            <h1>Welcome Back!</h1>
-            <p>
-              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.
-            </p>
+
+          <Col span={12}>
+            <GreetingContainer
+              header={greetingHeader}
+              body="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."
+            />
           </Col>
         </Row>
       </div>

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%;
 }