Issue #230: Thinking Aloud - Resource Visualization

src/app/perfil/[id]/components/SelectionButtons.js

@@ -7,11 +7,11 @@ import { useState } from "react";
  * @return Botões de informações que o usuário pode acessar 
  * @param {Object} props
  * @param {Function} props.setOptButton
- * @param {Boolean} props.verifyCurator `true` se for curador, `false` se não.
+ * @param {Boolean} props.setUserVerified `true` se for curador, `false` se não.
  * @param {Number} props.idProfile
  * @param {Number} props.idLogin 
  */
-export default function SelectionButtons({ setOptButton, verifyCurator, idProfile, idLogin, options }) {
+export default function SelectionButtons({ setOptButton, userVerified, idProfile, idLogin, options }) {
     const [value, setValue] = useState(0)
 
     const handleChange = (e, newValue) => {

src/app/perfil/[id]/components/UserCard.js

@@ -159,6 +159,23 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
         setMedalActive(countMedalBeingUsed)
 
         fetchFollowers()
+        // Função que análisa se o usuário é considerado "verificado" conforme cargo
+        const verifier = async () => {
+            const all_roles = [
+                "teacher", "admin", "curator", "moderator",
+                "supervisor", "editor", "partner", "publisher", "submitter"
+            ];
+    
+            // Extrai todos os nomes dos cargos do usuário
+            const user_roles = profileData["roles"].map(role => role.name);
+    
+            // Verifica se algum cargo do usuário está na lista de roles permitidos
+            const verifier_user_roles = user_roles.find(role => all_roles.includes(role));
+    
+            if (verifier_user_roles) {
+                setUserVerified(true);
+            }
+        };
         verifier()
 
         /**
@@ -183,27 +200,7 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
         itemsRoles()
             .then(roles => setTranslateItems(roles))
         */
-    }, [profileData])
-
-    // Função que análisa se o usuário é considerado "verificado" conforme cargo
-    const verifier = async () => {
-        const all_roles = [
-            "teacher", "admin", "curator", "moderator",
-            "supervisor", "editor", "partner", "publisher", "submitter"
-        ];
-
-        // Extrai todos os nomes dos cargos do usuário
-        const user_roles = profileData["roles"].map(role => role.name);
-
-        // Verifica se algum cargo do usuário está na lista de roles permitidos
-        const verifier_user_roles = user_roles.find(role => all_roles.includes(role));
-
-        if (verifier_user_roles) {
-            setUserVerified(true);
-        }
-    };
-
-
+    }, [items, profileData])
 
 
     /*
@@ -221,7 +218,7 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
             { name: "Seguindo", component: <FollowingCards id={profileData["id"]} count={following} /> },
         )
 
-        if (verifyCurator) {
+        if (userVerified) {
             options.push(
                 { name: "Homologação", component: <ProfileHomologation id={profileData["id"]} /> },
                 { name: "Denúncias", component: <ProfileComplaints id={profileData["id"]} /> }
@@ -307,7 +304,7 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
 
                 {/* Botões de recursos, sobre, coleções e homologação, mostra quais botões para cada usuário */}
                 <div className='max-md:mx-1 max-md:mb-1 rounded-2xl min-w-[200px] mt-10 bg-white-HC-dark  outline outline-1 outline-ice-HC-white'>
-                    {<SelectionButtons options={options} setOptButton={setOptButton} verifyCurator={verifyCurator} idLogin={idLogin} idProfile={profileData["id"]} />}
+                    {<SelectionButtons options={options} setOptButton={setOptButton} userVerified={userVerified} idLogin={idLogin} idProfile={profileData["id"]} />}
                     {/* Faz a escolha correta de qual botão o usuário clicou */}
                     <ProfileOptions
                         options={options}

src/app/recurso/[id]/components/homologationModal.js

@@ -71,6 +71,8 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
     }
 
     const ConfirmModal = ({ open, onClose }) => {
+        const accept = payload.some(item => item.accepted === false)
+
         return (
 
             <Modal
@@ -85,13 +87,13 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
                     },
                   }}
             >
-                <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg ">
-                    <p className="flex justify-center text-darkGray-HC-white-underline font-bold text-2xl">Recurso a ser aprovado</p>
-                    <p className="pt-3 text-lg text-darkGray-HC-white-underline ">Este recurso será publicado na MEC RED. Você confirma essa avaliação?</p>
+                <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg outline outline-1 outline-ice-HC-white">
+                    <p className="flex justify-center text-darkGray-HC-white font-bold text-2xl">Recurso a ser aprovado</p>
+                    <p className="pt-3 text-lg text-darkGray-HC-white">Este recurso {accept ? "não será" : "será"} publicado na MEC RED. Você confirma essa avaliação?</p>
                     <div className="flex flex-row justify-end pt-5">
 
-                        <button onClick={() => onClose()} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:bg-ice-HC-dark-hover">Alterar avaliação</button>
-                        <button onClick={handleSubmit} className="bg-turquoise px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline font-semibold hover:bg-turquoise-hover">Confirmar</button>
+                        <button onClick={() => onClose()} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:text-darkGray-HC-dark-underline hover:bg-lightGray-HC-white outline outline-1 outline-white">Alterar avaliação</button>
+                        <button onClick={handleSubmit} className="bg-turquoise-HC-white px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline hover:text-white font-semibold hover:bg-darkTurquoise-HC-dark outline outline-1 outline-ice-HC-white">Confirmar</button>
                     </div>
                 </div>
 
@@ -143,7 +145,7 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
                     },
                   }}
             >
-                <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg ">
+                <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg outline outline-1 outline-ice-HC-white">
                     <ConfirmModal open={confirmOpen} onClose={() => { setConfirmOpen(false) }} />
                     <NotSucessModal open={notSucess} onClose={() => { setNotSucess(false) }} />
                     <p className="flex justify-center text-2xl text-darkGray-HC-white-underline font-bold pb-2">{`Você está avaliando a submissão ${name}`}</p>
@@ -152,9 +154,28 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
                         return (
                             <div key={i} className="pb-4">
                                 <p className="text-darkGray-HC-white-underline text-lg" key={i}>{item.description}</p>
-                                <RadioGroup row onChange={(e) => { handleRadios(e, item.id) }}>
-                                    <FormControlLabel value={"Não"} control={<Radio />} label="Não" className="text-darkGray-HC-white-underline" />
-                                    <FormControlLabel value={"Sim"} control={<Radio />} label="Sim" className="text-darkGray-HC-white-underline" />
+                                <RadioGroup row 
+                                    onChange={(e) => { handleRadios(e, item.id) }}>
+                                    <FormControlLabel value={"Não"} control={
+                                        <Radio
+                                        sx={{
+                                          color: 'var(--darkGray-HC-white)',
+                                          '&.Mui-checked': {
+                                            color: 'var(--turquoise-HC-white)',
+                                          },
+                                        }}
+                                      />
+                                    } label="Não" className="text-darkGray-HC-white-underline" />
+                                    <FormControlLabel value={"Sim"} control={
+                                        <Radio
+                                        sx={{
+                                          color: 'var(--darkGray-HC-white)',
+                                          '&.Mui-checked': {
+                                            color: 'var(--turquoise-HC-white)',
+                                          },
+                                        }}
+                                      />
+                                    } label="Sim" className="text-darkGray-HC-white-underline" />
                                 </RadioGroup>
                             </div>
                         )
@@ -170,10 +191,27 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
                         multiline
                         label="Justificativa (opcional)"
                         variant="standard"
+                        sx={{
+                            '& .MuiInputBase-input': {
+                              color: 'var(--darkGray-HC-white)', // Cor do texto digitado
+                            },
+                            '& .MuiInput-underline:before': {
+                              borderBottomColor: 'var(--darkGray-HC-white)', // underline antes do foco
+                            },
+                            '& .MuiInput-underline:after': {
+                              borderBottomColor: 'var(--turquoise-HC-white)', // underline no foco
+                            },
+                            '& .MuiInputLabel-root': {
+                              color: 'var(--darkGray-HC-white)', // label normal
+                            },
+                            '& .MuiInputLabel-root.Mui-focused': {
+                              color: 'var(--turquoise-HC-white)', // label no foco
+                            },
+                          }}
                     />
                     <div className="flex justify-end mt-5">
-                        <button onClick={onClose} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:bg-ice-HC-dark-hover">Cancelar</button>
-                        <button onClick={() => { payload.length < 4 ? setNotSucess(true) : setConfirmOpen(true) }} className="bg-turquoise px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline font-semibold hover:bg-turquoise-hover">Enviar</button>
+                        <button onClick={onClose} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:text-darkGray-HC-dark-underline hover:bg-lightGray-HC-white outline outline-1 outline-white">Cancelar</button>
+                        <button onClick={() => { payload.length < 4 ? setNotSucess(true) : setConfirmOpen(true) }} className="bg-turquoise-HC-white px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline hover:text-white font-semibold hover:bg-darkTurquoise-HC-dark outline outline-1 outline-ice-HC-white">Enviar</button>
                     </div>
                 </div>
             </Modal>

src/app/recurso/[id]/components/specifications.js

@@ -29,11 +29,11 @@ function formatSize(size) {
 export default function Specifications({ learningObject }) {
 
   const specInfo = [
-    { icon: <IconLocation className='mr-2 invertLogo-HC-white'/>, enabled: true, name: "Idioma", data: learningObject.language.map((lang) => lang.name).join(", ") ?? "Não Informado" },
-    { icon: <IconLevel className='mr-2 invertLogo-HC-white'/>, enabled: true, name: "Nível de Ensino", data: learningObject.educational_stages.map((stage) => stage.name).join(", ") },
-    { icon: <IconMedia className='invertLogo-HC-white' style={{ transform: "scale(0.85)" }}/>, enabled: true, name: "Tipo de Mídia", data: learningObject.object_type },
-    { icon: <IconTheme className='mr-1 invertLogo-HC-white'/>, enabled: true, name: "Temática", data: learningObject.subjects.map((subject) => subject.name).join(", ") },
-    { icon: <IconSize className='mr-2 invertLogo-HC-white' style={{ transform: "scale(1.15)" }}/>, enabled: !learningObject.link, name: "Tamanho", data: formatSize(learningObject?.attachments[0]?.size) },
+    { icon: <IconLocation className='scale-[0.9] ml-1 mr-2 invertLogo-HC-white'/>, enabled: true, name: "Idioma", data: learningObject.language.map((lang) => lang.name).join(", ") ?? "Não Informado" },
+    { icon: <IconLevel className='scale-[0.9] mr-2 invertLogo-HC-white'/>, enabled: true, name: "Nível de Ensino", data: learningObject.educational_stages.map((stage) => stage.name).join(", ") },
+    { icon: <IconMedia className='scale-[0.75] rotate-[315deg] invertLogo-HC-white'/>, enabled: true, name: "Tipo de Mídia", data: learningObject.object_type },
+    { icon: <IconTheme className='scale-[0.9] mr-1 invertLogo-HC-white'/>, enabled: true, name: "Temática", data: learningObject.subjects.map((subject) => subject.name).join(", ") },
+    { icon: <IconSize className='scale-[0.9] mx-1 invertLogo-HC-white'/>, enabled: !learningObject.link, name: "Tamanho", data: formatSize(learningObject?.attachments[0]?.size) },
   ];
   return (
     <div className="flex flex-col p-1 text-darkGray-HC-white">