Update antd and styled components

antd.customize.less

@@ -0,0 +1,4 @@
+@antd-blue: #1890ff;
+@link-color: @antd-blue;
+@primary-color: #1da57a;
+@font-family: 'IBM Plex Sans', sans-serif;

craco.config.js

@@ -1,18 +1,19 @@
-const CracoLessPlugin = require('craco-less');
-
+const CracoAntDesignPlugin = require('craco-antd');
+process.env.BROWSER = "none";
 module.exports = {
   plugins: [
     {
-      plugin: CracoLessPlugin,
+      plugin: CracoAntDesignPlugin,
       options: {
-        lessLoaderOptions: {
-          lessOptions: {
-            //This is where we override LESS global variables
-            modifyVars: { '@font-family': "'IBM Plex Sans', sans-serif" },
-            javascriptEnabled: true,
-          },
+        customizeTheme: {
         },
       },
     },
   ],
+  babel: {
+    presets: [],
+    plugins: [['babel-plugin-styled-components', {
+      namespace: 'scaffold',
+    }]],
+  },
 };

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.2.2",
     "@craco/craco": "^5.7.0",
     "@reduxjs/toolkit": "^1.4.0",
     "@sentry/react": "^5.27.0",
@@ -15,19 +16,21 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-helmet": "^6.0.0",
     "@types/react-router-dom": "^5.1.5",
+    "@types/styled-components": "^5.1.4",
     "antd": "^4.6.6",
     "axios": "^0.19.2",
-    "craco-less": "^1.17.0",
+    "craco-antd": "^1.19.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
+    "styled-components": "^5.2.1",
     "typescript": "^3.7.5"
   },
   "scripts": {
-    "start": "craco start",
+    "start": "nodemon -w craco.config.js -w ./antd.customize.less --exec \"craco start\"",
     "build": "craco build",
     "test": "craco test --coverage",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
@@ -36,6 +39,7 @@
     "prettier": "prettier --check ./src/**/*.{ts,tsx,less}",
     "prettier-fix": "prettier --write ./src/**/*.{ts,tsx,less}",
     "type-check": "tsc",
+    "check": "npm run lint-fix && npm run prettier-fix && npm run type-check",
     "travis": "npm run lint && npm run prettier && npm run test && npm run build && npm run type-check"
   },
   "browserslist": {
@@ -54,6 +58,8 @@
     "@types/react": "^16.9.43",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
+    "babel-plugin-styled-components": "^1.11.1",
+    "nodemon": "^2.0.6",
     "coveralls": "^3.1.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-react": "^1.1.7",

src/App.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 
-// Import antd stylesheets
-import 'antd/dist/antd.css';
 import './App.less';
 import Home from './containers/home/Home';
 import Signup from './containers/signup/Signup';
@@ -13,11 +11,16 @@ import BlockTemplate from './containers/template-1-col-block/Template';
 import GridTemplate from './containers/template-24-col-grid/Template';
 
 import NotFound from './containers/not-found/NotFound';
-import NavBar from './components/NavBar';
+import NavBar from './components/navbar/NavBar';
 import Footer from './components/Footer';
 import { Layout } from 'antd';
+import styled from 'styled-components';
 const { Content } = Layout;
 
+const AppInnerContainer = styled.div`
+  min-height: 100vh;
+`;
+
 const App: React.FC = () => {
   return (
     <>
@@ -32,7 +35,7 @@ const App: React.FC = () => {
         <Layout className="app-flex-container">
           <NavBar />
           <Content className="content-padding">
-            <div className="content-inner-container">
+            <AppInnerContainer>
               <Switch>
                 <Route path="/" exact component={Home} />
                 <Route path="/block-template" exact component={BlockTemplate} />
@@ -42,7 +45,7 @@ const App: React.FC = () => {
                 <Route path="/settings" exact component={Settings} />
                 <Route path="*" exact component={NotFound} />
               </Switch>
-            </div>
+            </AppInnerContainer>
           </Content>
           <Footer />
         </Layout>

src/auth/axios.test.tsx

@@ -13,8 +13,4 @@ describe('Request Interceptor Tests', () => {
       },
     });
   });
-
-  test('can run tests', () => {
-    expect(true).toBe(true);
-  });
 });

src/colors.tsx

@@ -0,0 +1,2 @@
+export const PRIMARY = '#1da57a';
+export const LINK = '#1890ff';

src/components/LinkButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import { Button } from 'antd';
+
+export const LinkButton = withRouter((props: any) => {
+  const {
+    history,
+    location,
+    match,
+    staticContext,
+    to,
+    onClick,
+    ...rest
+  } = props;
+  return (
+    <Button
+      type="link"
+      {...rest}
+      onClick={() => {
+        history.push(to);
+      }}
+    />
+  );
+});

src/components/index.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const ContentContainer = styled.div`
+  display: block;
+  padding: 24px;
+  max-width: 960px;
+  margin: auto;
+`;

src/components/navbar/NavBar.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { LinkButton } from '../../components/LinkButton';
+import { Menu, Dropdown, Row, Col, Button } from 'antd';
+import { DownOutlined, UserOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
+
+const NavRow = styled(Row)`
+  background-color: white;
+  padding: 1em 0;
+`;
+const AntButtonLink = styled(LinkButton)`
+  color: black;
+  margin-left: 7em;
+`;
+
+const UserDropdown = styled(Button)`
+  float: right;
+  margin-right: 3em;
+`;
+
+const LoginSignupButtons = styled.div`
+  float: right;
+  margin-right: 3em;
+`;
+
+const SignupButton = styled(Button)`
+  margin-left: 1em;
+`;
+
+const NavBar: React.FC = () => {
+  const [authenticated] = useState(false);
+
+  const userMenu = (
+    <Menu>
+      <Menu.Item>Change Primary Account Email</Menu.Item>
+      <Menu.Item>Account Details</Menu.Item>
+      <Menu.Item>Change Password</Menu.Item>
+      <Menu.Item>Deactivate Account</Menu.Item>
+    </Menu>
+  );
+
+  return (
+    <NavRow align="middle">
+      <Col flex={3}>
+        <AntButtonLink to="/">Home</AntButtonLink>
+        <AntButtonLink to="/block-template">Block Template</AntButtonLink>
+        <AntButtonLink to="/grid-template">Grid Template</AntButtonLink>
+      </Col>
+
+      <div>
+        {authenticated ? (
+          <Col flex={3}>
+            <Dropdown overlay={userMenu}>
+              <UserDropdown>
+                <UserOutlined /> John Smith <DownOutlined />
+              </UserDropdown>
+            </Dropdown>
+          </Col>
+        ) : (
+          <Col flex={3}>
+            <LoginSignupButtons>
+              <LinkButton to="/login" component={Button}>
+                Login
+              </LinkButton>
+              <LinkButton to="/signup" component={SignupButton} type="primary">
+                Signup
+              </LinkButton>
+            </LoginSignupButtons>
+          </Col>
+        )}
+      </div>
+    </NavRow>
+  );
+};
+
+export default NavBar;

src/containers/home/Home.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import { ContentContainer } from '../../components';
 import { Button, Form, Input, Typography } from 'antd';
 import { login } from '../../auth/authAPI';
+
 const { Title } = Typography;
 
 const Home: React.FC = () => {
@@ -15,7 +17,10 @@ const Home: React.FC = () => {
         <title>Title goes here</title>
         <meta name="description" content="Description goes here." />
       </Helmet>
-      <div className="content-container">
+      <ContentContainer>
+        {/*
+          Place relevant components in here
+        */}
         <Title>Code4Community Frontend Scaffold</Title>
         <Title level={3}>
           Built with React.js, Typescript, and AntD components.
@@ -43,7 +48,7 @@ const Home: React.FC = () => {
             </Button>
           </Form.Item>
         </Form>
-      </div>
+      </ContentContainer>
     </>
   );
 };

src/containers/not-found/NotFound.tsx

@@ -24,8 +24,8 @@ const Template: React.FC = () => {
         */}
         <Title>Oops! We can't find the page you're looking for.</Title>
 
-        <Link to="/" component={Typography.Link}>
-          Take me back home!
+        <Link to="/">
+          <Typography.Link>Take me back home!</Typography.Link>
         </Link>
       </div>
     </>