Typext · raquelribeiro2 · Apr 18, 2021 · Apr 18, 2021
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
@@ -61,4 +61,13 @@ export const StyledHeader = styled.header`
     border: none;
     background: none;
   }
+
+  @media (max-width: 960px) {
+    zoom: 70%;
+    height: 6rem;
+
+    img {
+      zoom: 135%;
+    }
+  }
 `;
diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
@@ -18,7 +18,7 @@ export const StyledInput = styled.div<Props>`
   h3 {
     font-weight: 500;
     font-size: ${props => props.Size || '1.5rem'};
-    color: ${props => props.Color || 'var(--gray)'};
+    color: ${props => props.Color || 'var(--black)'};
 
     margin-bottom: 5px;
   }

diff --git a/src/pages/Minute/components/Distributions/Distributions.tsx b/src/pages/Minute/components/Distributions/Distributions.tsx
@@ -32,9 +32,9 @@ const Distributions = () => {
   };
 
   const deleteDistributions = (value: string) => {
-    setDistributions(distributions.filter(
-      distributionValue => distributionValue !== value,
-    ));
+    setDistributions(
+      distributions.filter(distributionValue => distributionValue !== value),
+    );
   };
 
   return (
@@ -46,7 +46,7 @@ const Distributions = () => {
           <div className="DataDepartments">
             <Input
               title="Área"
-              styleWidth="49.375rem"
+              styleWidth="100%"
               value={distribution}
               onChange={(e: any) => setDistribution(e.target.value)}
             />
@@ -63,6 +63,7 @@ const Distributions = () => {
           </div>
 
           <div className="Departments">
+            <h3>Distribuições adicionadas:</h3>
             <ScrollBox>
               {distributions.map(distributionValue => (
                 <BoxInformation
@@ -72,7 +73,6 @@ const Distributions = () => {
                   <h4>{distributionValue}</h4>
                 </BoxInformation>
               ))}
-
             </ScrollBox>
           </div>
         </div>

diff --git a/src/pages/Minute/components/Distributions/styles.ts b/src/pages/Minute/components/Distributions/styles.ts
@@ -5,8 +5,7 @@ const StyledDistributions = styled.div`
   justify-content: center;
   align-items: center;
 
-  width: 100%;
-  max-width: 102.125rem;
+  width: 102.125rem;
 
   background-color: #ffffff;
   border-radius: 20px;
@@ -23,21 +22,45 @@ const StyledDistributions = styled.div`
     width: 100%;
 
     h1 {
-      color: var(--gray);
-      font-size: 2.25rem;
+      color: var(--black);
+      font-size: 3rem;
       font-weight: bold;
-
-      margin-bottom: 4rem;
+      width: 100%;
+      text-align: left;
     }
 
     .SectionDistributions {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 3.3rem;
+      gap: 2.5rem;
+
+      width: 100%;
 
       .DataDepartments {
-        Button {
-          margin: 3.438rem 0 0 25.625rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        gap: 2rem;
+        width: 100%;
+      }
+    }
+  }
+
+  @media (max-width: 960px) {
+    max-width: 100vw;
+    .SectionDistributions {
+      display: flex !important;
+      flex-direction: column;
+
+      width: 100%;
+
+      .Departments {
+        h3 {
+          font-weight: 500;
+          font-size: 1.5rem;
+          color: var(--black);
+          margin-bottom: 5px;
         }
       }
     }

diff --git a/src/pages/Minute/components/Initial/Initial.tsx b/src/pages/Minute/components/Initial/Initial.tsx
@@ -24,28 +24,31 @@ const Initial = () => {
       <div className="Initial">
         <h1>ATA DE REUNIÃO</h1>
         <form action="">
-          <Input
-            title="Local"
-            color="var(--gray)"
-            styleWidth="49.375rem"
-            onChange={(e: any) => setLocal(e.target.value)}
-          />
-
-          <Input
-            title="Data de Inicio"
-            color="var(--gray)"
-            styleWidth="23.75rem"
-            type="date"
-            onChange={(e: any) => setStartDate(e.target.value)}
-          />
-
-          <Input
-            title="Horário de Inicio"
-            color="var(--gray)"
-            styleWidth="23.75rem"
-            type="time"
-            onChange={(e: any) => setStartHour(e.target.value)}
-          />
+          <div className="Local">
+            <Input
+              title="Local"
+              color="var(--black)"
+              styleWidth="100%"
+              onChange={(e: any) => setLocal(e.target.value)}
+            />
+          </div>
+          <div className="HorarioData">
+            <Input
+              title="Data de Inicio"
+              color="var(--black)"
+              styleWidth="100%"
+              type="date"
+              onChange={(e: any) => setStartDate(e.target.value)}
+            />
+
+            <Input
+              title="Horário"
+              color="var(--black)"
+              styleWidth="100%"
+              type="time"
+              onChange={(e: any) => setStartHour(e.target.value)}
+            />
+          </div>
         </form>
       </div>
     </StyledInitial>

diff --git a/src/pages/Minute/components/Initial/styles.ts b/src/pages/Minute/components/Initial/styles.ts
@@ -32,12 +32,39 @@ export const StyledInitial = styled.div`
       border-radius: 20px;
 
       padding: 3rem;
-      gap: 3rem;
 
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
+      gap: 3rem;
 
       margin-top: 4rem;
+
+      .Local {
+        width: 100%;
+      }
+
+      .HorarioData {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 100%;
+        gap: 3rem;
+      }
+    }
+  }
+
+  @media (max-width: 960px) {
+    form {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      max-width: 100vw;
+
+      div {
+        width: 100%;
+        max-width: 100vw;
+      }
     }
   }
 `;
diff --git a/src/pages/Minute/components/MinuteViewer/components/Minute/styles.ts b/src/pages/Minute/components/MinuteViewer/components/Minute/styles.ts
@@ -17,8 +17,13 @@ export const Container = styled.div`
     margin: 15px 0;
   }
 
-  h2, h3 {
+  h2,
+  h3 {
     margin: 0;
     font-weight: bolder;
   }
+
+  @media (max-width: 960px) {
+    zoom: 30%;
+  }
 `;
diff --git a/src/pages/Minute/components/MinuteViewer/styles.ts b/src/pages/Minute/components/MinuteViewer/styles.ts
@@ -28,4 +28,14 @@ export const Container = styled.div`
       margin-left: 10px;
     }
   }
+
+  @media (max-width: 960px) {
+    max-width: 100vw;
+
+    .minuteButtons {
+      zoom: 70%;
+      justify-content: center !important;
+      margin: 3rem !important;
+    }
+  }
 `;
diff --git a/src/pages/Minute/components/OptionButtons/styles.ts b/src/pages/Minute/components/OptionButtons/styles.ts
@@ -16,4 +16,10 @@ export const Container = styled.div`
 
     margin-bottom: 5rem;
   }
+
+  @media (max-width: 960px) {
+    .buttons {
+      zoom: 100%;
+    }
+  }
 `;
diff --git a/src/pages/Minute/components/ProjectInformation/ProjectInformation.tsx b/src/pages/Minute/components/ProjectInformation/ProjectInformation.tsx
@@ -85,7 +85,7 @@ const ProjectInformation = () => {
         <Input
           title="Nome do Projeto"
           Size="2.375rem"
-          color="var(--gray)"
+          color="var(--black)"
           styleWidth="102.1rem"
           onChange={(e: any) => setProjectName(e.target.value)}
         />
@@ -96,17 +96,17 @@ const ProjectInformation = () => {
 
             <div className="NameTitle">
               <Input
-                title="Nome completo do Participante"
-                color="var(--gray)"
-                styleWidth="49.375rem"
+                title="Nome completo"
+                color="var(--black)"
+                styleWidth="100%"
                 value={name}
                 onChange={(e: any) => setName(e.target.value)}
               />
 
               <Input
                 title="Título / Cargo"
-                color="var(--gray)"
-                styleWidth="23.75rem"
+                color="var(--black)"
+                styleWidth="100%"
                 value={role}
                 onChange={(e: any) => setRole(e.target.value)}
               />
@@ -115,24 +115,24 @@ const ProjectInformation = () => {
             <div className="CompanyPhoneEmail">
               <Input
                 title="Empresa"
-                color="var(--gray)"
-                styleWidth="23.75rem"
+                color="var(--black)"
+                styleWidth="100%"
                 value={enterprise}
                 onChange={(e: any) => setEnterprise(e.target.value)}
               />
 
               <Input
-                color="var(--gray)"
+                color="var(--black)"
                 title="Telefone"
-                styleWidth="23.75rem"
+                styleWidth="100%"
                 value={phone}
                 onChange={(e: any) => setPhone(e.target.value)}
               />
 
               <Input
                 title="E-mail"
-                color="var(--gray)"
-                styleWidth="23.75rem"
+                color="var(--black)"
+                styleWidth="100%"
                 value={email}
                 onChange={(e: any) => setEmail(e.target.value)}
               />
@@ -150,7 +150,7 @@ const ProjectInformation = () => {
           </div>
 
           <div className="Users">
-            <h2>Participantes</h2>
+            <h2>Participantes Adicionados:</h2>
 
             <ScrollBox>
               {members.map(member => (