From 8e452a81701b1de5aa06ac6ffa69b1aa235c0d08 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Mon, 5 Jul 2021 17:03:56 -0300
Subject: [PATCH] Changed the way that the result from the webp test is stored
 to a more reliable one and the way that imports are made to a more correct
 one, since the last one had a big switch. It didn't improve in performance
 but I think this the correct way of doing it in a centered file.

---
 .../Components/DataCards/UserCard.js          |   3 +-
 .../Pages/Pages/SubPages/AproveTeacher.js     |   3 +-
 .../Pages/Pages/SubPages/BlockedUsers.js      |   3 +-
 src/Admin/Pages/Pages/SubPages/Users.js       |   3 +-
 src/App.js                                    | 608 +++++++++---------
 src/Components/AGPLFooter.js                  |   3 +-
 src/Components/AboutCarousel.js               |  11 +-
 src/Components/AboutCarouselPartner.js        |  31 +-
 src/Components/ActivityListItem.js            |   3 +-
 src/Components/AreasSubPages.js               |   7 +-
 src/Components/AreasSubPagesFunction.js       |  11 +-
 src/Components/Carousel.js                    |  13 +-
 src/Components/ColaborarModal.js              |   3 +-
 src/Components/CollectionCard.js              |   3 +-
 src/Components/CollectionCardFunction.js      |   3 +-
 src/Components/CollectionCommentSection.js    |   3 +-
 src/Components/Comment.js                     |   3 +-
 .../ContactButtons/FollowingButton.js         |   3 +-
 src/Components/ContactCard.js                 |   3 +-
 src/Components/EcFooter.js                    |   3 +-
 .../FormationMaterialDescription.js           |   5 +-
 src/Components/Funcionalities.js              |  13 +-
 .../HelpCenter/Cards/CardEncontrando.js       |   3 +-
 .../HelpCenter/Cards/CardGerenciando.js       |   3 +-
 .../HelpCenter/Cards/CardParticipando.js      |   3 +-
 .../HelpCenter/Cards/CardPublicando.js        |   3 +-
 .../HelpCenter/TabsManageAc/Forget.js         |   5 +-
 .../HelpCenter/TabsResourseFind/HowToDo.js    |   3 +-
 .../TabsResourseFind/HowToFilter.js           |   3 +-
 .../HelperFunctions/getDefaultThumbnail.js    |  29 +-
 src/Components/IframeOverlay/ResourceCard.js  |   3 +-
 src/Components/IframeOverlay/SmallFooter.js   |   3 +-
 src/Components/MenuList.js                    |   3 +-
 src/Components/MobileDrawerMenu.js            |   3 +-
 .../ComponentAlterarAvatar.js                 |   3 +-
 .../SuccessfulRequest.js                      |   3 +-
 src/Components/ResourceCard.js                |  31 +-
 src/Components/ResourceCardFunction.js        |   5 +-
 .../ResourcePageComponents/CommentsArea.js    |   5 +-
 .../ResourcePageComponents/Sobre.js           |   3 +-
 src/Components/SearchSection.js               |   3 +-
 src/Components/SearchSectionFunction.js       |   5 +-
 .../TabPanels/PanelComponents/NoContent.js    |   3 +-
 .../PanelComponents/TemplateColecao.js        |   3 +-
 .../PanelComponents/TemplateRecurso.js        |   3 +-
 .../PublicUserPageTabs/LastCollections.js     |   3 +-
 .../PublicUserPageTabs/LastLearnObj.js        |   3 +-
 .../UserPageTabs/ContainerRedeVazia.js        |   7 +-
 .../UserPageTabs/ModalExcluirConta.js         |   3 +-
 .../TabPanels/UserPageTabs/PanelAtividades.js |   7 +-
 .../TabPanels/UserPageTabs/PanelColecoes.js   |   3 +-
 .../UserPageTabs/PanelEditarPerfil.js         |   3 +-
 src/Components/UserPageComponents/Avatar.js   |   3 +-
 src/ImportImages.js                           | 384 ++++-------
 src/Pages/AboutPage.js                        |  13 +-
 src/Pages/CollectionPage.js                   |   3 +-
 src/Pages/Contact.js                          |   3 +-
 src/Pages/HelpCenter.js                       |   3 +-
 src/Pages/PublicUserPage.js                   |   3 +-
 src/Pages/ResourcePage.js                     |   3 +-
 src/Pages/Search.js                           |   5 +-
 src/Pages/TabsHelp/TabManageAc.js             |   3 +-
 src/Pages/TabsHelp/TabNetPart.js              |   3 +-
 src/Pages/TabsHelp/TabResourseFind.js         |   3 +-
 src/Pages/TabsHelp/TabResoursePub.js          |   3 +-
 src/Pages/UserTerms.js                        |   9 +-
 src/convertWebp.sh                            |   3 -
 src/env.js                                    |   2 +-
 68 files changed, 576 insertions(+), 771 deletions(-)
 delete mode 100755 src/convertWebp.sh

diff --git a/src/Admin/Components/Components/DataCards/UserCard.js b/src/Admin/Components/Components/DataCards/UserCard.js
index bbc34a4b..0e5563ec 100644
--- a/src/Admin/Components/Components/DataCards/UserCard.js
+++ b/src/Admin/Components/Components/DataCards/UserCard.js
@@ -44,8 +44,7 @@ import { getRequest, postRequest, deleteRequest, putRequest } from '../../../../
 //styles
 import styled from 'styled-components';
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 const CollectionCard = () => {
     let history = useHistory()
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index 83362be7..dca86692 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -53,8 +53,7 @@ import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
 import { Link } from "react-router-dom";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 
 const StyledTableCell = withStyles((theme) => ({
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index b3ab9a80..ba077fda 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -49,8 +49,7 @@ import { Url } from '../../../Filters';
 import { Link } from 'react-router-dom';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 const StyledTableCell = withStyles((theme) => ({
   head: {
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index 38114db0..dfb320d8 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -49,8 +49,7 @@ import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
 import { apiDomain } from '../../../../env';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 const StyledTableCell = withStyles((theme) => ({
   head: {
diff --git a/src/App.js b/src/App.js
index 1272aa72..5bd3940a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -182,6 +182,7 @@ export default function App() {
     // eslint-disable-next-line
     const { state, dispatch } = useContext(Store);
     const [hideFooter, setHideFooter] = useState(false);
+    const [awaitTest, setAwait] = useState(true);
     const PiwikReactRouter = require('piwik-react-router');
     const piwik = PiwikReactRouter({
         url: '//piwik.c3sl.ufpr.br/',
@@ -215,8 +216,9 @@ export default function App() {
     
     async function testWebpSupport() {
         if(await supportsWebp()) {
-            window.webpSupport = true;
+            localStorage.setItem('webpSupport', 'True');
         }
+        setAwait(false);
     }
 
     useEffect(() => {
@@ -231,7 +233,7 @@ export default function App() {
                 height: window.innerHeight,
             },
         });
-        window.webpSupport = false;
+        localStorage.setItem('webpSupport', 'False');
         testWebpSupport();
     }, []);
 
@@ -271,308 +273,312 @@ export default function App() {
         )
     }
 
-  const LoadingScreen = () => (
-    <div style={{
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)"
-    }}>
-        <LoadingSpinner/>
-    </div>
-  );
+    const LoadingScreen = () => (  
+        <div style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)"
+        }}>
+            <LoadingSpinner/>
+        </div>
+    );
 
   return (
     // add piwik later
     // history={piwik.connectToHistory(customHistory)}
-    <React.Suspense fallback={<LoadingScreen/>}>
-        <BrowserRouter>
-            <Header />
-            <div
-                style={{
-                backgroundImage:
-                    "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)",
-                height: "5px",
-                }}
-            ></div>
-            <link
-                href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
-                rel="stylesheet"
-            />
-            <Switch>
-                <Redirect from="/home" to="/" />
-                <Route path="/" exact={true} component={Home} />
-                <Route path="/busca" component={Search} />
-                <Route path="/perfil" component={UserPage} />
-                <Route path="/editarperfil" component={EditProfilePage} />
-                <Route path="/recurso/:recursoId" component={ResourcePage} />
-                <Route path="/termos-publicar-recurso" component={TermsPage} />
-                <Route path="/permission" component={PublicationPermissionsPage} />
-                {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
-                <Route path="/ajuda" component={HelpCenter} />
-                <Route path="/contato" component={Contact} />
-                <Route path="/termos" component={UserTerms} />
-                <Route path="/teste" component={Teste} />
-                <Route path="/sobre" component={AboutPage} />
-                <Route path="/mapa-site" component={SiteMap} />
-                <Route path="/acessibilidade" component={Accessibility} />
-                <Route path="/publicando-recurso" component={TabResoursePub} />
-                <Route path="/encontrando-recurso" component={TabResourseFind} />
-                <Route path="/participando-da-rede" component={TabNetPart} />
-                <Route path="/gerenciando-conta" component={TabManageAc} />
-                <Route path="/plataforma-mec" component={TabPlataformaMEC} />
-                <Route path="/recuperar-senha" component={PasswordRecoveryPage} />
-                <Route path="/usuario-publico/:userId" component={PublicUserPage} />
-                <Route
-                path="/editar-recurso/:recursoId"
-                component={EditLearningObjectPage}
-                />
-                <Route path="/professor" component={PageProfessor} />
-                <Route path="/upload" component={UploadPage} />
-                <Route path="/loja" component={ItemStore} />
-                <Route path="/colecao-do-usuario/:id" component={CollectionPage} />
-                <Route path="/colecao" component={FormationMaterialPage} />
-                <Route path="/topico" component={FormationMaterialPage} />
-                <Route path="/iframe-colecao" component={FormationMaterialIframe} />
-                <Route path="/material-formacao" component={MaterialPage} />
-                
-                <Route 
-                path="/admin/home" 
-                exact={true} 
-                render={() => {
-                    return <AdminTemplate inner={<Inframe/>}/>
-                }} 
-                />
-                <Route 
-                path="/admin/institutions" 
-                render={() => {
-                    return <AdminTemplate inner={<Institution />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/institution" 
-                render={() => {
-                    return <AdminTemplate inner={<InstitutionCard />}/>
-                }} 
-                />
-                <Route
-                path="/admin/institutionEdit"
-                render={() => {
-                    return <AdminTemplate inner={<InstitutionsInput />}/>
-                }}
-                />
-                <Route
-                path="/admin/InstitutionCreate"
-                render={() => {
-                    return <AdminTemplate inner={<CreateInstitution />}/>
-                }}
-                />
-                <Route 
-                path="/admin/noteVars" 
-                render={() => {
-                    return <AdminTemplate inner={<NoteVariables />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/noteVar" 
-                render={() => {
-                    return <AdminTemplate inner={<NoteVarCard />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/noteVarEdit" 
-                render={() => {
-                    return <AdminTemplate inner={<NoteVarInputs />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/languages" 
-                render={() => {
-                    return <AdminTemplate inner={<Languages />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/languageEdit" 
-                render={() => {
-                    return <AdminTemplate inner={<EditLanguage />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/languageCreate" 
-                render={() => {
-                    return <AdminTemplate inner={<CreateLanguage />}/>
-                }} 
-                />
-                <Route
-                path="/admin/CommunityQuestions"
-                render={() => {
-                    return <AdminTemplate inner={<CommunityQuestions />}/>
-                }}
-                />
-                <Route
-                path="/admin/CommunityQuestion"
-                render={() => {
-                    return <AdminTemplate inner={<CommunityCard />}/>
-                }}
-                />
-                <Route 
-                path="/admin/Collections" 
-                render={() => {
-                    return <AdminTemplate inner={<Collections />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/Collection" 
-                render={() => {
-                    return <AdminTemplate inner={<CollectionCard />}/>
-                }} 
-                />
-                <Route
-                path="/admin/EditCollection"
-                render={() => {
-                    return <AdminTemplate inner={<EditCollection />}/>
-                }}
-                />
-                <Route 
-                path="/admin/Ratings" 
-                render={() => {
-                    return <AdminTemplate inner={<Ratings />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/Rating" 
-                render={() => {
-                    return <AdminTemplate inner={<RatingCard />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/EditRating" 
-                render={() => {
-                    return <AdminTemplate inner={<EditRating />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/CreateRating" 
-                render={() => {
-                    return <AdminTemplate inner={<CreateRating />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/Questions" 
-                render={() => {
-                    return <AdminTemplate inner={<Questions />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/CreateQuestion" 
-                render={() => {
-                    return <AdminTemplate inner={<CreateQuestions />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/activities" 
-                render={() => {
-                    return <AdminTemplate inner={<Activity />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/activity" 
-                render={() => {
-                    return <AdminTemplate inner={<ActivityCard />}/>
-                }} 
-                />
-                <Route
-                path="/admin/learningObjects"
-                render={() => {
-                    return <AdminTemplate inner={<EducationalObject />}/>
-                }} 
-                />
-                <Route
-                path="/admin/learningObject"
-                render={() => {
-                    return <AdminTemplate inner={<EducationalObjectCard />}/>
-                }} 
-                />
-                <Route
-                path="/admin/learningObjectEdit"
-                render={() => {
-                    return <AdminTemplate inner={<EducationalObjectEdit />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/complaints" 
-                render={() => {
-                    return <AdminTemplate inner={<Complaints />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/complaint" 
-                render={() => {
-                    return <AdminTemplate inner={<ComplaintCard />}/>
-                }} 
-                />
-                <Route
-                path="/admin/users/teacher_requests"
-                render={() => {
-                    return <AdminTemplate inner={<AproveTeacher />}/> 
-                }} />
-                <Route 
-                path="/admin/usersList" 
-                render={() => {
-                    return <AdminTemplate inner={<UserList />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/user" 
-                render={() => {
-                    return <AdminTemplate inner={<UserCard />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/EditUser" 
-                render={() => {
-                    return <AdminTemplate inner={<EditUser />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/permissions" 
-                render={() => {
-                    return <AdminTemplate inner={<UserPermissions />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/EditPermissions" 
-                render={() => {
-                    return <AdminTemplate inner={<EditRole />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/CreateRole" 
-                render={() => {
-                    return <AdminTemplate inner={<CreateRole />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/BlockedUsers" 
-                render={() => {
-                    return <AdminTemplate inner={<BlockedUser />}/>
-                }} 
-                />
-                <Route 
-                path="/admin/sendEmail" 
-                render={() => {
-                    return <AdminTemplate inner={<SendEmail />}/>
-                }} 
-                />
-                <Route path='*' component={PageNotFound} />
-            </Switch>
-            {!hideFooter && (
-                <div>
-                <EcFooter />
-                <GNUAGPLfooter />
-                </div>
-            )}
-        </BrowserRouter>
-    </React.Suspense>
+    <>
+        {!awaitTest &&
+        <React.Suspense fallback={<LoadingScreen/>}>
+            <BrowserRouter>
+                <Header />
+                <div
+                    style={{
+                    backgroundImage:
+                        "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)",
+                    height: "5px",
+                    }}
+                ></div>
+                <link
+                    href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
+                    rel="stylesheet"
+                />
+                <Switch>
+                    <Redirect from="/home" to="/" />
+                    <Route path="/" exact={true} component={Home} />
+                    <Route path="/busca" component={Search} />
+                    <Route path="/perfil" component={UserPage} />
+                    <Route path="/editarperfil" component={EditProfilePage} />
+                    <Route path="/recurso/:recursoId" component={ResourcePage} />
+                    <Route path="/termos-publicar-recurso" component={TermsPage} />
+                    <Route path="/permission" component={PublicationPermissionsPage} />
+                    {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
+                    <Route path="/ajuda" component={HelpCenter} />
+                    <Route path="/contato" component={Contact} />
+                    <Route path="/termos" component={UserTerms} />
+                    <Route path="/teste" component={Teste} />
+                    <Route path="/sobre" component={AboutPage} />
+                    <Route path="/mapa-site" component={SiteMap} />
+                    <Route path="/acessibilidade" component={Accessibility} />
+                    <Route path="/publicando-recurso" component={TabResoursePub} />
+                    <Route path="/encontrando-recurso" component={TabResourseFind} />
+                    <Route path="/participando-da-rede" component={TabNetPart} />
+                    <Route path="/gerenciando-conta" component={TabManageAc} />
+                    <Route path="/plataforma-mec" component={TabPlataformaMEC} />
+                    <Route path="/recuperar-senha" component={PasswordRecoveryPage} />
+                    <Route path="/usuario-publico/:userId" component={PublicUserPage} />
+                    <Route
+                    path="/editar-recurso/:recursoId"
+                    component={EditLearningObjectPage}
+                    />
+                    <Route path="/professor" component={PageProfessor} />
+                    <Route path="/upload" component={UploadPage} />
+                    <Route path="/loja" component={ItemStore} />
+                    <Route path="/colecao-do-usuario/:id" component={CollectionPage} />
+                    <Route path="/colecao" component={FormationMaterialPage} />
+                    <Route path="/topico" component={FormationMaterialPage} />
+                    <Route path="/iframe-colecao" component={FormationMaterialIframe} />
+                    <Route path="/material-formacao" component={MaterialPage} />
+                    
+                    <Route 
+                    path="/admin/home" 
+                    exact={true} 
+                    render={() => {
+                        return <AdminTemplate inner={<Inframe/>}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/institutions" 
+                    render={() => {
+                        return <AdminTemplate inner={<Institution />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/institution" 
+                    render={() => {
+                        return <AdminTemplate inner={<InstitutionCard />}/>
+                    }} 
+                    />
+                    <Route
+                    path="/admin/institutionEdit"
+                    render={() => {
+                        return <AdminTemplate inner={<InstitutionsInput />}/>
+                    }}
+                    />
+                    <Route
+                    path="/admin/InstitutionCreate"
+                    render={() => {
+                        return <AdminTemplate inner={<CreateInstitution />}/>
+                    }}
+                    />
+                    <Route 
+                    path="/admin/noteVars" 
+                    render={() => {
+                        return <AdminTemplate inner={<NoteVariables />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/noteVar" 
+                    render={() => {
+                        return <AdminTemplate inner={<NoteVarCard />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/noteVarEdit" 
+                    render={() => {
+                        return <AdminTemplate inner={<NoteVarInputs />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/languages" 
+                    render={() => {
+                        return <AdminTemplate inner={<Languages />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/languageEdit" 
+                    render={() => {
+                        return <AdminTemplate inner={<EditLanguage />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/languageCreate" 
+                    render={() => {
+                        return <AdminTemplate inner={<CreateLanguage />}/>
+                    }} 
+                    />
+                    <Route
+                    path="/admin/CommunityQuestions"
+                    render={() => {
+                        return <AdminTemplate inner={<CommunityQuestions />}/>
+                    }}
+                    />
+                    <Route
+                    path="/admin/CommunityQuestion"
+                    render={() => {
+                        return <AdminTemplate inner={<CommunityCard />}/>
+                    }}
+                    />
+                    <Route 
+                    path="/admin/Collections" 
+                    render={() => {
+                        return <AdminTemplate inner={<Collections />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/Collection" 
+                    render={() => {
+                        return <AdminTemplate inner={<CollectionCard />}/>
+                    }} 
+                    />
+                    <Route
+                    path="/admin/EditCollection"
+                    render={() => {
+                        return <AdminTemplate inner={<EditCollection />}/>
+                    }}
+                    />
+                    <Route 
+                    path="/admin/Ratings" 
+                    render={() => {
+                        return <AdminTemplate inner={<Ratings />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/Rating" 
+                    render={() => {
+                        return <AdminTemplate inner={<RatingCard />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/EditRating" 
+                    render={() => {
+                        return <AdminTemplate inner={<EditRating />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/CreateRating" 
+                    render={() => {
+                        return <AdminTemplate inner={<CreateRating />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/Questions" 
+                    render={() => {
+                        return <AdminTemplate inner={<Questions />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/CreateQuestion" 
+                    render={() => {
+                        return <AdminTemplate inner={<CreateQuestions />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/activities" 
+                    render={() => {
+                        return <AdminTemplate inner={<Activity />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/activity" 
+                    render={() => {
+                        return <AdminTemplate inner={<ActivityCard />}/>
+                    }} 
+                    />
+                    <Route
+                    path="/admin/learningObjects"
+                    render={() => {
+                        return <AdminTemplate inner={<EducationalObject />}/>
+                    }} 
+                    />
+                    <Route
+                    path="/admin/learningObject"
+                    render={() => {
+                        return <AdminTemplate inner={<EducationalObjectCard />}/>
+                    }} 
+                    />
+                    <Route
+                    path="/admin/learningObjectEdit"
+                    render={() => {
+                        return <AdminTemplate inner={<EducationalObjectEdit />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/complaints" 
+                    render={() => {
+                        return <AdminTemplate inner={<Complaints />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/complaint" 
+                    render={() => {
+                        return <AdminTemplate inner={<ComplaintCard />}/>
+                    }} 
+                    />
+                    <Route
+                    path="/admin/users/teacher_requests"
+                    render={() => {
+                        return <AdminTemplate inner={<AproveTeacher />}/> 
+                    }} />
+                    <Route 
+                    path="/admin/usersList" 
+                    render={() => {
+                        return <AdminTemplate inner={<UserList />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/user" 
+                    render={() => {
+                        return <AdminTemplate inner={<UserCard />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/EditUser" 
+                    render={() => {
+                        return <AdminTemplate inner={<EditUser />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/permissions" 
+                    render={() => {
+                        return <AdminTemplate inner={<UserPermissions />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/EditPermissions" 
+                    render={() => {
+                        return <AdminTemplate inner={<EditRole />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/CreateRole" 
+                    render={() => {
+                        return <AdminTemplate inner={<CreateRole />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/BlockedUsers" 
+                    render={() => {
+                        return <AdminTemplate inner={<BlockedUser />}/>
+                    }} 
+                    />
+                    <Route 
+                    path="/admin/sendEmail" 
+                    render={() => {
+                        return <AdminTemplate inner={<SendEmail />}/>
+                    }} 
+                    />
+                    <Route path='*' component={PageNotFound} />
+                </Switch>
+                {!hideFooter && (
+                    <div>
+                    <EcFooter />
+                    <GNUAGPLfooter />
+                    </div>
+                )}
+            </BrowserRouter>
+        </React.Suspense>
+        }
+    </>
   );
 }
\ No newline at end of file
diff --git a/src/Components/AGPLFooter.js b/src/Components/AGPLFooter.js
index 112b05b1..f4633420 100644
--- a/src/Components/AGPLFooter.js
+++ b/src/Components/AGPLFooter.js
@@ -19,8 +19,7 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 import React, {Component} from 'react';
 import {Row, Col, Container} from 'react-grid-system';
 //Image Import
-import ImportImages from "ImportImages.js"
-const acessoInfo = ImportImages('acessoInfo');
+import { acessoInfo } from "ImportImages.js";
 
 const grayFooter={
   backgroundColor: "#434343",
diff --git a/src/Components/AboutCarousel.js b/src/Components/AboutCarousel.js
index edc238bf..204e5de6 100644
--- a/src/Components/AboutCarousel.js
+++ b/src/Components/AboutCarousel.js
@@ -24,12 +24,11 @@ import styled from 'styled-components';
 import "./AboutCarousel.css"
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Img1 = ImportImages('Img1');
-const Img2 = ImportImages('Img2');
-const Img3 = ImportImages('Img3');
-const Img4 = ImportImages('Img4');
-const Img5 = ImportImages('Img5');
+import { Img1 } from "ImportImages.js";
+import { Img2 } from "ImportImages.js";
+import { Img3 } from "ImportImages.js";
+import { Img4 } from "ImportImages.js";
+import { Img5 } from "ImportImages.js";
 
 const CarouselAbout = styled(Carousel)`
 
diff --git a/src/Components/AboutCarouselPartner.js b/src/Components/AboutCarouselPartner.js
index 169b5802..910d2c72 100644
--- a/src/Components/AboutCarouselPartner.js
+++ b/src/Components/AboutCarouselPartner.js
@@ -23,22 +23,21 @@ import { Carousel } from 'react-responsive-carousel';
 import './AboutCarouselPartner.css'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const LogoPortalDoProfessor = ImportImages('LogoPortalDoProfessor');
-const LogoBioe = ImportImages('LogoBioe');
-const LogoDominioPublico = ImportImages('LogoDominioPublico');
-const LogoTvEscola = ImportImages('LogoTvEscola');
-const Safer = ImportImages('Safer');
-const FundacaoLemann = ImportImages('FundacaoLemann');
-const InstitutoCrescer = ImportImages('InstitutoCrescer');
-const RedeEscola = ImportImages('RedeEscola');
-const Educagital = ImportImages('Educagital');
-const EnefAef = ImportImages('EnefAef');
-const Impa = ImportImages('Impa');
-const Futura = ImportImages('Futura');
-const Impulsiona = ImportImages('Impulsiona');
-const InstPeninsula = ImportImages('InstPeninsula');
-const Telefonica = ImportImages('Telefonica');
+import { LogoPortalDoProfessor } from "ImportImages.js";
+import { LogoBioe } from "ImportImages.js";
+import { LogoDominioPublico } from "ImportImages.js";
+import { LogoTvEscola } from "ImportImages.js";
+import { Safer } from "ImportImages.js";
+import { FundacaoLemann } from "ImportImages.js";
+import { InstitutoCrescer } from "ImportImages.js";
+import { RedeEscola } from "ImportImages.js";
+import { Educagital } from "ImportImages.js";
+import { EnefAef } from "ImportImages.js";
+import { Impa } from "ImportImages.js";
+import { Futura } from "ImportImages.js";
+import { Impulsiona } from "ImportImages.js";
+import { InstPeninsula } from "ImportImages.js";
+import { Telefonica } from "ImportImages.js";
 
 function AboutCarouselPartner(props) {
 
diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index a431f358..43402a8e 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -36,8 +36,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import { Link } from 'react-router-dom'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 const GetObjectColor = (tag) => {
     return ObjectColor[tag]
diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 06c8f1da..a80c6066 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -29,10 +29,9 @@ import ExpandedMaterial from './ExpandedMaterials';
 import {getRequest} from './HelperFunctions/getAxiosConfig.js'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const recursos = ImportImages('recursos');
-const materiais = ImportImages('materiais');
-const colecoes = ImportImages('colecoes');
+import { recursos } from "ImportImages.js";
+import { materiais } from "ImportImages.js";
+import { colecoes } from "ImportImages.js";
 
 const materials = colecoes_obj();
 
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index a0d13102..00b14174 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -34,12 +34,11 @@ import { Link } from 'react-router-dom'
 import { CircularProgress } from "@material-ui/core";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const recursos = ImportImages('recursos');
-const materiais = ImportImages('materiais');
-const colecoes = ImportImages('colecoes');
-const ColecaoVazia = ImportImages('ColecaoVazia');
-const RecursoVazio = ImportImages('RecursoVazio');
+import { recursos } from "ImportImages.js";
+import { materiais } from "ImportImages.js";
+import { colecoes } from "ImportImages.js";
+import { ColecaoVazia } from "ImportImages.js";
+import { RecursoVazio } from "ImportImages.js";
 
 function objectsPerPage() {
   var pageWidth = window.innerWidth
diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js
index fb2fbd6a..dde54bd2 100644
--- a/src/Components/Carousel.js
+++ b/src/Components/Carousel.js
@@ -38,13 +38,12 @@ import Line from "../img/termos/Line.svg";
 import Entenda from "../img/termos/Entenda.svg";
 import V from "../img/termos/V.svg";
 //Image Import
-import ImportImages from "ImportImages.js"
-const Aberto = ImportImages('Aberto');
-const Fechado = ImportImages('Fechado');
-const Arrow_O = ImportImages('Arrow_O');
-const Arrow_O_1 = ImportImages('Arrow_O_1');
-const OrthogonalLineUp = ImportImages('OrthogonalLineUp');
-const OrthogonalLineDown = ImportImages('OrthogonalLineDown');
+import { Aberto } from "ImportImages.js";
+import { Fechado } from "ImportImages.js";
+import { Arrow_O } from "ImportImages.js";
+import { Arrow_O_1 } from "ImportImages.js";
+import { OrthogonalLineUp } from "ImportImages.js";
+import { OrthogonalLineDown } from "ImportImages.js";
 
 const Slide = styled.div`
 
diff --git a/src/Components/ColaborarModal.js b/src/Components/ColaborarModal.js
index 89cce221..2b98dee6 100644
--- a/src/Components/ColaborarModal.js
+++ b/src/Components/ColaborarModal.js
@@ -8,8 +8,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import LabeledCheckbox from "../Components/Checkbox.js"
 import {Link} from 'react-router-dom'
 
-import ImportImages from "ImportImages.js" 
-const Publicar = ImportImages('Publicar');
+import { Publicar } from "ImportImages.js"; 
 
 const StyledDivContainer = styled.div`
     background-color : rgb(255,255,255);
diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js
index 4eb38624..4da688db 100644
--- a/src/Components/CollectionCard.js
+++ b/src/Components/CollectionCard.js
@@ -30,8 +30,7 @@ import Rating from '@material-ui/lab/Rating';
 import StarBorderIcon from '@material-ui/icons/StarBorder';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 var authorStyle={
   position: "absolute",
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 49ccaf19..1a3057dd 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -40,8 +40,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert from '@material-ui/lab/Alert';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 export default function CollectionCardFunction(props) {
   const { state } = useContext(Store)
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index 3f5231e7..63fd1097 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -36,8 +36,7 @@ import IconButton from '@material-ui/core/IconButton';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Comentarios = ImportImages('Comentarios');
+import { Comentarios } from "ImportImages.js";
 
 export default function CollectionCommentSection(props) {
 	const [post_snack_open, setPostSnackOpen] = useState(false);
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index d10e4308..b3e1df7a 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -33,8 +33,7 @@ import ModalExcluir from './ModalExcluirComentario.js'
 import { putRequest, deleteRequest } from './HelperFunctions/getAxiosConfig'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 export default function Comment(props) {
     console.log(props)
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 911b9c36..87ad2cba 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -23,8 +23,7 @@ import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js'
 import {putRequest} from '../HelperFunctions/getAxiosConfig'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const FollowingIcon = ImportImages('FollowingIcon');
+import { FollowingIcon } from "ImportImages.js";
 
 export default function FollowingButton (props) {
 
diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index 54a43a19..fa51ee8d 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -28,8 +28,7 @@ import FollowersCountButton from './ContactButtons/FollowersCountButton.js'
 import { Link } from 'react-router-dom';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 export default function ImgMediaCard(props) {
 
diff --git a/src/Components/EcFooter.js b/src/Components/EcFooter.js
index ed35c527..2b23f622 100644
--- a/src/Components/EcFooter.js
+++ b/src/Components/EcFooter.js
@@ -22,8 +22,7 @@ import styled from 'styled-components';
 import { HashLink as Link } from 'react-router-hash-link';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const eduConectada = ImportImages('eduConectada');
+import { eduConectada } from "ImportImages.js";
 
 const BlueFooter = styled.div`
     background-color : #00bcd4;
diff --git a/src/Components/FormationMaterialDescription.js b/src/Components/FormationMaterialDescription.js
index 6e9228bd..dc984d1f 100644
--- a/src/Components/FormationMaterialDescription.js
+++ b/src/Components/FormationMaterialDescription.js
@@ -9,9 +9,8 @@ import MoveToInboxIcon from '@material-ui/icons/MoveToInbox';
 import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
 import TranslateIcon from '@material-ui/icons/Translate';
 
-import ImportImages from "ImportImages.js" 
-const IcNute = ImportImages('IcNute');
-const IcPeninsula = ImportImages('IcPeninsula');
+import { IcNute } from "ImportImages.js"; 
+import { IcPeninsula } from "ImportImages.js"; 
 
 export default function FormationMaterialDescription(props) {
 	/* props
diff --git a/src/Components/Funcionalities.js b/src/Components/Funcionalities.js
index ad43d351..5a1750b9 100644
--- a/src/Components/Funcionalities.js
+++ b/src/Components/Funcionalities.js
@@ -20,13 +20,12 @@ import React, {Component} from 'react';
 import {Row, Col, Container} from 'react-grid-system';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const acessar = ImportImages('acessar');
-const baixar = ImportImages('baixar');
-const compartilhar = ImportImages('compartilhar');
-const relatar = ImportImages('relatar');
-const seguir = ImportImages('seguir');
-const guardar = ImportImages('guardar');
+import { acessar } from "ImportImages.js";
+import { baixar } from "ImportImages.js";
+import { compartilhar } from "ImportImages.js";
+import { relatar } from "ImportImages.js";
+import { seguir } from "ImportImages.js";
+import { guardar } from "ImportImages.js";
 
 const imgRow={
   textAlign: "center",
diff --git a/src/Components/HelpCenter/Cards/CardEncontrando.js b/src/Components/HelpCenter/Cards/CardEncontrando.js
index bc509b73..fd8aa929 100644
--- a/src/Components/HelpCenter/Cards/CardEncontrando.js
+++ b/src/Components/HelpCenter/Cards/CardEncontrando.js
@@ -22,8 +22,7 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const EncontrandoRecurso = ImportImages('EncontrandoRecurso');
+import { EncontrandoRecurso } from "ImportImages.js";
 
 export default function CardEncontrando(props) {
   return (
diff --git a/src/Components/HelpCenter/Cards/CardGerenciando.js b/src/Components/HelpCenter/Cards/CardGerenciando.js
index fbccb42f..3f4da6b0 100644
--- a/src/Components/HelpCenter/Cards/CardGerenciando.js
+++ b/src/Components/HelpCenter/Cards/CardGerenciando.js
@@ -22,8 +22,7 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const GerenciandoConta = ImportImages('GerenciandoConta');
+import { GerenciandoConta } from "ImportImages.js";
 
 export default function CardGerenciando(props) {
   return (
diff --git a/src/Components/HelpCenter/Cards/CardParticipando.js b/src/Components/HelpCenter/Cards/CardParticipando.js
index 9d953333..31f0ad95 100644
--- a/src/Components/HelpCenter/Cards/CardParticipando.js
+++ b/src/Components/HelpCenter/Cards/CardParticipando.js
@@ -22,8 +22,7 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const ParticipandoRede = ImportImages('ParticipandoRede');
+import { ParticipandoRede } from "ImportImages.js";
 
 export default function CardParticipando(props) {
   return (
diff --git a/src/Components/HelpCenter/Cards/CardPublicando.js b/src/Components/HelpCenter/Cards/CardPublicando.js
index 106fb1b8..0c6f489d 100644
--- a/src/Components/HelpCenter/Cards/CardPublicando.js
+++ b/src/Components/HelpCenter/Cards/CardPublicando.js
@@ -21,8 +21,7 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const PublicandoRecursos = ImportImages('PublicandoRecursos');
+import { PublicandoRecursos } from "ImportImages.js";
 
 export default function CardPublicando(props) {
   return (
diff --git a/src/Components/HelpCenter/TabsManageAc/Forget.js b/src/Components/HelpCenter/TabsManageAc/Forget.js
index 91d1e983..21d598d3 100644
--- a/src/Components/HelpCenter/TabsManageAc/Forget.js
+++ b/src/Components/HelpCenter/TabsManageAc/Forget.js
@@ -20,9 +20,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const LoginImg = ImportImages('LoginImg');
-const RecuperarSenhaImg = ImportImages('RecuperarSenhaImg');
+import { LoginImg } from "ImportImages.js";
+import { RecuperarSenhaImg } from "ImportImages.js";
 
 export default function Forget(props) {
   return(
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
index 95021436..204ca709 100644
--- a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
@@ -20,8 +20,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Busca = ImportImages('Busca');
+import { Busca } from "ImportImages.js";
 
 export default function HowToDo(props) {
   return(
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
index 33eea22c..7ea8e558 100644
--- a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
@@ -20,8 +20,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Filtros = ImportImages('Filtros');
+import { Filtros } from "ImportImages.js";
 
 export default function HowToFilter(props) {
   return(
diff --git a/src/Components/HelperFunctions/getDefaultThumbnail.js b/src/Components/HelperFunctions/getDefaultThumbnail.js
index 0597d491..ad621a77 100644
--- a/src/Components/HelperFunctions/getDefaultThumbnail.js
+++ b/src/Components/HelperFunctions/getDefaultThumbnail.js
@@ -1,20 +1,19 @@
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Animacao = ImportImages('Animacao');
-const AplicativoMovel = ImportImages('AplicativoMovel');
-const Apresentacao = ImportImages('Apresentacao');
-const Audio = ImportImages('Audio');
-const Empty = ImportImages('Empty');
-const Imagem = ImportImages('Imagem');
-const Infografico = ImportImages('Infografico');
-const Jogo = ImportImages('Jogo');
-const LivroDigital = ImportImages('LivroDigital');
-const Mapa = ImportImages('Mapa');
-const Outros = ImportImages('Outros');
-const SoftwareEducacional = ImportImages('SoftwareEducacional');
-const Texto = ImportImages('Texto');
-const Video = ImportImages('Video');
+import { Animacao } from "ImportImages.js";
+import { AplicativoMovel } from "ImportImages.js";
+import { Apresentacao } from "ImportImages.js";
+import { Audio } from "ImportImages.js";
+import { Empty } from "ImportImages.js";
+import { Imagem } from "ImportImages.js";
+import { Infografico } from "ImportImages.js";
+import { Jogo } from "ImportImages.js";
+import { LivroDigital } from "ImportImages.js";
+import { Mapa } from "ImportImages.js";
+import { Outros } from "ImportImages.js";
+import { SoftwareEducacional } from "ImportImages.js";
+import { Texto } from "ImportImages.js";
+import { Video } from "ImportImages.js";
 
 export const getDefaultThumbnail = (objType) => {
     switch (objType.toLowerCase()) {
diff --git a/src/Components/IframeOverlay/ResourceCard.js b/src/Components/IframeOverlay/ResourceCard.js
index 1a0a284f..e500244b 100644
--- a/src/Components/IframeOverlay/ResourceCard.js
+++ b/src/Components/IframeOverlay/ResourceCard.js
@@ -5,8 +5,7 @@ import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import WhiteAreaOfCard from './WhiteAreaOfCard.js';
 
-import ImportImages from "ImportImages.js" 
-const Imagem = ImportImages('Imagem');
+import { Imagem } from "ImportImages.js"; 
 
 export default function ResourceCard(props) {
 
diff --git a/src/Components/IframeOverlay/SmallFooter.js b/src/Components/IframeOverlay/SmallFooter.js
index 0eeeb05c..c629a25f 100644
--- a/src/Components/IframeOverlay/SmallFooter.js
+++ b/src/Components/IframeOverlay/SmallFooter.js
@@ -2,8 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const acessoInfo = ImportImages('acessoInfo');
+import { acessoInfo } from "ImportImages.js";
 
 export default function SmallFooter(props) {
 	return(
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index 189047bc..b5b920c8 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.js
@@ -29,8 +29,7 @@ import {apiDomain} from '../env.js'
 import {deleteRequest} from './HelperFunctions/getAxiosConfig'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Profile = ImportImages('Profile');
+import { Profile } from "ImportImages.js";
 
 
 const OverrideButton = styled(Button)`
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index d12f21ec..317b46b2 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -35,8 +35,7 @@ import { deleteRequest } from './HelperFunctions/getAxiosConfig'
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Profile = ImportImages('Profile');
+import { Profile } from "ImportImages.js";
 
 export default function MobileDrawerMenu(props) {
     const { state, dispatch } = useContext(Store)
diff --git a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
index 27067354..a3e6a895 100644
--- a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
@@ -26,8 +26,7 @@ import Cropper from '../Cropper.js'
 import {putRequest} from '../HelperFunctions/getAxiosConfig'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Profile = ImportImages('Profile');
+import { Profile } from "ImportImages.js";
 
 function ChooseImage (props) {
     return (
diff --git a/src/Components/PageProfessorComponents/SuccessfulRequest.js b/src/Components/PageProfessorComponents/SuccessfulRequest.js
index 55855dcb..ffd481b4 100644
--- a/src/Components/PageProfessorComponents/SuccessfulRequest.js
+++ b/src/Components/PageProfessorComponents/SuccessfulRequest.js
@@ -3,8 +3,7 @@ import styled from 'styled-components'
 import {ButtonConfirmar} from './PartOne.js'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Comentarios = ImportImages('Comentarios');
+import { Comentarios } from "ImportImages.js";
 
 export default function SuccessfulRequest (props) {
     const h4Text = 'Obrigado por fazer parte dessa rede!'
diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js
index 418bba4d..67fbd547 100644
--- a/src/Components/ResourceCard.js
+++ b/src/Components/ResourceCard.js
@@ -34,22 +34,21 @@ import Options from "./CardOptions";
 import Video from "@material-ui/icons/OndemandVideo";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Animacao = ImportImages('Animacao');
-const Apresentacao = ImportImages('Apresentacao');
-const AplicativoMovel = ImportImages('AplicativoMovel');
-const Audio = ImportImages('Audio');
-const Empty = ImportImages('Empty');
-const Imagem = ImportImages('Imagem');
-const Infografico = ImportImages('Infografico');
-const Jogo = ImportImages('Jogo');
-const LivroDigital = ImportImages('LivroDigital');
-const Mapa = ImportImages('Mapa');
-const Outros = ImportImages('Outros');
-const SoftwareEducacional = ImportImages('SoftwareEducacional');
-const Texto = ImportImages('Texto');
-const video = ImportImages('Video');
-const noAvatar = ImportImages('noAvatar');
+import { Animacao } from "ImportImages.js";
+import { Apresentacao } from "ImportImages.js";
+import { AplicativoMovel } from "ImportImages.js";
+import { Audio } from "ImportImages.js";
+import { Empty } from "ImportImages.js";
+import { Imagem } from "ImportImages.js";
+import { Infografico } from "ImportImages.js";
+import { Jogo } from "ImportImages.js";
+import { LivroDigital } from "ImportImages.js";
+import { Mapa } from "ImportImages.js";
+import { Outros } from "ImportImages.js";
+import { SoftwareEducacional } from "ImportImages.js";
+import { Texto } from "ImportImages.js";
+import { video } from "ImportImages.js";
+import { noAvatar } from "ImportImages.js";
 
 const types = [
   { label: "Animação", thumb: Animacao },
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 8e3db84b..5ccc0325 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -38,9 +38,8 @@ import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert from '@material-ui/lab/Alert';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
-const IcDefault = ImportImages('IcDefault');
+import { noAvatar } from "ImportImages.js";
+import { IcDefault } from "ImportImages.js";
 
 export default function ResourceCardFunction(props) {
     const [thumbnail, setThumbnail] = useState(null)
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 79b031f5..f561d739 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -33,9 +33,8 @@ import MuiAlert from '@material-ui/lab/Alert';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Comentarios = ImportImages('Comentarios');
-const noAvatar = ImportImages('noAvatar');
+import { Comentarios } from "ImportImages.js";
+import { noAvatar } from "ImportImages.js";
 
 function Alert(props) {
     return <MuiAlert elevation={6} variant="filled" {...props} />;
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 6cc53c59..f1e20fa4 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -39,8 +39,7 @@ import SignUpModal from './../SignUpModal'
 import MuiAlert from '@material-ui/lab/Alert';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const License = ImportImages('License');
+import { License } from "ImportImages.js";
 
 function Alert(props) {
     return <MuiAlert elevation={6} variant="filled" {...props} />;
diff --git a/src/Components/SearchSection.js b/src/Components/SearchSection.js
index 3160e3fc..2802bf5f 100644
--- a/src/Components/SearchSection.js
+++ b/src/Components/SearchSection.js
@@ -25,8 +25,7 @@ import { FaRegPlayCircle} from "react-icons/fa";
 import ModalVideoApresentacao from "./ModalVideoApresentacao.js"
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const banner = ImportImages('banner');
+import { banner } from "ImportImages.js";
 
 const bannerStyle = {
     width: "100%",
diff --git a/src/Components/SearchSectionFunction.js b/src/Components/SearchSectionFunction.js
index 29107d59..7921c9ff 100644
--- a/src/Components/SearchSectionFunction.js
+++ b/src/Components/SearchSectionFunction.js
@@ -29,9 +29,8 @@ import Grid from '@material-ui/core/Grid';
 import HomeScreenSearchBar from './HomeScreenSearchBar'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const banner = ImportImages('banner');
-const bannerMobile = ImportImages('bannerMobile');
+import { banner } from "ImportImages.js";
+import { bannerMobile } from "ImportImages.js";
 
 export default function SearchSection (props) {
     const [modalOpen, handleModal] = useState(false)
diff --git a/src/Components/TabPanels/PanelComponents/NoContent.js b/src/Components/TabPanels/PanelComponents/NoContent.js
index 7d39c089..f23eb76c 100644
--- a/src/Components/TabPanels/PanelComponents/NoContent.js
+++ b/src/Components/TabPanels/PanelComponents/NoContent.js
@@ -20,8 +20,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const defaultNoContent = ImportImages('defaultNoContent');
+import { defaultNoContent } from "ImportImages.js";
 
 export default function NoContent({text, image}) {
 
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index 28c0d7eb..b335fbd5 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -26,8 +26,7 @@ import { ButtonsAreaColecao } from './ButtonsArea'
 import LoadingSpinner from '../../LoadingSpinner.js'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const ColecaoVazia = ImportImages('ColecaoVazia');
+import { ColecaoVazia } from "ImportImages.js";
 
 export default function PanelTemplateColecao(props) {
     const RenderFollowedColCard = (card, followerBoolean) => {
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index 4b7783de..68e1de28 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -26,8 +26,7 @@ import { ButtonsAreaRecurso } from './ButtonsArea'
 import LoadingSpinner from '../../LoadingSpinner.js'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const RecursoVazio = ImportImages('RecursoVazio');
+import { RecursoVazio } from "ImportImages.js";
 
 export default function Template(props) {
 
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
index 8d7e7632..d1828064 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
@@ -23,8 +23,7 @@ import { NoContent } from './TabInicio.js'
 import CollectionCardFunction from '../../CollectionCardFunction.js'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const ColecaoVazia = ImportImages('ColecaoVazia');
+import { ColecaoVazia } from "ImportImages.js";
 
 export default function LastCols(props) {
     return (
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
index ec4b43d4..a625b345 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
@@ -23,8 +23,7 @@ import { HeaderGrid, StyledGrid } from '../StyledComponents.js'
 import { NoContent } from './TabInicio.js'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const RecursoVazio = ImportImages('RecursoVazio');
+import { RecursoVazio } from "ImportImages.js";
 
 export default function LastLearnObjs(props) {
     return (
diff --git a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
index 92495f38..7a1451b2 100644
--- a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
+++ b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
@@ -23,10 +23,9 @@ import {WhiteContainer} from '../StyledComponents.js'
 import Grid from '@material-ui/core/Grid';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const NoRede1 = ImportImages('NoRede1');
-const NoRede2 = ImportImages('NoRede2');
-const NoRede3 = ImportImages('NoRede3');
+import { NoRede1 } from "ImportImages.js";
+import { NoRede2 } from "ImportImages.js";
+import { NoRede3 } from "ImportImages.js";
 
 export default function ContainerRedeVazia (props) {
     return (
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index 145b8854..f8cf40d0 100644
--- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -31,8 +31,7 @@ import SnackbarComponent from '../../SnackbarComponent.js'
 import {deleteRequest} from '../../HelperFunctions/getAxiosConfig'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const ExcluirAvatar = ImportImages('ExcluirAvatar');
+import { ExcluirAvatar } from "ImportImages.js";
 
 function CloseModalButton (props) {
     return (
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 7ec2bbea..2816f2fd 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -29,9 +29,8 @@ import Grid from '@material-ui/core/Grid';
 import SnackBar from '../../SnackbarComponent'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Bolo = ImportImages('Bolo');
-const DefaultProfile = ImportImages('DefaultProfile');
+import { Bolo } from "ImportImages.js";
+import { noAvatar } from "ImportImages.js";
 
 export default function TabPanelAtividades(props) {
 
@@ -192,7 +191,7 @@ export default function TabPanelAtividades(props) {
                                                                         <ActivityListItem
                                                                             key={id}
                                                                             onMenuBar={false}
-                                                                            avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : DefaultProfile}
+                                                                            avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar}
                                                                             activity={notification.activity}
                                                                             actionType={notification.trackable_type}
                                                                             objectType={notification.recipient_type}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index 4767477e..427a7d5c 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -31,8 +31,7 @@ import CriarColecaoModal from '../../CriarColecaoModal.js'
 import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const ColecaoVazia = ImportImages('ColecaoVazia');
+import { ColecaoVazia } from "ImportImages.js";
 
 export default function TabPanelColecoes(props) {
   const [loading, handleLoading] = useState(true)
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index d27f575a..3857508b 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -31,8 +31,7 @@ import ModalAlterarCover from '../../ModalAlterarCover/ModalAlterarCover.js'
 import ModalAlterarAvatar from '../../ModalAlterarAvatar/ModalAlterarAvatar.js'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Profile = ImportImages('Profile');
+import { Profile } from "ImportImages.js";
 
 export default function TabPanelEditarPerfil(props) {
     // eslint-disable-next-line
diff --git a/src/Components/UserPageComponents/Avatar.js b/src/Components/UserPageComponents/Avatar.js
index f2c7f6bf..8f3c05b8 100644
--- a/src/Components/UserPageComponents/Avatar.js
+++ b/src/Components/UserPageComponents/Avatar.js
@@ -22,8 +22,7 @@ import { apiDomain} from '../../env';
 import ModalAlterarAvatar from '../ModalAlterarAvatar/ModalAlterarAvatar.js'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 export default function ProfileAvatar (props) {
     // eslint-disable-next-line
diff --git a/src/ImportImages.js b/src/ImportImages.js
index 69449a52..8b4e8c76 100644
--- a/src/ImportImages.js
+++ b/src/ImportImages.js
@@ -19,267 +19,133 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 /*
 
 //Image Import
-import ImportImages from "ImportImages.js" 
-const  = ImportImages('');
+import { image } from "ImportImages.js"; 
 
-Example:
-const baixar = ImportImages('baixar');
-
-For an example of how to convert png and jpg images to webp see convertWebp.sh in src/
+For an example of how to convert png and jpg images to webp:
+cwebp -q 80 filein.png -o filein.webp
 
 */
 
-const ImportImages = function(image) {
-    const webpSupport = window.webpSupport;
-    
-    if (webpSupport) {
-        switch (image) {
-            case 'acessoInfo': return require('./img/acesso-a-informacao.webp');
-            case 'Bolo': return require('./img/Bolo.webp');
-            case 'License': return require('./img/cc_license.webp');
-            case 'Comentarios': return require('./img/comentarios.webp');
-            case 'Profile': return require('./img/default_profile0.webp');
-            case 'noAvatar': return require('./img/default_profile.webp');
-            //case '': return require('./img/ecd.webp');
-            case 'eduConectada': return require('./img/educa-conectada.webp');
-            case 'ExcluirAvatar': return require('./img/Excluir.webp');
-            case 'FollowingIcon': return require('./img/how_to_reg-24px.webp');
-            case 'colecoes': return require('./img/ilustra_colecoes.webp');
-            case 'materiais': return require('./img/ilustra_materiais.webp');
-            case 'recursos': return require('./img/ilustra_recursos_digitais.webp');
-            case 'defaultNoContent': return require('./img/img-16.webp');
-            case 'acessar': return require('./img/nopub-Acessar-materiais.webp');
-            case 'baixar': return require('./img/nopub-Baixar.webp');
-            case 'compartilhar': return require('./img/nopub-Compartilhar.webp');
-            case 'guardar': return require('./img/nopub-Guardar.webp');
-            case 'relatar': return require('./img/nopub-Relatar.webp');
-            case 'seguir': return require('./img/nopub-Seguir.webp');
-            case 'NoRede1': return require('./img/no-rede-1.webp');
-            case 'NoRede2': return require('./img/no-rede-2.webp');
-            case 'NoRede3': return require('./img/no-rede-3.webp');
-            case 'ColecaoVazia': return require('./img/Pagina_vazia_colecao.webp');
-            case 'RecursoVazio': return require('./img/Pagina_vazia_Sem_publicar.webp');
-            case 'Publicar': return require('./img/Publicar.webp');
-            case 'banner': return require('./img/bannerBusca.webp');
-            case 'bannerMobile': return require('./img/banner-mobile.webp');
-            case 'Banner1': return require('./img/banner-sobre.webp');
-            //case '': return require('./img/girassol.webp');
-            case 'Banner3': return require('./img/ajuda/Banner3.webp');
-            case 'EncontrandoRecurso': return require('./img/ajuda/Encontrando_recursos.webp');
-            case 'GerenciandoConta': return require('./img/ajuda/Gerenciando_a_conta.webp');
-            case 'ParticipandoRede': return require('./img/ajuda/Participando_da_rede.webp');
-            case 'PublicandoRecursos': return require('./img/ajuda/Publicando_recursos.webp');
-            case 'Busca': return require('./img/ajuda/busca_img.webp');
-            case 'Filtros': return require('./img/ajuda/filtros_img.webp');
-            case 'LoginImg': return require('./img/ajuda/login_img.webp');
-            case 'RecuperarSenhaImg': return require('./img/ajuda/recuperarsenha_img.webp');
-            //case '': return require('./img/carousel/Icone_Ativado_dot1.webp');
-            //case '': return require('./img/carousel/Icone_Ativado_dot2.webp');
-            //case '': return require('./img/carousel/Icone_Ativado_dot3.webp');
-            //case '': return require('./img/carousel/Icone_Ativado_dot4.webp');
-            //case '': return require('./img/carousel/Icone_Ativado_dot5.webp');
-            //case '': return require('./img/carousel/Icone_Desativado_dot1.webp');
-            //case '': return require('./img/carousel/Icone_Desativado_dot2.webp');
-            //case '': return require('./img/carousel/Icone_Desativado_dot3.webp');
-            //case '': return require('./img/carousel/Icone_Desativado_dot4.webp');
-            //case '': return require('./img/carousel/Icone_Desativado_dot5.webp');
-            case 'Img1': return require('./img/carousel/Icone_Grande (1).webp');
-            case 'Img2': return require('./img/carousel/Icone_Grande (2).webp');
-            case 'Img3': return require('./img/carousel/Icone_Grande (3).webp');
-            case 'Img4': return require('./img/carousel/Icone_Grande (4).webp');
-            case 'Img5': return require('./img/carousel/Icone_Grande (5).webp');
-            case 'Animacao': return require('./img/laranja/ANIMACAO_SIMULACAO.webp');
-            case 'AplicativoMovel': return require('./img/laranja/APP.webp');
-            case 'Apresentacao': return require('./img/laranja/APRESENTACAO.webp');
-            case 'Audio': return require('./img/laranja/AUDIO.webp');
-            case 'Empty': return require('./img/laranja/EMPTY.webp');
-            case 'Imagem': return require('./img/laranja/IMAGEM.webp');
-            case 'Infografico': return require('./img/laranja/INFOGRAFICO.webp');
-            case 'Jogo': return require('./img/laranja/JOGO.webp');
-            case 'LivroDigital': return require('./img/laranja/LIVRO_DIGITAL.webp');
-            case 'Mapa': return require('./img/laranja/MAPA.webp');
-            case 'Outros': return require('./img/laranja/OUTROS.webp');
-            case 'SoftwareEducacional': return require('./img/laranja/SOFTWARE.webp');
-            case 'Texto': return require('./img/laranja/TEXTO.webp');
-            case 'Video': return require('./img/laranja/VIDEO.webp');
-            case 'Educagital': return require('./img/logo_parceiros/educagital.webp');
-            case 'EnefAef': return require('./img/logo_parceiros/ENEF_AEF.webp');
-            case 'FundacaoLemann': return require('./img/logo_parceiros/fundacao-lemann.webp');
-            case 'Futura': return require('./img/logo_parceiros/futura.webp');
-            //case '': return require('./img/logo_parceiros/ic_bioe.webp');
-            case 'IcDefault': return require('./img/logo_parceiros/ic_default.webp');
-            //case '': return require('./img/logo_parceiros/ic_diaadia.webp');
-            //case '': return require('./img/logo_parceiros/ic_dominiopublico.webp');
-            //case '': return require('./img/logo_parceiros/ic_escoladigital.webp');
-            case 'IcNute': return require('./img/logo_parceiros/ic_nute.webp');
-            case 'IcPeninsula': return require('./img/logo_parceiros/ic_peninsula.webp');
-            //case '': return require('./img/logo_parceiros/ic_phet.webp');
-            //case '': return require('./img/logo_parceiros/ic_portaldoprofessor.webp');
-            //case '': return require('./img/logo_parceiros/ic_tvescola.webp');
-            case 'Impa': return require('./img/logo_parceiros/impa.webp');
-            case 'Impulsiona': return require('./img/logo_parceiros/impulsiona.webp');
-            case 'InstitutoCrescer': return require('./img/logo_parceiros/instituto-crescer.webp');
-            case 'InstPeninsula': return require('./img/logo_parceiros/inst-peninsula.webp');
-            case 'LogoBioe': return require('./img/logo_parceiros/logo_bioe.webp');
-            case 'LogoDominioPublico': return require('./img/logo_parceiros/logo_dominiopublico.webp');
-            //case '': return require('./img/logo_parceiros/logo_escoladigital.webp');
-            case 'LogoPortalDoProfessor': return require('./img/logo_parceiros/logo_portaldoprofessor.webp');
-            case 'LogoTvEscola': return require('./img/logo_parceiros/logo_tvescola.webp');
-            case 'RedeEscola': return require('./img/logo_parceiros/redeescola.webp');
-            case 'Safer': return require('./img/logo_parceiros/safer.webp');
-            case 'Telefonica': return require('./img/logo_parceiros/telefonica.webp');
-            case 'Alunos': return require('./img/sobre/Alunos.webp');
-            case 'Comunidade': return require('./img/sobre/comunidade.webp');
-            case 'Gestores': return require('./img/sobre/Gestores.webp');
-            case 'Notebook': return require('./img/sobre/Imagem_Notebook.webp');
-            case 'Banner2': return require('./img/sobre/banner-sobre-2.webp');
-            case 'Professores': return require('./img/sobre/professores.webp');
-            case 'Aberto': return require('./img/termos/Aberto.webp');
-            //case '': return require('./img/termos/Arrow_aberto e fechado-1.webp');
-            //case '': return require('./img/termos/Arrow_aberto e fechado.webp');
-            //case '': return require('./img/termos/Arrow_Direito do autor.webp');
-            //case '': return require('./img/termos/Arrow_Direitos e Licença1.webp');
-            //case '': return require('./img/termos/Arrow_Direitos e Licença2.webp');
-            case 'Arrow_O_1': return require('./img/termos/Arrow_O que é a plataforma-1.webp');
-            case 'Arrow_O': return require('./img/termos/Arrow_O que é a plataforma.webp');
-            case 'BuscaTermos': return require('./img/termos/Busca.webp');
-            //case '': return require('./img/termos/Compromisso.webp');
-            case 'Fechado': return require('./img/termos/Fechado.webp');
-            //case '': return require('./img/termos/Mail.webp');
-            //case '': return require('./img/termos/Negativo.webp');
-            case 'OrthogonalLineDown': return require('./img/termos/OrthogonalLineDown.webp');
-            case 'OrthogonalLineUp': return require('./img/termos/OrthogonalLineUp.webp');
-            //case '': return require('./img/termos/Positivo.webp');
-            //case '': return require('./img/termos/Senha.webp');
-            //case '': return require('./img/termos/Usuário.webp');
-            case 'Banner': return require('./img/termos/banner.webp');
-            default: return;
-        }
-    }
-    else {
-        switch (image) {
-            case 'acessoInfo': return require('./img/acesso-a-informacao.png');
-            case 'Bolo': return require('./img/Bolo.png');
-            case 'License': return require('./img/cc_license.png');
-            case 'Comentarios': return require('./img/comentarios.png');
-            case 'Profile': return require('./img/default_profile0.png');
-            case 'noAvatar': return require('./img/default_profile.png');
-            //case '': return require('./img/ecd.png');
-            case 'eduConectada': return require('./img/educa-conectada.png');
-            case 'ExcluirAvatar': return require('./img/Excluir.png');
-            case 'FollowingIcon': return require('./img/how_to_reg-24px.png');
-            case 'colecoes': return require('./img/ilustra_colecoes.png');
-            case 'materiais': return require('./img/ilustra_materiais.png');
-            case 'recursos': return require('./img/ilustra_recursos_digitais.png');
-            case 'defaultNoContent': return require('./img/img-16.png');
-            case 'acessar': return require('./img/nopub-Acessar-materiais.png');
-            case 'baixar': return require('./img/nopub-Baixar.png');
-            case 'compartilhar': return require('./img/nopub-Compartilhar.png');
-            case 'guardar': return require('./img/nopub-Guardar.png');
-            case 'relatar': return require('./img/nopub-Relatar.png');
-            case 'seguir': return require('./img/nopub-Seguir.png');
-            case 'NoRede1': return require('./img/no-rede-1.png');
-            case 'NoRede2': return require('./img/no-rede-2.png');
-            case 'NoRede3': return require('./img/no-rede-3.png');
-            case 'ColecaoVazia': return require('./img/Pagina_vazia_colecao.png');
-            case 'RecursoVazio': return require('./img/Pagina_vazia_Sem_publicar.png');
-            case 'Publicar': return require('./img/Publicar.png');
-            case 'banner': return require('./img/bannerBusca.jpg');
-            case 'bannerMobile': return require('./img/banner-mobile.jpg');
-            case 'Banner1': return require('./img/banner-sobre.jpg');
-            //case '': return require('./img/girassol.jpg');
-            case 'Banner3': return require('./img/ajuda/Banner3.png');
-            case 'EncontrandoRecurso': return require('./img/ajuda/Encontrando_recursos.png');
-            case 'GerenciandoConta': return require('./img/ajuda/Gerenciando_a_conta.png');
-            case 'ParticipandoRede': return require('./img/ajuda/Participando_da_rede.png');
-            case 'PublicandoRecursos': return require('./img/ajuda/Publicando_recursos.png');
-            case 'Busca': return require('./img/ajuda/busca_img.jpg');
-            case 'Filtros': return require('./img/ajuda/filtros_img.jpg');
-            case 'LoginImg': return require('./img/ajuda/login_img.jpg');
-            case 'RecuperarSenhaImg': return require('./img/ajuda/recuperarsenha_img.jpg');
-            //case '': return require('./img/carousel/Icone_Ativado_dot1.png');
-            //case '': return require('./img/carousel/Icone_Ativado_dot2.png');
-            //case '': return require('./img/carousel/Icone_Ativado_dot3.png');
-            //case '': return require('./img/carousel/Icone_Ativado_dot4.png');
-            //case '': return require('./img/carousel/Icone_Ativado_dot5.png');
-            //case '': return require('./img/carousel/Icone_Desativado_dot1.png');
-            //case '': return require('./img/carousel/Icone_Desativado_dot2.png');
-            //case '': return require('./img/carousel/Icone_Desativado_dot3.png');
-            //case '': return require('./img/carousel/Icone_Desativado_dot4.png');
-            //case '': return require('./img/carousel/Icone_Desativado_dot5.png');
-            case 'Img1': return require('./img/carousel/Icone_Grande (1).png');
-            case 'Img2': return require('./img/carousel/Icone_Grande (2).png');
-            case 'Img3': return require('./img/carousel/Icone_Grande (3).png');
-            case 'Img4': return require('./img/carousel/Icone_Grande (4).png');
-            case 'Img5': return require('./img/carousel/Icone_Grande (5).png');
-            case 'Animacao': return require('./img/laranja/ANIMACAO_SIMULACAO.jpg');
-            case 'AplicativoMovel': return require('./img/laranja/APP.jpg');
-            case 'Apresentacao': return require('./img/laranja/APRESENTACAO.jpg');
-            case 'Audio': return require('./img/laranja/AUDIO.jpg');
-            case 'Empty': return require('./img/laranja/EMPTY.jpg');
-            case 'Imagem': return require('./img/laranja/IMAGEM.jpg');
-            case 'Infografico': return require('./img/laranja/INFOGRAFICO.jpg');
-            case 'Jogo': return require('./img/laranja/JOGO.jpg');
-            case 'LivroDigital': return require('./img/laranja/LIVRO_DIGITAL.jpg');
-            case 'Mapa': return require('./img/laranja/MAPA.jpg');
-            case 'Outros': return require('./img/laranja/OUTROS.jpg');
-            case 'SoftwareEducacional': return require('./img/laranja/SOFTWARE.jpg');
-            case 'Texto': return require('./img/laranja/TEXTO.jpg');
-            case 'Video': return require('./img/laranja/VIDEO.jpg');
-            case 'Educagital': return require('./img/logo_parceiros/educagital.png');
-            case 'EnefAef': return require('./img/logo_parceiros/ENEF_AEF.png');
-            case 'FundacaoLemann': return require('./img/logo_parceiros/fundacao-lemann.png');
-            case 'Futura': return require('./img/logo_parceiros/futura.png');
-            //case '': return require('./img/logo_parceiros/ic_bioe.png');
-            case 'IcDefault': return require('./img/logo_parceiros/ic_default.png');
-            //case '': return require('./img/logo_parceiros/ic_diaadia.png');
-            //case '': return require('./img/logo_parceiros/ic_dominiopublico.png');
-            //case '': return require('./img/logo_parceiros/ic_escoladigital.png');
-            case 'IcNute': return require('./img/logo_parceiros/ic_nute.png');
-            case 'IcPeninsula': return require('./img/logo_parceiros/ic_peninsula.png');
-            //case '': return require('./img/logo_parceiros/ic_phet.png');
-            //case '': return require('./img/logo_parceiros/ic_portaldoprofessor.png');
-            //case '': return require('./img/logo_parceiros/ic_tvescola.png');
-            case 'Impa': return require('./img/logo_parceiros/impa.png');
-            case 'Impulsiona': return require('./img/logo_parceiros/impulsiona.png');
-            case 'InstitutoCrescer': return require('./img/logo_parceiros/instituto-crescer.png');
-            case 'InstPeninsula': return require('./img/logo_parceiros/inst-peninsula.png');
-            case 'LogoBioe': return require('./img/logo_parceiros/logo_bioe.png');
-            case 'LogoDominioPublico': return require('./img/logo_parceiros/logo_dominiopublico.png');
-            //case '': return require('./img/logo_parceiros/logo_escoladigital.png');
-            case 'LogoPortalDoProfessor': return require('./img/logo_parceiros/logo_portaldoprofessor.png');
-            case 'LogoTvEscola': return require('./img/logo_parceiros/logo_tvescola.png');
-            case 'RedeEscola': return require('./img/logo_parceiros/redeescola.png');
-            case 'Safer': return require('./img/logo_parceiros/safer.png');
-            case 'Telefonica': return require('./img/logo_parceiros/telefonica.png');
-            case 'Alunos': return require('./img/sobre/Alunos.png');
-            case 'Comunidade': return require('./img/sobre/comunidade.png');
-            case 'Gestores': return require('./img/sobre/Gestores.png');
-            case 'Notebook': return require('./img/sobre/Imagem_Notebook.png');
-            case 'Banner2': return require('./img/sobre/banner-sobre-2.jpg');
-            case 'Professores': return require('./img/sobre/professores.jpg');
-            case 'Aberto': return require('./img/termos/Aberto.png');
-            //case '': return require('./img/termos/Arrow_aberto e fechado-1.png');
-            //case '': return require('./img/termos/Arrow_aberto e fechado.png');
-            //case '': return require('./img/termos/Arrow_Direito do autor.png');
-            //case '': return require('./img/termos/Arrow_Direitos e Licença1.png');
-            //case '': return require('./img/termos/Arrow_Direitos e Licença2.png');
-            case 'Arrow_O_1': return require('./img/termos/Arrow_O que é a plataforma-1.png');
-            case 'Arrow_O': return require('./img/termos/Arrow_O que é a plataforma.png');
-            case 'BuscaTermos': return require('./img/termos/Busca.png');
-            //case '': return require('./img/termos/Compromisso.png');
-            case 'Fechado': return require('./img/termos/Fechado.png');
-            //case '': return require('./img/termos/Mail.png');
-            //case '': return require('./img/termos/Negativo.png');
-            case 'OrthogonalLineDown': return require('./img/termos/OrthogonalLineDown.png');
-            case 'OrthogonalLineUp': return require('./img/termos/OrthogonalLineUp.png');
-            //case '': return require('./img/termos/Positivo.png');
-            //case '': return require('./img/termos/Senha.png');
-            //case '': return require('./img/termos/Usuário.png');
-            case 'Banner': return require('./img/termos/banner.jpg');
-            default: return;
-        }
-    }
-}
+const webpSupport = localStorage.getItem('webpSupport');
+
+export const acessoInfo = (webpSupport ? require('./img/acesso-a-informacao.webp') : require('./img/acesso-a-informacao.png')); 
+export const Bolo = (webpSupport ? require('./img/Bolo.webp') : require('./img/Bolo.png')); 
+export const License = (webpSupport ? require('./img/cc_license.webp') : require('./img/cc_license.png')); 
+export const Comentarios = (webpSupport ? require('./img/comentarios.webp') : require('./img/comentarios.png')); 
+export const Profile = (webpSupport ? require('./img/default_profile0.webp') : require('./img/default_profile0.png')); 
+export const noAvatar = (webpSupport ? require('./img/default_profile.webp') : require('./img/default_profile.png')); 
+//export const  = (webpSupport ? require('./img/ecd.webp') : require('./img/ecd.png')); 
+export const eduConectada = (webpSupport ? require('./img/educa-conectada.webp') : require('./img/educa-conectada.png')); 
+export const ExcluirAvatar = (webpSupport ? require('./img/Excluir.webp') : require('./img/Excluir.png')); 
+export const FollowingIcon = (webpSupport ? require('./img/how_to_reg-24px.webp') : require('./img/how_to_reg-24px.png')); 
+export const colecoes = (webpSupport ? require('./img/ilustra_colecoes.webp') : require('./img/ilustra_colecoes.png')); 
+export const materiais = (webpSupport ? require('./img/ilustra_materiais.webp') : require('./img/ilustra_materiais.png')); 
+export const recursos = (webpSupport ? require('./img/ilustra_recursos_digitais.webp') : require('./img/ilustra_recursos_digitais.png')); 
+export const defaultNoContent = (webpSupport ? require('./img/img-16.webp') : require('./img/img-16.png')); 
+export const acessar = (webpSupport ? require('./img/nopub-Acessar-materiais.webp') : require('./img/nopub-Acessar-materiais.png')); 
+export const baixar = (webpSupport ? require('./img/nopub-Baixar.webp') : require('./img/nopub-Baixar.png')); 
+export const compartilhar = (webpSupport ? require('./img/nopub-Compartilhar.webp') : require('./img/nopub-Compartilhar.png')); 
+export const guardar = (webpSupport ? require('./img/nopub-Guardar.webp') : require('./img/nopub-Guardar.png')); 
+export const relatar = (webpSupport ? require('./img/nopub-Relatar.webp') : require('./img/nopub-Relatar.png')); 
+export const seguir = (webpSupport ? require('./img/nopub-Seguir.webp') : require('./img/nopub-Seguir.png')); 
+export const NoRede1 = (webpSupport ? require('./img/no-rede-1.webp') : require('./img/no-rede-1.png')); 
+export const NoRede2 = (webpSupport ? require('./img/no-rede-2.webp') : require('./img/no-rede-2.png')); 
+export const NoRede3 = (webpSupport ? require('./img/no-rede-3.webp') : require('./img/no-rede-3.png')); 
+export const ColecaoVazia = (webpSupport ? require('./img/Pagina_vazia_colecao.webp') : require('./img/Pagina_vazia_colecao.png')); 
+export const RecursoVazio = (webpSupport ? require('./img/Pagina_vazia_Sem_publicar.webp') : require('./img/Pagina_vazia_Sem_publicar.png')); 
+export const Publicar = (webpSupport ? require('./img/Publicar.webp') : require('./img/Publicar.png')); 
+export const banner = (webpSupport ? require('./img/bannerBusca.webp') : require('./img/bannerBusca.jpg')); 
+export const bannerMobile = (webpSupport ? require('./img/banner-mobile.webp') : require('./img/banner-mobile.jpg')); 
+export const Banner1 = (webpSupport ? require('./img/banner-sobre.webp') : require('./img/banner-sobre.jpg')); 
+//export const  = (webpSupport ? require('./img/girassol.webp') : require('./img/girassol.jpg')); 
+export const Banner3 = (webpSupport ? require('./img/ajuda/Banner3.webp') : require('./img/ajuda/Banner3.png')); 
+export const EncontrandoRecurso = (webpSupport ? require('./img/ajuda/Encontrando_recursos.webp') : require('./img/ajuda/Encontrando_recursos.png')); 
+export const GerenciandoConta = (webpSupport ? require('./img/ajuda/Gerenciando_a_conta.webp') : require('./img/ajuda/Gerenciando_a_conta.png')); 
+export const ParticipandoRede = (webpSupport ? require('./img/ajuda/Participando_da_rede.webp') : require('./img/ajuda/Participando_da_rede.png')); 
+export const PublicandoRecursos = (webpSupport ? require('./img/ajuda/Publicando_recursos.webp') : require('./img/ajuda/Publicando_recursos.png')); 
+export const Busca = (webpSupport ? require('./img/ajuda/busca_img.webp') : require('./img/ajuda/busca_img.jpg')); 
+export const Filtros = (webpSupport ? require('./img/ajuda/filtros_img.webp') : require('./img/ajuda/filtros_img.jpg')); 
+export const LoginImg = (webpSupport ? require('./img/ajuda/login_img.webp') : require('./img/ajuda/login_img.jpg')); 
+export const RecuperarSenhaImg = (webpSupport ? require('./img/ajuda/recuperarsenha_img.webp') : require('./img/ajuda/recuperarsenha_img.jpg')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Ativado_dot1.webp') : require('./img/carousel/Icone_Ativado_dot1.png')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Ativado_dot2.webp') : require('./img/carousel/Icone_Ativado_dot2.png')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Ativado_dot3.webp') : require('./img/carousel/Icone_Ativado_dot3.png')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Ativado_dot4.webp') : require('./img/carousel/Icone_Ativado_dot4.png')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Ativado_dot5.webp') : require('./img/carousel/Icone_Ativado_dot5.png')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Desativado_dot1.webp') : require('./img/carousel/Icone_Desativado_dot1.png')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Desativado_dot2.webp') : require('./img/carousel/Icone_Desativado_dot2.png')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Desativado_dot3.webp') : require('./img/carousel/Icone_Desativado_dot3.png')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Desativado_dot4.webp') : require('./img/carousel/Icone_Desativado_dot4.png')); 
+//export const  = (webpSupport ? require('./img/carousel/Icone_Desativado_dot5.webp') : require('./img/carousel/Icone_Desativado_dot5.png')); 
+export const Img1 = (webpSupport ? require('./img/carousel/Icone_Grande (1).webp') : require('./img/carousel/Icone_Grande (1).png')); 
+export const Img2 = (webpSupport ? require('./img/carousel/Icone_Grande (2).webp') : require('./img/carousel/Icone_Grande (2).png')); 
+export const Img3 = (webpSupport ? require('./img/carousel/Icone_Grande (3).webp') : require('./img/carousel/Icone_Grande (3).png')); 
+export const Img4 = (webpSupport ? require('./img/carousel/Icone_Grande (4).webp') : require('./img/carousel/Icone_Grande (4).png')); 
+export const Img5 = (webpSupport ? require('./img/carousel/Icone_Grande (5).webp') : require('./img/carousel/Icone_Grande (5).png')); 
+export const Animacao = (webpSupport ? require('./img/laranja/ANIMACAO_SIMULACAO.webp') : require('./img/laranja/ANIMACAO_SIMULACAO.jpg')); 
+export const AplicativoMovel = (webpSupport ? require('./img/laranja/APP.webp') : require('./img/laranja/APP.jpg')); 
+export const Apresentacao = (webpSupport ? require('./img/laranja/APRESENTACAO.webp') : require('./img/laranja/APRESENTACAO.jpg')); 
+export const Audio = (webpSupport ? require('./img/laranja/AUDIO.webp') : require('./img/laranja/AUDIO.jpg')); 
+export const Empty = (webpSupport ? require('./img/laranja/EMPTY.webp') : require('./img/laranja/EMPTY.jpg')); 
+export const Imagem = (webpSupport ? require('./img/laranja/IMAGEM.webp') : require('./img/laranja/IMAGEM.jpg')); 
+export const Infografico = (webpSupport ? require('./img/laranja/INFOGRAFICO.webp') : require('./img/laranja/INFOGRAFICO.jpg')); 
+export const Jogo = (webpSupport ? require('./img/laranja/JOGO.webp') : require('./img/laranja/JOGO.jpg')); 
+export const LivroDigital = (webpSupport ? require('./img/laranja/LIVRO_DIGITAL.webp') : require('./img/laranja/LIVRO_DIGITAL.jpg')); 
+export const Mapa = (webpSupport ? require('./img/laranja/MAPA.webp') : require('./img/laranja/MAPA.jpg')); 
+export const Outros = (webpSupport ? require('./img/laranja/OUTROS.webp') : require('./img/laranja/OUTROS.jpg')); 
+export const SoftwareEducacional = (webpSupport ? require('./img/laranja/SOFTWARE.webp') : require('./img/laranja/SOFTWARE.jpg')); 
+export const Texto = (webpSupport ? require('./img/laranja/TEXTO.webp') : require('./img/laranja/TEXTO.jpg')); 
+export const Video = (webpSupport ? require('./img/laranja/VIDEO.webp') : require('./img/laranja/VIDEO.jpg')); 
+export const Educagital = (webpSupport ? require('./img/logo_parceiros/educagital.webp') : require('./img/logo_parceiros/educagital.png')); 
+export const EnefAef = (webpSupport ? require('./img/logo_parceiros/ENEF_AEF.webp') : require('./img/logo_parceiros/ENEF_AEF.png')); 
+export const FundacaoLemann = (webpSupport ? require('./img/logo_parceiros/fundacao-lemann.webp') : require('./img/logo_parceiros/fundacao-lemann.png')); 
+export const Futura = (webpSupport ? require('./img/logo_parceiros/futura.webp') : require('./img/logo_parceiros/futura.png')); 
+//export const  = (webpSupport ? require('./img/logo_parceiros/ic_bioe.webp') : require('./img/logo_parceiros/ic_bioe.png')); 
+export const IcDefault = (webpSupport ? require('./img/logo_parceiros/ic_default.webp') : require('./img/logo_parceiros/ic_default.png')); 
+//export const  = (webpSupport ? require('./img/logo_parceiros/ic_diaadia.webp') : require('./img/logo_parceiros/ic_diaadia.png')); 
+//export const  = (webpSupport ? require('./img/logo_parceiros/ic_dominiopublico.webp') : require('./img/logo_parceiros/ic_dominiopublico.png')); 
+//export const  = (webpSupport ? require('./img/logo_parceiros/ic_escoladigital.webp') : require('./img/logo_parceiros/ic_escoladigital.png')); 
+export const IcNute = (webpSupport ? require('./img/logo_parceiros/ic_nute.webp') : require('./img/logo_parceiros/ic_nute.png')); 
+export const IcPeninsula = (webpSupport ? require('./img/logo_parceiros/ic_peninsula.webp') : require('./img/logo_parceiros/ic_peninsula.png')); 
+//export const  = (webpSupport ? require('./img/logo_parceiros/ic_phet.webp') : require('./img/logo_parceiros/ic_phet.png')); 
+//export const  = (webpSupport ? require('./img/logo_parceiros/ic_portaldoprofessor.webp') : require('./img/logo_parceiros/ic_portaldoprofessor.png')); 
+//export const  = (webpSupport ? require('./img/logo_parceiros/ic_tvescola.webp') : require('./img/logo_parceiros/ic_tvescola.png')); 
+export const Impa = (webpSupport ? require('./img/logo_parceiros/impa.webp') : require('./img/logo_parceiros/impa.png')); 
+export const Impulsiona = (webpSupport ? require('./img/logo_parceiros/impulsiona.webp') : require('./img/logo_parceiros/impulsiona.png')); 
+export const InstitutoCrescer = (webpSupport ? require('./img/logo_parceiros/instituto-crescer.webp') : require('./img/logo_parceiros/instituto-crescer.png')); 
+export const InstPeninsula = (webpSupport ? require('./img/logo_parceiros/inst-peninsula.webp') : require('./img/logo_parceiros/inst-peninsula.png')); 
+export const LogoBioe = (webpSupport ? require('./img/logo_parceiros/logo_bioe.webp') : require('./img/logo_parceiros/logo_bioe.png')); 
+export const LogoDominioPublico = (webpSupport ? require('./img/logo_parceiros/logo_dominiopublico.webp') : require('./img/logo_parceiros/logo_dominiopublico.png')); 
+//export const  = (webpSupport ? require('./img/logo_parceiros/logo_escoladigital.webp') : require('./img/logo_parceiros/logo_escoladigital.png')); 
+export const LogoPortalDoProfessor = (webpSupport ? require('./img/logo_parceiros/logo_portaldoprofessor.webp') : require('./img/logo_parceiros/logo_portaldoprofessor.png')); 
+export const LogoTvEscola = (webpSupport ? require('./img/logo_parceiros/logo_tvescola.webp') : require('./img/logo_parceiros/logo_tvescola.png')); 
+export const RedeEscola = (webpSupport ? require('./img/logo_parceiros/redeescola.webp') : require('./img/logo_parceiros/redeescola.png')); 
+export const Safer = (webpSupport ? require('./img/logo_parceiros/safer.webp') : require('./img/logo_parceiros/safer.png')); 
+export const Telefonica = (webpSupport ? require('./img/logo_parceiros/telefonica.webp') : require('./img/logo_parceiros/telefonica.png')); 
+export const Alunos = (webpSupport ? require('./img/sobre/Alunos.webp') : require('./img/sobre/Alunos.png')); 
+export const Comunidade = (webpSupport ? require('./img/sobre/comunidade.webp') : require('./img/sobre/comunidade.png')); 
+export const Gestores = (webpSupport ? require('./img/sobre/Gestores.webp') : require('./img/sobre/Gestores.png')); 
+export const Notebook = (webpSupport ? require('./img/sobre/Imagem_Notebook.webp') : require('./img/sobre/Imagem_Notebook.png')); 
+export const Banner2 = (webpSupport ? require('./img/sobre/banner-sobre-2.webp') : require('./img/sobre/banner-sobre-2.jpg')); 
+export const Professores = (webpSupport ? require('./img/sobre/professores.webp') : require('./img/sobre/professores.jpg')); 
+export const Aberto = (webpSupport ? require('./img/termos/Aberto.webp') : require('./img/termos/Aberto.png')); 
+//export const  = (webpSupport ? require('./img/termos/Arrow_aberto e fechado-1.webp') : require('./img/termos/Arrow_aberto e fechado-1.png')); 
+//export const  = (webpSupport ? require('./img/termos/Arrow_aberto e fechado.webp') : require('./img/termos/Arrow_aberto e fechado.png')); 
+//export const  = (webpSupport ? require('./img/termos/Arrow_Direito do autor.webp') : require('./img/termos/Arrow_Direito do autor.png')); 
+//export const  = (webpSupport ? require('./img/termos/Arrow_Direitos e Licença1.webp') : require('./img/termos/Arrow_Direitos e Licença1.png')); 
+//export const  = (webpSupport ? require('./img/termos/Arrow_Direitos e Licença2.webp') : require('./img/termos/Arrow_Direitos e Licença2.png')); 
+export const Arrow_O_1 = (webpSupport ? require('./img/termos/Arrow_O que é a plataforma-1.webp') : require('./img/termos/Arrow_O que é a plataforma-1.png')); 
+export const Arrow_O = (webpSupport ? require('./img/termos/Arrow_O que é a plataforma.webp') : require('./img/termos/Arrow_O que é a plataforma.png')); 
+export const BuscaTermos = (webpSupport ? require('./img/termos/Busca.webp') : require('./img/termos/Busca.png')); 
+//export const  = (webpSupport ? require('./img/termos/Compromisso.webp') : require('./img/termos/Compromisso.png')); 
+export const Fechado = (webpSupport ? require('./img/termos/Fechado.webp') : require('./img/termos/Fechado.png')); 
+//export const  = (webpSupport ? require('./img/termos/Mail.webp') : require('./img/termos/Mail.png')); 
+//export const  = (webpSupport ? require('./img/termos/Negativo.webp') : require('./img/termos/Negativo.png')); 
+export const OrthogonalLineDown = (webpSupport ? require('./img/termos/OrthogonalLineDown.webp') : require('./img/termos/OrthogonalLineDown.png')); 
+export const OrthogonalLineUp = (webpSupport ? require('./img/termos/OrthogonalLineUp.webp') : require('./img/termos/OrthogonalLineUp.png')); 
+//export const  = (webpSupport ? require('./img/termos/Positivo.webp') : require('./img/termos/Positivo.png')); 
+//export const  = (webpSupport ? require('./img/termos/Senha.webp') : require('./img/termos/Senha.png')); 
+//export const  = (webpSupport ? require('./img/termos/Usuário.webp') : require('./img/termos/Usuário.png')); 
+export const Banner = (webpSupport ? require('./img/termos/banner.webp') : require('./img/termos/banner.jpg')); 
 
-export default ImportImages;
\ No newline at end of file
+export default noAvatar;
\ No newline at end of file
diff --git a/src/Pages/AboutPage.js b/src/Pages/AboutPage.js
index b1cfcd32..ab1b6bbb 100644
--- a/src/Pages/AboutPage.js
+++ b/src/Pages/AboutPage.js
@@ -28,13 +28,12 @@ import AboutCarouselPartner from '../Components/AboutCarouselPartner';
 import Agpl from "../img/sobre/agpl.svg";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Banner2 = ImportImages('Banner2');
-const Notebook = ImportImages('Notebook');
-const Professores = ImportImages('Professores');
-const Alunos = ImportImages('Alunos');
-const Gestores = ImportImages('Gestores');
-const Comunidade = ImportImages('Comunidade');
+import { Banner2 } from "ImportImages.js";
+import { Notebook } from "ImportImages.js";
+import { Professores } from "ImportImages.js";
+import { Alunos } from "ImportImages.js";
+import { Gestores } from "ImportImages.js";
+import { Comunidade } from "ImportImages.js";
 
 
 const Secao1 = styled.div`
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index 1c637e47..b89e00c2 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -34,8 +34,7 @@ import { getRequest } from '../Components/HelperFunctions/getAxiosConfig.js';
 import { apiDomain } from '../env.js';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 export default function CollectionPage(props) {
 	const { state } = useContext(Store);
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
index 97f3f59a..211c9d80 100644
--- a/src/Pages/Contact.js
+++ b/src/Pages/Contact.js
@@ -21,8 +21,7 @@ import styled from "styled-components";
 import InputFormulario from "../Components/ContactForm.js";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Banner1 = ImportImages('Banner1');
+import { Banner1 } from "ImportImages.js";
 
 const Secao1 = styled.div`
   width: 100%;
diff --git a/src/Pages/HelpCenter.js b/src/Pages/HelpCenter.js
index bab1b82b..162dec27 100644
--- a/src/Pages/HelpCenter.js
+++ b/src/Pages/HelpCenter.js
@@ -27,8 +27,7 @@ import CardParticipando from '../Components/HelpCenter/Cards/CardParticipando';
 import CardGerenciando from '../Components/HelpCenter/Cards/CardGerenciando';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const Banner3 = ImportImages('Banner3');
+import { Banner3 } from "ImportImages.js";
 
 
 function HelpCenter(props) {
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index b521c7f6..11c0ba13 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -41,8 +41,7 @@ import Button from '@material-ui/core/Button'
 import { Link } from 'react-router-dom'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 function RenderFollowContainer(props) {
   const { state } = useContext(Store)
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 8874e449..184de123 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -39,8 +39,7 @@ import Button from '@material-ui/core/Button';
 import { Link } from 'react-router-dom';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const noAvatar = ImportImages('noAvatar');
+import { noAvatar } from "ImportImages.js";
 
 function urlVerify(url) {
   return url
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index ab564c3e..4f8850e5 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -36,9 +36,8 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import { getRequest } from '../Components/HelperFunctions/getAxiosConfig'
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const ColecaoVazia = ImportImages('ColecaoVazia');
-const RecursoVazio = ImportImages('RecursoVazio');
+import { ColecaoVazia } from "ImportImages.js";
+import { RecursoVazio } from "ImportImages.js";
 
 let order = "review_average";
 let currFilter = "";
diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js
index 730279ab..6a2edde4 100644
--- a/src/Pages/TabsHelp/TabManageAc.js
+++ b/src/Pages/TabsHelp/TabManageAc.js
@@ -33,8 +33,7 @@ import CardPublicando from "../../Components/HelpCenter/Cards/CardPublicando";
 import { Link } from "react-router-dom";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const GerenciandoConta = ImportImages('GerenciandoConta');
+import { GerenciandoConta } from "ImportImages.js";
 
 export default function TabManageAc(props) {
   const tabs = [
diff --git a/src/Pages/TabsHelp/TabNetPart.js b/src/Pages/TabsHelp/TabNetPart.js
index f713b6b5..13c13d8c 100644
--- a/src/Pages/TabsHelp/TabNetPart.js
+++ b/src/Pages/TabsHelp/TabNetPart.js
@@ -30,8 +30,7 @@ import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
 import { Link } from 'react-router-dom';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const ParticipandoRede = ImportImages('ParticipandoRede');
+import { ParticipandoRede } from "ImportImages.js";
 
 export default function TabNetPart(props) {
   const tabs = [
diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js
index e12ff397..51765ca0 100644
--- a/src/Pages/TabsHelp/TabResourseFind.js
+++ b/src/Pages/TabsHelp/TabResourseFind.js
@@ -31,8 +31,7 @@ import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
 import { Link } from 'react-router-dom';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const EncontrandoRecurso = ImportImages('EncontrandoRecurso');
+import { EncontrandoRecurso } from "ImportImages.js";
 
 export default function TabResourseFind(props) {
   const tabs = [
diff --git a/src/Pages/TabsHelp/TabResoursePub.js b/src/Pages/TabsHelp/TabResoursePub.js
index 92940308..7ff00fa4 100644
--- a/src/Pages/TabsHelp/TabResoursePub.js
+++ b/src/Pages/TabsHelp/TabResoursePub.js
@@ -31,8 +31,7 @@ import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
 import { Link } from 'react-router-dom';
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const PublicandoRecursos = ImportImages('PublicandoRecursos');
+import { PublicandoRecursos } from "ImportImages.js";
 
 export default function TabResoursePub(props) {
 
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 1006b3be..d1df2973 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -27,11 +27,10 @@ import CadeadoFechado from "../img/termos/FechadoG.svg";
 import Linha from "../img/termos/linha.svg";
 
 //Image Import
-import ImportImages from "ImportImages.js"
-const BuscaTermos = ImportImages('BuscaTermos');
-const Banner = ImportImages('Banner');
-const Aberto = ImportImages('Aberto');
-const Fechado = ImportImages('Fechado');
+import { BuscaTermos } from "ImportImages.js";
+import { Banner } from "ImportImages.js";
+import { Aberto } from "ImportImages.js";
+import { Fechado } from "ImportImages.js";
 
 const BannerStyle = styled.div`
   width: 100%;
diff --git a/src/convertWebp.sh b/src/convertWebp.sh
deleted file mode 100755
index 05b54ea0..00000000
--- a/src/convertWebp.sh
+++ /dev/null
@@ -1,3 +0,0 @@
-#!/bin/bash
-
-#cwebp -q 80 filein.png -o filein.webp
diff --git a/src/env.js b/src/env.js
index 95815e96..7284c427 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,7 +17,7 @@ You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
 
-var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
+var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
   apiVersion = 'v1',
   apiUrl = apiDomain + '/' + apiVersion;
 
-- 
GitLab