Fix paddings and margins

Computer-Progress · Jun 4, 2021 · 630ef72 · 630ef72 · vercel · Jun 4, 2021
1 parent 9bee173
commit 630ef72
Show file tree

Hide file tree

Showing 20 changed files with 271 additions and 108 deletions.
diff --git a/components/Button/styles.js b/components/Button/styles.js
@@ -9,10 +9,14 @@ export const Button = styled.button`
   border-radius: 100px;
   border: none;
   cursor: pointer;
-  background: ${({ primary }) =>
-    primary ? theme.colors.white : "transparent"};
+  background: ${({ primary, background }) =>
+    background || primary ? theme.colors.white : "transparent"};
   color: ${({ primary, color }) =>
     color || primary ? "#8f00ff" : theme.colors.white};
+  ${({cta}) => cta && `
+  background: #2000E5;
+  color: white;
+  `}
   font-weight: bold;
   transition: all 0.3s ease-in-out;
   &:hover {

diff --git a/components/Chart/index.js b/components/Chart/index.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-
+import { ChartWrapper } from './styles'
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts/highcharts.src.js";
 import HighchartsExporting from "highcharts/modules/exporting";
@@ -78,7 +78,7 @@ const chart = ({ data, label, isByYear }) => {
         {
           type: "line",
           showInLegend: true,
-          color:"#000000",
+          color: "#000000",
           name: result.string
             .replace("x", isByYear ? " Year" : " log(Hardware Burden)")
             .replace("+ -", " - ")
@@ -169,10 +169,13 @@ const chart = ({ data, label, isByYear }) => {
   }
 
   return (
-    <HighchartsReact
-      highcharts={Highcharts}
-      options={chartOptions}
-    />
+    <ChartWrapper>
+
+      <HighchartsReact
+        highcharts={Highcharts}
+        options={chartOptions}
+      />
+    </ChartWrapper>
   );
 }
 export default chart;

diff --git a/components/Chart/styles.js b/components/Chart/styles.js
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const ChartWrapper = styled.div`
+    flex: 1 1 80%;
+    width: 100%;
+    border-radius:   0 16px 16px 0 ;
+    overflow: hidden;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+    padding: 32px;
+  padding-bottom: 20px;
+`
diff --git a/components/Circuit/index.js b/components/Circuit/index.js
@@ -1,7 +1,7 @@
 export default function Circuit() {
     return (
 
-      <svg className="svg" width="100%" viewBox="0 0 1920 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+      <svg className="svg" width="100%" viewBox="0 0 1920 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
         <defs>
           <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
             <stop offset="0%" stopColor="#148BB1" />

diff --git a/components/Collaborate/index.js b/components/Collaborate/index.js
@@ -6,11 +6,11 @@ export default function Collaborate() {
   return (
     <Wrapper>
       <Container>
-      <Circuit/>
-      <Text> Your help can change everything! </Text>
-      <Call> Collaborate for the understanding of hardware <br/> burden influence in machine learning.</Call>
-      <Button link='/collaborate' primary>SEE HOW TO COLLABORATE</Button>
+        <Circuit />
+        <Text> Your help can change everything! </Text>
+        <Call> Collaborate for the understanding of hardware <br /> burden influence in machine learning.</Call>
+        <Button link='/collaborate' cta>SEE HOW TO COLLABORATE</Button>
       </Container>
     </Wrapper>
-    );
+  );
 }
diff --git a/components/Collaborate/styles.js b/components/Collaborate/styles.js
@@ -1,35 +1,43 @@
-import styled, {keyframes} from "styled-components";
+import styled, { keyframes } from "styled-components";
 import theme from "../../styles/theme";
 
 export const Wrapper = styled.div`
   display: flex;
   justify-content: flex-end;
   position: relative;
+  width: 100%;
 `;
 
 export const Container = styled.div`
   display: flex;
   position: relative;
   flex-direction: column;
-  margin-top: 100px;
   width: 100%;
   height: 400px;
   box-shadow: inset 0px 60px 40px -10px rgba(255, 255, 255, 1); /* change to alter the effect*/
+  padding: 60px 3.75%;
+  padding-bottom: 300px;
+margin: 0 auto;
+margin-top: 100px;
+
+max-width: 1920px;
 `;
 
 export const Text = styled.p`
   display: flex;
   font-weight: bold;
+  margin-bottom: 3rem;
+
   font-size: 2.25rem;
-  margin-left:50px;
   color: ${theme.colors.primary};
 `
 
 export const Call = styled.p`
   display: flex;
+  margin-bottom: 3rem;
+  margin-top: 0;
   font-weight: 500;
   font-size: 1.5rem;
-  margin-left:50px;
   color: ${theme.colors.primary};
 `
 
diff --git a/components/Dataset/index.js b/components/Dataset/index.js
@@ -0,0 +1,13 @@
+import { Wrapper, Item } from "./styles.js";
+
+export default function Dataset() {
+  return (
+    <Wrapper>
+        <h4>Datasets</h4>
+        <div>
+            <Item selected>WMT 2014 (EN-FR)</Item>
+            <Item>WMT 2014 (EN-FR)</Item>
+        </div>
+    </Wrapper>
+    );
+}
diff --git a/components/Dataset/styles.js b/components/Dataset/styles.js
@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { Button } from "../Button/styles";
+
+export const Wrapper = styled.div`
+    flex: 1 1 20%;
+
+max-width: 20%;
+padding: 32px 24px;
+border-radius: 16px  0 0 16px;
+box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+  h4{
+    font-family: 'Montserrat';
+font-style: normal;
+font-weight: 500;
+font-size: 24px;
+line-height: 29px;
+display: flex;
+align-items: center;
+text-align: center;
+margin-bottom: 1.5rem;
+  }
+`;
+
+export const Item = styled(Button)`
+margin-bottom: 1rem;
+font-family: 'Montserrat';
+font-style: normal;
+font-weight: 500;
+font-size: 16px;
+line-height: 20px;
+display: flex;
+align-items: center;
+text-align: center;
+color: #2000E5;
+${({ selected }) => selected && `border: 1px solid #2000E5`}
+
+`;
diff --git a/components/Footer/styles.js b/components/Footer/styles.js
@@ -10,27 +10,28 @@ export const Wrapper = styled.div`
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  padding-top: 100px;
   width: 100%;
+  padding:0 3.75%;
+  padding-top: 100px;
+  max-width: 1920px;
+  margin: 0 auto;
 `;
 
 export const Logos = styled.div`
   display: flex;
-  justify-content: space-between;
-  padding: 25px 150px;
+  justify-content: space-around;
 `;
 
 export const Text = styled.p`
   display: flex;
   font-weight: bold;
   font-size: 1.5rem;
-  margin-left:50px;
+  margin-bottom: 2rem;
   color: ${theme.colors.white};
 `
 
 export const Copyright = styled.p`
   display: flex;
   justify-content: flex-end;
-  margin-right:50px;
   color: ${theme.colors.white};
 `
diff --git a/components/NavBar/index.js b/components/NavBar/index.js
@@ -1,21 +1,23 @@
-import { Wrapper, Logo, Menu, Auth } from "./styles.js";
+import { Wrapper, Logo, Menu, Auth, LogoName } from "./styles.js";
 import LogoIcon from "../../public/logo_icon.svg";
 import Button from "../Button";
 
 export default function Navbar() {
   return (
     <div>
       <Wrapper>
-        <LogoIcon />
-        <Logo link='/'>Computer Progress</Logo>
-          <Menu>
-            <Button link='/domains'>Domains</Button>
-            <Button link='/about_us'>About Us</Button>
-          </Menu>
-          <Auth>
-            <Button link='/sign_up'>Sign up</Button>
-            <Button link='/sign_in' primary>SIGN IN</Button>
-          </Auth>
+        <Logo link='/'>
+          <LogoIcon />
+          <LogoName>Computer Progress</LogoName>
+        </Logo>
+        <Menu>
+          <Button link='/domains'>Domains</Button>
+          <Button link='/about_us'>About Us</Button>
+        </Menu>
+        <Auth>
+          <Button link='/sign_up'>Sign up</Button>
+          <Button link='/sign_in' primary>SIGN IN</Button>
+        </Auth>
       </Wrapper>
     </div>
   );

diff --git a/components/NavBar/styles.js b/components/NavBar/styles.js
@@ -6,15 +6,22 @@ export const Wrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
-  padding: 5px 24px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
+  background: transparent;
+  width: 100%;
+  padding:0 3.75%;
+  max-width: 1920px;
+  margin: 0 auto;
+
 `;
 
 export const Logo = styled(Button)`
+padding: 0;
+`;
+
+export const LogoName = styled.h1`
+padding: 0;
+
+  margin-left: 1rem;
   font-family: "Montserrat", sans-serif;
   font-size: 24px;
   font-weight: bold;
@@ -23,9 +30,8 @@ export const Logo = styled(Button)`
   font-style: normal;
   line-height: normal;
   letter-spacing: normal;
-  text-align: left;
   color: #f9f9f9;
-`;
+`
 
 export const Menu = styled.div`
   display: flex;
@@ -36,3 +42,4 @@ export const Auth = styled.div`
   display: flex;
   justify-content: space-between;
 `;
+
diff --git a/components/StateOfArtBox/index.js b/components/StateOfArtBox/index.js
@@ -12,7 +12,7 @@ import {
 const StateOfArtBox = ({ data }) => {
 
   const [stateOfArt, setStateOfArt] = useState({});
-  
+
   useEffect(() => {
     let bestIndex = 0;
     const accuracy = data.reduce((sum, curr, index) => {
@@ -26,23 +26,28 @@ const StateOfArtBox = ({ data }) => {
 
   return (
     <Wrapper>
-      <StateOfArt>{"State-Of-The-Art"}</StateOfArt>
-      <Block>
-        <p> {"Acurracy:"}</p>
-        <h4>{stateOfArt.accuracy * 100}%</h4>
-      </Block>
-      <Line />
-      <Block>
-        <p>Hardware Burden:</p>
-        <h4>10<sup>{Math.log10(stateOfArt.hardware_burden).toFixed(2)}</sup></h4>
-      </Block>
-      <Line />
-      <ModelBlock>
-        <p>Model:</p>
-        <h5>{stateOfArt.model}</h5>
-      </ModelBlock>
+      <StateOfArt>State-Of-The-Art</StateOfArt>
+      <div className="blockWrapper">
+        <Block>
+          <p>Acurracy:</p>
+          <h4>{stateOfArt.accuracy * 100}<span>
+            %
+          </span>
+          </h4>
+        </Block>
+        <Line />
+        <Block>
+          <p>Hardware Burden:</p>
+          <h4>10<sup>{Math.log10(stateOfArt.hardware_burden).toFixed(2)}</sup></h4>
+        </Block>
+        <Line />
+        <ModelBlock>
+          <p>Model:</p>
+          <h5>{stateOfArt.model}</h5>
+        </ModelBlock>
+      </div>
       <ButtonWrapper>
-        <Button primary link='/domains'>View Paper</Button>
+        <Button primary link='/domains'>VIEW PAPER</Button>
       </ButtonWrapper>
     </Wrapper>
   );