added high-contrast acessibility option to the tutorial

src/components/FaixaComponent.js

@@ -99,7 +99,7 @@ function FaixaComponent() {
             <TutorialModalComponent
                 openFunction={setIsOpen0}
                 closeModal={closeModal}
-                // contrast={contrastSet}
+                contrast={contrastSet}
                 open0={isOpen0}
                 open1={isOpen1}
                 open2={isOpen2}

src/components/Pages/HomePageComponent.js

@@ -76,6 +76,7 @@ function HomePageComponent() {
                 setOpen2={setIsOpen2}
                 closeModal={closeModal}
                 prox={() => prox(proxModal)}
+                contrast={contrastSet}
             />
             <TrainingModalComponent
                 open={isOpen1}

src/components/TutorialModalComponent.js

@@ -7,10 +7,16 @@ import aboutImg from '../img/about.svg';
 import tutorial1 from '../img/tutorial1.svg';
 import tutorial2 from '../img/tutorial2.svg';
 import tutorial3 from '../img/tutorial3.svg';
+
 import progress1 from '../img/tutorialProgress1.png';
 import progress2 from '../img/tutorialProgress2.png';
 import progress3 from '../img/tutorialProgress3.png';
 import progress4 from '../img/tutorialProgress4.png';
+import progressHigh1 from '../img/tutorialProgressHigh1.png';
+import progressHigh2 from '../img/tutorialProgressHigh2.png';
+import progressHigh3 from '../img/tutorialProgressHigh3.png';
+import progressHigh4 from '../img/tutorialProgressHigh4.png';
+
 import iconClose from '../img/close.svg';
 
 import routes from '../data/routes';
@@ -56,17 +62,14 @@ function TutorialModalComponent(props) {
     }, [slideIndex]);
 
     Modal.setAppElement('#root');
-    //const contrastSet = props.contrast;
+    const contrastSet = props.contrast;
 
     return (
-        <Modal
-        isOpen={props.open0}
-        className='Modal-tutorial'
-        >
+        <div>
             <Modal //slide1
-                className='modal-tutorial'
+                className={`modal-tutorial ${contrastSet ? "high-contrast" : ""}`}
                 overlayClassName='modal-overlay'
-                isOpen={slides[0]}
+                isOpen={slides[0]&&props.open0}
                 onRequestClose={() => closeModal(props.openFunction)}
             >
                 <div className="modal-header-container">
@@ -84,7 +87,7 @@ function TutorialModalComponent(props) {
                     className="button-cancel">
                         Pular
                     </button>
-                    <img className='img-button' src={progress1}/>
+                    <img className='img-button' src={contrastSet ? progressHigh1: progress1}/>
                     <button
                     className="button-continue"
                     onClick={maisSlide}
@@ -95,9 +98,9 @@ function TutorialModalComponent(props) {
             </Modal>
 
             <Modal //slide2
-            className='modal-tutorial'
+            className={`modal-tutorial ${contrastSet ? "high-contrast" : ""}`}
             overlayClassName='modal-overlay'
-            isOpen={slides[1]}
+            isOpen={slides[1]&&props.open0}
             onRequestClose={() => closeModal(props.openFunction)}
         >
             <div className="modal-header-container">
@@ -114,7 +117,7 @@ function TutorialModalComponent(props) {
                 className="button-cancel">
                    Voltar
                 </button>
-                <img className='img-button' src={progress2}/>
+                <img className='img-button' src={contrastSet ? progressHigh2: progress2}/>
                 <button
                 className="button-continue"
                 onClick={maisSlide}
@@ -124,9 +127,9 @@ function TutorialModalComponent(props) {
             </div>
             </Modal>
             <Modal //slide3
-            className='modal-tutorial'
+            className={`modal-tutorial ${contrastSet ? "high-contrast" : ""}`}
             overlayClassName='modal-overlay'
-            isOpen={slides[2]}
+            isOpen={slides[2]&&props.open0}
             onRequestClose={() => closeModal(props.openFunction)}
             >
                 <div className="modal-header-container">
@@ -142,7 +145,7 @@ function TutorialModalComponent(props) {
                     className="button-cancel">
                         Voltar
                     </button>
-                    <img className='img-button' src={progress3}/>
+                    <img className='img-button' src={contrastSet ? progressHigh3: progress3}/>
                     <button
                     className="button-continue"
                     onClick={maisSlide}
@@ -153,9 +156,9 @@ function TutorialModalComponent(props) {
             </Modal>
 
             <Modal //slide4
-            className='modal-tutorial'
+            className={`modal-tutorial ${contrastSet ? "high-contrast" : ""}`}
             overlayClassName='modal-overlay'
-            isOpen={slides[3]}
+            isOpen={slides[3]&&props.open0}
             onRequestClose={() => closeModal(props.openFunction)}
             >
                 <div className="modal-header-container">
@@ -171,7 +174,7 @@ function TutorialModalComponent(props) {
                     className="button-cancel">
                         Voltar
                     </button>
-                    <img className='img-button' src={progress4}/>
+                    <img className='img-button' src={contrastSet ? progressHigh4: progress4}/>
                     <button
                     className="button-continue"
                     onClick={prox}
@@ -180,7 +183,7 @@ function TutorialModalComponent(props) {
                     </button>
                 </div>
             </Modal>
-        </Modal>
+        </div>
         
     )
 }

src/css/TutorialModalComponent.scss

 .modal-tutorial {
     background-color: #fff;
-    justify-content: space-between;
-    color: #3c3c3b;
-    border-radius: 30px;
+    color: #3c3c3c;
+    border-radius: 20px;
     text-align: center;
     font-family: 'Nunito';
     padding: 20px;
     width: 80%;
-    height: 85%;
+    height: 90vh;
     cursor: default;
-    display: flex;
-    flex-direction: column;
-
     .modal-header-container {
         display: flex;
         flex-direction: column;
@@ -23,16 +19,15 @@
             background: transparent;
             transition: filter 0.2s;
             cursor: pointer;
-
             &:hover {
                 filter: brightness(0.8);
             }
-
             img {
                 vertical-align: middle;
             }
         }
     }
+
     .img {
         width: 768px;
         align-self: center;
@@ -41,50 +36,75 @@
 
     .title-tutorial {
         font-size: 28px;
-        font-weight: 500;
     }
 
     .subtitle-tutorial {
         font-size: 18px;
-        font-weight: 400;
-        margin-left: 50px;
-        margin-right: 50px;
+        margin: 0 50px 0 50px;
     }
 
     .button-container {
         display: grid;
-        justify-content: space-between;
+        justify-content: space-around;
+        align-items: center;
 
         .button-cancel {
             grid-column: 1 / span 1;
             padding: 5px;
-            font-family: 'Nunito';
             cursor: pointer;
             color: #7a60a6;
+            font-family: 'Nunito';
             font-size: 18px;
-            background-color: #ffffff;
-            border: solid 3px #7a60a6;
+            background-color: #fff;
+            border: solid 2px #7a60a6;
             border-radius: 10px;
             width: 20vh;
         }
-
         .img-button {
             grid-column: 2 / span 1;
-            align-self: center;
             height: 8px;
             width: 64px;
         }
-    
         .button-continue {
             grid-column: 3 / span 1;
             font-family: 'Nunito';
+            padding: 5px;
             cursor: pointer;
-            color: #ffffff;
+            color: #fff;
             font-size: 18px;
             background-color: #7a60a6;
-            border: solid 3px #7a60a6;
+            border: solid 2px #7a60a6;
             border-radius: 10px;
             width: 20vh;
         }
     }
 }   
+.high-contrast {
+    background: #000;
+    &.modal-tutorial {
+        border: 2px solid #fff;
+
+        .modal-header-container button{
+            filter: brightness(5);
+
+            &.hover{
+                border: 2px solid #fff;
+            }
+        }
+        .title-tutorial, .subtitle-tutorial {
+            color: #fff;
+        }
+        .button-container{
+            .button-cancel{
+                border: 2px solid #ffff00;
+                color: #ffff00;
+                background-color: #000000;
+            }
+            .button-continue{
+                border: 2px solid #ffff00;
+                background-color: #ffff00;
+                color: #000000;
+            }
+        }
+    }
+}
\ No newline at end of file