Merge pull request Computer-Progress#16 from Computer-Progress/layout…

…s/default

Improve home page responsiveness and data fetch

components/Button/styles.js

@@ -8,13 +8,13 @@ export const Button = styled(MaterialButton).attrs(({ variant, primary }) => ({
 }))`
   border-radius: 100px !important;
   cursor: pointer;
-  background: ${({ primary, background }) =>
-    background || primary ? theme.colors.white : "transparent"} !important;
+  background: ${({ primary, background, contained }) =>
+    background || contained ? 'linear-gradient(268.88deg, rgba(255, 255, 255, 0.1) -7.38%, #9E1FFF 104.79%), #6047FF' : primary ? theme.colors.white : "transparent"} !important;
   color: ${({ primary, color }) =>
-    color || primary ? theme.colors.black : theme.colors.white} !important;
+    color || primary ? theme.colors.secondary : theme.colors.white} !important;
   ${({cta}) => cta && `
-  background: linear-gradient(268.88deg, rgba(255, 255, 255, 0.1) -7.38%, #9E1FFF 104.79%), #6047FF;
-  color: white;
+  background: linear-gradient(268.88deg, rgba(255, 255, 255, 0.1) -7.38%, #9E1FFF 104.79%), #6047FF !important;
+  color: white !important;
   `}
   transition: all 0.3s ease-in-out !important;
   &:hover {

components/Chart/index.js

@@ -14,36 +14,36 @@ const chart = ({ data, label, isByYear }) => {
 
     for (let index = 0; index < list.length; index++) {
       const element = list[index];
-      let x, y;
-      x = isByYear ? element.year : Math.log10(element.hardware_burden);
-      y = 1 / (1 - element.accuracy);
-
-      const point = [x, y];
-
-      data_points.push(point);
-
-      const info = {
-        type: "scatter",
-        data: [point],
-        showInLegend: false,
-        name: element.model,
-        marker: {
-          symbol: "circle",
-          fillColor: "#9E1FFF",
-          radius: 4,
-          states: {
-            hover: {
-              enabled: true
+      if (element[label] && element.hardware_burden) {
+        let x, y;
+        x = isByYear ? element.year : Math.log10(element.hardware_burden);
+        y = 1 / (1 - (element[label] / 100));
+        const point = [x, y];
+
+        data_points.push(point);
+
+        const info = {
+          type: "scatter",
+          data: [point],
+          showInLegend: false,
+          name: element.name,
+          marker: {
+            symbol: "circle",
+            fillColor: "#9E1FFF",
+            radius: 4,
+            states: {
+              hover: {
+                enabled: true
+              }
             }
           }
-        }
-      };
-      info_points.push(info);
+        };
+        info_points.push(info);
+      }
     }
 
     const result = regression.linear(data_points);
     result.points.sort((a, b) => a[1] - b[1]);
-    console.log("regression", result);
 
     const chart = {
       chart: {
@@ -60,7 +60,6 @@ const chart = ({ data, label, isByYear }) => {
           tooltip: {
             headerFormat: "<b>{series.name}</b><br>",
             pointFormatter: function () {
-              console.log("Format", this);
               let y = (1 - 1 / this.y) * 100;
               y = Math.round(y * 100) / 100;
               let x = Math.round(this.x * 100) / 100;

components/CollaborateInvite/index.js

@@ -0,0 +1,29 @@
+import Link from "next/link";
+
+import { Box, Typography } from "@material-ui/core";
+import { StyledFlexbox, StyledButton } from "./styles";
+
+export default function CollaborateInvite() {
+  return (
+    <StyledFlexbox>
+      <Box>
+        <Typography variant="h2">
+          <Box fontWeight="bold">Your help can change everything!</Box>
+        </Typography>
+      </Box>
+      <Box mt={5}>
+        <Typography variant="h6">
+          <Box fontSize="1.5rem">
+            Collaborate on the understanding of the hardware burden influence on
+            machine learning.
+          </Box>
+        </Typography>
+      </Box>
+      <Box mt={5}>
+        <Link href="/collaborate">
+          <StyledButton>See how to collaborate</StyledButton>
+        </Link>
+      </Box>
+    </StyledFlexbox>
+  );
+}

components/CollaborateInvite/styles.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { Box, Button } from "@material-ui/core";
+
+export const StyledFlexbox = styled(Box).attrs({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+})`
+  height: 100%;
+`;
+export const StyledButton = styled(Button).attrs({
+  variant: "contained",
+  disableElevation: true,
+})`
+  border-radius: 100px !important;
+
+  color: white !important;
+  background: linear-gradient(
+      268.88deg,
+      rgba(255, 255, 255, 0.1) -7.38%,
+      #7100c9 104.79%
+    ),
+    #2000e5 !important;
+`;

components/Header/index.js

@@ -0,0 +1,104 @@
+import { Container, Toolbar, Box, Typography } from "@material-ui/core";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import { MuiTheme } from "../../styles/theme";
+
+import {
+  StyledAppBar,
+  StyledToolbarBox,
+  StyledSpacer,
+  StyledButton,
+} from "./styles";
+
+import Logo from "../../public/logo_icon.svg";
+
+export default function Header() {
+  const isMobileSM = useMediaQuery(MuiTheme.breakpoints.down("sm"));
+  const isMobileXS = useMediaQuery(MuiTheme.breakpoints.down("xs"));
+
+  const links = [
+    {
+      text: "Tasks",
+      href: "/tasks",
+    },
+    {
+      text: "Contribute",
+      href: "/contribute",
+    },
+    {
+      text: "About us",
+      href: "/about_us",
+    },
+  ];
+
+  return (
+    <StyledAppBar>
+      <Container>
+        <Toolbar disableGutters>
+          <StyledToolbarBox>
+            <Box mr={1}>
+              <Logo />
+            </Box>
+
+            {!isMobileXS && (
+              <Typography variant="h6">
+                <Box fontWeight="fontWeightBold">Computer Progress</Box>
+              </Typography>
+            )}
+
+            <StyledSpacer />
+
+            {!isMobileSM && (
+              <>
+                {links.map(({ text, href }) => (
+                  <Box mr={2} key={href}>
+                    <StyledButton href={href} color="secondary">
+                      {text}
+                    </StyledButton>
+                  </Box>
+                ))}
+              </>
+            )}
+
+            <Box mr={2}>
+              <StyledButton
+                size={isMobileSM ? "small" : "medium"}
+                color="secondary"
+                href="/sign_up"
+              >
+                Sign up
+              </StyledButton>
+            </Box>
+
+            <Box>
+              <StyledButton
+                size={isMobileSM ? "small" : "medium"}
+                color="primary"
+                href="/sign_in"
+              >
+                Sign in
+              </StyledButton>
+            </Box>
+          </StyledToolbarBox>
+        </Toolbar>
+
+        {isMobileSM && (
+          <Toolbar disableGutters>
+            <StyledToolbarBox justifyContent="space-between">
+              {links.map(({ text, href }) => (
+                <Box key={href}>
+                  <StyledButton
+                    href={href}
+                    size={isMobileSM ? "small" : "medium"}
+                    color="secondary"
+                  >
+                    {text}
+                  </StyledButton>
+                </Box>
+              ))}
+            </StyledToolbarBox>
+          </Toolbar>
+        )}
+      </Container>
+    </StyledAppBar>
+  );
+}

components/Header/styles.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import {
+  AppBar as MuiAppBar,
+  Box as MuiBox,
+  Button as MuiButton,
+} from "@material-ui/core";
+
+const theme = {
+  default: {},
+  primary: {
+    text: "#7100c9",
+    background: "white",
+  },
+  secondary: {
+    text: "white",
+    background: "",
+  },
+};
+
+export const StyledAppBar = styled(MuiAppBar).attrs({
+  position: "static",
+  elevation: 0,
+})`
+  background: linear-gradient(
+      268.88deg,
+      rgba(255, 255, 255, 0.1) -7.38%,
+      #7100c9 104.79%
+    ),
+    #2000e5;
+`;
+
+export const StyledToolbarBox = styled(MuiBox).attrs({
+  display: "flex",
+  alignItems: "center",
+})`
+  width: 100%;
+`;
+
+export const StyledSpacer = styled(MuiBox).attrs({
+  flexGrow: 1,
+})``;
+
+export const StyledButton = styled(MuiButton).attrs({})`
+  color: ${({ color }) => theme[color].text} !important;
+  background: ${({ color }) => theme[color].background} !important;
+  border-radius: 100px !important;
+`;

components/PageTemplate/index.js

@@ -1,28 +1,33 @@
-import React, { useState } from "react";
+import React from "react";
 import Head from "next/head";
-import { Container, Header, Page } from "./styles.js";
-import NavBar from "../NavBar";
-import Wave from "../Wave";
+
+import { useMediaQuery } from "@material-ui/core";
+
+import Header from "../Header";
 import Footer from "../Footer";
+import Wave from "../Wave";
+
+import { MuiTheme } from "../../styles/theme";
+import { StyledContainer } from "./styles.js";
 
 export default function PageTemplate({ isHome, children }) {
+  const isMobile = useMediaQuery(MuiTheme.breakpoints.down("sm"));
+
   return (
-    <Page>
+    <>
       <Head>
         <title>Computer Progress</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Header>
-        <NavBar transparentBackground={isHome} />
-        {isHome ? (
-          <Wave />
-        ) : null}
-      </Header>
-      <Container>
-        {children}
-      </Container>
-      <Footer home={isHome} />
-    </Page>
+
+      <Header />
+
+      {isHome && !isMobile ? <Wave /> : null}
+
+      <StyledContainer>{children}</StyledContainer>
+
+      <Footer />
+    </>
   );
 }

components/PageTemplate/styles.js

@@ -1,20 +1,9 @@
 import styled from "styled-components";
-import theme from "../../styles/theme";
+import { Container } from "@material-ui/core";
 
-export const Container = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  max-width: 1920px;
-  margin: 0 auto;
+export const StyledContainer = styled(Container).attrs({
+  // maxWidth: "xl",
+})`
+  margin: 1rem 0;
+  max-width: 1500px !important;
 `;
-
-export const Header = styled.header`
-position: relative;
-`
-
-export const Page = styled.div`
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-`