Alteração de cor no Fluxograma

FGA0138-MDS-Ajax · Nov 30, 2023 · 4575af9 · 4575af9
1 parent 1231ca0
commit 4575af9
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 29 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,7 +16,7 @@
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",
-    "react-scripts": "5.0.0",
+    "react-scripts": "^5.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/frontend/src/pages/FluxogramaAero.js b/frontend/src/pages/FluxogramaAero.js
@@ -9,7 +9,7 @@ function FluxogramaAero() {
     <>
     <div className="container" >
         {/* 1º Semestre */}
-        <div className="semester-label" style={{ left: '85px', top: '13px', color: 'Write' }}>1º Semestre</div>
+        <div className="semester-label" style={{ left: '85px', top: '13px', color: '#1976d2' }}>1º Semestre</div>
         <div className="course-card" style={{ left: '46px', top: '60px' }}></div>
         <div className="course-info" style={{ left: '60px', top: '70px' }}>Cálculo 1<br /></div>
 
@@ -63,7 +63,7 @@ function FluxogramaAero() {
           </div>
 
         {/* 2º Semestre */}
-        <div className="semester-label" style={{ left: '305px', top: '13px', color: 'Write' }}>2º Semestre</div>
+        <div className="semester-label" style={{ left: '305px', top: '13px', color: '#1976d2' }}>2º Semestre</div>
         <div><div className="course-card" style={{ left: '273px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '287px', top: '70px' }}>Cálculo 2<br /></div></div>
         <div className="course-info" style={{ left: '287px', top: '90px', display: 'flex', flexWrap: 'wrap', gap: '4px 6px', position: 'absolute' }}>
@@ -115,7 +115,7 @@ function FluxogramaAero() {
 
 
         {/* 3º Semestre */}
-        <div className="semester-label" style={{ left: '544px', top: '13px' }}>3º semestre</div>
+        <div className="semester-label" style={{ left: '544px', top: '13px', color: '#1976d2' }}>3º semestre</div>
         <div><div className="course-card" style={{ left: '505px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '519px', top: '70px' }}>cálculo 3<br /> </div></div>
         <div className="course-info" style={{ left: '519px', top: '90px', display: 'flex', flexWrap: 'wrap', gap: '4px 6px', position: 'absolute' }}>
@@ -182,7 +182,7 @@ function FluxogramaAero() {
           </div>
 
         {/* 4º Semestre */}
-        <div className="semester-label" style={{ left: '785px', top: '15px' }}>4º semestre</div>
+        <div className="semester-label" style={{ left: '785px', top: '15px', color: '#1976d2' }}>4º semestre</div>
         <div><div className="course-card" style={{ left: '746px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '760px', top: '70px' }}>fenomenos de transporte<br /> </div></div>
         <div className="course-info" style={{ left: '760px', top: '90px', display: 'flex', flexWrap: 'wrap', gap: '4px 6px', position: 'absolute' }}>
@@ -231,7 +231,7 @@ function FluxogramaAero() {
           </div>
 
         {/* 5º Semestre */}
-        <div className="semester-label" style={{ left: '1023px', top: '15px' }}>5º semestre</div>
+        <div className="semester-label" style={{ left: '1023px', top: '15px', color: '#1976d2' }}>5º semestre</div>
         <div><div className="course-card" style={{ left: '984px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '994px', top: '70px' }}>termodinamica 1 <br /> </div></div>
         <div className="course-info" style={{ left: '994px', top: '105px', display: 'flex', flexWrap: 'wrap', gap: '4px 6px', position: 'absolute' }}>
@@ -298,7 +298,7 @@ function FluxogramaAero() {
           </div>
 
         {/* 6º Semestre */}
-        <div className="semester-label" style={{ left: '1265px', top: '15px' }}>6º semestre</div>
+        <div className="semester-label" style={{ left: '1265px', top: '15px', color: '#1976d2' }}>6º semestre</div>
 
         <div><div className="course-card" style={{ left: '1229px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '1243px', top: '70px' }}>transferencia de calor<br /> </div></div>
@@ -347,7 +347,7 @@ function FluxogramaAero() {
           </div>
 
         {/* 7º Semestre */}
-        <div className="semester-label" style={{ left: '1509px', top: '15px' }}>7º semestre</div>
+        <div className="semester-label" style={{ left: '1509px', top: '15px', color: '#1976d2'}}>7º semestre</div>
 
         <div><div className="course-card" style={{ left: '1474px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '1488px', top: '70px' }}>mecânica de estruturas aeroespaciais<br /> </div></div>
@@ -386,7 +386,7 @@ function FluxogramaAero() {
             </div>
           </div>
         {/* 8º Semestre */}
-        <div className="semester-label" style={{ left: '1749px', top: '15px' }}>8º semestre</div>
+        <div className="semester-label" style={{ left: '1749px', top: '15px', color: '#1976d2' }}>8º semestre</div>
 
         <div><div className="course-card" style={{ left: '1714px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '1728px', top: '70px' }}>mecânica do voo espacial<br /></div></div>
@@ -417,7 +417,7 @@ function FluxogramaAero() {
          </div>
 
         {/* 9º Semestre */}
-        <div className="semester-label" style={{ left: '1980px', top: '15px' }}>9º semestre</div>
+        <div className="semester-label" style={{ left: '1980px', top: '15px', color: '#1976d2' }}>9º semestre</div>
 
         <div><div className="course-card" style={{ left: '1945px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '1959px', top: '70px' }}>Trabalho de Conclusão <br />de Curso 1 </div></div>
@@ -440,7 +440,7 @@ function FluxogramaAero() {
 
 
         {/* 10º Semestre */}
-        <div className="semester-label" style={{ left: '2220px', top: '15px' }}>10º semestre</div>
+        <div className="semester-label" style={{ left: '2220px', top: '15px', color: '#1976d2' }}>10º semestre</div>
 
         <div><div className="course-card" style={{ left: '2185px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '2199px', top: '70px' }}>Trabalho de Conclusão <br />de Curso 2 </div></div>

diff --git a/frontend/src/pages/FluxogramaSoft.js b/frontend/src/pages/FluxogramaSoft.js
@@ -8,7 +8,7 @@ function FluxogramaSoft() {
     <>
     <div className="container" >
         {/* 1º Semestre */}
-        <div className="semester-label" style={{ left: '85px', top: '13px', color: 'White' }}>1º Semestre</div>
+        <div className="semester-label" style={{ left: '85px', top: '13px', color: '#1976d2' }}>1º Semestre</div>
         <div className="course-card" style={{ left: '46px', top: '60px' }}></div>
         <div className="course-info" style={{ left: '60px', top: '70px' }}>Cálculo 1<br /></div>
 
@@ -62,7 +62,7 @@ function FluxogramaSoft() {
           </div>
 
         {/* 2º Semestre */}
-        <div className="semester-label" style={{ left: '305px', top: '13px', color: 'White ' }}>2º Semestre</div>
+        <div className="semester-label" style={{ left: '305px', top: '13px', color: '#1976d2' }}>2º Semestre</div>
         <div><div className="course-card" style={{ left: '273px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '287px', top: '70px' }}>Cálculo 2<br /></div></div>
         <div className="course-info" style={{ left: '287px', top: '90px', display: 'flex', flexWrap: 'wrap', gap: '4px 6px', position: 'absolute' }}>
@@ -123,7 +123,7 @@ function FluxogramaSoft() {
 
 
         {/* 3º Semestre */}
-        <div className="semester-label" style={{ left: '544px', top: '13px' }}>3º semestre</div>
+        <div className="semester-label" style={{ left: '544px', top: '13px', color: '#1976d2' }}>3º semestre</div>
         <div><div className="course-card" style={{ left: '505px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '519px', top: '70px' }}>Métodos Numéricos<br />para Engenharias </div></div>
         <div className="course-info" style={{ left: '519px', top: '105px', display: 'flex', flexWrap: 'wrap', gap: '4px 6px', position: 'absolute' }}>
@@ -189,7 +189,7 @@ function FluxogramaSoft() {
           </div>
 
         {/* 4º Semestre */}
-        <div className="semester-label" style={{ left: '785px', top: '15px' }}>4º semestre</div>
+        <div className="semester-label" style={{ left: '785px', top: '15px', color: '#1976d2' }}>4º semestre</div>
         <div><div className="course-card" style={{ left: '746px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '760px', top: '70px' }}>Gestão de Produção e Qualidade<br /> </div></div>
         <div className="course-info" style={{ left: '760px', top: '105px', display: 'flex', flexWrap: 'wrap', gap: '4px 6px', position: 'absolute' }}>
@@ -246,7 +246,7 @@ function FluxogramaSoft() {
             </div>
           </div>
         {/* 5º Semestre */}
-        <div className="semester-label" style={{ left: '1023px', top: '15px' }}>5º semestre</div>
+        <div className="semester-label" style={{ left: '1023px', top: '15px', color: '#1976d2'}}>5º semestre</div>
         <div><div className="course-card" style={{ left: '984px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '994px', top: '70px' }}>Interação Humano Computador<br /> </div></div>
         <div className="course-info" style={{ left: '994px', top: '105px', display: 'flex', flexWrap: 'wrap', gap: '4px 6px', position: 'absolute' }}>
@@ -303,7 +303,7 @@ function FluxogramaSoft() {
           </div>
 
         {/* 6º Semestre */}
-        <div className="semester-label" style={{ left: '1265px', top: '15px' }}>6º semestre</div>
+        <div className="semester-label" style={{ left: '1265px', top: '15px', color: '#1976d2' }}>6º semestre</div>
 
         <div><div className="course-card" style={{ left: '1229px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '1243px', top: '70px' }}>Qualidade de Software 1<br /> </div></div>
@@ -361,7 +361,7 @@ function FluxogramaSoft() {
           </div>
 
         {/* 7º Semestre */}
-        <div className="semester-label" style={{ left: '1509px', top: '15px' }}>7º semestre</div>
+        <div className="semester-label" style={{ left: '1509px', top: '15px', color: '#1976d2' }}>7º semestre</div>
 
         <div><div className="course-card" style={{ left: '1474px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '1488px', top: '70px' }}>Técnicas de Programação em Plataformas Emergentes<br /> </div></div>
@@ -400,7 +400,7 @@ function FluxogramaSoft() {
             </div>
           </div>
         {/* 8º Semestre */}
-        <div className="semester-label" style={{ left: '1749px', top: '15px' }}>8º semestre</div>
+        <div className="semester-label" style={{ left: '1749px', top: '15px', color: '#1976d2' }}>8º semestre</div>
 
         <div><div className="course-card" style={{ left: '1714px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '1728px', top: '70px' }}>Engenharia de Produto<br />de Software </div></div>
@@ -423,7 +423,7 @@ function FluxogramaSoft() {
         <div><div className="course-card" style={{ left: '1714px', top: '330px' }}></div></div>
         <div><div className="course-info" style={{ left: '1728px', top: '345px' }}>Estagio Supervisionado<br /></div></div>
         {/* 9º Semestre */}
-        <div className="semester-label" style={{ left: '1980px', top: '15px' }}>9º semestre</div>
+        <div className="semester-label" style={{ left: '1980px', top: '15px', color: '#1976d2' }}>9º semestre</div>
 
         <div><div className="course-card" style={{ left: '1945px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '1959px', top: '70px' }}>Trabalho de Conclusão <br />de Curso 1 </div></div>
@@ -447,7 +447,7 @@ function FluxogramaSoft() {
         <div><div className="course-info" style={{ left: '1959px', top: '345px' }}>Estagio Supervisionado<br /></div></div>
 
         {/* 10º Semestre */}
-        <div className="semester-label" style={{ left: '2220px', top: '15px' }}>10º semestre</div>
+        <div className="semester-label" style={{ left: '2220px', top: '15px', color: '#1976d2' }}>10º semestre</div>
 
         <div><div className="course-card" style={{ left: '2185px', top: '60px' }}></div></div>
         <div><div className="course-info" style={{ left: '2199px', top: '70px' }}>Trabalho de Conclusão <br />de Curso 2 </div></div>

diff --git a/frontend/src/styleheets/FluxogramaAero.css b/frontend/src/styleheets/FluxogramaAero.css
@@ -3,22 +3,21 @@
 .container {
     width: 2450px;
     height: 1080px;
-    background: #0b0b0b; 
     position: relative;
   } 
   .course-card {
     width: 210px;
     height: 120px;
+    background: white;
     position: absolute;
-    background: rgba(30, 30, 30, 0.51);
     border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(13, 13, 13, 0.5);
+    box-shadow: 0px 0px 10px #1976d2;
   }
 
   .course-info {
     width: 196px;
     position: absolute;
-    color: white;
+    color: black;
     font-size: 14px;
     font-family: Inter;
     font-weight: 400;

diff --git a/frontend/src/styleheets/FluxogramaSoft.css b/frontend/src/styleheets/FluxogramaSoft.css
@@ -7,18 +7,18 @@
   position: relative;
 } 
 .course-card {
+  background: white;
   width: 210px;
   height: 120px;
   position: absolute;
-  background: rgb(255, 255, 255);
   border-radius: 10px;
-  box-shadow: 0px 0px 10px rgb(255, 255, 255)
+  box-shadow: 0px 0px 10px #1976d2;
 }
 
 .course-info {
   width: 196px;
   position: absolute;
-  color: white;
+  color: black;
   font-size: 14px;
   font-family: Inter;
   font-weight: 400;