From a6327d76381cfb186a4dab0bab0f9246f22cb5d5 Mon Sep 17 00:00:00 2001
From: MatheusCampos-450 <matheus.campos14@fatec.sp.gov.br>
Date: Mon, 29 Mar 2021 16:48:46 -0300
Subject: [PATCH] fixing main page css

---
 src/components/Button/styles.ts               |  2 +-
 src/components/Header/styles.ts               | 11 ++--
 src/components/Input/Input.tsx                |  8 +--
 src/components/Input/styles.ts                | 50 +++++--------------
 .../Distributions/Distributions.tsx           |  4 +-
 .../Main/components/Distributions/styles.ts   |  3 +-
 src/pages/Main/components/Initial/Initial.tsx | 17 +++----
 src/pages/Main/components/Initial/styles.ts   |  1 +
 .../ProjectInformation/ProjectInformation.tsx | 23 ++++-----
 .../components/ProjectInformation/styles.ts   | 10 ++--
 .../components/SubjectModal/styles.ts         | 16 ++++--
 src/pages/Main/components/Subjects/styles.ts  | 32 ++++++------
 src/pages/Main/components/Topics/Topics.tsx   |  4 +-
 src/pages/Main/components/Topics/styles.ts    |  3 +-
 src/styles/global.ts                          |  2 +
 15 files changed, 83 insertions(+), 103 deletions(-)

diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index 3aa20d9..2105f8b 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -19,7 +19,7 @@ const StyledButton = styled.button<StyledButtonProps>`
 
   font-family: Roboto;
   font-style: normal;
-  font-weight: 900;
+  font-weight: bold;
   font-size: 1.5rem;
 
   color: ${props => props.colorText || '#fff'};
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
index 1e59ee2..afeccb7 100644
--- a/src/components/Header/styles.ts
+++ b/src/components/Header/styles.ts
@@ -15,19 +15,18 @@ export const StyledHeader = styled.header`
   h1 {
     font-family: Roboto;
     font-style: normal;
-    font-weight: 900;
+    font-weight: bold;
     font-size: 1.875rem;
-    line-height: 2.188rem;
 
     color: #cecfd0;
 
-    margin-right: 20px;
+    margin: 0 1.25rem 0 0;
   }
 
   img {
-    height: 3.125rem;
-    width: 3.125rem;
-    padding: 0 10px;
+    height: 3.5rem;
+    width: 3.5rem;
+    padding: 0 0.625rem;
 
     &.logo {
       height: 2.5rem;
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 81d4eb2..a258b96 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -19,9 +19,9 @@ const Input: React.FC<InputProps> = ({
 }: InputProps) => {
   return (
     <StyledInput
-      InputWidth={styleWidth || 'medium'}
-      Color={color || 'black'}
-      Size={Size || 'medium'}
+      InputWidth={styleWidth || '23.75rem'}
+      Color={color || 'var(--black)'}
+      Size={Size || '1.5rem'}
     >
       <h3>{title}</h3>
 
@@ -33,7 +33,7 @@ const Input: React.FC<InputProps> = ({
 Input.defaultProps = {
   Type: '',
   Size: '',
-  styleWidth: '',
+  styleWidth: '23.75rem',
   color: '',
 };
 
diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
index 1045b79..a37d1bb 100644
--- a/src/components/Input/styles.ts
+++ b/src/components/Input/styles.ts
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 interface Props {
   InputWidth: string;
@@ -10,38 +10,16 @@ export const StyledInput = styled.div<Props>`
   display: flex;
   flex-direction: column;
 
-  margin: 0;
+  width: ${props => props.InputWidth || '23.75rem'};
 
-  ${props =>
-    props.InputWidth === 'large'
-      ? css`
-          width: 49.375rem;
-        `
-      : css`
-          width: 23.75rem;
-        `}
+  margin: 0;
 
   h3 {
-    font-weight: 900;
-    margin-bottom: 5px;
+    font-weight: bold;
+    font-size: ${props => props.Size || '1.5rem'};
+    color: ${props => props.Color || 'var(--black)'};
 
-    ${props =>
-      props.Color === 'black'
-        ? css`
-            color: var(--black);
-          `
-        : css`
-            color: var(--red-pink);
-          `}
-
-    ${props =>
-      props.Size === 'large'
-        ? css`
-            font-size: 2rem;
-          `
-        : css`
-            font-size: 1.5rem;
-          `}
+    margin-bottom: 5px;
   }
 
   input {
@@ -51,17 +29,15 @@ export const StyledInput = styled.div<Props>`
     height: 4.063rem;
     background-color: var(--soft-gray);
 
+    font-family: Roboto;
+    font-size: 1.3rem;
+    font-style: normal;
+    font-weight: bold;
+
     outline: none;
     border: 0;
     border-radius: 1.25rem;
 
-    ${props =>
-      props.InputWidth === 'large'
-        ? css`
-            width: 49.375rem;
-          `
-        : css`
-            width: 23.75rem;
-          `}
+    width: ${props => props.InputWidth || '23.75rem'}
   }
 `;
diff --git a/src/pages/Main/components/Distributions/Distributions.tsx b/src/pages/Main/components/Distributions/Distributions.tsx
index 6b58d74..7bdbf3e 100644
--- a/src/pages/Main/components/Distributions/Distributions.tsx
+++ b/src/pages/Main/components/Distributions/Distributions.tsx
@@ -47,9 +47,7 @@ const Distributions = ({ setDistributions, distributions } : DistributionsProps)
           <div className="DataDepartments">
             <Input
               title="Área"
-              Size="large"
-              color="black"
-              styleWidth="large"
+              styleWidth="49.375rem"
               value={distribution}
               onChange={(e: any) => setDistribution(e.target.value)}
             />
diff --git a/src/pages/Main/components/Distributions/styles.ts b/src/pages/Main/components/Distributions/styles.ts
index 6e15d61..bf91319 100644
--- a/src/pages/Main/components/Distributions/styles.ts
+++ b/src/pages/Main/components/Distributions/styles.ts
@@ -15,8 +15,9 @@ const StyledDistributions = styled.div`
     width: 100%;
 
     h1 {
-      color: var(--red-pink);
+      color: var(--gray);
       font-size: 2.25rem;
+      font-weight: bold;
 
       margin-bottom: 4rem;
     }
diff --git a/src/pages/Main/components/Initial/Initial.tsx b/src/pages/Main/components/Initial/Initial.tsx
index 31a6571..8b7a34a 100644
--- a/src/pages/Main/components/Initial/Initial.tsx
+++ b/src/pages/Main/components/Initial/Initial.tsx
@@ -21,30 +21,27 @@ const Initial = ({ setAddressAndHour }: IInitialProps) => {
   return (
     <StyledInitial>
       <div className="Initial">
-        <h1>ATA de Reunião</h1>
+        <h1>ATA DE REUNIÃO</h1>
         <form action="">
           <Input
             title="Local"
-            color="black"
-            Size="large"
-            styleWidth="large"
+            color="var(--black)"
+            styleWidth="49.375rem"
             onChange={(e: any) => setLocal(e.target.value)}
           />
 
           <Input
             title="Data de Inicio"
-            color="black"
-            Size="large"
-            styleWidth="medium"
+            color="var(--black)"
+            styleWidth="23.75rem"
             type="date"
             onChange={(e: any) => setStartDate(e.target.value)}
           />
 
           <Input
             title="Horário de Inicio"
-            color="black"
-            Size="large"
-            styleWidth="medium"
+            color="var(--black)"
+            styleWidth="23.75rem"
             type="time"
             onChange={(e: any) => setStartHour(e.target.value)}
           />
diff --git a/src/pages/Main/components/Initial/styles.ts b/src/pages/Main/components/Initial/styles.ts
index 052fac7..6aca091 100644
--- a/src/pages/Main/components/Initial/styles.ts
+++ b/src/pages/Main/components/Initial/styles.ts
@@ -20,6 +20,7 @@ export const StyledInitial = styled.div`
     h1 {
       color: var(--red-pink);
       font-size: 3.125rem;
+      font-weight: bold;
     }
 
     form {
diff --git a/src/pages/Main/components/ProjectInformation/ProjectInformation.tsx b/src/pages/Main/components/ProjectInformation/ProjectInformation.tsx
index 6f625de..75d7126 100644
--- a/src/pages/Main/components/ProjectInformation/ProjectInformation.tsx
+++ b/src/pages/Main/components/ProjectInformation/ProjectInformation.tsx
@@ -82,13 +82,13 @@ const ProjectInformation = ({ setProjectInfo }: ProjectProps) => {
   return (
     <StyledProjectInformation>
       <div className="ProjectInformation">
-        <h1>INFORMAÇÕES DO PROJETO</h1>
+        <h1>Informações do Projeto</h1>
 
         <Input
           title="Nome do Projeto"
-          Size="large"
-          color="red-pink"
-          styleWidth="large"
+          Size="2rem"
+          color="var(--red-pink)"
+          styleWidth="102.1rem"
           onChange={(e: any) => setProjectName(e.target.value)}
         />
 
@@ -99,16 +99,14 @@ const ProjectInformation = ({ setProjectInfo }: ProjectProps) => {
             <div className="NameTitle">
               <Input
                 title="Nome completo do Participante"
-                color="black"
-                styleWidth="large"
+                styleWidth="49.375rem"
                 value={name}
                 onChange={(e: any) => setName(e.target.value)}
               />
 
               <Input
                 title="Título / Cargo"
-                color="black"
-                styleWidth="medium"
+                styleWidth="23.75rem"
                 value={role}
                 onChange={(e: any) => setRole(e.target.value)}
               />
@@ -117,24 +115,21 @@ const ProjectInformation = ({ setProjectInfo }: ProjectProps) => {
             <div className="CompanyPhoneEmail">
               <Input
                 title="Empresa"
-                color="black"
-                styleWidth="medium"
+                styleWidth="23.75rem"
                 value={enterprise}
                 onChange={(e: any) => setEnterprise(e.target.value)}
               />
 
               <Input
                 title="Telefone"
-                color="black"
-                styleWidth="medium"
+                styleWidth="23.75rem"
                 value={phone}
                 onChange={(e: any) => setPhone(e.target.value)}
               />
 
               <Input
                 title="E-mail"
-                color="black"
-                styleWidth="medium"
+                styleWidth="23.75rem"
                 value={email}
                 onChange={(e: any) => setEmail(e.target.value)}
               />
diff --git a/src/pages/Main/components/ProjectInformation/styles.ts b/src/pages/Main/components/ProjectInformation/styles.ts
index 44451fd..ac071d8 100644
--- a/src/pages/Main/components/ProjectInformation/styles.ts
+++ b/src/pages/Main/components/ProjectInformation/styles.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const StyledProjectInformation = styled.div`
   display: flex;
   justify-content: center;
-  padding-top: 1.875rem;
+  padding-top: 3rem;
 
   .ProjectInformation {
     display: flex;
@@ -18,8 +18,9 @@ const StyledProjectInformation = styled.div`
     border-bottom: 2px solid var(--red-pink);
 
     h1 {
-      color: var(--red-pink);
+      color: var(--gray);
       font-size: 2.25rem;
+      font-weight: bold;
 
       margin-bottom: 6.25rem;
     }
@@ -53,7 +54,7 @@ const StyledProjectInformation = styled.div`
           display: flex;
           justify-content: space-between;
 
-          margin-top: 12px;
+          margin-top: 0.75rem;
         }
 
         Button {
@@ -70,8 +71,9 @@ const StyledProjectInformation = styled.div`
         h2 {
           color: var(--black);
           font-size: 1.5ren;
+          font-weight: bold;
 
-          margin-bottom: 14px;
+          margin-bottom: 0.875rem;
         }
       }
     }
diff --git a/src/pages/Main/components/Subjects/components/SubjectModal/styles.ts b/src/pages/Main/components/Subjects/components/SubjectModal/styles.ts
index cfa16f4..3062f05 100644
--- a/src/pages/Main/components/Subjects/components/SubjectModal/styles.ts
+++ b/src/pages/Main/components/Subjects/components/SubjectModal/styles.ts
@@ -16,31 +16,37 @@ export const Container = styled.div`
     width: 90rem;
     height: 55rem;
     background: #ffffff;
-    border-radius: 20px;
+    border-radius: 1.25rem;
 
     display: flex;
     flex-direction: column;
     align-items: center;
 
-    padding: 30px 20px;
+    padding: 1.875rem 1.25rem;
 
     textarea {
-      padding: 20px;
+      padding: 1.25rem;
     }
 
     .textArea,
     textarea {
       width: 100%;
       height: 100%;
+
+      font-family: Roboto;
+      font-size: 1.3rem;
+      font-style: normal;
+      font-weight: bold;
+
     }
 
     .inputs {
       display: flex;
       width: 100%;
-      margin: 30px 0;
+      margin: 1.875rem 0;
 
       div {
-        margin-right: 30px;
+        margin-right: 1.875rem;
       }
     }
 
diff --git a/src/pages/Main/components/Subjects/styles.ts b/src/pages/Main/components/Subjects/styles.ts
index 3848631..46a7fe8 100644
--- a/src/pages/Main/components/Subjects/styles.ts
+++ b/src/pages/Main/components/Subjects/styles.ts
@@ -6,11 +6,13 @@ const StyledSubjects = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1.875rem;
+  padding: 3rem;
+
 
   h1 {
-    color: var(--red-pink);
+    color: var(--gray);
     font-size: 2.25rem;
+    font-weight: bold;
 
     margin-bottom: 6.25rem;
   }
@@ -22,15 +24,18 @@ const StyledSubjects = styled.div`
     max-width: 102.125rem;
     width: 100%;
 
+    padding-bottom: 5rem;
+    border-bottom: 2px solid var(--red-pink);
+
     button {
-      margin: 10px 0;
+      margin: 0.625rem 0;
     }
 
     .content {
-      padding: 0 10px;
+      padding: 0 0.625rem 0 0;
 
       div {
-        margin: 10px 0;
+        margin: 0.625rem 0;
         display: flex;
         width: 100%;
         justify-content: space-between;
@@ -41,8 +46,8 @@ const StyledSubjects = styled.div`
         padding: 1rem 0;
 
         font-family: Roboto;
-        font-weight: 900;
-        font-size: 2rem;
+        font-weight: bold;
+        font-size: 1.3rem;
 
         color: #373435;
 
@@ -57,7 +62,7 @@ const StyledSubjects = styled.div`
         span:nth-child(1) {
           text-align: center;
           width: 35%;
-          border-radius: 20px 0 0 20px;
+          border-radius: 1.25rem 0 0 1.25rem;
         }
 
         span:nth-child(2) {
@@ -68,7 +73,7 @@ const StyledSubjects = styled.div`
         span:nth-child(3) {
           text-align: center;
           width: 35%;
-          border-radius: 0 20px 20px 0;
+          border-radius: 0 1.25rem 1.25rem 0;
         }
       }
 
@@ -79,9 +84,8 @@ const StyledSubjects = styled.div`
 
           font-family: Roboto;
           font-style: normal;
-          font-weight: 900;
-          font-size: 2rem;
-          line-height: 28px;
+          font-weight: bold;
+          font-size: 1.5rem;
           text-align: center;
 
           color: #ffffff;
@@ -91,7 +95,7 @@ const StyledSubjects = styled.div`
           background: #f60846;
           width: 35%;
 
-          border-radius: 20px 0 0 20px;
+          border-radius: 1.25rem 0 0 1.25rem;
         }
 
         span:nth-child(2) {
@@ -102,7 +106,7 @@ const StyledSubjects = styled.div`
         span:nth-child(3) {
           background: #cecfd0;
           width: 35%;
-          border-radius: 0 20px 20px 0;
+          border-radius: 0 1.25rem 1.25rem 0;
         }
       }
     }
diff --git a/src/pages/Main/components/Topics/Topics.tsx b/src/pages/Main/components/Topics/Topics.tsx
index c944f5d..056587c 100644
--- a/src/pages/Main/components/Topics/Topics.tsx
+++ b/src/pages/Main/components/Topics/Topics.tsx
@@ -53,9 +53,7 @@ const Topics = ({ setTopics, topics }: ITopicsProps) => {
         <div className="AddTopic">
           <Input
             title="Pauta"
-            Size="large"
-            color="black"
-            styleWidth="large"
+            styleWidth="49.375rem"
             value={topicName}
             onChange={(e: any) => setTopicName(e.target.value)}
           />
diff --git a/src/pages/Main/components/Topics/styles.ts b/src/pages/Main/components/Topics/styles.ts
index 06dcc53..2dcf4cb 100644
--- a/src/pages/Main/components/Topics/styles.ts
+++ b/src/pages/Main/components/Topics/styles.ts
@@ -10,8 +10,9 @@ const StyledTopics = styled.div`
   justify-content: center;
 
   h1 {
-    color: var(--red-pink);
+    color: var(--gray);
     font-size: 2.25rem;
+    font-weight: bold;
 
     margin-bottom: 4rem;
   }
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 83b8a3f..e2333d1 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -24,7 +24,9 @@ const GlobalStyle = createGlobalStyle`
     --black: #373435;
     --red-pink: #f60846;
     --soft-pink: #fce6ec;
+    --gray: #a0a0a0;
     --soft-gray: #F5F5F6;
+    --green: #0AAD74;
   }
 
   @media(max-width: 1980px) {