diff --git a/package-lock.json b/package-lock.json
index 72d8e3214f571d27ea30692c9adc92dbeaaf993e..8966c047e184beb875625ece3e4010da442722d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,19 +5,19 @@
   "requires": true,
   "dependencies": {
     "@babel/code-frame": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
-      "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+      "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
       "requires": {
-        "@babel/highlight": "^7.8.3"
+        "@babel/highlight": "^7.10.1"
       }
     },
     "@babel/compat-data": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.9.0.tgz",
-      "integrity": "sha512-zeFQrr+284Ekvd9e7KAX954LkapWiOmQtsfHirhxqfdlX6MEC32iRE+pqUGlYIBchdevaCwvzxWGSy/YBNI85g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.10.1.tgz",
+      "integrity": "sha512-CHvCj7So7iCkGKPRFUfryXIkU2gSBw7VSZFYLsqVhrS47269VK2Hfi9S/YcublPMW8k1u2bQBlbDruoQEm4fgw==",
       "requires": {
-        "browserslist": "^4.9.1",
+        "browserslist": "^4.12.0",
         "invariant": "^2.2.4",
         "semver": "^5.5.0"
       }
@@ -59,281 +59,281 @@
       }
     },
     "@babel/generator": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.5.tgz",
-      "integrity": "sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+      "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
       "requires": {
-        "@babel/types": "^7.9.5",
+        "@babel/types": "^7.10.2",
         "jsesc": "^2.5.1",
         "lodash": "^4.17.13",
         "source-map": "^0.5.0"
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz",
-      "integrity": "sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.1.tgz",
+      "integrity": "sha512-ewp3rvJEwLaHgyWGe4wQssC2vjks3E80WiUe2BpMb0KhreTjMROCbxXcEovTrbeGVdQct5VjQfrv9EgC+xMzCw==",
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz",
-      "integrity": "sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.1.tgz",
+      "integrity": "sha512-cQpVq48EkYxUU0xozpGCLla3wlkdRRqLWu1ksFMXA9CM5KQmyyRpSEsYXbao7JUkOw/tAaYKCaYyZq6HOFYtyw==",
       "requires": {
-        "@babel/helper-explode-assignable-expression": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/helper-explode-assignable-expression": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-builder-react-jsx": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.9.0.tgz",
-      "integrity": "sha512-weiIo4gaoGgnhff54GQ3P5wsUQmnSwpkvU0r6ZHq6TzoSzKy4JxHEgnxNytaKbov2a9z/CVNyzliuCOUPEX3Jw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.1.tgz",
+      "integrity": "sha512-KXzzpyWhXgzjXIlJU1ZjIXzUPdej1suE6vzqgImZ/cpAsR/CC8gUcX4EWRmDfWz/cs6HOCPMBIJ3nKoXt3BFuw==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/types": "^7.9.0"
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-builder-react-jsx-experimental": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.9.5.tgz",
-      "integrity": "sha512-HAagjAC93tk748jcXpZ7oYRZH485RCq/+yEv9SIWezHRPv9moZArTnkUNciUNzvwHUABmiWKlcxJvMcu59UwTg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.1.tgz",
+      "integrity": "sha512-irQJ8kpQUV3JasXPSFQ+LCCtJSc5ceZrPFVj6TElR6XCHssi3jV8ch3odIrNtjJFRZZVbrOEfJMI79TPU/h1pQ==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/types": "^7.9.5"
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-module-imports": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.8.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.7.tgz",
-      "integrity": "sha512-4mWm8DCK2LugIS+p1yArqvG1Pf162upsIsjE7cNBjez+NjliQpVhj20obE520nao0o14DaTnFJv+Fw5a0JpoUw==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.2.tgz",
+      "integrity": "sha512-hYgOhF4To2UTB4LTaZepN/4Pl9LD4gfbJx8A34mqoluT8TLbof1mhUlYuNWTEebONa8+UlCC4X0TEXu7AOUyGA==",
       "requires": {
-        "@babel/compat-data": "^7.8.6",
-        "browserslist": "^4.9.1",
+        "@babel/compat-data": "^7.10.1",
+        "browserslist": "^4.12.0",
         "invariant": "^2.2.4",
         "levenary": "^1.1.1",
         "semver": "^5.5.0"
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.9.5.tgz",
-      "integrity": "sha512-IipaxGaQmW4TfWoXdqjY0TzoXQ1HRS0kPpEgvjosb3u7Uedcq297xFqDQiCcQtRRwzIMif+N1MLVI8C5a4/PAA==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.2.tgz",
+      "integrity": "sha512-5C/QhkGFh1vqcziq1vAL6SI9ymzUp8BCYjFpvYVhWP4DlATIb3u5q3iUd35mvlyGs8fO7hckkW7i0tmH+5+bvQ==",
       "requires": {
-        "@babel/helper-function-name": "^7.9.5",
-        "@babel/helper-member-expression-to-functions": "^7.8.3",
-        "@babel/helper-optimise-call-expression": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.8.6",
-        "@babel/helper-split-export-declaration": "^7.8.3"
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/helper-member-expression-to-functions": "^7.10.1",
+        "@babel/helper-optimise-call-expression": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-replace-supers": "^7.10.1",
+        "@babel/helper-split-export-declaration": "^7.10.1"
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.8.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz",
-      "integrity": "sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.1.tgz",
+      "integrity": "sha512-Rx4rHS0pVuJn5pJOqaqcZR4XSgeF9G/pO/79t+4r7380tXFJdzImFnxMU19f83wjSrmKHq6myrM10pFHTGzkUA==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/helper-regex": "^7.8.3",
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-regex": "^7.10.1",
         "regexpu-core": "^4.7.0"
       }
     },
     "@babel/helper-define-map": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.8.3.tgz",
-      "integrity": "sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.10.1.tgz",
+      "integrity": "sha512-+5odWpX+OnvkD0Zmq7panrMuAGQBu6aPUgvMzuMGo4R+jUOvealEj2hiqI6WhxgKrTpFoFj0+VdsuA8KDxHBDg==",
       "requires": {
-        "@babel/helper-function-name": "^7.8.3",
-        "@babel/types": "^7.8.3",
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/types": "^7.10.1",
         "lodash": "^4.17.13"
       }
     },
     "@babel/helper-explode-assignable-expression": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz",
-      "integrity": "sha512-N+8eW86/Kj147bO9G2uclsg5pwfs/fqqY5rwgIL7eTBklgXjcOJ3btzS5iM6AitJcftnY7pm2lGsrJVYLGjzIw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.1.tgz",
+      "integrity": "sha512-vcUJ3cDjLjvkKzt6rHrl767FeE7pMEYfPanq5L16GRtrXIoznc0HykNW2aEYkcnP76P0isoqJ34dDMFZwzEpJg==",
       "requires": {
-        "@babel/traverse": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-function-name": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz",
-      "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+      "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
       "requires": {
-        "@babel/helper-get-function-arity": "^7.8.3",
-        "@babel/template": "^7.8.3",
-        "@babel/types": "^7.9.5"
+        "@babel/helper-get-function-arity": "^7.10.1",
+        "@babel/template": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-get-function-arity": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz",
-      "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+      "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz",
-      "integrity": "sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.1.tgz",
+      "integrity": "sha512-vLm5srkU8rI6X3+aQ1rQJyfjvCBLXP8cAGeuw04zeAM2ItKb1e7pmVmLyHb4sDaAYnLL13RHOZPLEtcGZ5xvjg==",
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz",
-      "integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz",
+      "integrity": "sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==",
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
-      "integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz",
+      "integrity": "sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==",
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz",
-      "integrity": "sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.8.6",
-        "@babel/helper-simple-access": "^7.8.3",
-        "@babel/helper-split-export-declaration": "^7.8.3",
-        "@babel/template": "^7.8.6",
-        "@babel/types": "^7.9.0",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz",
+      "integrity": "sha512-RLHRCAzyJe7Q7sF4oy2cB+kRnU4wDZY/H2xJFGof+M+SJEGhZsb+GFj5j1AD8NiSaVBJ+Pf0/WObiXu/zxWpFg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.10.1",
+        "@babel/helper-replace-supers": "^7.10.1",
+        "@babel/helper-simple-access": "^7.10.1",
+        "@babel/helper-split-export-declaration": "^7.10.1",
+        "@babel/template": "^7.10.1",
+        "@babel/types": "^7.10.1",
         "lodash": "^4.17.13"
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz",
-      "integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz",
+      "integrity": "sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==",
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz",
-      "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ=="
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz",
+      "integrity": "sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA=="
     },
     "@babel/helper-regex": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.8.3.tgz",
-      "integrity": "sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.10.1.tgz",
+      "integrity": "sha512-7isHr19RsIJWWLLFn21ubFt223PjQyg1HY7CZEMRr820HttHPpVvrsIN3bUOo44DEfFV4kBXO7Abbn9KTUZV7g==",
       "requires": {
         "lodash": "^4.17.13"
       }
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz",
-      "integrity": "sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.1.tgz",
+      "integrity": "sha512-RfX1P8HqsfgmJ6CwaXGKMAqbYdlleqglvVtht0HGPMSsy2V6MqLlOJVF/0Qyb/m2ZCi2z3q3+s6Pv7R/dQuZ6A==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/helper-wrap-function": "^7.8.3",
-        "@babel/template": "^7.8.3",
-        "@babel/traverse": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-wrap-function": "^7.10.1",
+        "@babel/template": "^7.10.1",
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.8.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz",
-      "integrity": "sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz",
+      "integrity": "sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==",
       "requires": {
-        "@babel/helper-member-expression-to-functions": "^7.8.3",
-        "@babel/helper-optimise-call-expression": "^7.8.3",
-        "@babel/traverse": "^7.8.6",
-        "@babel/types": "^7.8.6"
+        "@babel/helper-member-expression-to-functions": "^7.10.1",
+        "@babel/helper-optimise-call-expression": "^7.10.1",
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-simple-access": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz",
-      "integrity": "sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.1.tgz",
+      "integrity": "sha512-VSWpWzRzn9VtgMJBIWTZ+GP107kZdQ4YplJlCmIrjoLVSi/0upixezHCDG8kpPVTBJpKfxTH01wDhh+jS2zKbw==",
       "requires": {
-        "@babel/template": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/template": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
-      "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+      "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz",
-      "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g=="
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+      "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw=="
     },
     "@babel/helper-wrap-function": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz",
-      "integrity": "sha512-LACJrbUET9cQDzb6kG7EeD7+7doC3JNvUgTEQOx2qaO1fKlzE/Bf05qs9w1oXQMmXlPO65lC3Tq9S6gZpTErEQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.10.1.tgz",
+      "integrity": "sha512-C0MzRGteVDn+H32/ZgbAv5r56f2o1fZSA/rj/TYo8JEJNHg+9BdSmKBUND0shxWRztWhjlT2cvHYuynpPsVJwQ==",
       "requires": {
-        "@babel/helper-function-name": "^7.8.3",
-        "@babel/template": "^7.8.3",
-        "@babel/traverse": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/template": "^7.10.1",
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/helpers": {
-      "version": "7.9.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.2.tgz",
-      "integrity": "sha512-JwLvzlXVPjO8eU9c/wF9/zOIN7X6h8DYf7mG4CiFRZRvZNKEF5dQ3H3V+ASkHoIB3mWhatgl5ONhyqHRI6MppA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.1.tgz",
+      "integrity": "sha512-muQNHF+IdU6wGgkaJyhhEmI54MOZBKsFfsXFhboz1ybwJ1Kl7IHlbm2a++4jwrmY5UYsgitt5lfqo1wMFcHmyw==",
       "requires": {
-        "@babel/template": "^7.8.3",
-        "@babel/traverse": "^7.9.0",
-        "@babel/types": "^7.9.0"
+        "@babel/template": "^7.10.1",
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/highlight": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
-      "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+      "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.9.0",
+        "@babel/helper-validator-identifier": "^7.10.1",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       }
     },
     "@babel/parser": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.4.tgz",
-      "integrity": "sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA=="
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+      "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ=="
     },
     "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz",
-      "integrity": "sha512-NZ9zLv848JsV3hs8ryEh7Uaz/0KsmPLqv0+PdkDJL1cJy0K4kOCFa8zc1E3mp+RHPQcpdfb/6GovEsW4VDrOMw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.1.tgz",
+      "integrity": "sha512-vzZE12ZTdB336POZjmpblWfNNRpMSua45EYnRigE2XsZxcXcIyly2ixnTJasJE4Zq3U7t2d8rRF7XRUuzHxbOw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-remap-async-to-generator": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-remap-async-to-generator": "^7.10.1",
         "@babel/plugin-syntax-async-generators": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-class-properties": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.3.0.tgz",
-      "integrity": "sha512-wNHxLkEKTQ2ay0tnsam2z7fGZUi+05ziDJflEt3AZTP3oXLKHJp9HqhfroB/vdMvt3sda9fAbq7FsG8QPDrZBg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.1.tgz",
+      "integrity": "sha512-sqdGWgoXlnOdgMXU+9MbhzwFRgxVLeiGBqTrnuS7LC2IBU31wSsESbTUreT2O418obpfPdGUR2GbEufZF1bpqw==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.3.0",
-        "@babel/helper-plugin-utils": "^7.0.0"
+        "@babel/helper-create-class-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-proposal-decorators": {
@@ -347,76 +347,85 @@
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz",
-      "integrity": "sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.1.tgz",
+      "integrity": "sha512-Cpc2yUVHTEGPlmiQzXj026kqwjEQAD9I4ZC16uzdbgWgitg/UHKHLffKNCQZ5+y8jpIZPJcKcwsr2HwPh+w3XA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz",
-      "integrity": "sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.1.tgz",
+      "integrity": "sha512-m8r5BmV+ZLpWPtMY2mOKN7wre6HIO4gfIiV+eOmsnZABNenrt/kzYBwrh+KOfgumSWpnlGs5F70J8afYMSJMBg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-json-strings": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.1.tgz",
+      "integrity": "sha512-56cI/uHYgL2C8HVuHOuvVowihhX0sxb3nnfVRzUeVHTWmRHTZrKuAh/OBIMggGU/S1g/1D2CRCXqP+3u7vX7iA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz",
-      "integrity": "sha512-jWioO1s6R/R+wEHizfaScNsAx+xKgwTLNXSh7tTC4Usj3ItsPEhYkEpU4h+lpnBwq7NBVOJXfO6cRFYcX69JUQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.1.tgz",
+      "integrity": "sha512-jjfym4N9HtCiNfyyLAVD8WqPYeHUrw4ihxuAynWj6zzp2gf9Ey2f7ImhFm6ikB3CLf5Z/zmcJDri6B4+9j9RsA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.1"
       }
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.5.tgz",
-      "integrity": "sha512-VP2oXvAf7KCYTthbUHwBlewbl1Iq059f6seJGsxMizaCdgHIeczOr7FBqELhSqfkIl04Fi8okzWzl63UKbQmmg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.1.tgz",
+      "integrity": "sha512-Z+Qri55KiQkHh7Fc4BW6o+QBuTagbOp9txE+4U1i79u9oWlf2npkiDx+Rf3iK3lbcHBuNy9UOkwuR5wOMH3LIQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.9.5"
+        "@babel/plugin-transform-parameters": "^7.10.1"
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-0gkX7J7E+AtAw9fcwlVQj8peP61qhdg/89D5swOkjYbkboA2CVckn3kiyum1DE0wskGb7KJJxBdyEBApDLLVdw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.1.tgz",
+      "integrity": "sha512-VqExgeE62YBqI3ogkGoOJp1R6u12DFZjqwJhqtKc2o5m1YTUuUWnos7bZQFBhwkxIFpWYJ7uB75U7VAPPiKETA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz",
-      "integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.1.tgz",
+      "integrity": "sha512-dqQj475q8+/avvok72CF3AOSV/SGEcH29zT5hhohqqvvZ2+boQoOr7iGldBG5YXTO2qgCgc2B3WvVLUdbeMlGA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0"
       }
     },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.1.tgz",
+      "integrity": "sha512-RZecFFJjDiQ2z6maFprLgrdnm0OzoC23Mx89xf1CcEsxmHuzuXOdniEuI+S3v7vjQG4F5sa6YtUp+19sZuSxHg==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
+      }
+    },
     "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.8.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.8.tgz",
-      "integrity": "sha512-EVhjVsMpbhLw9ZfHWSx2iy13Q8Z/eg8e8ccVWt23sWQK5l1UdkoLJPN5w69UA4uITGBnEZD2JOe4QOHycYKv8A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.1.tgz",
+      "integrity": "sha512-JjfngYRvwmPwmnbRZyNiPFI8zxCZb8euzbCG/LxyKdeTb59tVciKo9GK9bi6JYKInk1H11Dq9j/zRqIH4KigfQ==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.8",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-create-regexp-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-async-generators": {
@@ -427,12 +436,20 @@
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.1.tgz",
+      "integrity": "sha512-Gf2Yx/iRs1JREDtVZ56OrjjgFHCaldpTnuy9BHla10qyVT3YkIIGEtoDWhyop0ksu1GvNjHIoYRBqm3zoR1jyQ==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.1"
+      }
+    },
     "@babel/plugin-syntax-decorators": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.8.3.tgz",
-      "integrity": "sha512-8Hg4dNNT9/LcA1zQlfwuKR8BUc/if7Q7NkTam9sGTcJphLwpf2g4S42uhspQrIrR+dpzE0dtTqBVFoHl8GtnnQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.10.1.tgz",
+      "integrity": "sha512-a9OAbQhKOwSle1Vr0NJu/ISg1sPfdEkfRKWpgPuzhnWWzForou2gIeUIIwjAMHRekhhpJ7eulZlYs0H14Cbi+g==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-dynamic-import": {
@@ -444,11 +461,11 @@
       }
     },
     "@babel/plugin-syntax-flow": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.8.3.tgz",
-      "integrity": "sha512-innAx3bUbA0KSYj2E2MNFSn9hiCeowOFLxlsuhXzw8hMQnzkDomUr9QCD7E9VF60NmnG1sNTuuv6Qf4f8INYsg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.10.1.tgz",
+      "integrity": "sha512-b3pWVncLBYoPP60UOTc7NMlbtsHQ6ITim78KQejNHK6WJ2mzV5kCcg4mIWpasAfJEgwVTibwo2e+FU7UEIKQUg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-json-strings": {
@@ -460,11 +477,11 @@
       }
     },
     "@babel/plugin-syntax-jsx": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz",
-      "integrity": "sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.1.tgz",
+      "integrity": "sha512-+OxyOArpVFXQeXKLO9o+r2I4dIoVoy6+Uu0vKELrlweDM3QJADZj+Z+5ERansZqIZBcLj42vHnDI8Rz9BnRIuQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-nullish-coalescing-operator": {
@@ -476,11 +493,11 @@
       }
     },
     "@babel/plugin-syntax-numeric-separator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.8.3.tgz",
-      "integrity": "sha512-H7dCMAdN83PcCmqmkHB5dtp+Xa9a6LKSvA2hiFBC/5alSHxM5VgWZXFqDi0YFe8XNGT6iCa+z4V4zSt/PdZ7Dw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.1.tgz",
+      "integrity": "sha512-uTd0OsHrpe3tH5gRPTxG8Voh99/WCU78vIm5NMRYPAqC8lR4vajt6KkCAknCHrx24vkPdd/05yfdGSB4EIY2mg==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-object-rest-spread": {
@@ -508,111 +525,111 @@
       }
     },
     "@babel/plugin-syntax-top-level-await": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.3.tgz",
-      "integrity": "sha512-kwj1j9lL/6Wd0hROD3b/OZZ7MSrZLqqn9RAZ5+cYYsflQ9HZBIKCUkr3+uL1MEJ1NePiUbf98jjiMQSv0NMR9g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.1.tgz",
+      "integrity": "sha512-hgA5RYkmZm8FTFT3yu2N9Bx7yVVOKYT6yEdXXo6j2JTm0wNxgqaGeQVaSHRjhfnQbX91DtjFB6McRFSlcJH3xQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-typescript": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.3.tgz",
-      "integrity": "sha512-GO1MQ/SGGGoiEXY0e0bSpHimJvxqB7lktLLIq2pv8xG7WZ8IMEle74jIe1FhprHBWjwjZtXHkycDLZXIWM5Wfg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.10.1.tgz",
+      "integrity": "sha512-X/d8glkrAtra7CaQGMiGs/OGa6XgUzqPcBXCIGFCpCqnfGlT0Wfbzo/B89xHhnInTaItPK8LALblVXcUOEh95Q==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-arrow-functions": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz",
-      "integrity": "sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.1.tgz",
+      "integrity": "sha512-6AZHgFJKP3DJX0eCNJj01RpytUa3SOGawIxweHkNX2L6PYikOZmoh5B0d7hIHaIgveMjX990IAa/xK7jRTN8OA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.8.3.tgz",
-      "integrity": "sha512-imt9tFLD9ogt56Dd5CI/6XgpukMwd/fLGSrix2httihVe7LOGVPhyhMh1BU5kDM7iHD08i8uUtmV2sWaBFlHVQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.1.tgz",
+      "integrity": "sha512-XCgYjJ8TY2slj6SReBUyamJn3k2JLUIiiR5b6t1mNCMSvv7yx+jJpaewakikp0uWFQSF7ChPPoe3dHmXLpISkg==",
       "requires": {
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-remap-async-to-generator": "^7.8.3"
+        "@babel/helper-module-imports": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-remap-async-to-generator": "^7.10.1"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.8.3.tgz",
-      "integrity": "sha512-vo4F2OewqjbB1+yaJ7k2EJFHlTP3jR634Z9Cj9itpqNjuLXvhlVxgnjsHsdRgASR8xYDrx6onw4vW5H6We0Jmg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.1.tgz",
+      "integrity": "sha512-B7K15Xp8lv0sOJrdVAoukKlxP9N59HS48V1J3U/JGj+Ad+MHq+am6xJVs85AgXrQn4LV8vaYFOB+pr/yIuzW8Q==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz",
-      "integrity": "sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.10.1.tgz",
+      "integrity": "sha512-8bpWG6TtF5akdhIm/uWTyjHqENpy13Fx8chg7pFH875aNLwX8JxIxqm08gmAT+Whe6AOmaTeLPe7dpLbXt+xUw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "lodash": "^4.17.13"
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.9.5.tgz",
-      "integrity": "sha512-x2kZoIuLC//O5iA7PEvecB105o7TLzZo8ofBVhP79N+DO3jaX+KYfww9TQcfBEZD0nikNyYcGB1IKtRq36rdmg==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/helper-define-map": "^7.8.3",
-        "@babel/helper-function-name": "^7.9.5",
-        "@babel/helper-optimise-call-expression": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.8.6",
-        "@babel/helper-split-export-declaration": "^7.8.3",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.1.tgz",
+      "integrity": "sha512-P9V0YIh+ln/B3RStPoXpEQ/CoAxQIhRSUn7aXqQ+FZJ2u8+oCtjIXR3+X0vsSD8zv+mb56K7wZW1XiDTDGiDRQ==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-define-map": "^7.10.1",
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/helper-optimise-call-expression": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-replace-supers": "^7.10.1",
+        "@babel/helper-split-export-declaration": "^7.10.1",
         "globals": "^11.1.0"
       }
     },
     "@babel/plugin-transform-computed-properties": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.3.tgz",
-      "integrity": "sha512-O5hiIpSyOGdrQZRQ2ccwtTVkgUDBBiCuK//4RJ6UfePllUTCENOzKxfh6ulckXKc0DixTFLCfb2HVkNA7aDpzA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.1.tgz",
+      "integrity": "sha512-mqSrGjp3IefMsXIenBfGcPXxJxweQe2hEIwMQvjtiDQ9b1IBvDUjkAtV/HMXX47/vXf14qDNedXsIiNd1FmkaQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.9.5.tgz",
-      "integrity": "sha512-j3OEsGel8nHL/iusv/mRd5fYZ3DrOxWC82x0ogmdN/vHfAP4MYw+AFKYanzWlktNwikKvlzUV//afBW5FTp17Q==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.1.tgz",
+      "integrity": "sha512-V/nUc4yGWG71OhaTH705pU8ZSdM6c1KmmLP8ys59oOYbT7RpMYAR3MsVOt6OHL0WzG7BlTU076va9fjJyYzJMA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz",
-      "integrity": "sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.1.tgz",
+      "integrity": "sha512-19VIMsD1dp02RvduFUmfzj8uknaO3uiHHF0s3E1OHnVsNj8oge8EQ5RzHRbJjGSetRnkEuBYO7TG1M5kKjGLOA==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-create-regexp-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.8.3.tgz",
-      "integrity": "sha512-s8dHiBUbcbSgipS4SMFuWGqCvyge5V2ZeAWzR6INTVC3Ltjig/Vw1G2Gztv0vU/hRG9X8IvKvYdoksnUfgXOEQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.1.tgz",
+      "integrity": "sha512-wIEpkX4QvX8Mo9W6XF3EdGttrIPZWozHfEaDTU0WJD/TDnXMvdDh30mzUl/9qWhnf7naicYartcEfUghTCSNpA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.8.3.tgz",
-      "integrity": "sha512-zwIpuIymb3ACcInbksHaNcR12S++0MDLKkiqXHl3AzpgdKlFNhog+z/K0+TGW+b0w5pgTq4H6IwV/WhxbGYSjQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.1.tgz",
+      "integrity": "sha512-lr/przdAbpEA2BUzRvjXdEDLrArGRRPwbaF9rvayuHRvdQ7lUTTkZnhZrJ4LE2jvgMRFF4f0YuPQ20vhiPYxtA==",
       "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-flow-strip-types": {
@@ -625,77 +642,77 @@
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz",
-      "integrity": "sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.1.tgz",
+      "integrity": "sha512-US8KCuxfQcn0LwSCMWMma8M2R5mAjJGsmoCBVwlMygvmDUMkTCykc84IqN1M7t+agSfOmLYTInLCHJM+RUoz+w==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.3.tgz",
-      "integrity": "sha512-rO/OnDS78Eifbjn5Py9v8y0aR+aSYhDhqAwVfsTl0ERuMZyr05L1aFSCJnbv2mmsLkit/4ReeQ9N2BgLnOcPCQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.1.tgz",
+      "integrity": "sha512-//bsKsKFBJfGd65qSNNh1exBy5Y9gD9ZN+DvrJ8f7HXr4avE5POW6zB7Rj6VnqHV33+0vXWUwJT0wSHubiAQkw==",
       "requires": {
-        "@babel/helper-function-name": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-literals": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz",
-      "integrity": "sha512-3Tqf8JJ/qB7TeldGl+TT55+uQei9JfYaregDcEAyBZ7akutriFrt6C/wLYIer6OYhleVQvH/ntEhjE/xMmy10A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.1.tgz",
+      "integrity": "sha512-qi0+5qgevz1NHLZroObRm5A+8JJtibb7vdcPQF1KQE12+Y/xxl8coJ+TpPW9iRq+Mhw/NKLjm+5SHtAHCC7lAw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz",
-      "integrity": "sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.1.tgz",
+      "integrity": "sha512-UmaWhDokOFT2GcgU6MkHC11i0NQcL63iqeufXWfRy6pUOGYeCGEKhvfFO6Vz70UfYJYHwveg62GS83Rvpxn+NA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.0.tgz",
-      "integrity": "sha512-vZgDDF003B14O8zJy0XXLnPH4sg+9X5hFBBGN1V+B2rgrB+J2xIypSN6Rk9imB2hSTHQi5OHLrFWsZab1GMk+Q==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.1.tgz",
+      "integrity": "sha512-31+hnWSFRI4/ACFr1qkboBbrTxoBIzj7qA69qlq8HY8p7+YCzkCT6/TvQ1a4B0z27VeWtAeJd6pr5G04dc1iHw==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "babel-plugin-dynamic-import-node": "^2.3.0"
+        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.0.tgz",
-      "integrity": "sha512-qzlCrLnKqio4SlgJ6FMMLBe4bySNis8DFn1VkGmOcxG9gqEyPIOzeQrA//u0HAKrWpJlpZbZMPB1n/OPa4+n8g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.1.tgz",
+      "integrity": "sha512-AQG4fc3KOah0vdITwt7Gi6hD9BtQP/8bhem7OjbaMoRNCH5Djx42O2vYMfau7QnAzQCa+RJnhJBmFFMGpQEzrg==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-simple-access": "^7.8.3",
-        "babel-plugin-dynamic-import-node": "^2.3.0"
+        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-simple-access": "^7.10.1",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.0.tgz",
-      "integrity": "sha512-FsiAv/nao/ud2ZWy4wFacoLOm5uxl0ExSQ7ErvP7jpoihLR6Cq90ilOFyX9UXct3rbtKsAiZ9kFt5XGfPe/5SQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.1.tgz",
+      "integrity": "sha512-ewNKcj1TQZDL3YnO85qh9zo1YF1CHgmSTlRQgHqe63oTrMI85cthKtZjAiZSsSNjPQ5NCaYo5QkbYqEw1ZBgZA==",
       "requires": {
-        "@babel/helper-hoist-variables": "^7.8.3",
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "babel-plugin-dynamic-import-node": "^2.3.0"
+        "@babel/helper-hoist-variables": "^7.10.1",
+        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-umd": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.9.0.tgz",
-      "integrity": "sha512-uTWkXkIVtg/JGRSIABdBoMsoIeoHQHPTL0Y2E7xf5Oj7sLqwVsNXOkNk0VJc7vF0IMBsPeikHxFjGe+qmwPtTQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.1.tgz",
+      "integrity": "sha512-EIuiRNMd6GB6ulcYlETnYYfgv4AxqrswghmBRQbWLHZxN4s7mupxzglnHqk9ZiUpDI4eRWewedJJNj67PWOXKA==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
@@ -707,108 +724,117 @@
       }
     },
     "@babel/plugin-transform-new-target": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.8.3.tgz",
-      "integrity": "sha512-QuSGysibQpyxexRyui2vca+Cmbljo8bcRckgzYV4kRIsHpVeyeC3JDO63pY+xFZ6bWOBn7pfKZTqV4o/ix9sFw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.1.tgz",
+      "integrity": "sha512-MBlzPc1nJvbmO9rPr1fQwXOM2iGut+JC92ku6PbiJMMK7SnQc1rytgpopveE3Evn47gzvGYeCdgfCDbZo0ecUw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-object-super": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz",
-      "integrity": "sha512-57FXk+gItG/GejofIyLIgBKTas4+pEU47IXKDBWFTxdPd7F80H8zybyAY7UoblVfBhBGs2EKM+bJUu2+iUYPDQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.1.tgz",
+      "integrity": "sha512-WnnStUDN5GL+wGQrJylrnnVlFhFmeArINIR9gjhSeYyvroGhBrSAXYg/RHsnfzmsa+onJrTJrEClPzgNmmQ4Gw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-replace-supers": "^7.10.1"
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.9.5.tgz",
-      "integrity": "sha512-0+1FhHnMfj6lIIhVvS4KGQJeuhe1GI//h5uptK4PvLt+BGBxsoUJbd3/IW002yk//6sZPlFgsG1hY6OHLcy6kA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.1.tgz",
+      "integrity": "sha512-tJ1T0n6g4dXMsL45YsSzzSDZCxiHXAQp/qHrucOq5gEHncTA3xDxnd5+sZcoQp+N1ZbieAaB8r/VUCG0gqseOg==",
       "requires": {
-        "@babel/helper-get-function-arity": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-get-function-arity": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-property-literals": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.3.tgz",
-      "integrity": "sha512-uGiiXAZMqEoQhRWMK17VospMZh5sXWg+dlh2soffpkAl96KAm+WZuJfa6lcELotSRmooLqg0MWdH6UUq85nmmg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.1.tgz",
+      "integrity": "sha512-Kr6+mgag8auNrgEpbfIWzdXYOvqDHZOF0+Bx2xh4H2EDNwcbRb9lY6nkZg8oSjsX+DH9Ebxm9hOqtKW+gRDeNA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-react-constant-elements": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.9.0.tgz",
-      "integrity": "sha512-wXMXsToAUOxJuBBEHajqKLFWcCkOSLshTI2ChCFFj1zDd7od4IOxiwLCOObNUvOpkxLpjIuaIdBMmNt6ocCPAw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.10.1.tgz",
+      "integrity": "sha512-V4os6bkWt/jbrzfyVcZn2ZpuHZkvj3vyBU0U/dtS8SZuMS7Rfx5oknTrtfyXJ2/QZk8gX7Yls5Z921ItNpE30Q==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-react-display-name": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz",
-      "integrity": "sha512-3Jy/PCw8Fe6uBKtEgz3M82ljt+lTg+xJaM4og+eyu83qLT87ZUSckn0wy7r31jflURWLO83TW6Ylf7lyXj3m5A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.1.tgz",
+      "integrity": "sha512-rBjKcVwjk26H3VX8pavMxGf33LNlbocMHdSeldIEswtQ/hrjyTG8fKKILW1cSkODyRovckN/uZlGb2+sAV9JUQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-react-jsx": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz",
-      "integrity": "sha512-Mjqf3pZBNLt854CK0C/kRuXAnE6H/bo7xYojP+WGtX8glDGSibcwnsWwhwoSuRg0+EBnxPC1ouVnuetUIlPSAw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.1.tgz",
+      "integrity": "sha512-MBVworWiSRBap3Vs39eHt+6pJuLUAaK4oxGc8g+wY+vuSJvLiEQjW1LSTqKb8OUPtDvHCkdPhk7d6sjC19xyFw==",
       "requires": {
-        "@babel/helper-builder-react-jsx": "^7.9.0",
-        "@babel/helper-builder-react-jsx-experimental": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-jsx": "^7.8.3"
+        "@babel/helper-builder-react-jsx": "^7.10.1",
+        "@babel/helper-builder-react-jsx-experimental": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-jsx": "^7.10.1"
       }
     },
     "@babel/plugin-transform-react-jsx-development": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.9.0.tgz",
-      "integrity": "sha512-tK8hWKrQncVvrhvtOiPpKrQjfNX3DtkNLSX4ObuGcpS9p0QrGetKmlySIGR07y48Zft8WVgPakqd/bk46JrMSw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.10.1.tgz",
+      "integrity": "sha512-XwDy/FFoCfw9wGFtdn5Z+dHh6HXKHkC6DwKNWpN74VWinUagZfDcEJc3Y8Dn5B3WMVnAllX8Kviaw7MtC5Epwg==",
       "requires": {
-        "@babel/helper-builder-react-jsx-experimental": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-jsx": "^7.8.3"
+        "@babel/helper-builder-react-jsx-experimental": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-jsx": "^7.10.1"
       }
     },
     "@babel/plugin-transform-react-jsx-self": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.9.0.tgz",
-      "integrity": "sha512-K2ObbWPKT7KUTAoyjCsFilOkEgMvFG+y0FqOl6Lezd0/13kMkkjHskVsZvblRPj1PHA44PrToaZANrryppzTvQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.1.tgz",
+      "integrity": "sha512-4p+RBw9d1qV4S749J42ZooeQaBomFPrSxa9JONLHJ1TxCBo3TzJ79vtmG2S2erUT8PDDrPdw4ZbXGr2/1+dILA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-jsx": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-jsx": "^7.10.1"
       }
     },
     "@babel/plugin-transform-react-jsx-source": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.9.0.tgz",
-      "integrity": "sha512-K6m3LlSnTSfRkM6FcRk8saNEeaeyG5k7AVkBU2bZK3+1zdkSED3qNdsWrUgQBeTVD2Tp3VMmerxVO2yM5iITmw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.1.tgz",
+      "integrity": "sha512-neAbaKkoiL+LXYbGDvh6PjPG+YeA67OsZlE78u50xbWh2L1/C81uHiNP5d1fw+uqUIoiNdCC8ZB+G4Zh3hShJA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-jsx": "^7.10.1"
+      }
+    },
+    "@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.1.tgz",
+      "integrity": "sha512-mfhoiai083AkeewsBHUpaS/FM1dmUENHBMpS/tugSJ7VXqXO5dCN1Gkint2YvM1Cdv1uhmAKt1ZOuAjceKmlLA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-jsx": "^7.8.3"
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.8.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz",
-      "integrity": "sha512-TIg+gAl4Z0a3WmD3mbYSk+J9ZUH6n/Yc57rtKRnlA/7rcCvpekHXe0CMZHP1gYp7/KLe9GHTuIba0vXmls6drA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.1.tgz",
+      "integrity": "sha512-B3+Y2prScgJ2Bh/2l9LJxKbb8C8kRfsG4AdPT+n7ixBHIxJaIG8bi8tgjxUMege1+WqSJ+7gu1YeoMVO3gPWzw==",
       "requires": {
         "regenerator-transform": "^0.14.2"
       }
     },
     "@babel/plugin-transform-reserved-words": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.3.tgz",
-      "integrity": "sha512-mwMxcycN3omKFDjDQUl+8zyMsBfjRFr0Zn/64I41pmjv4NJuqcYlEtezwYtw9TFd9WR1vN5kiM+O0gMZzO6L0A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.1.tgz",
+      "integrity": "sha512-qN1OMoE2nuqSPmpTqEM7OvJ1FkMEV+BjVeZZm9V9mq/x1JLKQ4pcv8riZJMNN3u2AUGl0ouOMjRr2siecvHqUQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-runtime": {
@@ -823,127 +849,139 @@
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz",
-      "integrity": "sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.1.tgz",
+      "integrity": "sha512-AR0E/lZMfLstScFwztApGeyTHJ5u3JUKMjneqRItWeEqDdHWZwAOKycvQNCasCK/3r5YXsuNG25funcJDu7Y2g==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.3.tgz",
-      "integrity": "sha512-CkuTU9mbmAoFOI1tklFWYYbzX5qCIZVXPVy0jpXgGwkplCndQAa58s2jr66fTeQnA64bDox0HL4U56CFYoyC7g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.10.1.tgz",
+      "integrity": "sha512-8wTPym6edIrClW8FI2IoaePB91ETOtg36dOkj3bYcNe7aDMN2FXEoUa+WrmPc4xa1u2PQK46fUX2aCb+zo9rfw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.8.3.tgz",
-      "integrity": "sha512-9Spq0vGCD5Bb4Z/ZXXSK5wbbLFMG085qd2vhL1JYu1WcQ5bXqZBAYRzU1d+p79GcHs2szYv5pVQCX13QgldaWw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.1.tgz",
+      "integrity": "sha512-j17ojftKjrL7ufX8ajKvwRilwqTok4q+BjkknmQw9VNHnItTyMP5anPFzxFJdCQs7clLcWpCV3ma+6qZWLnGMA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-regex": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-regex": "^7.10.1"
       }
     },
     "@babel/plugin-transform-template-literals": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.8.3.tgz",
-      "integrity": "sha512-820QBtykIQOLFT8NZOcTRJ1UNuztIELe4p9DCgvj4NK+PwluSJ49we7s9FB1HIGNIYT7wFUJ0ar2QpCDj0escQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.1.tgz",
+      "integrity": "sha512-t7B/3MQf5M1T9hPCRG28DNGZUuxAuDqLYS03rJrIk2prj/UV7Z6FOneijhQhnv/Xa039vidXeVbvjK2SK5f7Gg==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz",
-      "integrity": "sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.1.tgz",
+      "integrity": "sha512-qX8KZcmbvA23zDi+lk9s6hC1FM7jgLHYIjuLgULgc8QtYnmB3tAVIYkNoKRQ75qWBeyzcoMoK8ZQmogGtC/w0g==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-typescript": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.9.4.tgz",
-      "integrity": "sha512-yeWeUkKx2auDbSxRe8MusAG+n4m9BFY/v+lPjmQDgOFX5qnySkUY5oXzkp6FwPdsYqnKay6lorXYdC0n3bZO7w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.10.1.tgz",
+      "integrity": "sha512-v+QWKlmCnsaimLeqq9vyCsVRMViZG1k2SZTlcZvB+TqyH570Zsij8nvVUZzOASCRiQFUxkLrn9Wg/kH0zgy5OQ==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-typescript": "^7.8.3"
+        "@babel/helper-create-class-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-typescript": "^7.10.1"
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.1.tgz",
+      "integrity": "sha512-zZ0Poh/yy1d4jeDWpx/mNwbKJVwUYJX73q+gyh4bwtG0/iUlzdEu0sLMda8yuDFS6LBQlT/ST1SJAR6zYwXWgw==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz",
-      "integrity": "sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.1.tgz",
+      "integrity": "sha512-Y/2a2W299k0VIUdbqYm9X2qS6fE0CUBhhiPpimK6byy7OJ/kORLlIX+J6UrjgNu5awvs62k+6RSslxhcvVw2Tw==",
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-create-regexp-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/preset-env": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.9.5.tgz",
-      "integrity": "sha512-eWGYeADTlPJH+wq1F0wNfPbVS1w1wtmMJiYk55Td5Yu28AsdR9AsC97sZ0Qq8fHqQuslVSIYSGJMcblr345GfQ==",
-      "requires": {
-        "@babel/compat-data": "^7.9.0",
-        "@babel/helper-compilation-targets": "^7.8.7",
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-proposal-async-generator-functions": "^7.8.3",
-        "@babel/plugin-proposal-dynamic-import": "^7.8.3",
-        "@babel/plugin-proposal-json-strings": "^7.8.3",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-proposal-numeric-separator": "^7.8.3",
-        "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.8.3",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.2.tgz",
+      "integrity": "sha512-MjqhX0RZaEgK/KueRzh+3yPSk30oqDKJ5HP5tqTSB1e2gzGS3PLy7K0BIpnp78+0anFuSwOeuCf1zZO7RzRvEA==",
+      "requires": {
+        "@babel/compat-data": "^7.10.1",
+        "@babel/helper-compilation-targets": "^7.10.2",
+        "@babel/helper-module-imports": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-proposal-async-generator-functions": "^7.10.1",
+        "@babel/plugin-proposal-class-properties": "^7.10.1",
+        "@babel/plugin-proposal-dynamic-import": "^7.10.1",
+        "@babel/plugin-proposal-json-strings": "^7.10.1",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
+        "@babel/plugin-proposal-numeric-separator": "^7.10.1",
+        "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.10.1",
+        "@babel/plugin-proposal-optional-chaining": "^7.10.1",
+        "@babel/plugin-proposal-private-methods": "^7.10.1",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.10.1",
         "@babel/plugin-syntax-async-generators": "^7.8.0",
+        "@babel/plugin-syntax-class-properties": "^7.10.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.0",
         "@babel/plugin-syntax-json-strings": "^7.8.0",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
-        "@babel/plugin-syntax-numeric-separator": "^7.8.0",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.1",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0",
-        "@babel/plugin-syntax-top-level-await": "^7.8.3",
-        "@babel/plugin-transform-arrow-functions": "^7.8.3",
-        "@babel/plugin-transform-async-to-generator": "^7.8.3",
-        "@babel/plugin-transform-block-scoped-functions": "^7.8.3",
-        "@babel/plugin-transform-block-scoping": "^7.8.3",
-        "@babel/plugin-transform-classes": "^7.9.5",
-        "@babel/plugin-transform-computed-properties": "^7.8.3",
-        "@babel/plugin-transform-destructuring": "^7.9.5",
-        "@babel/plugin-transform-dotall-regex": "^7.8.3",
-        "@babel/plugin-transform-duplicate-keys": "^7.8.3",
-        "@babel/plugin-transform-exponentiation-operator": "^7.8.3",
-        "@babel/plugin-transform-for-of": "^7.9.0",
-        "@babel/plugin-transform-function-name": "^7.8.3",
-        "@babel/plugin-transform-literals": "^7.8.3",
-        "@babel/plugin-transform-member-expression-literals": "^7.8.3",
-        "@babel/plugin-transform-modules-amd": "^7.9.0",
-        "@babel/plugin-transform-modules-commonjs": "^7.9.0",
-        "@babel/plugin-transform-modules-systemjs": "^7.9.0",
-        "@babel/plugin-transform-modules-umd": "^7.9.0",
+        "@babel/plugin-syntax-top-level-await": "^7.10.1",
+        "@babel/plugin-transform-arrow-functions": "^7.10.1",
+        "@babel/plugin-transform-async-to-generator": "^7.10.1",
+        "@babel/plugin-transform-block-scoped-functions": "^7.10.1",
+        "@babel/plugin-transform-block-scoping": "^7.10.1",
+        "@babel/plugin-transform-classes": "^7.10.1",
+        "@babel/plugin-transform-computed-properties": "^7.10.1",
+        "@babel/plugin-transform-destructuring": "^7.10.1",
+        "@babel/plugin-transform-dotall-regex": "^7.10.1",
+        "@babel/plugin-transform-duplicate-keys": "^7.10.1",
+        "@babel/plugin-transform-exponentiation-operator": "^7.10.1",
+        "@babel/plugin-transform-for-of": "^7.10.1",
+        "@babel/plugin-transform-function-name": "^7.10.1",
+        "@babel/plugin-transform-literals": "^7.10.1",
+        "@babel/plugin-transform-member-expression-literals": "^7.10.1",
+        "@babel/plugin-transform-modules-amd": "^7.10.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.10.1",
+        "@babel/plugin-transform-modules-systemjs": "^7.10.1",
+        "@babel/plugin-transform-modules-umd": "^7.10.1",
         "@babel/plugin-transform-named-capturing-groups-regex": "^7.8.3",
-        "@babel/plugin-transform-new-target": "^7.8.3",
-        "@babel/plugin-transform-object-super": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.9.5",
-        "@babel/plugin-transform-property-literals": "^7.8.3",
-        "@babel/plugin-transform-regenerator": "^7.8.7",
-        "@babel/plugin-transform-reserved-words": "^7.8.3",
-        "@babel/plugin-transform-shorthand-properties": "^7.8.3",
-        "@babel/plugin-transform-spread": "^7.8.3",
-        "@babel/plugin-transform-sticky-regex": "^7.8.3",
-        "@babel/plugin-transform-template-literals": "^7.8.3",
-        "@babel/plugin-transform-typeof-symbol": "^7.8.4",
-        "@babel/plugin-transform-unicode-regex": "^7.8.3",
+        "@babel/plugin-transform-new-target": "^7.10.1",
+        "@babel/plugin-transform-object-super": "^7.10.1",
+        "@babel/plugin-transform-parameters": "^7.10.1",
+        "@babel/plugin-transform-property-literals": "^7.10.1",
+        "@babel/plugin-transform-regenerator": "^7.10.1",
+        "@babel/plugin-transform-reserved-words": "^7.10.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.10.1",
+        "@babel/plugin-transform-spread": "^7.10.1",
+        "@babel/plugin-transform-sticky-regex": "^7.10.1",
+        "@babel/plugin-transform-template-literals": "^7.10.1",
+        "@babel/plugin-transform-typeof-symbol": "^7.10.1",
+        "@babel/plugin-transform-unicode-escapes": "^7.10.1",
+        "@babel/plugin-transform-unicode-regex": "^7.10.1",
         "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.9.5",
-        "browserslist": "^4.9.1",
+        "@babel/types": "^7.10.2",
+        "browserslist": "^4.12.0",
         "core-js-compat": "^3.6.2",
         "invariant": "^2.2.2",
         "levenary": "^1.1.1",
@@ -963,16 +1001,17 @@
       }
     },
     "@babel/preset-react": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.9.4.tgz",
-      "integrity": "sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.10.1.tgz",
+      "integrity": "sha512-Rw0SxQ7VKhObmFjD/cUcKhPTtzpeviEFX1E6PgP+cYOhQ98icNqtINNFANlsdbQHrmeWnqdxA4Tmnl1jy5tp3Q==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-transform-react-display-name": "^7.8.3",
-        "@babel/plugin-transform-react-jsx": "^7.9.4",
-        "@babel/plugin-transform-react-jsx-development": "^7.9.0",
-        "@babel/plugin-transform-react-jsx-self": "^7.9.0",
-        "@babel/plugin-transform-react-jsx-source": "^7.9.0"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-transform-react-display-name": "^7.10.1",
+        "@babel/plugin-transform-react-jsx": "^7.10.1",
+        "@babel/plugin-transform-react-jsx-development": "^7.10.1",
+        "@babel/plugin-transform-react-jsx-self": "^7.10.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.10.1",
+        "@babel/plugin-transform-react-pure-annotations": "^7.10.1"
       }
     },
     "@babel/preset-typescript": {
@@ -985,17 +1024,17 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.9.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
-      "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz",
+      "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
     },
     "@babel/runtime-corejs3": {
-      "version": "7.9.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.9.2.tgz",
-      "integrity": "sha512-HHxmgxbIzOfFlZ+tdeRKtaxWOMUoCG5Mu3wKeUmOxjYrwb3AAHgnmtCUbPPK11/raIWLIBK250t8E2BPO0p7jA==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.10.2.tgz",
+      "integrity": "sha512-+a2M/u7r15o3dV1NEizr9bRi+KUVnrs/qYxF0Z06DAPx/4VCWaz1WA7EcbE+uqGgt39lp5akWGmHsTseIkHkHg==",
       "dev": true,
       "requires": {
         "core-js-pure": "^3.0.0",
@@ -1003,26 +1042,26 @@
       }
     },
     "@babel/template": {
-      "version": "7.8.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
-      "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+      "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
       "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@babel/parser": "^7.8.6",
-        "@babel/types": "^7.8.6"
+        "@babel/code-frame": "^7.10.1",
+        "@babel/parser": "^7.10.1",
+        "@babel/types": "^7.10.1"
       }
     },
     "@babel/traverse": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.5.tgz",
-      "integrity": "sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==",
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@babel/generator": "^7.9.5",
-        "@babel/helper-function-name": "^7.9.5",
-        "@babel/helper-split-export-declaration": "^7.8.3",
-        "@babel/parser": "^7.9.0",
-        "@babel/types": "^7.9.5",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
+      "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
+      "requires": {
+        "@babel/code-frame": "^7.10.1",
+        "@babel/generator": "^7.10.1",
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/helper-split-export-declaration": "^7.10.1",
+        "@babel/parser": "^7.10.1",
+        "@babel/types": "^7.10.1",
         "debug": "^4.1.0",
         "globals": "^11.1.0",
         "lodash": "^4.17.13"
@@ -1044,11 +1083,11 @@
       }
     },
     "@babel/types": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.5.tgz",
-      "integrity": "sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+      "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.9.5",
+        "@babel/helper-validator-identifier": "^7.10.1",
         "lodash": "^4.17.13",
         "to-fast-properties": "^2.0.0"
       }
@@ -1168,22 +1207,22 @@
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
     "@material-ui/core": {
-      "version": "4.9.10",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.10.tgz",
-      "integrity": "sha512-CQuZU9Y10RkwSdxjn785kw2EPcXhv5GKauuVQufR9LlD37kjfn21Im1yvr6wsUzn81oLhEvVPz727UWC0gbqxg==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.10.2.tgz",
+      "integrity": "sha512-Uf4iDLi9sW6HKbVQDyDZDr1nMR4RUAE7w/RIIJZGNVZResC0xwmpLRZMtaUdSO43N0R0yJehfxTi4Z461Cd49A==",
       "requires": {
         "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.9.10",
-        "@material-ui/system": "^4.9.10",
-        "@material-ui/types": "^5.0.1",
-        "@material-ui/utils": "^4.9.6",
+        "@material-ui/styles": "^4.10.0",
+        "@material-ui/system": "^4.9.14",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.10.2",
         "@types/react-transition-group": "^4.2.0",
         "clsx": "^1.0.4",
         "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "^1.16.1-lts",
+        "popper.js": "1.16.1-lts",
         "prop-types": "^15.7.2",
         "react-is": "^16.8.0",
-        "react-transition-group": "^4.3.0"
+        "react-transition-group": "^4.4.0"
       }
     },
     "@material-ui/icons": {
@@ -1195,27 +1234,27 @@
       }
     },
     "@material-ui/lab": {
-      "version": "4.0.0-alpha.49",
-      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.49.tgz",
-      "integrity": "sha512-Shx+wktDCj7YDlNSkgMeFhijTyqWT0CGn7wDBMck36kZlh3GQhNwaj1y5p219sCYJY44SPgnrDaCxBStlzj8KQ==",
+      "version": "4.0.0-alpha.56",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",
+      "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==",
       "requires": {
         "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.9.6",
+        "@material-ui/utils": "^4.10.2",
         "clsx": "^1.0.4",
         "prop-types": "^15.7.2",
         "react-is": "^16.8.0"
       }
     },
     "@material-ui/styles": {
-      "version": "4.9.10",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.10.tgz",
-      "integrity": "sha512-EXIXlqVyFDnjXF6tj72y6ZxiSy+mHtrsCo3Srkm3XUeu3Z01aftDBy7ZSr3TQ02gXHTvDSBvegp3Le6p/tl7eA==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
+      "integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "^5.0.1",
+        "@material-ui/types": "^5.1.0",
         "@material-ui/utils": "^4.9.6",
-        "clsx": "^1.0.2",
+        "clsx": "^1.0.4",
         "csstype": "^2.5.2",
         "hoist-non-react-statics": "^3.3.2",
         "jss": "^10.0.3",
@@ -1230,24 +1269,25 @@
       }
     },
     "@material-ui/system": {
-      "version": "4.9.10",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.10.tgz",
-      "integrity": "sha512-E+t0baX2TBZk6ALm8twG6objpsxLdMM4MDm1++LMt2m7CetCAEc3aIAfDaprk4+tm5hFT1Cah5dRWk8EeIFQYw==",
+      "version": "4.9.14",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz",
+      "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "@material-ui/utils": "^4.9.6",
+        "csstype": "^2.5.2",
         "prop-types": "^15.7.2"
       }
     },
     "@material-ui/types": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.1.tgz",
-      "integrity": "sha512-wURPSY7/3+MAtng3i26g+WKwwNE3HEeqa/trDBR5+zWKmcjO+u9t7Npu/J1r+3dmIa/OeziN9D/18IrBKvKffw=="
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
     },
     "@material-ui/utils": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.9.6.tgz",
-      "integrity": "sha512-gqlBn0JPPTUZeAktn1rgMcy9Iczrr74ecx31tyZLVGdBGGzsxzM6PP6zeS7FuoLS6vG4hoZP7hWnOoHtkR0Kvw==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
+      "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "prop-types": "^15.7.2",
@@ -1354,9 +1394,9 @@
           }
         },
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "requires": {
             "argparse": "^1.0.7",
             "esprima": "^4.0.0"
@@ -1398,18 +1438,18 @@
       },
       "dependencies": {
         "@babel/core": {
-          "version": "7.9.0",
-          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
-          "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
-          "requires": {
-            "@babel/code-frame": "^7.8.3",
-            "@babel/generator": "^7.9.0",
-            "@babel/helper-module-transforms": "^7.9.0",
-            "@babel/helpers": "^7.9.0",
-            "@babel/parser": "^7.9.0",
-            "@babel/template": "^7.8.6",
-            "@babel/traverse": "^7.9.0",
-            "@babel/types": "^7.9.0",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.2.tgz",
+          "integrity": "sha512-KQmV9yguEjQsXqyOUGKjS4+3K8/DlOCE2pZcq4augdQmtTy5iv5EHtmMSJ7V4c1BIPjuwtZYqYLCq9Ga+hGBRQ==",
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/generator": "^7.10.2",
+            "@babel/helper-module-transforms": "^7.10.1",
+            "@babel/helpers": "^7.10.1",
+            "@babel/parser": "^7.10.2",
+            "@babel/template": "^7.10.1",
+            "@babel/traverse": "^7.10.1",
+            "@babel/types": "^7.10.2",
             "convert-source-map": "^1.7.0",
             "debug": "^4.1.0",
             "gensync": "^1.0.0-beta.1",
@@ -1466,9 +1506,9 @@
           }
         },
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "requires": {
             "argparse": "^1.0.7",
             "esprima": "^4.0.0"
@@ -1505,6 +1545,74 @@
         "loader-utils": "^1.1.0"
       }
     },
+    "@syncfusion/ej2-base": {
+      "version": "18.2.44",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-18.2.44.tgz",
+      "integrity": "sha512-q1aHQr9DXpCQh1iqWsYcIg2eGzsQZXBCu6XvFzMIXp6aWFu6fmW/2WYceg+F5B3cVfo1xCivthdrhlHzxiicGg==",
+      "requires": {
+        "@syncfusion/ej2-icons": "~18.2.44"
+      }
+    },
+    "@syncfusion/ej2-buttons": {
+      "version": "18.2.44",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-buttons/-/ej2-buttons-18.2.44.tgz",
+      "integrity": "sha512-mKhZ8DJEiRHyGdfQgti72Ul0UmTxVgPYzBnpB80/iif67tWsxLnqVJ53CWgxkXJq0fm6fAneIFSXztMffN2fmw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.44"
+      }
+    },
+    "@syncfusion/ej2-icons": {
+      "version": "18.2.44",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-18.2.44.tgz",
+      "integrity": "sha512-4jOb0RtpTU+s+IXbaQxxcWhFpXXn9aYyakGmrF7A6smbpndM7do28mDybJMFIns/IoRsQokOnrDhqqAIaoDRVQ=="
+    },
+    "@syncfusion/ej2-inputs": {
+      "version": "18.2.45",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-inputs/-/ej2-inputs-18.2.45.tgz",
+      "integrity": "sha512-1lyunOQFT77PXB2gZuJjmgRfyQqFcsTBmj9fGA5PIm5dwipsq4fy6IKOhTMcGCO64q7NZieNXcWOWdSws0lqAQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.44",
+        "@syncfusion/ej2-buttons": "~18.2.44",
+        "@syncfusion/ej2-popups": "~18.2.44",
+        "@syncfusion/ej2-splitbuttons": "~18.2.44"
+      }
+    },
+    "@syncfusion/ej2-popups": {
+      "version": "18.2.44",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-18.2.44.tgz",
+      "integrity": "sha512-+1riSvOH+nhoQtRbgX3Yl2W50Ql5YceiaucyQXNV/WKC9JqHuamRj3PINzd11HjAubvkAMOoYLQQ7B7wP4UmaA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.44",
+        "@syncfusion/ej2-buttons": "~18.2.44"
+      }
+    },
+    "@syncfusion/ej2-react-base": {
+      "version": "18.2.44",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-react-base/-/ej2-react-base-18.2.44.tgz",
+      "integrity": "sha512-lvIdLzDd2f3V9CEpHBV0FLnJVbb0Nucu7qbdOKQ4dQDRCO0QfM3dqyuC6Wd20R0cyaNGyjucXIpqcueLPtqSvA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.44"
+      }
+    },
+    "@syncfusion/ej2-react-inputs": {
+      "version": "18.2.45",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-react-inputs/-/ej2-react-inputs-18.2.45.tgz",
+      "integrity": "sha512-lH5e/YNASvqBcXt4ix8YVDv/lWBwM9F7tKiwPXckKnfNX01s2iZg+u+Dw+W3Cj7KIulpg60CHQkFoPtCm2uVkQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.44",
+        "@syncfusion/ej2-inputs": "18.2.45",
+        "@syncfusion/ej2-react-base": "~18.2.44"
+      }
+    },
+    "@syncfusion/ej2-splitbuttons": {
+      "version": "18.2.44",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-18.2.44.tgz",
+      "integrity": "sha512-zR/q7OTow5CtV3ZJ2mTHdOhkYr6TeWTg3I4I47lee+6H9EFrryURmi3iyhVHaLQEG/RHW7o53kr9d7qqQwyFyQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.2.44",
+        "@syncfusion/ej2-popups": "~18.2.44"
+      }
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -1516,23 +1624,23 @@
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
     "@types/q": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
-      "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw=="
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
+      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
     "@types/react": {
-      "version": "16.9.34",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.34.tgz",
-      "integrity": "sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==",
+      "version": "16.9.36",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.36.tgz",
+      "integrity": "sha512-mGgUb/Rk/vGx4NCvquRuSH0GHBQKb1OqpGS9cT9lFxlTLHZgkksgI60TuIxubmn7JuCb+sENHhQciqa0npm0AQ==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
       }
     },
     "@types/react-transition-group": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz",
-      "integrity": "sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
       "requires": {
         "@types/react": "*"
       }
@@ -1774,9 +1882,9 @@
       }
     },
     "ajv": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
-      "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==",
+      "version": "6.12.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
+      "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2216,6 +2324,13 @@
         "bn.js": "^4.0.0",
         "inherits": "^2.0.1",
         "minimalistic-assert": "^1.0.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
       }
     },
     "assert": {
@@ -2291,23 +2406,23 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
     "autoprefixer": {
-      "version": "9.7.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.6.tgz",
-      "integrity": "sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==",
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.0.tgz",
+      "integrity": "sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==",
       "requires": {
-        "browserslist": "^4.11.1",
-        "caniuse-lite": "^1.0.30001039",
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001061",
         "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.27",
-        "postcss-value-parser": "^4.0.3"
+        "postcss": "^7.0.30",
+        "postcss-value-parser": "^4.1.0"
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -2315,9 +2430,9 @@
           }
         },
         "postcss-value-parser": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
-          "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg=="
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
         },
         "source-map": {
           "version": "0.6.1",
@@ -2340,9 +2455,9 @@
       "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
-      "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
+      "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA=="
     },
     "axios": {
       "version": "0.19.2",
@@ -2482,9 +2597,9 @@
       }
     },
     "babel-plugin-dynamic-import-node": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz",
-      "integrity": "sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
       "requires": {
         "object.assign": "^4.1.0"
       }
@@ -2607,6 +2722,15 @@
         "babel-plugin-transform-react-remove-prop-types": "0.4.24"
       },
       "dependencies": {
+        "@babel/plugin-proposal-class-properties": {
+          "version": "7.3.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.3.0.tgz",
+          "integrity": "sha512-wNHxLkEKTQ2ay0tnsam2z7fGZUi+05ziDJflEt3AZTP3oXLKHJp9HqhfroB/vdMvt3sda9fAbq7FsG8QPDrZBg==",
+          "requires": {
+            "@babel/helper-create-class-features-plugin": "^7.3.0",
+            "@babel/helper-plugin-utils": "^7.0.0"
+          }
+        },
         "@babel/plugin-proposal-object-rest-spread": {
           "version": "7.3.2",
           "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.3.2.tgz",
@@ -2772,9 +2896,9 @@
           }
         },
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "requires": {
             "argparse": "^1.0.7",
             "esprima": "^4.0.0"
@@ -2841,6 +2965,11 @@
             "source-map": "^0.5.7"
           }
         },
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2865,6 +2994,11 @@
         "regenerator-runtime": "^0.11.0"
       },
       "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        },
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
@@ -3052,9 +3186,9 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
     "bn.js": {
-      "version": "4.11.8",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
-      "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA=="
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.1.2.tgz",
+      "integrity": "sha512-40rZaf3bUNKTVYu9sIeeEGOg7g14Yvnj9kH7b50EiwX0Q7A6umbvfI5tvHaOERH0XigqKkfLkFQxzb4e6CIXnA=="
     },
     "body-parser": {
       "version": "1.19.0",
@@ -3196,20 +3330,29 @@
       "requires": {
         "bn.js": "^4.1.0",
         "randombytes": "^2.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
       }
     },
     "browserify-sign": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.0.4.tgz",
-      "integrity": "sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.0.tgz",
+      "integrity": "sha512-hEZC1KEeYuoHRqhGhTy6gWrpJA3ZDjFWv0DE61643ZnOXAKJb3u7yWcrU0mMc9SwAqK1n7myPGndkp0dFG7NFA==",
       "requires": {
-        "bn.js": "^4.1.1",
-        "browserify-rsa": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "create-hmac": "^1.1.2",
-        "elliptic": "^6.0.0",
-        "inherits": "^2.0.1",
-        "parse-asn1": "^5.0.0"
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.2",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
       }
     },
     "browserify-zlib": {
@@ -3221,12 +3364,12 @@
       }
     },
     "browserslist": {
-      "version": "4.11.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.11.1.tgz",
-      "integrity": "sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+      "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
       "requires": {
-        "caniuse-lite": "^1.0.30001038",
-        "electron-to-chromium": "^1.3.390",
+        "caniuse-lite": "^1.0.30001043",
+        "electron-to-chromium": "^1.3.413",
         "node-releases": "^1.1.53",
         "pkg-up": "^2.0.0"
       }
@@ -3399,9 +3542,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001041",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001041.tgz",
-      "integrity": "sha512-fqDtRCApddNrQuBxBS7kEiSGdBsgO4wiVw4G/IClfqzfhW45MbTumfN4cuUJGTM0YGFNn97DCXPJ683PS6zwvA=="
+      "version": "1.0.30001083",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001083.tgz",
+      "integrity": "sha512-CnYJ27awX4h7yj5glfK7r1TOI13LBytpLzEgfj0s4mY75/F8pnQcYjL+oVpmS38FB59+vU0gscQ9D8tc+lIXvA=="
     },
     "capture-exit": {
       "version": "1.2.0",
@@ -3490,500 +3633,26 @@
             "is-extendable": "^0.1.0"
           }
         },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          }
-        },
-        "fsevents": {
-          "version": "1.2.12",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.12.tgz",
-          "integrity": "sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==",
-          "optional": true,
-          "requires": {
-            "nan": "^2.12.1",
-            "node-pre-gyp": "*"
-          },
-          "dependencies": {
-            "abbrev": {
-              "version": "1.1.1",
-              "bundled": true,
-              "optional": true
-            },
-            "ansi-regex": {
-              "version": "2.1.1",
-              "bundled": true,
-              "optional": true
-            },
-            "aproba": {
-              "version": "1.2.0",
-              "bundled": true,
-              "optional": true
-            },
-            "are-we-there-yet": {
-              "version": "1.1.5",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "delegates": "^1.0.0",
-                "readable-stream": "^2.0.6"
-              }
-            },
-            "balanced-match": {
-              "version": "1.0.0",
-              "bundled": true,
-              "optional": true
-            },
-            "brace-expansion": {
-              "version": "1.1.11",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "balanced-match": "^1.0.0",
-                "concat-map": "0.0.1"
-              }
-            },
-            "chownr": {
-              "version": "1.1.4",
-              "bundled": true,
-              "optional": true
-            },
-            "code-point-at": {
-              "version": "1.1.0",
-              "bundled": true,
-              "optional": true
-            },
-            "concat-map": {
-              "version": "0.0.1",
-              "bundled": true,
-              "optional": true
-            },
-            "console-control-strings": {
-              "version": "1.1.0",
-              "bundled": true,
-              "optional": true
-            },
-            "core-util-is": {
-              "version": "1.0.2",
-              "bundled": true,
-              "optional": true
-            },
-            "debug": {
-              "version": "3.2.6",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "ms": "^2.1.1"
-              }
-            },
-            "deep-extend": {
-              "version": "0.6.0",
-              "bundled": true,
-              "optional": true
-            },
-            "delegates": {
-              "version": "1.0.0",
-              "bundled": true,
-              "optional": true
-            },
-            "detect-libc": {
-              "version": "1.0.3",
-              "bundled": true,
-              "optional": true
-            },
-            "fs-minipass": {
-              "version": "1.2.7",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "minipass": "^2.6.0"
-              }
-            },
-            "fs.realpath": {
-              "version": "1.0.0",
-              "bundled": true,
-              "optional": true
-            },
-            "gauge": {
-              "version": "2.7.4",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "aproba": "^1.0.3",
-                "console-control-strings": "^1.0.0",
-                "has-unicode": "^2.0.0",
-                "object-assign": "^4.1.0",
-                "signal-exit": "^3.0.0",
-                "string-width": "^1.0.1",
-                "strip-ansi": "^3.0.1",
-                "wide-align": "^1.1.0"
-              }
-            },
-            "glob": {
-              "version": "7.1.6",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "fs.realpath": "^1.0.0",
-                "inflight": "^1.0.4",
-                "inherits": "2",
-                "minimatch": "^3.0.4",
-                "once": "^1.3.0",
-                "path-is-absolute": "^1.0.0"
-              }
-            },
-            "has-unicode": {
-              "version": "2.0.1",
-              "bundled": true,
-              "optional": true
-            },
-            "iconv-lite": {
-              "version": "0.4.24",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "safer-buffer": ">= 2.1.2 < 3"
-              }
-            },
-            "ignore-walk": {
-              "version": "3.0.3",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "minimatch": "^3.0.4"
-              }
-            },
-            "inflight": {
-              "version": "1.0.6",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "once": "^1.3.0",
-                "wrappy": "1"
-              }
-            },
-            "inherits": {
-              "version": "2.0.4",
-              "bundled": true,
-              "optional": true
-            },
-            "ini": {
-              "version": "1.3.5",
-              "bundled": true,
-              "optional": true
-            },
-            "is-fullwidth-code-point": {
-              "version": "1.0.0",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "number-is-nan": "^1.0.0"
-              }
-            },
-            "isarray": {
-              "version": "1.0.0",
-              "bundled": true,
-              "optional": true
-            },
-            "minimatch": {
-              "version": "3.0.4",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "brace-expansion": "^1.1.7"
-              }
-            },
-            "minimist": {
-              "version": "1.2.5",
-              "bundled": true,
-              "optional": true
-            },
-            "minipass": {
-              "version": "2.9.0",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "safe-buffer": "^5.1.2",
-                "yallist": "^3.0.0"
-              }
-            },
-            "minizlib": {
-              "version": "1.3.3",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "minipass": "^2.9.0"
-              }
-            },
-            "mkdirp": {
-              "version": "0.5.3",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "minimist": "^1.2.5"
-              }
-            },
-            "ms": {
-              "version": "2.1.2",
-              "bundled": true,
-              "optional": true
-            },
-            "needle": {
-              "version": "2.3.3",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "debug": "^3.2.6",
-                "iconv-lite": "^0.4.4",
-                "sax": "^1.2.4"
-              }
-            },
-            "node-pre-gyp": {
-              "version": "0.14.0",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "detect-libc": "^1.0.2",
-                "mkdirp": "^0.5.1",
-                "needle": "^2.2.1",
-                "nopt": "^4.0.1",
-                "npm-packlist": "^1.1.6",
-                "npmlog": "^4.0.2",
-                "rc": "^1.2.7",
-                "rimraf": "^2.6.1",
-                "semver": "^5.3.0",
-                "tar": "^4.4.2"
-              }
-            },
-            "nopt": {
-              "version": "4.0.3",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "abbrev": "1",
-                "osenv": "^0.1.4"
-              }
-            },
-            "npm-bundled": {
-              "version": "1.1.1",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "npm-normalize-package-bin": "^1.0.1"
-              }
-            },
-            "npm-normalize-package-bin": {
-              "version": "1.0.1",
-              "bundled": true,
-              "optional": true
-            },
-            "npm-packlist": {
-              "version": "1.4.8",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "ignore-walk": "^3.0.1",
-                "npm-bundled": "^1.0.1",
-                "npm-normalize-package-bin": "^1.0.1"
-              }
-            },
-            "npmlog": {
-              "version": "4.1.2",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "are-we-there-yet": "~1.1.2",
-                "console-control-strings": "~1.1.0",
-                "gauge": "~2.7.3",
-                "set-blocking": "~2.0.0"
-              }
-            },
-            "number-is-nan": {
-              "version": "1.0.1",
-              "bundled": true,
-              "optional": true
-            },
-            "object-assign": {
-              "version": "4.1.1",
-              "bundled": true,
-              "optional": true
-            },
-            "once": {
-              "version": "1.4.0",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "wrappy": "1"
-              }
-            },
-            "os-homedir": {
-              "version": "1.0.2",
-              "bundled": true,
-              "optional": true
-            },
-            "os-tmpdir": {
-              "version": "1.0.2",
-              "bundled": true,
-              "optional": true
-            },
-            "osenv": {
-              "version": "0.1.5",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "os-homedir": "^1.0.0",
-                "os-tmpdir": "^1.0.0"
-              }
-            },
-            "path-is-absolute": {
-              "version": "1.0.1",
-              "bundled": true,
-              "optional": true
-            },
-            "process-nextick-args": {
-              "version": "2.0.1",
-              "bundled": true,
-              "optional": true
-            },
-            "rc": {
-              "version": "1.2.8",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "deep-extend": "^0.6.0",
-                "ini": "~1.3.0",
-                "minimist": "^1.2.0",
-                "strip-json-comments": "~2.0.1"
-              }
-            },
-            "readable-stream": {
-              "version": "2.3.7",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "core-util-is": "~1.0.0",
-                "inherits": "~2.0.3",
-                "isarray": "~1.0.0",
-                "process-nextick-args": "~2.0.0",
-                "safe-buffer": "~5.1.1",
-                "string_decoder": "~1.1.1",
-                "util-deprecate": "~1.0.1"
-              }
-            },
-            "rimraf": {
-              "version": "2.7.1",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "glob": "^7.1.3"
-              }
-            },
-            "safe-buffer": {
-              "version": "5.1.2",
-              "bundled": true,
-              "optional": true
-            },
-            "safer-buffer": {
-              "version": "2.1.2",
-              "bundled": true,
-              "optional": true
-            },
-            "sax": {
-              "version": "1.2.4",
-              "bundled": true,
-              "optional": true
-            },
-            "semver": {
-              "version": "5.7.1",
-              "bundled": true,
-              "optional": true
-            },
-            "set-blocking": {
-              "version": "2.0.0",
-              "bundled": true,
-              "optional": true
-            },
-            "signal-exit": {
-              "version": "3.0.2",
-              "bundled": true,
-              "optional": true
-            },
-            "string-width": {
-              "version": "1.0.2",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "code-point-at": "^1.0.0",
-                "is-fullwidth-code-point": "^1.0.0",
-                "strip-ansi": "^3.0.0"
-              }
-            },
-            "string_decoder": {
-              "version": "1.1.1",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "safe-buffer": "~5.1.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "3.0.1",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "ansi-regex": "^2.0.0"
-              }
-            },
-            "strip-json-comments": {
-              "version": "2.0.1",
-              "bundled": true,
-              "optional": true
-            },
-            "tar": {
-              "version": "4.4.13",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "chownr": "^1.1.1",
-                "fs-minipass": "^1.2.5",
-                "minipass": "^2.8.6",
-                "minizlib": "^1.2.1",
-                "mkdirp": "^0.5.0",
-                "safe-buffer": "^5.1.2",
-                "yallist": "^3.0.3"
-              }
-            },
-            "util-deprecate": {
-              "version": "1.0.2",
-              "bundled": true,
-              "optional": true
-            },
-            "wide-align": {
-              "version": "1.1.3",
-              "bundled": true,
-              "optional": true,
-              "requires": {
-                "string-width": "^1.0.2 || 2"
-              }
-            },
-            "wrappy": {
-              "version": "1.0.2",
-              "bundled": true,
-              "optional": true
-            },
-            "yallist": {
-              "version": "3.1.1",
-              "bundled": true,
-              "optional": true
-            }
-          }
-        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "^2.0.1",
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1",
+            "to-regex-range": "^2.1.0"
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "optional": true,
+          "requires": {
+            "nan": "^2.12.1"
+          }
+        },
         "glob-parent": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -4113,9 +3782,9 @@
       }
     },
     "cli-width": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
-      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw=="
     },
     "cliui": {
       "version": "4.1.0",
@@ -4155,9 +3824,9 @@
       }
     },
     "clsx": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
-      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
     },
     "co": {
       "version": "4.6.0",
@@ -4437,9 +4106,9 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
     "core-js": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-      "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+      "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
     },
     "core-js-compat": {
       "version": "3.6.5",
@@ -4487,6 +4156,13 @@
       "requires": {
         "bn.js": "^4.1.0",
         "elliptic": "^6.0.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
       }
     },
     "create-hash": {
@@ -4553,9 +4229,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -4597,9 +4273,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -4636,9 +4312,9 @@
           "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
         },
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -4698,9 +4374,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -4784,9 +4460,9 @@
       }
     },
     "css-what": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
-      "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw=="
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
+      "integrity": "sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg=="
     },
     "cssdb": {
       "version": "4.4.0",
@@ -4835,9 +4511,9 @@
           }
         },
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "requires": {
             "argparse": "^1.0.7",
             "esprima": "^4.0.0"
@@ -4853,9 +4529,9 @@
           }
         },
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -4920,9 +4596,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -4963,9 +4639,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -5326,6 +5002,13 @@
         "bn.js": "^4.1.0",
         "miller-rabin": "^4.0.0",
         "randombytes": "^2.0.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
       }
     },
     "dir-glob": {
@@ -5528,9 +5211,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "electron-to-chromium": {
-      "version": "1.3.403",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.403.tgz",
-      "integrity": "sha512-JaoxV4RzdBAZOnsF4dAlZ2ijJW72MbqO5lNfOBHUWiBQl3Rwe+mk2RCUMrRI3rSClLJ8HSNQNqcry12H+0ZjFw=="
+      "version": "1.3.473",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.473.tgz",
+      "integrity": "sha512-smevlzzMNz3vMz6OLeeCq5HRWEj2AcgccNPYnAx4Usx0IOciq9DU36RJcICcS09hXoY7t7deRfVYKD14IrGb9A=="
     },
     "elliptic": {
       "version": "6.5.2",
@@ -5544,6 +5227,13 @@
         "inherits": "^2.0.1",
         "minimalistic-assert": "^1.0.0",
         "minimalistic-crypto-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
       }
     },
     "emoji-regex": {
@@ -5586,9 +5276,9 @@
       }
     },
     "enhanced-resolve": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz",
-      "integrity": "sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.2.0.tgz",
+      "integrity": "sha512-S7eiFb/erugyd1rLb6mQ3Vuq+EXHv5cpCkNqqIkYkBgN2QdFnyCZzFBleqwGEx4lgNGYij81BWnCrFNK7vxvjQ==",
       "requires": {
         "graceful-fs": "^4.1.2",
         "memory-fs": "^0.5.0",
@@ -5634,9 +5324,9 @@
       }
     },
     "entities": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
-      "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
     },
     "env-variable": {
       "version": "0.0.6",
@@ -5667,21 +5357,21 @@
       }
     },
     "es-abstract": {
-      "version": "1.17.5",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
-      "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
+      "version": "1.17.6",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
+      "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
       "requires": {
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
         "has-symbols": "^1.0.1",
-        "is-callable": "^1.1.5",
-        "is-regex": "^1.0.5",
+        "is-callable": "^1.2.0",
+        "is-regex": "^1.1.0",
         "object-inspect": "^1.7.0",
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.0",
-        "string.prototype.trimleft": "^2.1.1",
-        "string.prototype.trimright": "^2.1.1"
+        "string.prototype.trimend": "^1.0.1",
+        "string.prototype.trimstart": "^1.0.1"
       }
     },
     "es-to-primitive": {
@@ -5705,9 +5395,9 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.1.tgz",
-      "integrity": "sha512-Bmt7NcRySdIfNPfU2ZoXDrrXsG9ZjvDxcAlMfDUgRBjLOWTuIACXPBFJH7Z+cLb40JeQco5toikyc9t9P8E9SQ==",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.2.tgz",
+      "integrity": "sha512-InuOIiKk8wwuOFg6x9BQXbzjrQhtyXh46K9bqVTPzSo2FnyMBaYGBMC6PhQy7yxxil9vIedFBweQBMK74/7o8A==",
       "requires": {
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
@@ -5791,9 +5481,9 @@
           }
         },
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "requires": {
             "argparse": "^1.0.7",
             "esprima": "^4.0.0"
@@ -5815,9 +5505,9 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.10.1.tgz",
-      "integrity": "sha512-svTy6zh1ecQojvpbJSgH3aei/Rt7C6i090l5f2WQ4aB05lYHeZIR1qL4wZyyILTbtmnbHP5Yn8MrsOJMGa8RkQ==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
+      "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
       "dev": true,
       "requires": {
         "get-stdin": "^6.0.0"
@@ -6007,18 +5697,18 @@
       }
     },
     "eslint-plugin-prettier": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz",
-      "integrity": "sha512-+HG5jmu/dN3ZV3T6eCD7a4BlAySdN7mLIbJYo0z1cFQuI+r2DiTJEFeF68ots93PsnrMxbzIZ2S/ieX+mkrBeQ==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz",
+      "integrity": "sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==",
       "dev": true,
       "requires": {
         "prettier-linter-helpers": "^1.0.0"
       }
     },
     "eslint-plugin-react": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz",
-      "integrity": "sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.20.0.tgz",
+      "integrity": "sha512-rqe1abd0vxMjmbPngo4NaYxTcR3Y4Hrmc/jg4T+sYz63yqlmJRknpEQfmWY+eDWPuMmix6iUIK+mv0zExjeLgA==",
       "dev": true,
       "requires": {
         "array-includes": "^3.1.1",
@@ -6030,17 +5720,10 @@
         "object.values": "^1.1.1",
         "prop-types": "^15.7.2",
         "resolve": "^1.15.1",
-        "semver": "^6.3.0",
         "string.prototype.matchall": "^4.0.2",
         "xregexp": "^4.3.0"
       },
       "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
         "xregexp": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.3.0.tgz",
@@ -6076,9 +5759,9 @@
       }
     },
     "eslint-visitor-keys": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
-      "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.2.0.tgz",
+      "integrity": "sha512-WFb4ihckKil6hu3Dp798xdzSfddwKKU3+nGniKF6HfeW6OLd2OUDEPP7TcHtB5+QXOKg2s6B2DaMPE1Nn/kxKQ=="
     },
     "espree": {
       "version": "5.0.1",
@@ -6096,17 +5779,17 @@
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esquery": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.2.0.tgz",
-      "integrity": "sha512-weltsSqdeWIX9G2qQZz7KlTRJdkkOCTPgLYJUz1Hacf48R4YOwGPHO3+ORfWedqJKbq5WQmsgK90n+pFLIKt/Q==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz",
+      "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==",
       "requires": {
-        "estraverse": "^5.0.0"
+        "estraverse": "^5.1.0"
       },
       "dependencies": {
         "estraverse": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.0.0.tgz",
-          "integrity": "sha512-j3acdrMzqrxmJTNj5dbr1YbjacrYgAxVMeF0gK16E3j494mOe7xygM/ZLIguEQ0ETwAg2hlJCtHRGav+y0Ny5A=="
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz",
+          "integrity": "sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw=="
         }
       }
     },
@@ -6134,9 +5817,9 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
     "eventemitter3": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
-      "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg=="
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
+      "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ=="
     },
     "events": {
       "version": "3.1.0",
@@ -6331,9 +6014,9 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
     "fast-deep-equal": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-      "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-diff": {
       "version": "1.2.0",
@@ -6816,6 +6499,26 @@
         "locate-path": "^2.0.0"
       }
     },
+    "fine-uploader": {
+      "version": "5.16.2",
+      "resolved": "https://registry.npmjs.org/fine-uploader/-/fine-uploader-5.16.2.tgz",
+      "integrity": "sha1-DYeNoc0nU/gGg6wJHfXa/5/7jEQ="
+    },
+    "fine-uploader-wrappers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fine-uploader-wrappers/-/fine-uploader-wrappers-1.0.1.tgz",
+      "integrity": "sha1-BEqUMgdr0CrBQEhm7G4Zf8Zi/L8=",
+      "requires": {
+        "object-assign": "4.1.0"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.0.tgz",
+          "integrity": "sha1-ejs9DpgGPUP0wD8uiubNUahog6A="
+        }
+      }
+    },
     "flat-cache": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz",
@@ -7909,20 +7612,15 @@
       }
     },
     "graceful-fs": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
-      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
     },
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
-    "gud": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
-    },
     "gzip-size": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
@@ -7962,13 +7660,12 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "uglify-js": {
-          "version": "3.8.1",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.8.1.tgz",
-          "integrity": "sha512-W7KxyzeaQmZvUFbGj4+YFshhVrMBGSg2IbcYAjGWGvx8DHvJMclbTDMpffdxFUGPBHjIytk7KJUR/KUXstUGDw==",
+          "version": "3.9.4",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.9.4.tgz",
+          "integrity": "sha512-8RZBJq5smLOa7KslsNsVcSH+KOXf1uDU8yqLeNuVKwmT0T3FA0ZoXlinQfRad7SDcbZZRZE4ov+2v71EnxNyCA==",
           "optional": true,
           "requires": {
-            "commander": "~2.20.3",
-            "source-map": "~0.6.1"
+            "commander": "~2.20.3"
           }
         }
       }
@@ -8066,12 +7763,13 @@
       }
     },
     "hash-base": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
-      "integrity": "sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
       "requires": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
       }
     },
     "hash.js": {
@@ -8328,14 +8026,14 @@
       }
     },
     "http-parser-js": {
-      "version": "0.4.10",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz",
-      "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q="
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.2.tgz",
+      "integrity": "sha512-opCO9ASqg5Wy2FNo7A0sxy71yGbbkJJXLdgMK04Tcypw9jr2MgWbyubb0+WdmDmGnFflO7fRbqbaihh/ENDlRQ=="
     },
     "http-proxy": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
-      "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "requires": {
         "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
@@ -8684,9 +8382,9 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
     "image-to-base64": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/image-to-base64/-/image-to-base64-2.0.1.tgz",
-      "integrity": "sha512-DLwBA6556tXDvxjLqLAFM/HIynhu6a8AHd3kB7a+TieFEZIK4Qv72nVFFhREwLipfF8nU0EerOKfFNI44MiooA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/image-to-base64/-/image-to-base64-2.1.0.tgz",
+      "integrity": "sha512-Qlm5F5EJUkxMEY0uPVwbfEkirv4WowHGRj9LBPYU3bAuFucwhvIJiH9g3aJZ91A89jVq9GzmayiNvE2sEjQ9YQ==",
       "requires": {
         "node-fetch": "^1.7.3"
       }
@@ -8903,9 +8601,9 @@
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-callable": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
-      "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
+      "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw=="
     },
     "is-ci": {
       "version": "1.2.1",
@@ -9066,17 +8764,12 @@
       "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
       "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU="
     },
-    "is-promise": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
-    },
     "is-regex": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
-      "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
+      "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
       "requires": {
-        "has": "^1.0.3"
+        "has-symbols": "^1.0.1"
       }
     },
     "is-regexp": {
@@ -9192,9 +8885,9 @@
       },
       "dependencies": {
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "requires": {
             "argparse": "^1.0.7",
             "esprima": "^4.0.0"
@@ -9588,9 +9281,9 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "source-map-support": {
-          "version": "0.5.16",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz",
-          "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==",
+          "version": "0.5.19",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+          "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
           "requires": {
             "buffer-from": "^1.0.0",
             "source-map": "^0.6.0"
@@ -9941,9 +9634,9 @@
       }
     },
     "jss": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.1.1.tgz",
-      "integrity": "sha512-Xz3qgRUFlxbWk1czCZibUJqhVPObrZHxY3FPsjCXhDld4NOj1BgM14Ir5hVm+Qr6OLqVljjGvoMcCdXNOAbdkQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.3.0.tgz",
+      "integrity": "sha512-B5sTRW9B6uHaUVzSo9YiMEOEp3UX8lWevU0Fsv+xtRnsShmgCfIYX44bTH8bPJe6LQKqEXku3ulKuHLbxBS97Q==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "csstype": "^2.6.5",
@@ -9952,77 +9645,78 @@
       }
     },
     "jss-plugin-camel-case": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.1.1.tgz",
-      "integrity": "sha512-MDIaw8FeD5uFz1seQBKz4pnvDLnj5vIKV5hXSVdMaAVq13xR6SVTVWkIV/keyTs5txxTvzGJ9hXoxgd1WTUlBw==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.3.0.tgz",
+      "integrity": "sha512-tadWRi/SLWqLK3EUZEdDNJL71F3ST93Zrl9JYMjV0QDqKPAl0Liue81q7m/nFUpnSTXczbKDy4wq8rI8o7WFqA==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "hyphenate-style-name": "^1.0.3",
-        "jss": "10.1.1"
+        "jss": "^10.3.0"
       }
     },
     "jss-plugin-default-unit": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.1.1.tgz",
-      "integrity": "sha512-UkeVCA/b3QEA4k0nIKS4uWXDCNmV73WLHdh2oDGZZc3GsQtlOCuiH3EkB/qI60v2MiCq356/SYWsDXt21yjwdg==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.3.0.tgz",
+      "integrity": "sha512-tT5KkIXAsZOSS9WDSe8m8lEHIjoEOj4Pr0WrG0WZZsMXZ1mVLFCSsD2jdWarQWDaRNyMj/I4d7czRRObhOxSuw==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1"
+        "jss": "^10.3.0"
       }
     },
     "jss-plugin-global": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.1.1.tgz",
-      "integrity": "sha512-VBG3wRyi3Z8S4kMhm8rZV6caYBegsk+QnQZSVmrWw6GVOT/Z4FA7eyMu5SdkorDlG/HVpHh91oFN56O4R9m2VA==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.3.0.tgz",
+      "integrity": "sha512-etYTG/y3qIR/vxZnKY+J3wXwObyBDNhBiB3l/EW9/pE3WHE//BZdK8LFvQcrCO48sZW1Z6paHo6klxUPP7WbzA==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1"
+        "jss": "^10.3.0"
       }
     },
     "jss-plugin-nested": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.1.1.tgz",
-      "integrity": "sha512-ozEu7ZBSVrMYxSDplPX3H82XHNQk2DQEJ9TEyo7OVTPJ1hEieqjDFiOQOxXEj9z3PMqkylnUbvWIZRDKCFYw5Q==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.3.0.tgz",
+      "integrity": "sha512-qWiEkoXNEkkZ+FZrWmUGpf+zBsnEOmKXhkjNX85/ZfWhH9dfGxUCKuJFuOWFM+rjQfxV4csfesq4hY0jk8Qt0w==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1",
+        "jss": "^10.3.0",
         "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-props-sort": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.1.1.tgz",
-      "integrity": "sha512-g/joK3eTDZB4pkqpZB38257yD4LXB0X15jxtZAGbUzcKAVUHPl9Jb47Y7lYmiGsShiV4YmQRqG1p2DHMYoK91g==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.3.0.tgz",
+      "integrity": "sha512-boetORqL/lfd7BWeFD3K+IyPqyIC+l3CRrdZr+NPq7Noqp+xyg/0MR7QisgzpxCEulk+j2CRcEUoZsvgPC4nTg==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1"
+        "jss": "^10.3.0"
       }
     },
     "jss-plugin-rule-value-function": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.1.1.tgz",
-      "integrity": "sha512-ClV1lvJ3laU9la1CUzaDugEcwnpjPTuJ0yGy2YtcU+gG/w9HMInD5vEv7xKAz53Bk4WiJm5uLOElSEshHyhKNw==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.3.0.tgz",
+      "integrity": "sha512-7WiMrKIHH3rwxTuJki9+7nY11r1UXqaUZRhHvqTD4/ZE+SVhvtD5Tx21ivNxotwUSleucA/8boX+NF21oXzr5Q==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1"
+        "jss": "^10.3.0",
+        "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-vendor-prefixer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.1.1.tgz",
-      "integrity": "sha512-09MZpQ6onQrhaVSF6GHC4iYifQ7+4YC/tAP6D4ZWeZotvCMq1mHLqNKRIaqQ2lkgANjlEot2JnVi1ktu4+L4pw==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.3.0.tgz",
+      "integrity": "sha512-sZQbrcZyP5V0ADjCLwUA1spVWoaZvM7XZ+2fSeieZFBj31cRsnV7X70FFDerMHeiHAXKWzYek+67nMDjhrZAVQ==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.7",
-        "jss": "10.1.1"
+        "css-vendor": "^2.0.8",
+        "jss": "^10.3.0"
       }
     },
     "jsx-ast-utils": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
-      "integrity": "sha512-EdIHFMm+1BPynpKOpdPqiOsvnIrInRGJD7bzPZdPkjitQEqpdpUuFpq4T0npZFKTiB3RhWFdGN+oqOJIdhDhQA==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz",
+      "integrity": "sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==",
       "requires": {
-        "array-includes": "^3.0.3",
+        "array-includes": "^3.1.1",
         "object.assign": "^4.1.0"
       }
     },
@@ -10291,9 +9985,9 @@
       }
     },
     "loglevel": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.7.tgz",
-      "integrity": "sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A=="
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz",
+      "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA=="
     },
     "loose-envify": {
       "version": "1.4.0",
@@ -10517,9 +10211,9 @@
       }
     },
     "merge2": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
-      "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw=="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
     },
     "methods": {
       "version": "1.1.2",
@@ -10553,24 +10247,31 @@
       "requires": {
         "bn.js": "^4.0.0",
         "brorand": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
       }
     },
     "mime": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
-      "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA=="
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
+      "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
     },
     "mime-db": {
-      "version": "1.43.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-      "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ=="
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
     },
     "mime-types": {
-      "version": "2.1.26",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
-      "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
+      "version": "2.1.27",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
       "requires": {
-        "mime-db": "1.43.0"
+        "mime-db": "1.44.0"
       }
     },
     "mimic-fn": {
@@ -10579,13 +10280,12 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
     },
     "mini-create-react-context": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz",
-      "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
+      "integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
       "requires": {
-        "@babel/runtime": "^7.4.0",
-        "gud": "^1.0.0",
-        "tiny-warning": "^1.0.2"
+        "@babel/runtime": "^7.5.5",
+        "tiny-warning": "^1.0.3"
       }
     },
     "mini-css-extract-plugin": {
@@ -10682,9 +10382,9 @@
       }
     },
     "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
+      "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
     },
     "moo-server": {
       "version": "1.3.0",
@@ -10729,9 +10429,9 @@
       "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
     },
     "nan": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
-      "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
+      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
       "optional": true
     },
     "nanomatch": {
@@ -10895,9 +10595,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.53",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz",
-      "integrity": "sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ=="
+      "version": "1.1.58",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
+      "integrity": "sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg=="
     },
     "normalize-package-data": {
       "version": "2.5.0",
@@ -11000,9 +10700,13 @@
       "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw=="
     },
     "object-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.2.tgz",
-      "integrity": "sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz",
+      "integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
     },
     "object-keys": {
       "version": "1.1.1",
@@ -11029,14 +10733,13 @@
       }
     },
     "object.entries": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.1.tgz",
-      "integrity": "sha512-ilqR7BgdyZetJutmDPfXCDffGa0/Yzl2ivVNpbx/g4UeWrCdRnFDUBrKJGLhGieRHDATnyZXWBeCb29k9CJysQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.2.tgz",
+      "integrity": "sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==",
       "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.0-next.1",
-        "function-bind": "^1.1.1",
+        "es-abstract": "^1.17.5",
         "has": "^1.0.3"
       }
     },
@@ -11397,9 +11100,9 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
     "pbkdf2": {
-      "version": "3.0.17",
-      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz",
-      "integrity": "sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
+      "integrity": "sha512-4Ejy1OPxi9f2tt1rRV7Go7zmfDQ+ZectEQz3VGUQhgq62HtIRPDyG/JtnwIxs6x3uNMwo2V7q1fMvKjb+Tnpqg==",
       "requires": {
         "create-hash": "^1.1.2",
         "create-hmac": "^1.1.4",
@@ -11413,6 +11116,12 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "optional": true
+    },
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -11506,14 +11215,14 @@
       }
     },
     "popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
     },
     "portfinder": {
-      "version": "1.0.25",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
-      "integrity": "sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==",
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
+      "integrity": "sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==",
       "requires": {
         "async": "^2.6.2",
         "debug": "^3.1.1",
@@ -11567,9 +11276,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11602,9 +11311,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11612,9 +11321,9 @@
           }
         },
         "postcss-value-parser": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
-          "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg=="
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
         },
         "source-map": {
           "version": "0.6.1",
@@ -11641,9 +11350,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11676,9 +11385,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11710,9 +11419,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11745,9 +11454,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11779,9 +11488,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11816,9 +11525,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11850,9 +11559,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11883,9 +11592,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11917,9 +11626,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -11956,9 +11665,9 @@
           "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
         },
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12005,9 +11714,9 @@
           "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
         },
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12048,9 +11757,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12081,9 +11790,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12114,9 +11823,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12147,9 +11856,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12181,9 +11890,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12215,9 +11924,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12248,9 +11957,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12281,9 +11990,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12314,9 +12023,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12347,9 +12056,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12380,9 +12089,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12414,9 +12123,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12448,9 +12157,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12483,9 +12192,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12537,9 +12246,9 @@
           }
         },
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "requires": {
             "argparse": "^1.0.7",
             "esprima": "^4.0.0"
@@ -12573,9 +12282,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12606,9 +12315,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12639,9 +12348,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12675,9 +12384,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12713,9 +12422,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12757,9 +12466,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12793,9 +12502,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12831,9 +12540,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12867,9 +12576,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12945,9 +12654,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -12978,9 +12687,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13013,9 +12722,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13049,9 +12758,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13085,9 +12794,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13120,9 +12829,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13155,9 +12864,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13190,9 +12899,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13226,9 +12935,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13260,9 +12969,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13295,9 +13004,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13328,9 +13037,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13361,9 +13070,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13395,9 +13104,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13464,9 +13173,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13503,9 +13212,9 @@
           "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg=="
         },
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13549,9 +13258,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13585,9 +13294,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13618,9 +13327,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13651,9 +13360,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13685,9 +13394,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13719,9 +13428,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13765,9 +13474,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13800,9 +13509,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -13928,9 +13637,9 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
     },
     "promised-io": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/promised-io/-/promised-io-0.3.5.tgz",
-      "integrity": "sha1-StIXuzZYvKrplGsXqGaOzYUeE1Y="
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/promised-io/-/promised-io-0.3.6.tgz",
+      "integrity": "sha512-bNwZusuNIW4m0SPR8jooSyndD35ggirHlxVl/UhIaZD/F0OBv9ebfc6tNmbpZts3QXHggkjIBH8lvtnzhtcz0A=="
     },
     "prompts": {
       "version": "0.1.14",
@@ -13981,6 +13690,13 @@
         "parse-asn1": "^5.0.0",
         "randombytes": "^2.0.1",
         "safe-buffer": "^5.1.2"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
       }
     },
     "pump": {
@@ -14299,14 +14015,22 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-dropdown": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.7.0.tgz",
+      "integrity": "sha512-zFZ73pgLA32hArpE4j/7DtOEhOMg240XG5QvbAb0/VinGekkHDVIakMyAFUKC5jDz8jqXEltgriqFW9R5iCtPQ==",
+      "requires": {
+        "classnames": "^2.2.3"
+      }
+    },
     "react-easy-crop": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-2.1.1.tgz",
-      "integrity": "sha512-NCazRTnsCNPPv6EvIv8iJ93Sl5BA5z16HGfwz/d7WucZJiv5/g/H/YUdYKwaBaOOmn37MtA/1CSVGdExkHKMMA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-2.1.2.tgz",
+      "integrity": "sha512-LHXQFyJVXGMgmjSzX1KMeX1uE/dI26O2608DsrlCDwRKOkaS7Kb6pQjeS30efGfzrRkUD5Qff+ANxhaPO+pVNg==",
       "requires": {
         "@emotion/core": "^10.0.27",
         "@emotion/styled": "^10.0.27",
-        "tslib": "^1.10.0"
+        "tslib": "1.11.2"
       }
     },
     "react-easy-swipe": {
@@ -14322,10 +14046,41 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",
       "integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q=="
     },
+    "react-fine-uploader": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-fine-uploader/-/react-fine-uploader-1.1.1.tgz",
+      "integrity": "sha512-aUOZO3Wr8OynK2LyF2QMPHSe6gWSonNyk/hgo6olBRim92T/sa07pcy/sR2ljucrv9IaJC61Qb8ZGGfcs/I82A==",
+      "requires": {
+        "fine-uploader-wrappers": "^1.0.1",
+        "object-assign": "4.1.1",
+        "react-transition-group": "2.x"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+          "requires": {
+            "@babel/runtime": "^7.1.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+          "requires": {
+            "dom-helpers": "^3.4.0",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          }
+        }
+      }
+    },
     "react-google-login": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.1.3.tgz",
-      "integrity": "sha512-QMNzjekgJWA5T0iwDa4ZwhZBRMX5vwaaeo9bzyaj89P+JJyXrPR039PuotX6BdV5cyJAKBiloMxcbgnQgaPqcw==",
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.1.20.tgz",
+      "integrity": "sha512-/5vDx8Hy7Wo1fO1VC/0e5D6/ZGWgIgvcscI8mYZUQ653QOFf0c4GhTnKkebX5uE7m5rAB/2bzzZIUlIesGqWig==",
       "requires": {
         "@types/react": "*",
         "prop-types": "^15.6.0"
@@ -14340,13 +14095,23 @@
       }
     },
     "react-icons": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.9.0.tgz",
-      "integrity": "sha512-gKbYKR+4QsD3PmIHLAM9TDDpnaTsr3XZeK1NTAb6WQQ+gxEdJ0xuCgLq0pxXdS7Utg2AIpcVhM1ut/jlDhcyNg==",
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.10.0.tgz",
+      "integrity": "sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==",
       "requires": {
         "camelcase": "^5.0.0"
       }
     },
+    "react-image-crop": {
+      "version": "8.6.4",
+      "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-8.6.4.tgz",
+      "integrity": "sha512-5buyhUg9slzW+QGvN2dbpGSI1VqPxxmfEwe19TZXUB7LjW5+ljZOnrTSsteIzeBqmz6ngVucc8l+OrwgcDOSNg==",
+      "requires": {
+        "clsx": "^1.0.4",
+        "core-js": "^3.4.2",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-input-mask": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
@@ -14361,15 +14126,20 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-recaptcha": {
       "version": "2.3.10",
       "resolved": "https://registry.npmjs.org/react-recaptcha/-/react-recaptcha-2.3.10.tgz",
       "integrity": "sha512-IyanbozsYCuHvTYDuskZTIEcRAMG/sdvAu5b29iQWoC8Kd3Zk9WGCv2oNxh6RfGHvSvgHAyaLjmC6ei/yMsJ7g=="
     },
     "react-responsive-carousel": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.3.tgz",
-      "integrity": "sha512-B2Ezlw4DQsZEvC0kfOBFyloKmUZxUMF9sIbwMigfXp/6/dIHbiFHCJC/XthgtjonmeBFEAPlGl6rsFrK8/jbLg==",
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.7.tgz",
+      "integrity": "sha512-uqGCnoZukU+U1relhTNe8eVX/hMT5ELh1uxHCOxR6cH+A67eG2aX68e1pJnohWqXqPj/u+Pupt1q5j8LGhDabA==",
       "requires": {
         "classnames": "^2.2.5",
         "prop-types": "^15.5.8",
@@ -14377,15 +14147,15 @@
       }
     },
     "react-router": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
-      "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
       "requires": {
         "@babel/runtime": "^7.1.2",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.3.0",
+        "mini-create-react-context": "^0.4.0",
         "path-to-regexp": "^1.7.0",
         "prop-types": "^15.6.2",
         "react-is": "^16.6.0",
@@ -14394,15 +14164,15 @@
       }
     },
     "react-router-dom": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz",
-      "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
       "requires": {
         "@babel/runtime": "^7.1.2",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.1.2",
+        "react-router": "5.2.0",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       }
@@ -14496,9 +14266,9 @@
       }
     },
     "react-transition-group": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
-      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
       "requires": {
         "@babel/runtime": "^7.5.5",
         "dom-helpers": "^5.0.1",
@@ -14873,9 +14643,9 @@
       }
     },
     "regenerate": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
-      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
+      "integrity": "sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A=="
     },
     "regenerate-unicode-properties": {
       "version": "8.2.0",
@@ -14944,9 +14714,9 @@
       }
     },
     "regjsgen": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.1.tgz",
-      "integrity": "sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg=="
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
     },
     "regjsparser": {
       "version": "0.6.4",
@@ -15091,9 +14861,9 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "resolve": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
-      "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+      "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
       "requires": {
         "path-parse": "^1.0.6"
       }
@@ -15175,12 +14945,9 @@
       "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw=="
     },
     "run-async": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz",
-      "integrity": "sha512-xJTbh/d7Lm7SBhc1tNvTpeCHaEzoyxPrqNlvSdMfBTYwaY++UJFyXUOxAtsRUXjlqOfj8luNaR9vjCh4KeV+pg==",
-      "requires": {
-        "is-promise": "^2.1.0"
-      }
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ=="
     },
     "run-queue": {
       "version": "1.0.3",
@@ -15199,9 +14966,9 @@
       }
     },
     "safe-buffer": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
-      "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg=="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -16022,23 +15789,23 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
     "spdx-correct": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
-      "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
       "requires": {
         "spdx-expression-parse": "^3.0.0",
         "spdx-license-ids": "^3.0.0"
       }
     },
     "spdx-exceptions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
-      "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
     },
     "spdx-expression-parse": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
       "requires": {
         "spdx-exceptions": "^2.1.0",
         "spdx-license-ids": "^3.0.0"
@@ -16349,26 +16116,6 @@
         "es-abstract": "^1.17.5"
       }
     },
-    "string.prototype.trimleft": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz",
-      "integrity": "sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==",
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.5",
-        "string.prototype.trimstart": "^1.0.0"
-      }
-    },
-    "string.prototype.trimright": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz",
-      "integrity": "sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==",
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.5",
-        "string.prototype.trimend": "^1.0.0"
-      }
-    },
     "string.prototype.trimstart": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
@@ -16478,9 +16225,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "7.0.27",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz",
-          "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -16556,9 +16303,9 @@
       },
       "dependencies": {
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "requires": {
             "argparse": "^1.0.7",
             "esprima": "^4.0.0"
@@ -16628,9 +16375,9 @@
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "source-map-support": {
-          "version": "0.5.16",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz",
-          "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==",
+          "version": "0.5.19",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+          "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
           "requires": {
             "buffer-from": "^1.0.0",
             "source-map": "^0.6.0"
@@ -16875,9 +16622,9 @@
       "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw=="
     },
     "tslib": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",
-      "integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA=="
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.2.tgz",
+      "integrity": "sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg=="
     },
     "tty-browserify": {
       "version": "0.0.0",
@@ -16920,9 +16667,9 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
-      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w=="
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
+      "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ=="
     },
     "uglify-js": {
       "version": "1.3.5",
@@ -17228,13 +16975,138 @@
       }
     },
     "watchpack": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
-      "integrity": "sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
+      "integrity": "sha512-ymVbbQP40MFTp+cNMvpyBpBtygHnPzPkHqoIwRRj/0B8KhqQwV8LaKjtbaxF2lK4vl8zN9wCxS46IFCU5K4W0g==",
       "requires": {
-        "chokidar": "^2.1.8",
+        "chokidar": "^3.4.0",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.0"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+          "optional": true,
+          "requires": {
+            "normalize-path": "^3.0.0",
+            "picomatch": "^2.0.4"
+          }
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "optional": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "chokidar": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
+          "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
+          "optional": true,
+          "requires": {
+            "anymatch": "~3.1.1",
+            "braces": "~3.0.2",
+            "fsevents": "~2.1.2",
+            "glob-parent": "~5.1.0",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.4.0"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "optional": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "fsevents": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+          "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+          "optional": true
+        },
+        "glob-parent": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "optional": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "optional": true,
+          "requires": {
+            "binary-extensions": "^2.0.0"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+          "optional": true
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "optional": true,
+          "requires": {
+            "is-extglob": "^2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "optional": true
+        },
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+          "optional": true
+        },
+        "readdirp": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
+          "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
+          "optional": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "optional": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
+    "watchpack-chokidar2": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz",
+      "integrity": "sha512-9TyfOyN/zLUbA288wZ8IsMZ+6cbzvsNyEzSBp6e/zkifi6xxbl8SmQ/CxQq32k8NNqrdVEVUVSEf56L4rQ/ZxA==",
+      "optional": true,
+      "requires": {
+        "chokidar": "^2.1.8"
       }
     },
     "wbuf": {
@@ -17730,19 +17602,19 @@
       }
     },
     "websocket-driver": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz",
-      "integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
       "requires": {
-        "http-parser-js": ">=0.4.0 <0.4.11",
+        "http-parser-js": ">=0.5.1",
         "safe-buffer": ">=5.1.0",
         "websocket-extensions": ">=0.1.1"
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
     },
     "whatwg-encoding": {
       "version": "1.0.5",
@@ -18100,12 +17972,9 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "yaml": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.8.3.tgz",
-      "integrity": "sha512-X/v7VDnK+sxbQ2Imq4Jt2PRUsRsP7UcpSl3Llg6+NRRqWLIvxkMFYtH1FmvwNGYRKKPa+EPA4qDBlI9WVG1UKw==",
-      "requires": {
-        "@babel/runtime": "^7.8.7"
-      }
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
     },
     "yargs": {
       "version": "11.1.1",
diff --git a/package.json b/package.json
index f1406e90744274803c1dad0e9113e13cc6f50e3a..717525b3312961c92fe54772ca13bb3d873f9a20 100644
--- a/package.json
+++ b/package.json
@@ -7,19 +7,24 @@
     "@material-ui/icons": "^4.5.1",
     "@material-ui/lab": "^4.0.0-alpha.40",
     "@material-ui/styles": "^4.9.0",
+    "@syncfusion/ej2-react-inputs": "^18.2.45",
     "axios": "^0.19.2",
     "base64-img": "^1.0.4",
     "binary-extensions": "^2.0.0",
     "build": "^0.1.4",
+    "fine-uploader": "^5.16.2",
     "image-to-base64": "^2.0.1",
     "material-design-icons": "^3.0.1",
     "moment": "^2.24.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-dropdown": "^1.7.0",
     "react-easy-crop": "^2.1.0",
+    "react-fine-uploader": "^1.1.1",
     "react-google-login": "^5.0.7",
     "react-grid-system": "^4.4.11",
     "react-icons": "^3.8.0",
+    "react-image-crop": "^8.6.2",
     "react-input-mask": "^2.0.4",
     "react-recaptcha": "^2.3.10",
     "react-responsive-carousel": "^3.1.51",
diff --git a/public/index.html b/public/index.html
index 2e5c176d60246ce9ed6113d86e2f173f94db9d2a..a990c797fd83682f7876e6c3270c4c4e947ef868 100755
--- a/public/index.html
+++ b/public/index.html
@@ -1,30 +1,3 @@
-<!-- Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
 
-This file is part of Plataforma Integrada MEC.
 
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-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/>. -->
-
-<!DOCTYPE html>
-<html lang="pt-br">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Portal MEC</title>
-  </head>
-  <body >
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"/>
-  </body>
-</html>
+<!-- Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre Departamento de Informatica - Universidade Federal do Parana This file is part of Plataforma Integrada MEC. Plataforma Integrada MEC is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Plataforma Integrada MEC is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. 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/>. --> <!DOCTYPE html> <html lang="pt-br">   <head>     <meta charset="utf-8" /> 		<!-- google sign-in --> 		<meta name="google-signin-client_id" content="288460085642-k4veg4fo8kddvjer8b055n9da5qtgha7.apps.googleusercontent.com"> 		<script src="https://apis.google.com/js/platform.js" async defer></script>     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>Portal MEC</title>   </head>   <body >     <noscript>You need to enable JavaScript to run this app.</noscript>     <div id="root"/>   </body> </html>
diff --git a/src/App.js b/src/App.js
index c4ffd8534a3bf1739d7dd72283f1b59a95747895..fc1925780a702a4033886265c4e122a192efdacc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -43,6 +43,8 @@ import TabPlataformaMEC from './Pages/TabsHelp/TabPlataformaMEC';
 import ItemStore from './Pages/ItemStore.js'
 import EditProfilePage from './Pages/EditProfilePage.js'
 import PublicUserPage from './Pages/PublicUserPage.js'
+import UploadPage from './Pages/UploadPage.js'
+import EditLearningObjectPage from './Pages/EditLearningObjectPage.js'
 
 export default function App(){
   // eslint-disable-next-line
@@ -84,7 +86,7 @@ export default function App(){
         <Route path="/busca" component={Search} />
         <Route path="/perfil" component={UserPage} />
         <Route path="/editarperfil" component={EditProfilePage} />
-        <Route path="/recurso" component={ResourcePage}/>
+        <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={}*/}
@@ -99,7 +101,10 @@ export default function App(){
         <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} />
       </Switch>
       <EcFooter/>
diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index 992491f403c6fd30e32db8a1b5a3703f5eff4ca9..24a00b77a9afb3cc534a52925e70a622b06a4ff7 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -116,10 +116,17 @@ export default function ActivityListItem (props) {
 
     return (
         <StyledListItem>
-            <ListItemAvatar>
-                <Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar}/>
-            </ListItemAvatar>
-            {getNotificationIcon(activity.icon)}
+            {
+                !props.onMenuBar &&
+                <>
+                
+                <ListItemAvatar>
+                    <Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar}/>
+                </ListItemAvatar>
+                getNotificationIcon(activity.icon)
+
+                </>
+            }
             <ListItemText
                 primary = {
         			<div>
diff --git a/src/Components/Alert.js b/src/Components/Alert.js
new file mode 100644
index 0000000000000000000000000000000000000000..747b819931a0cf64cd14804dd23203bd3932be5c
--- /dev/null
+++ b/src/Components/Alert.js
@@ -0,0 +1,24 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React from 'react'
+import MuiAlert from '@material-ui/lab/Alert';
+
+export default function Alert(props) {
+  return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 2f777e529a9ccacda6f5f02351cbf083aa0e47db..f911ec1d0d1058885610be48f29f8b8387635106 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -69,45 +69,56 @@ class ReqResources extends Component {
       {row1.map(card => <Col md={3} sm={6} key={card.id}>
         <ResourceCardFunction
             avatar = {card.publisher.avatar}
+            id={card.id}
             thumbnail = {card.thumbnail}
             type = {card.object_type ? card.object_type : "Outros"}
             title={card.name}
             published={card.state === "published" ? true : false}
             likeCount={card.likes_count}
             liked={card.liked}
-            rating={card.score}
+            rating={card.review_average}
             author={card.author}
             tags={card.educational_stages}
-
+            href={'/recurso/' + card.id}
+            downloadableLink={card.default_attachment_location}
                       /></Col>)}
       </Row>
       <Row>
       {row2.map(card => <Col md={3} sm={6} key={card.id}>
         <ResourceCardFunction
             avatar = {card.publisher.avatar}
+            id={card.id}
             thumbnail = {card.thumbnail}
             type = {card.object_type ? card.object_type : "Outros"}
             title={card.name}
             published={card.state === "published" ? true : false}
             likeCount={card.likes_count}
             liked={card.liked}
-            rating={card.score}
+            rating={card.review_average}
             author={card.author}
-            tags={card.educational_stages} /></Col>)}
+            tags={card.educational_stages}
+            href={'/recurso/' + card.id}
+            downloadableLink={card.default_attachment_location}
+
+             /></Col>)}
       </Row>
       <Row>
       {row3.map(card => <Col md={3} sm={6} key={card.id}>
         <ResourceCardFunction
             avatar = {card.publisher.avatar}
+            id={card.id}
             thumbnail = {card.thumbnail}
             type = {card.object_type ? card.object_type : "Outros"}
             title={card.name}
             published={card.state === "published" ? true : false}
             likeCount={card.likes_count}
             liked={card.liked}
-            rating={card.score}
+            rating={card.review_average}
             author={card.author}
             tags={card.educational_stages}
+            href={'/recurso/' + card.id}
+            downloadableLink={card.default_attachment_location}
+
                       /></Col>)}
       </Row>
     </Carousel>
diff --git a/src/Components/ButtonAvaliarRecurso.js b/src/Components/ButtonAvaliarRecurso.js
new file mode 100644
index 0000000000000000000000000000000000000000..3e41d4fa84953a557ca68378dd2d6cd683f9670c
--- /dev/null
+++ b/src/Components/ButtonAvaliarRecurso.js
@@ -0,0 +1,26 @@
+import React, {useState} from 'react'
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+export default function ButtonAvaliarRecurso (props) {
+
+    return (
+        <StyledButton onClick={props.callback}>
+            <ExpandMoreIcon/> AVALIAR RECURSO
+        </StyledButton>
+    )
+}
+
+const StyledButton = styled(Button)`
+    &:hover {
+        background-color : #ed6f00 !important;
+    }
+    background-color : #ff7f00 !important;
+    color : #fff !important;
+    font-weight : 600 !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    .MuiSvgIcon-root {
+        vertical-align : middle !important;
+    }
+`
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index fd13f0da5a618b0793968ae0aab505c7f4ea510c..65ae71a2ab7c2de703e21e81679c32f7c4454481 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -1,14 +1,31 @@
-import React from 'react'
+import React, {useState, useContext} from 'react'
+import {Store} from '../Store.js'
 import Button from '@material-ui/core/Button';
 import styled from 'styled-components'
 import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
+import GuardarModal from './GuardarModal'
 
 export default function ButtonGuardarColecao (props) {
-    {/*add function*/}
+    const {state} = useContext(Store)
+    const [saveToCol, toggleSave] = useState(false)
+    const handleGuardar = () => {
+        if(state.currentUser.id === '') {
+            console.log('abrir login modal');
+        }
+        else {
+            toggleSave(true);
+        }
+    }
+
     return (
-        <StyledButton>
+        <>
+        <GuardarModal open={saveToCol} handleClose={() => {toggleSave(false)}}
+            thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
+        />
+        <StyledButton onClick={handleGuardar}>
                 <CreateNewFolderIcon/> &nbsp; GUARDAR
         </StyledButton>
+        </>
     )
 }
 
diff --git a/src/Components/CardOptions.js b/src/Components/CardOptions.js
index 6e06eeabf551fb935694870709011fff0f6080bc..4c10b4239ef6950f63020e83d6f3631c81fb3e96 100644
--- a/src/Components/CardOptions.js
+++ b/src/Components/CardOptions.js
@@ -27,6 +27,7 @@ import DownloadIcon from '@material-ui/icons/CloudDownload';
 import ShareIcon from '@material-ui/icons/Share';
 import AddIcon from '@material-ui/icons/CreateNewFolder';
 import ReportIcon from '@material-ui/icons/Error';
+
 export default function SimpleMenu() {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -51,30 +52,25 @@ export default function SimpleMenu() {
         onClose={handleClose}
       >
         <MenuItem onClick={handleClose}>
-          <ListItemIcon>
-            <OpenIcon />
-          </ListItemIcon>
-        Abrir</MenuItem>
+          <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+        </MenuItem>
+
         <MenuItem onClick={handleClose}>
-        <ListItemIcon>
-          <DownloadIcon />
-        </ListItemIcon>
-        Baixar</MenuItem>
+            <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
+        </MenuItem>
+
         <MenuItem onClick={handleClose}>
-        <ListItemIcon>
-          <ShareIcon />
-        </ListItemIcon>
-        Compartilhar</MenuItem>
+            <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
+        </MenuItem>
+
         <MenuItem onClick={handleClose}>
-        <ListItemIcon>
-          <AddIcon />
-        </ListItemIcon>
-        Guardar</MenuItem>
+            <ListItemIcon><AddIcon /></ListItemIcon>Guardar
+        </MenuItem>
+
         <MenuItem onClick={handleClose}>
-        <ListItemIcon>
-          <ReportIcon />
-        </ListItemIcon>
-        Reportar</MenuItem>
+            <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+        </MenuItem>
+
       </Menu>
     </div>
   );
diff --git a/src/Components/CloseModalButton.js b/src/Components/CloseModalButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..00e8b3c34553c1ced9ba1b6e397fd5f404ef571d
--- /dev/null
+++ b/src/Components/CloseModalButton.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+import CloseIcon from '@material-ui/icons/Close';
+
+export default function CloseModalButton (props) {
+    return (
+        <StyledCloseModalButton onClick={props.handleClose}>
+            <CloseIcon/>
+        </StyledCloseModalButton>
+    )
+}
+
+const StyledCloseModalButton = styled(Button)`
+    display : inline-block;
+    position : relative;
+    float : right !important;
+    margin-right : 4px !important;
+    background : transparent !important;
+    min-width: 0 !important;
+    width : 40px;
+`
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
new file mode 100644
index 0000000000000000000000000000000000000000..76b5b750be97631f4262bc89408dac4524116fdb
--- /dev/null
+++ b/src/Components/ColCardOwnerOptions.js
@@ -0,0 +1,94 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MenuItem from '@material-ui/core/MenuItem';
+import OpenIcon from '@material-ui/icons/OpenInNew';
+import CreateIcon from '@material-ui/icons/Create';
+import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import {Link} from 'react-router-dom'
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import styled from 'styled-components'
+import ModalExcluirColecao from './ModalExcluirColecao.js'
+
+export default function ColCardOwnerOptions (props) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  }
+
+  function handleClose() {
+    setAnchorEl(null);
+  }
+
+  const [modalExcluirOpen, toggleModalExcluir] = useState(false)
+  const openModalExcluir = () => {toggleModalExcluir(true)}
+
+  return (
+      <>
+        <ModalExcluirColecao id={props.id}
+            open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}}
+        />
+
+        <div style={{fontSize: "12px"}}>
+          <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+            OPÇÕES <MoreVertIcon style={{color : "inherit"}}/>
+          </Button>
+          <Menu
+            id="simple-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+            <StyledMenuItem>
+                <Link to={"/colecao-do-usuario/" + props.id}>
+                    <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+                </Link>
+            </StyledMenuItem>
+
+            <StyledMenuItem onClick={() => {console.log('TODO: MODAL EDITAR COLECAO')}}>
+                <ListItemIcon><CreateIcon /></ListItemIcon>Editar
+            </StyledMenuItem>
+
+            <StyledMenuItem onClick={openModalExcluir}>
+                <ListItemIcon><DeleteForeverIcon /></ListItemIcon>Excluir
+            </StyledMenuItem>
+
+
+          </Menu>
+        </div>
+    </>
+  )
+}
+
+export const StyledMenuItem = styled(MenuItem)`
+    color : #666 !important;
+
+    .MuiSvgIcon-root {
+        vertical-align : middle !important;
+    }
+    a {
+        text-decoration : none !important;
+        color : #666 !important;
+    }
+`
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
new file mode 100644
index 0000000000000000000000000000000000000000..2ba27fd6551072f69d9218be353c78d2e84413eb
--- /dev/null
+++ b/src/Components/ColCardPublicOptions.js
@@ -0,0 +1,102 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MenuItem from '@material-ui/core/MenuItem';
+import OpenIcon from '@material-ui/icons/OpenInNew';
+import {Link} from 'react-router-dom'
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import styled from 'styled-components'
+import ErrorIcon from '@material-ui/icons/Error';
+import ReportModal from './ReportModal.js'
+import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'
+import axios from 'axios'
+import {apiUrl} from '../env';
+
+export default function ColCardPublicOptions (props) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  }
+
+  function handleClose() {
+    setAnchorEl(null);
+  }
+
+  const [reportModalOpen, toggleReportModal] = useState(false)
+  const handleReportModal = (value) => {toggleReportModal(value)}
+
+  const handleUnfollow = () => {
+      let config = getAxiosConfig()
+      let payload = {}
+
+      axios.put( (`${apiUrl}/collections/` + props.id + '/follow'),payload, config).then(
+          (response) => {console.log(response.data)}, (error) => {console.log(error)})
+  }
+
+  return (
+      <>
+      <ReportModal open={reportModalOpen} handleClose={() => handleReportModal(false)}
+              form="colecao" complainableId={props.id}
+              complainableType={"Collection"}
+              />
+        <div style={{fontSize: "12px"}}>
+          <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+        <MoreVertIcon style={{color : "inherit"}}/>
+          </Button>
+          <Menu
+            id="simple-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+            <StyledMenuItem>
+                <Link to={"/colecao-do-usuario/" + props.id}>
+                    <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+                </Link>
+            </StyledMenuItem>
+
+            <StyledMenuItem onClick={handleUnfollow}>
+                <ListItemIcon><ErrorIcon /></ListItemIcon>Deixar de Seguir
+            </StyledMenuItem>
+
+            <StyledMenuItem onClick={() => {handleReportModal(true)}}>
+                <ListItemIcon><ErrorIcon /></ListItemIcon>Reportar
+            </StyledMenuItem>
+          </Menu>
+        </div>
+        </>
+  )
+}
+
+export const StyledMenuItem = styled(MenuItem)`
+    color : #666 !important;
+
+    .MuiSvgIcon-root {
+        vertical-align : middle !important;
+    }
+    a {
+        text-decoration : none !important;
+        color : #666 !important;
+    }
+`
diff --git a/src/Components/ColaborarModal.js b/src/Components/ColaborarModal.js
index 395f305fab1546d612c17c80df513fb5f1eda9cd..cc2e2950c326e7c898f65ea3b8f6d8a40a26a761 100644
--- a/src/Components/ColaborarModal.js
+++ b/src/Components/ColaborarModal.js
@@ -86,8 +86,8 @@ export default function ColaborarModal (props) {
             aria-labelledby="transition-modal-title"
             aria-describedby="transition-modal-description"
             open={props.open}
-            animation={true}
-            centered={true}
+             
+            centered="true"
             onClose={props.handleClose}
             closeAfterTransition
             BackdropComponent={Backdrop}
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index c1cb1415e67b5e81b62ebc087e52040c28ab75dc..424c0de04b6d1bb4082a7fc098d6cf3b07834a87 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -16,7 +16,8 @@ GNU Affero General Public License for more details.
 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/>.*/
 
-import React, {useState} from 'react';
+import React, {useState, useContext} from 'react';
+import {Store} from '../Store.js'
 import Card from '@material-ui/core/Card';
 import {apiDomain, apiUrl} from '../env';
 import Options from './CardOptions'
@@ -34,9 +35,13 @@ import FolderIcon from '@material-ui/icons/Folder';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import AddIcon from '@material-ui/icons/Add';
 import CheckIcon from '@material-ui/icons/Check';
-
+import LockIcon from '@material-ui/icons/Lock';
+import ColCardOwnerOptions from './ColCardOwnerOptions.js'
+import ColCardPublicOptions from './ColCardPublicOptions'
 
 export default function CollectionCardFunction (props) {
+    const {state} = useContext(Store)
+
     const [userAvatar, setUserAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
 
     const [followingHover, handleFollowingHover] = useState(false)
@@ -147,13 +152,16 @@ export default function CollectionCardFunction (props) {
                     </Header>
 
                     <Description> {/*renders rating, number of learning objects and likes count*/}
-                        <Rating
-                          name="customized-empty"
-                          value={props.rating*10}
-                          precision={0.5}
-                          style={{color:"#666"}}
-                          emptyIcon={<StarBorderIcon fontSize="inherit" />}
-                        />
+                        {
+                            props.authorID !== state.currentUser.id &&
+                            <Rating
+                              name="customized-empty"
+                              value={props.rating*10}
+                              precision={0.5}
+                              style={{color:"#666"}}
+                              emptyIcon={<StarBorderIcon fontSize="inherit" />}
+                            />
+                        }
 
                         <Footer>
                             <Type>
@@ -172,22 +180,49 @@ export default function CollectionCardFunction (props) {
 
                 </CardReaDiv>
 
-                <CardReaFooter> {/*renders following/unfollow and follow button*/}
-                    {
-                        props.followed ?
-                        (
-                            [
-                                RenderFollowingButton()
-                            ]
-                        )
-                        :
-                        (
-                            [
-                                RenderFollowButton()
-                            ]
-                        )
-                    }
-                </CardReaFooter>
+                {
+                    props.authorID === state.currentUser.id ?
+                    (
+                        <CardReaFooter style={{justifyContent : "space-between"}}> {/*renders following/unfollow and follow button*/}
+                            <Grid container>
+                                <Grid item xs={6} style={{display : "flex", justifyContent : "center"}}>
+                                    {
+                                        props.privacy === 'private' &&
+                                        <LockIcon style={{color : "#666"}}/>
+                                    }
+                                </Grid>
+                                <Grid item xs={6} style={{display : "flex", justifyContent : "flex-end"}}>
+                                    <ColCardOwnerOptions
+                                        id={props.id}
+                                        />
+                                </Grid>
+                            </Grid>
+                        </CardReaFooter>
+                    )
+                    :
+                    (
+                        <CardReaFooter> {/*renders following/unfollow and follow button*/}
+                        {
+                            props.followed ?
+                            (
+                                [
+                                    RenderFollowingButton()
+                                ]
+                            )
+                            :
+                            (
+                                [
+                                    RenderFollowButton()
+                                ]
+                            )
+                        }
+                        <ColCardPublicOptions
+                            id={props.id}
+                            />
+                        </CardReaFooter>
+                    )
+                }
+
             </CardDiv>
         </StyledCard>
     )
@@ -274,6 +309,7 @@ const CardReaFooter = styled.div`
     display : flex;
     justify-content : center;
     align-items : center;
+    border-top : 1px solid #e5e5e5;
 
     .MuiSvgIcon-root {
         font-family: 'Material Icons';
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c797282aeccccb928ede08e34d1c0e207830e3e
--- /dev/null
+++ b/src/Components/Comment.js
@@ -0,0 +1,329 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useContext, useEffect} from 'react'
+import {Store} from '../Store.js'
+import styled from 'styled-components'
+import Grid from '@material-ui/core/Grid';
+import { Button } from '@material-ui/core';
+import {Link} from 'react-router-dom'
+import {apiDomain} from '../env';
+import noAvatar from "../img/default_profile.png";
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import EditIcon from '@material-ui/icons/Edit';
+import TextField from "@material-ui/core/TextField";
+import axios from 'axios'
+import {apiUrl} from '../env';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ModalExcluir from './ModalExcluirComentario.js'
+
+export default function Comment (props) {
+
+    /*
+    Required props:
+        rerenderCallback = callback function to trigger re-render on parent component
+        reviewRatings = required to update comment even though the user cannot update their rating score...
+        objectID = collection/learning object id
+        reviewID = self-explanatory I hope
+        authorID = author id; links to public user page
+        authorAvatar = either a string denoting the author's avatar file location or null
+        rating = star rating
+        name = title (?)
+        authorName = author username
+        description = the  user comment itself
+        createdAt
+        recurso : boolean; determines whether to display orange or purple font
+    */
+    var moment = require('moment')
+
+    const {state} = useContext(Store)
+    const [displayedComment, setDisplayedComment] = useState(props.description)
+    const [editando, setEditando] = useState(false)
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const [modalOpen, toggleModal] = useState(false)
+
+    const [comment, setComment] = useState({
+        error : false,
+        value : props.description
+    })
+    const handleChange = (e) => {
+        const userInput = e.target.value
+        const flag = (userInput.length === 0 ? true : false);
+        setComment({...comment, error : flag, value : userInput})
+    }
+
+    const updateComment = () => {
+        const finalComment = comment
+        if (!finalComment.error) {
+            let config = {
+                headers : {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+                    'Client': sessionStorage.getItem('@portalmec/clientToken'),
+                    'Uid': sessionStorage.getItem('@portalmec/uid'),
+                }
+            }
+            let payload = {
+                "review" : {
+                    "name":null,
+                    "description":finalComment.value,
+                    "pros":null,
+                    "cons":null,
+                    "review_ratings_attributes" : props.reviewRatings
+                }
+            }
+
+            axios.put( (`${apiUrl}/learning_objects/` + props.objectID + '/reviews/' + props.reviewID),payload, config
+            ).then((response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                console.log(response)
+                setDisplayedComment(finalComment.value)
+                setEditando(false)
+                props.handleSnackbar(2)
+            }, (error) => {console.log(error)})
+        }
+    }
+
+    const deleteComment = () => {
+        let config = {
+            headers : {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+                'Client': sessionStorage.getItem('@portalmec/clientToken'),
+                'Uid': sessionStorage.getItem('@portalmec/uid'),
+            }
+        }
+        axios.delete( (`${apiUrl}/learning_objects/` + props.objectID + '/reviews/' + props.reviewID), config).then((response) => {
+            if ( response.headers['access-token'] ) {
+                sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+            }
+            props.rerenderCallback(); props.handleSnackbar(3)}, (error) => {console.log(error)})
+
+        toggleModal(false)
+
+    }
+
+    return (
+        <React.Fragment>
+        <ModalExcluir
+            open={modalOpen} handleClose={() => {toggleModal(false)}}
+            handleConfirm={deleteComment}
+            />
+        <Grid container style={{paddingLeft : "20px"}}>
+
+            <Grid item xs={1}>
+                {
+                    props.authorID &&
+                    <AvatarDiv>
+                        <Link to={'/usuario-publico/' + props.authorID}>
+                            <img src={props.authorAvatar ? apiDomain + props.authorAvatar : noAvatar} alt="author avatar"/>
+                        </Link>
+                    </AvatarDiv>
+                }
+            </Grid>
+
+            <Grid item xs={10}>
+                <Comentario>
+                    <div className="star-rating-container">
+                        <Rating
+                          name="read-only"
+                          value={props.rating}
+                          readOnly
+                          size="small"
+                          style={{color:"#666"}}
+                          emptyIcon={<StarBorderIcon fontSize="inherit" style={{color : "#a5a5a5"}} />}
+                        />
+                    </div>
+
+                    {
+                            props.name &&
+                            <strong>{props.name}</strong>
+                    }
+
+
+                    <div>
+                        {
+                            editando ?
+                            (
+                                <React.Fragment>
+                                    <div style={{marginTop : "5%", padding : "2px"}}>
+                                        <StyledTextField
+                                            colecao={!props.recurso}
+                                            id = "input-comentario"
+                                            label = {"Editar Comentário"}
+                                            margin = "normal"
+                                            value = {comment.value}
+                                            multiline={true}
+                                            rows="5"
+                                            onChange = {(e) => {handleChange(e)}}
+                                            style={{width:"100%"}}
+                                        />
+                                    </div>
+                                    <div style={{float : "right"}}>
+                                    <StyledButton
+                                        style={props.recurso ? {backgroundColor : "#ff7f00"} : {backgroundColor : "#673ab7"}}
+                                        onClick={() => {setEditando(false)}}
+                                    >
+                                        Fechar
+                                    </StyledButton>
+                                    <StyledButton
+                                        style={props.recurso ? {backgroundColor : "#ff7f00"} : {backgroundColor : "#673ab7"}}
+                                        onClick={() => updateComment()}
+                                    >
+                                        Salvar
+                                    </StyledButton>
+                                    </div>
+                                </React.Fragment>
+                            )
+                            :
+                            (
+                                <React.Fragment>
+                                    <p>
+                                        {
+                                            props.authorID &&
+                                            <Link
+                                                to={'/usuario-publico/' + props.authorID}
+                                                style={{
+                                                    fontWeight : "bolder",
+                                                    color : props.recurso ? "#ff7f00" : "#673ab7"
+                                                }}
+                                                >
+                                                {props.authorName}
+                                            </Link>
+                                        }
+                                        : {displayedComment}
+                                    </p>
+                                    {
+                                        props.authorID !== state.currentUser.id &&
+                                        <span className="date">
+                                            {moment(props.createdAt).format("DD/MM/YYYY")}
+                                        </span>
+                                    }
+                                </React.Fragment>
+                            )
+                        }
+                    </div>
+
+                </Comentario>
+            </Grid>
+
+            {
+                props.authorID === state.currentUser.id &&
+                <Grid item xs={1}>
+                    <StyledDiv>
+                        <Button onClick={handleClick}><EditIcon/></Button>
+                            <Menu
+                                id="simple-menu"
+                                anchorEl={anchorEl}
+                                keepMounted
+                                open={Boolean(anchorEl)}
+                                onClose={handleClose}
+                            >
+                            <MenuItem onClick={() => {setEditando(true); handleClose()}}>Editar</MenuItem>
+                            <MenuItem onClick={() => {toggleModal(true);handleClose()}}>Excluir</MenuItem>
+                            </Menu>
+                    </StyledDiv>
+                </Grid>
+            }
+        </Grid>
+        </React.Fragment>
+    )
+}
+
+const StyledTextField = styled(TextField)`
+    label.Mui-focused {
+        color : ${props => props.colecao ? "rgb(103,58,183)" : "rgb(255,127,0)"};
+    }
+
+    .MuiInput-underline::after {
+        border-bottom: ${props => props.colecao ? "2px solid rgb(103,58,183)" : "2px solid rgb(255,127,0)"};
+    }
+
+`
+
+const StyledDiv = styled.div`
+     text-align : center;
+     .MuiButton-root {
+         @media screen and (max-width: 990px) {
+             padding-right : 35px !important;
+         }
+     }
+`
+const StyledButton = styled(Button)`
+    color : rgba(255,255,255,0.87) !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    margin : 6px 8px !important;
+    font-weight : 600 !important;
+`
+
+const Comentario = styled.div`
+    @media screen and (max-width: 990px) {
+        padding-left : 55px !important;
+    }
+    font-size : 14px;
+
+    .star-rating-container {
+        width : 100px;
+    }
+
+    p {
+        margin : 0 0 10px;
+        padding-left : 2px
+    }
+
+    a {
+        text-decoration : none !important;
+    }
+
+    .date {
+        color : #ababab;
+        font-size : 12px;
+        font-weight : lighter;
+        padding-left : 3px;
+    }
+`
+
+const AvatarDiv = styled.div`
+    text-align : center;
+    float : left;
+    position : relative;
+    width : 65px;
+    height : 65px;
+    a {
+        text-decoration : none !important;
+    }
+
+    img {
+        width : 100% !important;
+        height : 100% !important;
+        border-radius : 100%
+        vertical-align : middle;
+    }
+`
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 972ec756d6c0b75bc9beb1a2607d0d97a80f89a6..09362df143e866e793127eec5d6394c62acbdbf9 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -16,53 +16,97 @@ GNU Affero General Public License for more details.
 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/>.*/
 
-import React, {useContext, useState} from 'react'
+import React, {useState} from 'react'
 import PersonAddIcon from '@material-ui/icons/PersonAdd';
 import styled from 'styled-components'
 import Button from '@material-ui/core/Button';
 import axios from 'axios'
 import {apiUrl} from '../../env';
-import { Store } from '../../Store.js';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig'
 
 export default function FollowButton (props) {
-    const {state} = useContext(Store)
 
     const handleFollow = (followerID) => {
         const id = followerID
         console.log('id: ', id)
-        {/*const header = {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-            'Access-Token': state.currentUser.accessToken,
-            'Client': state.currentUser.clientToken,
-            'Uid': sessionStorage.getItem('@portalmec/uid'),
-            'Host': 'api.portalmec.c3sl.ufpr.br',
-            'Cookie': ''
-        }
 
-        if (id != -1){
-            axios.post( (`${apiUrl}/users/` + id + '/follow'), header
-              ).then( (response) => {
-                    console.log(response)
-                }, (error) => {
-                    console.log(error)
-                })
-        }*/}
+        let payload = {}
+        const header = getAxiosConfig()
+
+        axios.put((`${apiUrl}/users/` + id + '/follow'), payload, header).then(
+            (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                console.log(response)
+                props.toggleFollowed()
+            },
+            (error) => {
+                  console.log(error)
+            }
+        )
+
     }
 
     return (
-        <StyledButon onClick={() => handleFollow(props.followerID)}>
+        <StyledButton onClick={() => handleFollow(props.followerID)}>
             <PersonAddIcon style={{fontSize : "24px",
                 display : "inline-block",
                 verticalAlign : "middle",
                 color : "#00bcd4"}}/>
             SEGUIR
-        </StyledButon>
+        </StyledButton>
     )
 }
 
+export function NoIcon (props) {
+
+    const handleFollow = (followerID) => {
+        const id = followerID
+        console.log('id: ', id)
+
+        if (id != undefined) {
+            let payload = {}
+            const header = getAxiosConfig()
+
+            axios.put((`${apiUrl}/users/` + id + '/follow'), payload, header).then(
+                (response) => {
+                    if ( response.headers['access-token'] ) {
+                        sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                    }
+                    console.log(response)
+                },
+                (error) => {
+                      console.log(error)
+                }
+            )
+        }
+    }
+
+    return (
+        <NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
+    )
+}
+
+const NoIconButton = styled(Button)`
+    .MuiButton-label {
+        color : #00bcd4 !important;
+    }
+    background-color : #fff !important;
+    border : solid 1px rgba(0,188,212,.85) !important;
+    font-size : 14px !important;
+    border-radius : 3px !important;
+    height : 36px !important;
+    min-width : 88px !important;
+    vertical-align : middle !important;
+    text-color : #00bcd4 !important;
+    align-items : center !important;
+    text-align : center !important;
+    padding : 0 6px !important;
+    margin : 6px 8px !important;
+`
 
-const StyledButon = styled(Button)`
+const StyledButton = styled(Button)`
     background-color : #fff !important;
     border : 1px solid #00bcd4 !important;
     color : #00bcd4 !important;
@@ -70,7 +114,7 @@ const StyledButon = styled(Button)`
     display : inline-block !important;
     position : relative !important;
     cursor : pointer !important;
-    min-height : 36px !important;
+    height : 36px !important;
     min-width : 88px !important;
     line-height : 36px !important;
     vertical-align : middle !important;
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 13285307af85f2c25c83e201dd3cf2039e05f94a..6fa7464a760885e617f37a1028aafc496b2b2610 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -16,17 +16,16 @@ GNU Affero General Public License for more details.
 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/>.*/
 
-import React, {useContext, useState} from 'react'
+import React, {useState} from 'react'
 import styled from 'styled-components'
 import Button from '@material-ui/core/Button';
 import FollowingIcon from '../../img/how_to_reg-24px.png'
 import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js'
 import axios from 'axios'
 import {apiUrl} from '../../env';
-import { Store } from '../../Store.js';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig'
 
 export default function FollowingButton (props) {
-    const {state} = useContext(Store)
 
     const [modalOpen, toggleModal] = useState(false)
     const [unfollowID, setUnfollowID] = useState(-1)
@@ -43,26 +42,22 @@ export default function FollowingButton (props) {
         const id = unfollowID
         console.log('id: ', id)
 
-        const header = {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-            'Access-Token': state.currentUser.accessToken,
-            'Client': state.currentUser.clientToken,
-            'Uid': sessionStorage.getItem('@portalmec/uid'),
-            'Host': 'api.portalmec.c3sl.ufpr.br',
-            'Cookie': ''
-        }
-
-        console.log('header: ', header)
-
-        {/*if (id != -1) {
-              axios.delete((`${apiUrl}/users/` + id + '/follow'), header
-              ).then( (response) => {
-                  console.log(response)
-              }, (error) => {
+        let payload = {}
+        const header = getAxiosConfig()
+
+        axios.put((`${apiUrl}/users/` + id + '/follow'), payload, header).then(
+            (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                console.log(response)
+                props.toggleFollowed()
+                toggleModal(false)
+            },
+            (error) => {
                   console.log(error)
-              })
-        }*/}
+            }
+        )
     }
 
     return (
diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index 7370561d724724c90bed686c607a63f1315f2d6b..83ce16ab91084f1761c0395ba4a9d16f66b232b6 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -49,21 +49,8 @@ export default function ImgMediaCard(props) {
   const classes = useStyles();
   const {state} = useContext(Store)
 
-  const [coverStyle, setCoverStyle] = useState({})
-
-  const createRequestHeader = () => {
-      const header = {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json',
-          'Access-Token': state.currentUser.accessToken,
-          'Client': state.currentUser.clientToken,
-          'Uid': sessionStorage.getItem('@portalmec/uid'),
-          'Host': 'api.portalmec.c3sl.ufpr.br',
-          'Cookie': ''
-      }
-      return header
-  }
-
+  const [followedBoolean, setFollowedBoolean] = useState(props.followed)
+  const toggleFollowed = () => {setFollowedBoolean(!followedBoolean)}
   return (
         <StyledCard>
             <CardDiv>
@@ -100,20 +87,20 @@ export default function ImgMediaCard(props) {
 
                             <div style={{display : "flex", justifyContent : "center"}}>
                                 {
-                                    props.followed ?
+                                    followedBoolean ?
                                     (
                                         [
-                                            <FollowingButton followedID={props.followerID}/>
+                                            <FollowingButton followedID={props.followerID} toggleFollowed={toggleFollowed}/>
                                         ]
                                     )
                                     :
                                     (
                                         [
-                                            <FollowButton followerID={props.followerID}/>
+                                            <FollowButton followerID={props.followerID} toggleFollowed={toggleFollowed}/>
                                         ]
                                     )
                                 }
-                                <Options/> {/*options menu missing functionalities*/}
+                                <Options followableID={props.followerID} followed={followedBoolean}/>
                             </div>
                     </UserInfo>
                 </CardContent>
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index 57cc1e4e3c4c95881480bb7741fc67254325ba0f..7cccf882fd8c034fd113d80dee2f2ecc7528b0e1 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -16,7 +16,8 @@ GNU Affero General Public License for more details.
 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/>.*/
 
-import React from 'react';
+import React, {useContext, useState} from 'react';
+import {Store} from '../Store.js'
 import styled from 'styled-components'
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
@@ -26,52 +27,101 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 import OpenIcon from '@material-ui/icons/OpenInNew';
 import ReportIcon from '@material-ui/icons/Error';
 import PersonAddIcon from '@material-ui/icons/PersonAdd';
+import axios from 'axios'
+import {apiUrl} from '../env';
+import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
+import ReportModal from './ReportModal.js'
+import {Link} from 'react-router-dom'
 
-export default function SimpleMenu() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
+export default function SimpleMenu(props) {
+    const {state} = useContext(Store)
+    const [anchorEl, setAnchorEl] = React.useState(null);
 
-  function handleClick(event) {
-    setAnchorEl(event.currentTarget);
-  }
+    function handleClick(event) {
+        setAnchorEl(event.currentTarget);
+    }
+
+    function handleClose() {
+        setAnchorEl(null);
+    }
+    const handleFollow = (followerID) => {
+        const id = followerID
+        console.log('id: ', id)
 
-  function handleClose() {
-    setAnchorEl(null);
-  }
+        let payload = {}
+        const header = getAxiosConfig()
+        axios.put((`${apiUrl}/users/` + id + '/follow'), payload, header).then(
+            (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                console.log(response)
+            },
+            (error) => {
+                console.log(error)
+            }
+        )
+    }
+
+    const [reportModal, toggleReportModal] = useState(false)
+    const handleModal = (value) => {
+        toggleReportModal(value)
+        {/*if (state.currentUser.id) {
+            toggleReportModal(!reportModal)
+        }
+        else {
+            toggleLoginModal(true)
+        }*/}
+    }
 
   return (
-    <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
-      <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
-        <MoreVertIcon style={{color : "#666"}}/>
-      </ButtonNoWidth>
-      <Menu
-        id="simple-menu"
-        anchorEl={anchorEl}
-        keepMounted
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-      >
-        <MenuItem onClick={handleClose}>
-          <ListItemIcon>
-            <OpenIcon />
-          </ListItemIcon>
-          Abrir
-        </MenuItem>
-
-        <MenuItem onClick={handleClose}>
-            <ListItemIcon>
-              <PersonAddIcon />
-            </ListItemIcon>
-            Seguir
-        </MenuItem>
-
-        <MenuItem onClick={handleClose}>
-            <ListItemIcon>
-              <ReportIcon />
-            </ListItemIcon>
-            Reportar
-        </MenuItem>
-      </Menu>
-    </div>
+      <>
+      {
+          reportModal &&
+          <ReportModal open={reportModal} handleClose={() => handleModal(false)}
+                  form="user" complainableId={props.followableID}
+                  complainableType={"User"}
+                  {...props}/>
+      }
+     <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
+          <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+            <MoreVertIcon style={{color : "#666"}}/>
+          </ButtonNoWidth>
+          <Menu
+            id="simple-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+            <StyledMenuItem onClick={handleClose}>
+                <Link to={"/usuario-publico/" + props.followableID}>
+                    <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+                </Link>
+            </StyledMenuItem>
+
+            {
+                props.followed ?
+                (
+                    <StyledMenuItem onClick={() => {handleFollow(props.followableID);handleClose()}}>
+                        <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir
+                    </StyledMenuItem>
+                )
+                :
+                (
+                    <StyledMenuItem onClick={() => {handleFollow(props.followableID);handleClose()}}>
+                        <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+                    </StyledMenuItem>
+                )
+            }
+
+
+            <StyledMenuItem onClick={() => {handleModal(true); handleClose()}}>
+                <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+            </StyledMenuItem>
+          </Menu>
+        </div>
+    </>
   );
 }
 
@@ -98,3 +148,14 @@ const ButtonNoWidth = styled(Button)`
         padding-left : 4px !important;
     }
     `
+
+const StyledMenuItem = styled(MenuItem)`
+    color : #666 !important;
+    .MuiSvgIcon-root {
+        vertical-align : middle !important;
+    }
+    a {
+        text-decoration : none !important;
+        color : #666 !important;
+    }
+`
diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..83560d9173fa7db7b68174553865c12e4fd6ae8c
--- /dev/null
+++ b/src/Components/CriarColecaoForm.js
@@ -0,0 +1,216 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useContext} from 'react'
+import {Store} from '../Store.js'
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import axios from 'axios'
+import {apiUrl} from '../env';
+
+export default function CriarColecaoForm (props) {
+    const {state} = useContext(Store)
+
+    const [value, setValue] = React.useState(-1);
+
+    /*values are set according to backend complaint id*/
+    const [options] = React.useState([
+        {value : "pública", text :'Pública (Sua coleção estará disponível para todos)'},
+        {value : "privada", text : 'Privada (Somente você poderá visualizar esta coleção)'}
+    ])
+
+    const handleChange = (event) => {
+        setValue(event.target.value);
+    };
+
+    const [colName, setColName] = React.useState({
+        key : false,
+        value : "",
+    })
+
+    const handleColName = (e) => {
+        const userInput = e.target.value
+
+        const flag = userInput.length == 0 ? true : false
+
+        setColName({...colName,
+            key : flag,
+            value : userInput
+        })
+    }
+
+    const formSubmit = (e) => {
+        e.preventDefault()
+
+        {/*if user didn't select either one, default to privada*/}
+        const finalRadioValue = value === 'pública' ? 'public' : 'private'
+        const finalColName = colName
+
+        console.log(finalRadioValue, finalColName.value)
+        if(!(finalColName.key)) {
+            let payload = {
+                "collection" : {
+                    "name" : finalColName.value,
+                    "owner_id" : state.currentUser.id,
+                    "owner_type" : "User",
+                    "privacy" : finalRadioValue
+                }
+            }
+            let config = {
+                headers : {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+                    'Client': sessionStorage.getItem('@portalmec/clientToken'),
+                    'Uid': sessionStorage.getItem('@portalmec/uid')
+                }
+            }
+
+            axios.post( (`${apiUrl}/collections/`), payload, config
+            ).then(
+                (response) => {
+                    console.log(response)
+                    if ( response.headers['access-token'] ) {
+                        sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                    }
+                    props.finalize(response.data.id)
+                }, (error) =>{console.log(error)})
+        }
+    }
+
+    return (
+        <form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>
+
+            <StyledTextField
+                id = {"col-name"}
+                label={"Nome da coleção"}
+                type = {"text"}
+                value = {colName.value}
+                onChange = {e => handleColName(e)}
+                error = {colName.key}
+
+                helperText = {colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br/>Ex: Matemática Ensino Médio </span> : ""}
+                required = {true}
+                style={{width:"100%"}}
+            />
+
+            <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span>
+
+            <StyledFormControl component="fieldset">
+                <RadioGroup value={value} onChange={handleChange}>
+                    {
+                        options.map(option =>
+                            <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} />
+                        )
+                    }
+                </RadioGroup>
+            </StyledFormControl>
+
+            <ButtonsDiv>
+                <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+                <ButtonEnviar type="submit">CRIAR COLEÇÃO</ButtonEnviar>
+            </ButtonsDiv>
+        </form>
+    );
+}
+
+export const ButtonsDiv = styled.div`
+    display : flex;
+    flex-direction : row;
+    justify-content : center;
+    align-items : center;
+`
+
+export const ButtonCancelar = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    height : 36px !important;
+    padding-left : 16px !important;
+    padding-right : 16px !important;
+    font-weight : 500 !important;
+    border-radius : 3px !important;
+    color :#666 !important;
+    background-color: transparent;
+    min-width : 88px !important;
+    height : 36px !important;
+`
+
+export const ButtonEnviar = styled(Button)`
+    background-color : #673ab7 !important;
+    color : #fff !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    height: 36px !important;
+    border-radius: 3px !important;
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    outline : none !important;
+    min-width : 88px !important;
+    vertical-align : middle !important;
+    margin : 6px 8px !important;
+    text-decoration : none !important;
+
+    .MuiButton-label {
+        padding-right : 16px;
+        padding-left : 16px;
+    }
+`
+export const StyledTextField = styled(TextField)`
+    margin : 18px 0 !important;
+
+    .MuiFormHelperText-root {
+        text-align : right;
+    }
+
+    label.Mui-focused {
+        color : #673ab7;
+    }
+
+    label.Mui-focused.Mui-error {
+        color : red;
+    }
+
+    .MuiInput-underline::after {
+        border-bottom: 2px solid #673ab7;
+    }
+`
+
+export const StyledFormControl = styled(FormControl)`
+    display : block !important;
+
+    .MuiFormControlLabel-root {
+        color : #666;
+    }
+    .MuiIconButton-label {
+        color : #666;
+    }
+    .PrivateRadioButtonIcon-checked {
+        color : orange;
+    }
+
+    .MuiTypography-body1 {
+        font-size : 14px;
+    }
+`
diff --git a/src/Components/CriarColecaoModal.js b/src/Components/CriarColecaoModal.js
new file mode 100644
index 0000000000000000000000000000000000000000..9b04f2dd04da1c6e3a71a5cb26a0839da1470ce4
--- /dev/null
+++ b/src/Components/CriarColecaoModal.js
@@ -0,0 +1,133 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react'
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import CriarColecaoForm from './CriarColecaoForm.js'
+import CloseIcon from '@material-ui/icons/Close';
+
+function CloseModalButton (props) {
+    return (
+        <StyledCloseModalButton onClick={props.handleClose}>
+            <CloseIcon/>
+        </StyledCloseModalButton>
+    )
+}
+
+export default function CriarColecaoModal (props) {
+
+    return (
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+             
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+        >
+            <Fade in={props.open}>
+                <Container>
+                    <Header>
+                        <span style={{width:"32px"}}/>
+                        <h2>Criar Coleção</h2>
+                        <CloseModalButton handleClose={props.handleClose}/>
+                    </Header>
+                    <Content style={{paddingTop : "0"}}>
+                        <CriarColecaoForm handleClose={props.handleClose} finalize={props.handleClose}/>
+                    </Content>
+                </Container>
+            </Fade>
+        </StyledModal>
+    )
+}
+
+const Content = styled.div`
+    padding : 20px 30px;
+    overflow-y: visible;
+
+`
+
+const Header = styled.div`
+    display : flex;
+    flex-direction : row;
+    padding : 10px 26px 0 26px;
+    align-items : center;
+    justify-content : space-between;
+    height : 64px;
+
+    h2 {
+        font-size : 26px;
+        font-weight : lighter;
+        color : #666
+    }
+`
+
+const StyledCloseModalButton = styled(Button)`
+    display : inline-block;
+    position : relative;
+    float : right !important;
+    margin-right : -8px !important;
+    background : transparent !important;
+    min-width: 0 !important;
+    width : 40px;
+`
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`
+
+const Container = styled.div`
+    box-sizing : border-box;
+    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+    background-color : white;
+    align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    max-height : none;
+    position : relative;
+    padding : 10px;
+    border-radius : 4px;
+
+    @media screen and (min-width : 96px) {
+        width : 500px;
+    }
+
+    @media screen and (max-width : 699px) {
+        width : 100%;
+        height : 100%;
+    }
+`
diff --git a/src/Components/Cropper.js b/src/Components/Cropper.js
index 2d20b2cdebaaf7f9bc3afecd3c9aa6b03b845f4f..28f09d420519098dec292a9818e7af032d595d80 100644
--- a/src/Components/Cropper.js
+++ b/src/Components/Cropper.js
@@ -15,63 +15,106 @@ GNU Affero General Public License for more details.
 
 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/>.*/
-import React, {Component} from 'react';
-import Slider from '@material-ui/core/Slider'
-import Cropper from 'react-easy-crop'
-
-export default class Easy_Cropper extends React.Component {
-  constructor (props) {
-      super(props);
-      this.state = {
-        image: '',
-        crop: { x: 0, y: 0 },
-        zoom: 1,
-        aspect: 4 / 3,
-      }
-  }
 
-  onCropChange = crop => {
-    this.setState({ crop })
-  }
+import ReactDOM from 'react-dom';
+import React, { PureComponent } from 'react';
+import ReactCrop from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+
+
+export default class Cropper extends PureComponent {
+  state = {
+    src: this.props.src,
+    crop:this.props.crop
+  };
+
+
+  // If you setState the crop in here you should return false.
+  onImageLoaded = image => {
+    this.imageRef = image;
+  };
+
+  onCropComplete = crop => {
+    this.makeClientCrop(crop);
+  };
+
+  onCropChange = (crop, percentCrop) => {
+    // You could also use percentCrop:
+    // this.setState({ crop: percentCrop });
+    this.setState({ crop });
+  };
+
+  async makeClientCrop(crop) {
+    if (this.imageRef && crop.width && crop.height) {
+      const croppedImageUrl = await this.getCroppedImg(
+        this.imageRef,
+        crop,
+        'newFile.jpeg'
+      );
 
-  onCropComplete = (croppedArea, croppedAreaPixels) => {
-    console.log(croppedArea, croppedAreaPixels)
+
+    }
   }
 
-  onZoomChange = zoom => {
-    this.setState({ zoom })
+
+
+  getCroppedImg(image, crop, fileName) {
+    const canvas = document.createElement('canvas');
+    const scaleX = image.naturalWidth / image.width;
+    const scaleY = image.naturalHeight / image.height;
+    canvas.width = crop.width;
+    canvas.height = crop.height;
+    const ctx = canvas.getContext('2d');
+
+    ctx.drawImage(
+      image,
+      crop.x * scaleX,
+      crop.y * scaleY,
+      crop.width * scaleX,
+      crop.height * scaleY,
+      0,
+      0,
+      crop.width,
+      crop.height
+    );
+    const reader = new FileReader();
+    canvas.toBlob(blob => {
+        reader.readAsDataURL(blob)
+        reader.onloadend = () => {
+            {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
+            this.props.update(reader.result)
+        }
+    })
+
   }
 
   render() {
+    const { crop, croppedImageUrl, src } = this.state;
+
     return (
-    <>
-      <Cropper
-        image={this.props.img}
-        crop={this.state.crop}
-        zoom={this.state.zoom}
-        aspect={this.state.aspect}
-        cropShape={this.props.cropShape}
-        showGrid={this.props.showGrid}
-        onCropChange={this.onCropChange}
-        onCropComplete={this.onCropComplete}
-        onZoomChange={this.onZoomChange}
-      />
-      <div className="controls">
-         <Slider
-           value={this.state.zoom}
-           min={1}
-           max={3}
-           step={0.1}
-           aria-labelledby="Zoom"
-           onChange={(e, zoom) => this.onZoomChange(zoom)}
-           classes={{ container: 'slider' }}
-         />
-       </div>
-    </>
-    )
+        <>
+        {src && (
+          <ReactCrop
+            src={src}
+            crop={crop}
+            circularCrop={this.props.circularCrop}
+            onImageLoaded={this.onImageLoaded}
+            onComplete={this.onCropComplete}
+            onChange={this.onCropChange}
+            style={{maxHeight : "300px", maxWidth : "100%"}}
+          />
+        )}
+        {/*croppedImageUrl && (
+          <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
+        )*/}
+        </>
+    );
   }
 }
 
+
+
+
 /*License for this component:
 MIT License
 
diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 415e8a0e0fdb9f77f8078a02051552a12fffba78..0ebb3e702040cd66f89e51dcf01f40b62f81c848 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -80,7 +80,7 @@ export default function SimpleExpansionPanel() {
     <div >
       <ExpansionPanelTeste>
         <ExpansionPanelSummaryColorido
-          expandIcon=<ExpandMoreIcon/>
+          expandIcon={<ExpandMoreIcon/>}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
new file mode 100644
index 0000000000000000000000000000000000000000..526ff7abdc28b1de5666ba4e573060edb5413902
--- /dev/null
+++ b/src/Components/Firulas.js
@@ -0,0 +1,55 @@
+import React, {useState} from 'react'
+import axios from 'axios'
+import {apiUrl} from '../env';
+import styled from 'styled-components'
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import {LikeCounter, ButtonNoWidth} from '../Components/ResourceCardFunction.js'
+import FavoriteIcon from '@material-ui/icons/Favorite';
+
+export default function Firulas (props) {
+    const [liked, setLiked] = useState(props.liked)
+
+    const handleLike = () => {
+        let payload = {}
+        let config = {
+            headers : {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+                'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+                'Client': sessionStorage.getItem('@portalmec/clientToken'),
+                'Uid': sessionStorage.getItem('@portalmec/uid'),
+            }
+        }
+
+        axios.put( (`${apiUrl}/learning_objects/` + props.recursoId + '/like'),payload, config
+    ).then( (response) => {setLiked(!liked)}, (error) => {console.log(error)})
+    }
+
+    return (
+        <ConteinerFirulas>
+            <Rating
+              name="customized-empty"
+              value={props.rating*10}
+              precision={0.5}
+              readOnly
+              style={{color:"#666", marginRight : "20px"}}
+              emptyIcon={<StarBorderIcon fontSize="inherit" />}
+            />
+            <LikeCounter style={{marginLeft : "-3px", display : "flex", alignItems : "center"}}>
+                <span>{props.likesCount}</span>
+
+                <ButtonNoWidth onClick={handleLike}>
+                    <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
+                </ButtonNoWidth>
+
+            </LikeCounter>
+        </ConteinerFirulas>
+    )
+}
+
+const ConteinerFirulas = styled.div`
+    margin-bottom : 30px;
+    display : inline-flex;
+    padding-bottom : 10px;
+`
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index cf46bd5a1ca1b7bf6c81f824b20a370a659f5099..c107ab51e881fe96da688cac2df8a6562a993c0f 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -63,7 +63,6 @@ export default function FormInput(props) {
   return (
 
         <StyledTextField
-          id="standard-basic"
           label={props.placeholder}
           margin="normal"
           id = {props.name}
@@ -81,8 +80,6 @@ export default function FormInput(props) {
           style={{width:"100%"}}
           mask={props.mask}
           multiline={props.multi}
-          rows={props.rows}
-          rowsMax={props.rowMax}
         />
   );
 }
diff --git a/src/Components/GreyButton.js b/src/Components/GreyButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..a2d687d5e50382fb1a39ec7bcf6bd5d3d314b47d
--- /dev/null
+++ b/src/Components/GreyButton.js
@@ -0,0 +1,56 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React from 'react'
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+
+export default function GreyButton (props) {
+    return (
+        <StyledButton onClick={props.callback}>
+            {props.text}
+        </StyledButton>
+    )
+}
+
+const StyledButton = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    max-height : 36px !important;
+
+    background-color : transparent !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+
+    .button-text {
+        cursor : pointer;
+        line-height : 36px;
+        text-align : center;
+        color : currentColor;
+        white-space : nowrap;
+        text-transform : uppercase;
+        font-weight : 600 !important;
+        font-size : 14px;
+        font-style : inherit;
+        font-variant : inherit;
+        padding : 6px 16px !important;
+    }
+`
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
new file mode 100644
index 0000000000000000000000000000000000000000..e43a63fc3a122cf882407e8f59d6c3676fc35955
--- /dev/null
+++ b/src/Components/GuardarModal.js
@@ -0,0 +1,403 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useContext, useState} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import SignUpContainer from './SignUpContainerFunction.js'
+import {Store} from '../Store.js'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../env';
+import CloseIcon from '@material-ui/icons/Close';
+import Grid from '@material-ui/core/Grid';
+import PublicIcon from '@material-ui/icons/Public';
+import LockIcon from '@material-ui/icons/Lock';
+import LoadingSpinner from './LoadingSpinner.js'
+import CriarColecaoForm from './CriarColecaoForm.js'
+import SnackbarComponent from './SnackbarComponent'
+
+function CloseModalButton (props) {
+    return (
+        <StyledCloseModalButton onClick={props.handleClose}>
+            <CloseIcon/>
+        </StyledCloseModalButton>
+    )
+}
+
+function getConfig () {
+    let config = {
+        headers : {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+            'Client': sessionStorage.getItem('@portalmec/clientToken'),
+            'Uid': sessionStorage.getItem('@portalmec/uid')
+        }
+    }
+    return config
+}
+
+export default function ReportModal (props) {
+    const {state} = useContext(Store)
+    const [collsArr, setcolls] = useState([])
+    const [loading, toggleLoading] = useState(true)
+    const [creatingCol, setCreating] = useState(false)
+
+    const getCols = () => {
+        if (collsArr.length === 0) {
+            const id = state.currentUser.id
+            const config = getConfig()
+
+            axios.get( (`${apiUrl}/users/` + id + '/collections'), config
+            ).then( (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                console.log(response)
+                setcolls(response.data)
+                toggleLoading(false)
+            }, (error) => {console.log('error')})
+        }
+    }
+
+    const postToCol = (colId) => {
+        const config = getConfig()
+        const payload = {
+            "collection" : {
+                "items" : [ {"id":props.recursoId, "type":"LearningObject"} ]
+            }
+        }
+
+        axios.post( (`${apiUrl}/collections/` + colId + '/items'), payload, config
+        ).then( (response) => {
+            if ( response.headers['access-token'] ) {
+                sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+            }
+            console.log(response)
+            toggleSnackbar(true)
+            setCreating(false)
+            props.handleClose()
+        }, (error) => {console.log(error)})
+    }
+
+    const [snackbarOpen, toggleSnackbar] = useState(false)
+
+    return (
+    <React.Fragment>
+        <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"O Recurso foi guardado na coleção!"}
+            />
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+            onRendered={() => {getCols()}}
+        >
+            <Fade in={props.open}>
+                <Container>
+                    <Header>
+                        <span style={{width:"32px"}}/>
+                        <h2>Guardar recurso</h2>
+                        <CloseModalButton handleClose={props.handleClose}/>
+                    </Header>
+                    <Content style={{paddingTop : "0"}}>
+                        <ResourceInfo>
+                            <img src={apiDomain + props.thumb} alt="thumbnail recurso"/>
+                            <div className="text">
+                                <h3>{props.title}</h3>
+                            </div>
+                        </ResourceInfo>
+                        {
+                            loading ?
+                            (
+                                <LoadingSpinner text="Carregando coleções"/>
+                            )
+                            :
+                            (
+                                <ChooseColContainer>
+                                    {
+                                        creatingCol ?
+                                        (
+                                            <CriarColecaoForm
+                                                handleClose={() => setCreating(false)}
+                                                finalize = {postToCol}
+                                                />
+                                        )
+                                        :
+                                        (
+                                                state.currentUser.collectionsCount === 0 ?
+                                                (
+                                                    <>
+                                                        <div classname="no-cols">
+                                                            <h2>Você não possui coleções ainda.</h2>
+                                                        </div>
+                                                    </>
+                                                )
+                                                :
+                                                (
+                                                    <>
+                                                        <ChooseCol>
+                                                            <h2>Escolha uma Coleção: </h2>
+                                                            <div className="cols-list">
+                                                            {
+                                                                collsArr.map(collection =>
+                                                                    <div className="row" key={collection.id}>
+                                                                        <div style={{display : "flex", flexDirection : "row", justifyContent : "space-between", alignItems : "center"}}>
+                                                                            {
+                                                                                collection.privacy === "public" ?
+                                                                                <PublicIcon className="icon"/>
+                                                                                : <LockIcon className="icon"/>
+                                                                            }
+                                                                            <h5>{collection.name}</h5>
+                                                                        </div>
+                                                                        <GuardarBotao onClick={() => {postToCol(collection.id)}}>GUARDAR</GuardarBotao>
+                                                                    </div>
+                                                                )
+                                                            }
+                                                            </div>
+                                                        </ChooseCol>
+                                                        <div style={{display : "flex", justifyContent : "center"}}>
+                                                            <CriarColButton onClick={() => {setCreating(true)}}>CRIAR COLEÇÃO</CriarColButton>
+                                                        </div>
+                                                    </>
+                                                )
+
+                                        )
+                                    }
+                                </ChooseColContainer>
+                            )
+                        }
+                    </Content>
+                </Container>
+            </Fade>
+        </StyledModal>
+    </React.Fragment>
+    )
+}
+
+const GuardarBotao = styled(Button)`
+    &:hover {
+        background-color : #503096 !important;
+    }
+    max-height : 36px !important;
+    background-color : #673ab7 !important;
+    color : #fff !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    padding-left : 32px !important;
+    padding-right : 32px !important;
+`
+
+const ChooseCol = styled.div`
+    display : flex;
+    flex-direction : column;
+    h2 {
+        margin-top : 20px;
+        margin-bottom : 10px;
+        font-size : 24px;
+        font-weight : 500;
+    }
+
+    .icon {
+        vertical-align : middle !important;
+        font-weight : normal !important;
+        font-style : normal !important;
+        font-size : 24px !important;
+        line-height : 1 !important;
+        letter-spacing : normal !important;
+        text-transform : none !important;
+        display : inline-block !important;
+        white-space : nowrap !important;
+        word-wrap : normal !important;
+        direction : ltr !important;
+        padding-right : 2px;
+    }
+
+    .cols-list {
+        overflow-x : hidden;
+        overflow-y : auto;
+
+        .row {
+            display : flex;
+            flex-direction : row;
+            padding : 10px;
+            border-radius : 5px;
+            max-height : 60px;
+            align-items : center;
+            align-content : center;
+            max-width : 100%;
+            justify-content : space-between;
+
+            h5 {
+                padding : 0 20px;
+                margin : 0;
+                font-size : 14px;
+                font-weight : 600;
+            }
+        }
+    }
+`
+
+const CriarColButton = styled(Button)`
+    width : 200px !important;
+    margin-top : 16px !important;
+    background-color : #673ab7 !important;
+    margin-left : auto !important;
+    margin-right : auto !important;
+    color : #fff !important;
+    font-weight : 600 !important;
+    box-shadow : !important;
+    padding-left : 0 2px 5px 0 rgba(0,0,0,.26) 16px !important;
+    padding-right : 16px !important;
+`
+
+const ChooseColContainer = styled.div`
+    display : flex;
+    flex-direction : column;
+    color : #666;
+
+    .no-cols {
+        align-self : center;
+        margin-top : 20px;
+        margin-bottom : 30px;
+        font-size : 24px;
+        font-weight : 500;
+    }
+`
+
+const ResourceInfo = styled.div`
+    margin-top : 0;
+    background-color : #f4f4f4;
+    overflow : hidden;
+    border-radius : 5px;
+    display : flex;
+    flex-direction : row;
+    align-items : center;
+    align-content : center;
+    max-wdith : 100%;
+    justify-content : space-between;
+
+    .text {
+        max-height : 100%;
+        max-width : 66.66%;
+        display : flex;
+        flex-direction : column;
+        text-align : center;
+
+        h3 {
+            font-size : 20px;
+            font-weight : 500;
+            padding : 10px;
+        }
+    }
+
+    img {
+        object-fit : cover;
+        height : 115px;
+        max-width : 165px;
+        background-color : #e5e5e5;
+        float : left;
+        padding : 0;
+
+        @media screen and (min-width : 600px) {
+            margin-right : 20px;
+            margin-bottom : 0;
+        }
+        @media screen and (max-width : 768px) {
+            width : 100%;
+        }
+    }
+
+`
+
+const Content = styled.div`
+    padding : 20px 30px;
+    overflow-y : scroll;
+
+`
+
+const Header = styled.div`
+    display : flex;
+    flex-direction : row;
+    padding : 10px 26px 0 26px;
+    align-items : center;
+    justify-content : space-between;
+    height : 64px;
+
+    h2 {
+        font-size : 26px;
+        font-weight : lighter;
+        color : #666
+    }
+`
+
+const StyledCloseModalButton = styled(Button)`
+    display : inline-block;
+    position : relative;
+    float : right !important;
+    margin-right : -8px !important;
+    background : transparent !important;
+    min-width: 0 !important;
+    width : 40px;
+`
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`
+
+const Container = styled.div`
+    box-sizing : border-box;
+    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+    background-color : white;
+    align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    max-height : none;
+    position : relative;
+    padding : 10px;
+    border-radius : 4px;
+
+    @media screen and (min-width : 700px) {
+        max-width : 600px;
+        max-height : 600px;
+    }
+
+    @media screen and (max-width : 699px) {
+        width : 100%;
+        height : 100%;
+    }
+`
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 1cc29c0f2c7fd098006ace20f7d1086c291fc666..361645e47b00b59106bc9cdb4ad7db45a6568536 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -70,7 +70,7 @@ export default function Header(props){
       <>
           <AcessibilityBar/>
           <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
-          anchorOrigin = {{ vertical:'top', horizontal:'middle' }}
+          anchorOrigin = {{ vertical:'top', horizontal:'center' }}
           >
               <Alert severity="success" style={{backgroundColor:"#00acc1"}}>Você está conectado(a)!</Alert>
           </Snackbar>
diff --git a/src/Components/HelperFunctions/checkAccessLevel.js b/src/Components/HelperFunctions/checkAccessLevel.js
new file mode 100644
index 0000000000000000000000000000000000000000..5cc5ea4b77468376236fcb72af66df18f4ebb80c
--- /dev/null
+++ b/src/Components/HelperFunctions/checkAccessLevel.js
@@ -0,0 +1,14 @@
+import React, {useContext} from 'react'
+import {Store} from '../../Store.js'
+
+export function checkAccessLevel (levelToCheck) {
+    const {state} = useContext(Store)
+
+    if (state.currentUser.id != '') {
+        return(checkUserRole(levelToCheck))
+    }
+
+    const checkUserRole = (userRole) => {
+        return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
+    }
+}
diff --git a/src/Components/HelperFunctions/getAxiosConfig.js b/src/Components/HelperFunctions/getAxiosConfig.js
new file mode 100644
index 0000000000000000000000000000000000000000..99aef6a0221b4ca3c670ab966156b7d87178143d
--- /dev/null
+++ b/src/Components/HelperFunctions/getAxiosConfig.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+export const getAxiosConfig = () => {
+    let config = {
+        headers : {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+        }
+    }
+    config.headers["Access-Token"] = sessionStorage.getItem('@portalmec/accessToken');
+    config.headers.Client = sessionStorage.getItem('@portalmec/clientToken')
+    config.headers.Uid = sessionStorage.getItem('@portalmec/uid')
+
+    return config
+}
diff --git a/src/Components/HelperFunctions/getDefaultThumbnail.js b/src/Components/HelperFunctions/getDefaultThumbnail.js
new file mode 100644
index 0000000000000000000000000000000000000000..7bdaa5f274f409de0649a0fc6657ab49ca96e330
--- /dev/null
+++ b/src/Components/HelperFunctions/getDefaultThumbnail.js
@@ -0,0 +1,63 @@
+import React from 'react'
+import Animacao from '../../img/laranja/ANIMACAO_SIMULACAO.jpg'
+import AplicativoMovel from '../../img/laranja/APP.jpg'
+import Apresentacao from '../../img/laranja/APRESENTACAO.jpg'
+import Audio from '../../img/laranja/AUDIO.jpg'
+import Empty from '../../img/laranja/EMPTY.jpg'
+import Imagem from '../../img/laranja/IMAGEM.jpg'
+import Infografico from '../../img/laranja/INFOGRAFICO.jpg'
+import Jogo from '../../img/laranja/JOGO.jpg'
+import LivroDigital from '../../img/laranja/LIVRO_DIGITAL.jpg'
+import Mapa from '../../img/laranja/MAPA.jpg'
+import Outros from '../../img/laranja/OUTROS.jpg'
+import SoftwareEducacional from '../../img/laranja/SOFTWARE.jpg'
+import Texto from '../../img/laranja/TEXTO.jpg'
+import Video from '../../img/laranja/VIDEO.jpg'
+
+export const getDefaultThumbnail = (objType) => {
+    switch (objType.toLowerCase()) {
+        case "imagem":
+            return Imagem;
+            break;
+        case "mapa":
+            return Mapa;
+            break;
+        case "software educacional" :
+            return SoftwareEducacional;
+            break;
+        case "aplicativo móvel":
+            return AplicativoMovel;
+            break;
+        case "apresentação":
+            return Apresentacao;
+            break;
+        case "áudio":
+            return Audio;
+            break;
+        case "infográfico":
+            return Infografico;
+            break;
+        case "jogo":
+            return Jogo;
+            break;
+        case "livro digital" :
+            return LivroDigital;
+            break;
+        case "texto":
+            return Texto;
+            break;
+        case "vídeo":
+            return Video;
+            break;
+        case "animação":
+            return Animacao;
+            break;
+        case null:
+            return Empty;
+            break;
+        default:
+            return Outros;
+            break;
+
+        }
+}
diff --git a/src/Components/IllegalContentModal.js b/src/Components/IllegalContentModal.js
index 7b2060f5d40fec1594801d148248e21257dcfea9..01ccf37bca84035048722dc7e1175c0c4b03a3f9 100644
--- a/src/Components/IllegalContentModal.js
+++ b/src/Components/IllegalContentModal.js
@@ -100,8 +100,8 @@ export default function IllegalContentModal (props) {
         aria-labelledby="transition-modal-title"
         aria-describedby="transition-modal-description"
         open={props.open}
-        animation={true}
-        centered={true}
+         
+        centered="true"
         onClose={props.handleClose}
         closeAfterTransition
         BackdropComponent={Backdrop}
diff --git a/src/Components/LoginComponent.js b/src/Components/LoginComponent.js
deleted file mode 100644
index f82c24c668af5f5063c0cbfbffca422ef5cf0093..0000000000000000000000000000000000000000
--- a/src/Components/LoginComponent.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-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/>.*/
-
-import React, {useContext, useState, useEffect} from 'react';
-import { Button } from '@material-ui/core';
-import Modal from '@material-ui/core/Modal';
-import Backdrop from '@material-ui/core/Backdrop';
-import Zoom from '@material-ui/core/Fade';
-import styled from 'styled-components'
-import LoginContainer from './LoginContainerFunction.js'
-import {Store} from '../Store.js'
-import axios from 'axios'
-import {apiUrl} from '../env';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-
-
-
-function Alert(props) {
-  return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
-export default function LoginComponent (props) {
-    const {state, dispatch} = useContext(Store)
-
-    /*snackbar variables*/
-    const [successSnackbar, toggleSuccessSnackbar] = useState(false)
-    const [failSnackbar, toggleFailSnackbar] = useState(false)
-
-
-    useEffect( () => {
-        if(state.currentUser.id === '') {
-            const email = sessionStorage.getItem('@portalmec/uid')
-            const password = sessionStorage.getItem('@portalmec/senha')
-
-            let loginInfo = {email : email, senha : password}
-            tryLogin(loginInfo)
-        }
-    }, [])
-
-    const tryLogin = (login) => {
-        axios.post(`${apiUrl}/auth/sign_in`,
-            {
-            email : login.email,
-            password : login.senha
-        }).then( (response) => {
-                console.log(response)
-                handleSuccess(response, login.senha)
-            },
-            (error) => {
-                handleFailure()
-            }
-        )
-    }
-
-    const handleSuccess = (response, senha) => {
-        toggleSuccessSnackbar(true)
-        dispatch ({
-            type: "USER_LOGGED_IN",
-            userLoggedIn: !state.userIsLoggedIn,
-            login: {
-                id : response.data.data.id,
-                username : response.data.data.name,
-                email : response.data.data.email,
-                accessToken : response.headers['access-token'],
-                clientToken : response.headers.client,
-                userAvatar : response.data.data.avatar_file_name,
-                userCover : response.data.data.cover_file_name,
-                uid : response.data.data.uid,
-                followCount : response.data.data.follows_count,
-                collectionsCount : response.data.data.collections_count,
-                submitter_request : response.data.data.submitter_request
-                }
-            }
-        )
-        sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
-        sessionStorage.setItem('@portalmec/clientToken', response.headers.client)
-        sessionStorage.setItem('@portalmec/id', response.data.data.id)
-        sessionStorage.setItem('@portalmec/username', response.data.data.name)
-        sessionStorage.setItem('@portalmec/uid', response.data.data.uid)
-        sessionStorage.setItem('@portalmec/senha', senha)
-        props.handleClose()
-    }
-
-    const handleFailure = () => {
-        toggleFailSnackbar(false)
-    }
-
-    return (
-        <>
-        {/*failure snackbar-----------------------------------------------------------------*/}
-            <Snackbar open={failSnackbar} autoHideDuration={1000} onClose={() => {toggleFailSnackbar(false)}}
-            anchorOrigin = {{ vertical:'top', horizontal:'right' }}
-            >
-                <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
-            </Snackbar>
-        {/*---------------------------------------------------------------------------------*/}
-
-        {/*success snackbar-----------------------------------------------------------------*/}
-            <Snackbar open={successSnackbar} autoHideDuration={1000}
-            onClose={() => {toggleSuccessSnackbar(false)}} anchorOrigin = {{ vertical:'top', horizontal:'middle' }}
-            >
-                <Alert severity="success" style={{backgroundColor:"#00acc1"}}>Você está conectado(a)!</Alert>
-            </Snackbar>
-        {/*---------------------------------------------------------------------------------*/}
-
-
-        <StyledLogin
-            aria-labelledby="transition-modal-title"
-            aria-describedby="transition-modal-description"
-            open={props.open}
-            animation={true}
-            centered={true}
-            onClose={props.handleClose}
-            closeAfterTransition
-            BackdropComponent={Backdrop}
-            BackdropProps={{
-                timeout: 500,
-            }}
-         >
-            <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
-                <LoginContainer
-                    handleClose={props.handleClose}
-                    openSignUp={props.openSignUp}
-                    handleLoginInfo={tryLogin}
-                />
-            </Zoom>
-        </StyledLogin>
-        </>
-    )
-
-}
-const StyledLogin = styled(Modal)`
-    margin : 0 !important;
-    margin-left : 0 !important;
-    display : flex;
-    align-items: center;
-    justify-content : center;
-    text-align : center;
-    padding : 10px !important;
-    border-radius : 4px;
-
-`
diff --git a/src/Components/LoginContainer.js b/src/Components/LoginContainer.js
index ccdc075a1565fb8a139d21a0c8ffe1f951555fc1..aaf89d2182dfb74eedb1da3228ea950ae5880e76 100644
--- a/src/Components/LoginContainer.js
+++ b/src/Components/LoginContainer.js
@@ -107,7 +107,7 @@ class LoginContainer extends Component {
                         </H3Styled>
                     </H3Div>
 
-                    <form ref="form" onSubmit={this.onSubmit}>
+                    <form onSubmit={this.onSubmit}>
                         <FormInput
                             inputType={"text"}
                             name={"email"}
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 3aef0866eee02c55fcadadc2751a4af19c46f206..31aa61bef9e926835707b867bbe1a943caf432c0 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -26,6 +26,7 @@ import LabeledCheckbox from './Checkbox.js'
 import FormInput from "./FormInput.js"
 import GoogleLogo from "../img/logo_google.svg"
 import ValidateUserInput from '../Components/FormValidationFunction.js'
+import {Link} from 'react-router-dom'
 
 export default function LoginContainer (props) {
     const [formEmail, setEmail] = useState(
@@ -94,7 +95,7 @@ export default function LoginContainer (props) {
     }
 
     //arrumar isso
-    const responseGoogle = (response) => {
+    const handleGoogleResponse = (response) => {
       console.log(response);
     }
 
@@ -111,16 +112,16 @@ export default function LoginContainer (props) {
                 </DialogHeaderStyled>
 
                 <DialogContentDiv>
-                    {/*<SocialConnectDiv>
-                        <StyledGoogleLoginButton
-                            clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
-                            onSuccess={responseGoogle}
-                            onFailure={responseGoogle}
+                    <SocialConnectDiv>
+                        {/*<StyledGoogleLoginButton
+                            clientId="288460085642-k4veg4fo8kddvjer8b055n9da5qtgha7.apps.googleusercontent.com"
+                            onSuccess={ }
+                            onFailure={ }
                             cookiePolicy={'single_host_origin'}
                         >
                         <span style={{textTransform:"none", fontSize:"13px", color : "#666"}}>Usando o Google</span>
-                        </StyledGoogleLoginButton>
-                    </SocialConnectDiv>*/}
+                        </StyledGoogleLoginButton>*/}
+                    </SocialConnectDiv>
 
                     <H3Div>
                         <H3Styled>
@@ -156,7 +157,7 @@ export default function LoginContainer (props) {
 
                         <RememberRecover>
                             <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)}/>
-                            <UserForgotTheirPasswordSpan>Esqueceu a senha? <a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></UserForgotTheirPasswordSpan>
+                            <UserForgotTheirPasswordSpan>Esqueceu a senha? <Link to={"recuperar-senha"} style={{textAlign: "right", color:"#4cd0e1"}} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan>
                         </RememberRecover>
 
                         <ConfirmContainerStyled>
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 65f72448929b8d24389c8fbffbc9d834524a7833..5f2c5931996915e89c6c79e6820d7172d406cc19 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -69,6 +69,7 @@ export default function LoginModal (props){
                 type: "USER_LOGGED_IN",
                 userLoggedIn: !state.userIsLoggedIn,
                 login: {
+                    askTeacherQuestion : response.data.data.ask_teacher_question,
                     id : response.data.data.id,
                     username : response.data.data.name,
                     email : response.data.data.email,
@@ -79,7 +80,8 @@ export default function LoginModal (props){
                     uid : response.data.data.uid,
                     followCount : response.data.data.follows_count,
                     collectionsCount : response.data.data.collections_count,
-                    submitter_request : response.data.data.submitter_request
+                    submitter_request : response.data.data.submitter_request,
+                    roles : response.data.data.roles 
                     }
                 }
             )
@@ -114,8 +116,7 @@ export default function LoginModal (props){
             aria-labelledby="transition-modal-title"
             aria-describedby="transition-modal-description"
             open={props.open}
-            animation={true}
-            centered={true}
+            centered="true"
             onClose={props.handleClose}
             closeAfterTransition
             BackdropComponent={Backdrop}
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 4517732b096fb959792360634750dbf71249d69c..8ea5f1620e085fcf23fa8ae0b867a8bb3df1ef84 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -37,12 +37,13 @@ const ContainerStyled = styled(Container)`
     align-items: center;
     border-top: 1px rgba(0,0,0,.1) solid;
     padding: 5px;
-    *{
-      margin-left: 10px;
-    }
+
+
 `
 const ButtonStyled = styled(Button)`
     text-transform: capitalize !important;
+    margin : 0 8px !important;
+    font-weight : normal !important;
 `
 
 const ButtonPublicarRecurso = styled(Button)`
@@ -55,6 +56,10 @@ const ButtonPublicarRecurso = styled(Button)`
     text-transform: capitalize !important;
     font-stretch : expanded;
     max-width: 200 !important;
+    .MuiSvgIcon-root {
+        vertical-align : middle !important;
+        margin-right : 5px !important;
+    }
 `
 
 const IconSearchStyled = styled(IconSearch)`
@@ -86,6 +91,8 @@ const ButtonPubRecursoStyled = styled(Button)`
     border : 1.5px #666 solid !important;
     color: #666;
     box-shadow: none;
+    margin : 0 8px !important;
+    font-weight : normal !important;
 `
 
 
@@ -136,10 +143,9 @@ export default function MenuBar(props){
         {
             state.userIsLoggedIn
             ? (
-                [
                     <>
                         <div style={{boxSizing:"border-box"}}>
-                            <Link to="/termos-publicar-recurso">
+                            <Link to="/termos-publicar-recurso" cameFromPublishButton={true}>
                                 <ButtonPublicarRecurso>
                                     <CloudUploadIcon style={{color:"white", marginLeft : "0"}}/>
                                         <span style={{color : "#fff", textAlign: "center", alignSelf : "center", fontWeight:"500"}} >
@@ -157,16 +163,13 @@ export default function MenuBar(props){
                         <MenuList items={minhaArea}/>
 
                     </>
-                ]
             )
             : (
-                [
                     <React.Fragment>
                         <ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
                         <ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{color:"#00bcd4"}}/>Entrar</ButtonStyled>
                         <ButtonStyled onClick={props.openSignUp}>Cadastre-se</ButtonStyled>
                     </React.Fragment>
-                ]
             )
         }
 
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index dbce4d09a9262d78a4b0603166b3fd163a9fa92e..796b57b386e93056825e0ced50a2b1d8b4a4cae0 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.js
@@ -116,7 +116,7 @@ export default function MenuList(props) {
             <Link  to={{
                 pathname : item.href,
                 state : item.value
-            }} style={{textDecoration:"none"}} ><MenuItem style= {{fontSize:"14px", padding:"5px 20px", color:"#666"}}>{item.name}</MenuItem></Link>
+            }} style={{textDecoration:"none"}} key={item.value}><MenuItem style= {{fontSize:"14px", padding:"5px 20px", color:"#666"}}>{item.name}</MenuItem></Link>
         )
         }
         <StyledButtonSair onClick={handleLogout}> <StyledMenuItem disableGutters={true}>Sair<StyledExitToAppIcon/></StyledMenuItem></StyledButtonSair>
diff --git a/src/Components/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
similarity index 59%
rename from src/Components/ComponentAlterarAvatar.js
rename to src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
index 469586bca425745bf6e634af07e0c852f0f963be..657c8183971fc197ba1c1a4a36dd1f4e6d31fe21 100644
--- a/src/Components/ComponentAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
@@ -16,18 +16,18 @@ GNU Affero General Public License for more details.
 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/>.*/
 
-import React, {useContext,Component, useState} from 'react';
+import React, {useContext, useState} from 'react';
 import { Button } from '@material-ui/core';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
 import Zoom from '@material-ui/core/Fade';
 import styled from 'styled-components'
-import {Store} from '../Store.js'
+import {Store} from '../../Store.js'
 import axios from 'axios'
-import {apiUrl, apiDomain} from '../env';
+import {apiUrl, apiDomain} from '../../env';
 import CloseIcon from '@material-ui/icons/Close';
-import Profile from '../img/default_profile0.png'
-import Cropper from './Cropper.js'
+import Profile from '../../img/default_profile0.png'
+import Cropper from '../Cropper.js'
 
 
 function ChooseImage (props) {
@@ -39,11 +39,12 @@ function ChooseImage (props) {
                         <img src={props.avatar}
                             alt="user avatar" style={{height:"inherit", width:"inherit", objectFit:"cover"}}
                         />
-                        <input accept="image/*" id="icon-button-file"
+                    <input accept="image/*" id="avatar-file"
                         type="file"
-                        onChange={(e) => props.handleFile(e.target.files) }
+                        onChange={(e) => props.handleFile(e.target.files)}
+                        style={{display : "none"}}
                         />
-                        <label for="icon-button-file" style={{width:"inherit"}}>
+                        <label for="avatar-file" style={{width:"inherit"}}>
                             <ChangeAvatarDiv >
                                 <span>Alterar</span>
                             </ChangeAvatarDiv>
@@ -59,34 +60,81 @@ function ChooseImage (props) {
                 <ButtonCancelar onClick={props.handleClose}>
                     <span>Cancelar</span>
                 </ButtonCancelar>
-                <StyledButtonConfirmar>
+                <ButtonConfirmar>
                     <span>Salvar Alterações</span>
-                </StyledButtonConfirmar>
+                </ButtonConfirmar>
             </ButtonsDiv>
         </div>
     )
 }
 
+const GetHeaderConfig = () => {
+
+    let config = {
+        headers : {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+            'Client': sessionStorage.getItem('@portalmec/clientToken'),
+            'Uid': sessionStorage.getItem('@portalmec/uid'),
+        }
+    }
+    {/*'Host': 'api.portalmec.c3sl.ufpr.br',
+    'Cookie': ''*/}
+    return config
+}
+
 export default function ComponentAlterarAvatar (props) {
+    const {state, dispatch} = useContext(Store)
     const [uploadingImage, setUploading] = useState(false)
-    const [tempImgURL, setTempImg] = useState(null)
 
-    const handleFile = (selectorFiles : FileList) => {
-        console.log(selectorFiles[0])
-        console.log('am i actually changing anything????')
-        {/*setTempImg(URL.createObjectURL(selectorFiles[0]))*/}
+    const handleFile = (selectorFiles) => {
         const objectURL = URL.createObjectURL(selectorFiles[0])
         console.log(objectURL)
+        setTempImg(objectURL)
         setUploading(true)
-
     }
 
+    const [tempImgURL, setTempImg] = useState(null)
+
+    const [newAvatar, setNewAvatar] = useState('')
+    const updateAvatar = (avatar) => {setNewAvatar(avatar)}
+
+    const [crop] = useState({
+        unit: "%" ,
+        width : 30,
+        aspect: 1
+    });
+
+    const completeSelection = () => {
+        console.log(newAvatar)
+        //newAvatar is a base64 encoded image file
+        let fdAvatar = new FormData()
+        fdAvatar.set('user[avatar]', newAvatar)
+
+        axios.put( (`${apiUrl}/users/` + props.id ),
+            fdAvatar,
+            GetHeaderConfig()
+        ).then( (response) => {
+            console.log(response)
+            if ( response.headers['access-token'] ) {
+                sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+            }
+            const target = state.currentUser
+            const source = {userAvatar : response.data.avatar}
+            dispatch({
+                type : 'USER_CHANGED_COVER',
+                currUser : Object.assign(target, source)
+            })
+        }, (error) => {console.log(error)}
+        )
+    }
 
     return (
-            <ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
+        <ModalDiv>
             <HeaderDiv>
                 <span style={{width:"32px"}}/>
-                    <StyledH2>Editar Foto</StyledH2>
+                    <StyledH2>{uploadingImage ? 'Alterar foto do perfil' : 'Editar Foto'}</StyledH2>
                     <StyledCloseModalButton onClick={props.handleClose}>
                         <CloseIcon style={{color : "#666"}}/>
                     </StyledCloseModalButton>
@@ -101,14 +149,17 @@ export default function ComponentAlterarAvatar (props) {
                                 <TextoEditarDiv>
                                     Clique nos ícones e arraste para selecionar a parte que você quer da foto
                                 </TextoEditarDiv>
-                                <EditarImagemDiv>
-                                    <Cropper img={tempImgURL} altText={'cropped image'} cropShape={"round"}
-                                    showGrid={false}/>
-                                </EditarImagemDiv>
-                                <FooterButtonsDiv>
-                                    <Button style={{backgroundColor :"#9e9e9e"}}>ESCOLHER OUTRA</Button>
-                                </FooterButtonsDiv>
+                                <div style={{maxWidth : "500px", maxHeight : "300px"}}>
+                                    <Cropper src={tempImgURL} crop={crop} circularCrop={true} update={updateAvatar}/>
+                                </div>
                             </EditarDiv>
+                            <FooterButtonsDiv>
+                                <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
+                                <div>
+                                    <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+                                    <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
+                                </div>
+                            </FooterButtonsDiv>
                         </>
                     ]
                 )
@@ -116,7 +167,6 @@ export default function ComponentAlterarAvatar (props) {
                 (
                     [
                         <>
-                        {console.log('am i correctly rendering at least?')}
                             <ChooseImage
                                 avatar={props.userAvatar === '' || props.userAvatar == null ? Profile : `${apiDomain}` + props.userAvatar}
                                 handleFile={handleFile}
@@ -128,8 +178,8 @@ export default function ComponentAlterarAvatar (props) {
                 )
             }
             </DialogDiv>
-            </ModalDiv>
-        )
+        </ModalDiv>
+    )
 
 }
 
@@ -138,29 +188,12 @@ const FooterButtonsDiv = styled.div`
     display : flex;
     flex-direction : row;
     align-content : center;
-    justify-content : center;
+    justify-content : space-between;
     Button {
         margin-top : 20px;
     }
 `
 
-const EditarImagemDiv = styled.div`
-    width : 500px;
-    border-radius : 0;
-    height : 300px;
-    position : relative;
-    justify-content: center;
-    Cropper {
-        height : 100%;
-        width: 100%;
-        top: 50%;
-        left:50%;
-        margin-top: -150px;
-        margin-left:-150px;
-        cursor:default;
-    }
-`
-
 const TextoEditarDiv = styled.div`
     margin-bottom : 15px;
     align-self : center;
@@ -175,89 +208,49 @@ const EditarDiv = styled.div`
 `
 
 const ChangeAvatarDiv = styled.div`
-color : rgba(255,255,255,.7);
-background-color:rgba(0,0,0,.5);
-position: absolute;
-bottom: 0;
-width: inherit;
-text-align: center;
-font-size: 18px;
-padding-bottom: 5px;
-font-weight: 400;
-height: 30%;
-cursor: pointer;
-display: flex;
-align-items: center;
-justify-content: center;
+    color : rgba(255,255,255,.7);
+    background-color:rgba(0,0,0,.5);
+    position: absolute;
+    bottom: 0;
+    width: inherit;
+    text-align: center;
+    font-size: 18px;
+    padding-bottom: 5px;
+    font-weight: 400;
+    height: 30%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 `
 
-
 const ModalDiv = styled.div`
-background-color : #fff;
-border-radius : 4px;
-min-width : 560px;
-color : #666;
-display: flex;
-flex-direction : column;
+    background-color : #fff;
+    border-radius : 4px;
+    min-width : 560px;
+    color : #666;
+    display: flex;
+    flex-direction : column;
+    @media screen and (max-width: 959px) {
+        height : 100%;
+        width : 100%;
+    }
 `
-
-const StyledButtonConfirmar = styled(Button)`
-    background-color : #00acc1 !important;
-    color: #fff !important;
-    display: inline-block !important;
-    position: relative !important;
-    cursor: pointer !important;
-    min-height: 36px !important;
-    min-width: 88px !important;
-    line-height: 36px !important;
-    vertical-align: middle !important;
-    align-items: center !important;
-    text-align: center !important;
-    border-radius: 4px !important;
-    box-sizing: border-box !important;
-    user-select: none !important;
-    border: 0 !important;
-    padding: 0 6px !important;
-    margin: 6px 8px !important;
-    white-space: nowrap !important;
-    text-transform: uppercase !important;
-    font-weight: 500 !important;
-    font-size: 14px !important;
-    font-style: inherit !important;
-    font-variant: inherit !important;
-    font-family: inherit !important;
-    text-decoration: none !important;
-    overflow: hidden !important;
+const ButtonConfirmar = styled(Button)`
+    background-color : #00bcd4 !important;
+    color : #fff !important;
+    border-radius : 3px !important;
 `
 
 const ButtonCancelar = styled(Button)`
-outline : none !important;
-display: inline-block !important;
-position: relative !important;
-cursor: pointer !important;
-min-height: 36px !important;
-min-width: 88px !important;
-line-height: 36px !important;
-vertical-align: middle !important;
-align-items: center !important;
-text-align: center !important;
-border-radius: 3px !important;
-box-sizing: border-box !important;
-user-select: none !important;
-border: 0 !important;
-padding: 0 6px !important;
-margin: 6px 8px !important;
-background:transparent !important;
-color: currentColor !important;
-white-space: nowrap !important;
-text-transform: uppercase !important;
-font-weight: 500 !important;
-font-size: 14px !important;
-font-style: inherit !important;
-font-variant: inherit !important;
-font-family: inherit !important;
-text-decoration: none !important;
-overflow: hidden !important;
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    background-color : #fff !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
 `
 
 const ButtonsDiv = styled.div`
diff --git a/src/Components/ModalAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
similarity index 76%
rename from src/Components/ModalAlterarAvatar.js
rename to src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
index 7662850dc815fd3c23e8c2ad2783832535358dc3..0698c94b2a09389d8f787f36bc29c5975ea390b0 100644
--- a/src/Components/ModalAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
@@ -16,17 +16,17 @@ GNU Affero General Public License for more details.
 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/>.*/
 
-import React, {useContext, useState} from 'react';
+import React from 'react';
 import { Button } from '@material-ui/core';
 import Modal from '@material-ui/core/Modal';
 import Backdrop from '@material-ui/core/Backdrop';
 import Fade from '@material-ui/core/Fade';
 import styled from 'styled-components'
-import {Store} from '../Store.js'
+import {Store} from '../../Store.js'
 import axios from 'axios'
-import {apiUrl} from '../env';
+import {apiUrl} from '../../env';
 import CloseIcon from '@material-ui/icons/Close';
-import Profile from '../img/default_profile0.png'
+import Profile from '../../img/default_profile0.png'
 import ComponentAlterarAvatar from './ComponentAlterarAvatar.js'
 
 const StyledModal = styled(Modal)`
@@ -38,23 +38,6 @@ const StyledModal = styled(Modal)`
 `
 
 export default function ModarAlterarAvatar (props){
-    const {state, dispatch} = useContext(Store)
-    const [avatarFile, setFile] = useState('')
-
-    const handleUploadAvatar = (img) => {
-        axios.post(`${apiUrl}`,
-            {
-
-        }
-        ).then( (response) => {
-            dispatch ({
-
-            }, (error) => {
-
-                }
-            )
-        })
-    }
 
     return (
 
@@ -62,8 +45,8 @@ export default function ModarAlterarAvatar (props){
             aria-labelledby="transition-modal-title"
             aria-describedby="transition-modal-description"
             open={props.open}
-            animation={true}
-            centered={true}
+             
+            centered="true"
             onClose={props.handleClose}
             closeAfterTransition
             BackdropComponent={Backdrop}
@@ -74,8 +57,9 @@ export default function ModarAlterarAvatar (props){
             <Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
 
                 <ComponentAlterarAvatar
-                    userAvatar={state.currentUser.userAvatar}
+                    userAvatar={props.userAvatar}
                     handleClose={props.handleClose}
+                    id={props.id}
                 />
             </Fade>
         </StyledModal>
diff --git a/src/Components/ModalAlterarCover/ComponentAlterarCover.js b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
new file mode 100644
index 0000000000000000000000000000000000000000..4178b3cf9cdf4d74f9197b4c341ad779b40db235
--- /dev/null
+++ b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
@@ -0,0 +1,202 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useContext, useState} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Zoom from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import {Store} from '../../Store.js'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import CloseIcon from '@material-ui/icons/Close';
+import Profile from '../../img/default_profile0.png'
+import Cropper from '../Cropper.js'
+
+
+const GetHeaderConfig = () => {
+
+    let config = {
+        headers : {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+            'Client': sessionStorage.getItem('@portalmec/clientToken'),
+            'Uid': sessionStorage.getItem('@portalmec/uid'),
+        }
+    }
+    {/*'Host': 'api.portalmec.c3sl.ufpr.br',
+    'Cookie': ''*/}
+    return config
+}
+
+export default function ComponentAlterarCover (props) {
+    const {state, dispatch} = useContext(Store)
+
+    const [tempImgURL, setTempImg] = useState(props.cover)
+    const [newCover, setNewCover] = useState('')
+    const updateCover = (cover) => {setNewCover(cover)}
+    const [crop] = useState({
+        unit: "%" ,
+        width : 100,
+        aspect: 16 / 9
+    });
+
+    const completeSelection = () => {
+        console.log(newCover)
+        //newCover is a base64 encoded image file.
+        let fdCover = new FormData()
+        fdCover.set('user[cover]', newCover)
+
+        axios.put( (`${apiUrl}/users/` + props.id ),
+            fdCover,
+            GetHeaderConfig()
+        ).then( (response) => {
+            if ( response.headers['access-token'] ) {
+                sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+            }
+            const target = state.currentUser
+            const source = {userCover : response.data.cover}
+            dispatch({
+                type : 'USER_CHANGED_COVER',
+                currUser : Object.assign(target, source)
+            })
+        }, (error) => {console.log(error)}
+        )
+    }
+
+    return (
+            <ModalDiv>
+            <HeaderDiv>
+                <span style={{width:"32px"}}/>
+                    <StyledH2>Editar Capa do Perfil</StyledH2>
+                    <StyledCloseModalButton onClick={props.handleClose}>
+                        <CloseIcon style={{color : "#666"}}/>
+                    </StyledCloseModalButton>
+            </HeaderDiv>
+            <DialogDiv>
+                <EditarDiv>
+                    <TextoEditarDiv>
+                        Clique nos ícones e arraste para selecionar a parte que você quer da foto
+                    </TextoEditarDiv>
+                    <div style={{maxWidth : "500px", maxHeight : "300px"}}>
+                        <Cropper src={tempImgURL} crop={crop} update={updateCover}/>
+                    </div>
+                </EditarDiv>
+                <FooterButtonsDiv>
+                    <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
+                    <div>
+                        <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+                        <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
+                    </div>
+                </FooterButtonsDiv>
+            </DialogDiv>
+            </ModalDiv>
+        )
+
+}
+
+const ButtonCancelar = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    background-color : #fff !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+`
+const ButtonConfirmar = styled(Button)`
+    background-color : #00bcd4 !important;
+    color : #fff !important;
+    border-radius : 3px !important;
+`
+
+const FooterButtonsDiv = styled.div`
+    padding : 0 30px 20px;
+    display : flex;
+    flex-direction : row;
+    align-content : center;
+    justify-content : space-between;
+    Button {
+        margin-top : 20px;
+    }
+`
+
+
+const TextoEditarDiv = styled.div`
+    margin-bottom : 15px;
+    align-self : center;
+    text-align : center;
+    font-size : 15px;
+`
+
+const EditarDiv = styled.div`
+    position : relative;
+    background-color : #f4f4f4;
+    padding : 20px 30px 40px;
+`
+
+const ModalDiv = styled.div`
+background-color : #fff;
+border-radius : 4px;
+min-width : 560px;
+color : #666;
+display: flex;
+flex-direction : column;
+@media screen and (max-width: 959px) {
+    height : 100%;
+    width : 100%;
+}
+`
+
+const DialogDiv = styled.div`
+padding : 20px 30px;
+overflow : visible !important;
+`
+
+const HeaderDiv = styled.div`
+display : flex;
+flex-direction : row;
+align-items : center;
+align-content : center;
+justify-content : space-between;
+max-width : 100%;
+`
+const StyledH2 = styled.h2`
+font-size : 26px;
+font-weight : normal;
+margin-top : 20px;
+margin-bottom : 10px;
+font-family: inherit;
+line-height: 1.1;
+color: inherit;
+`
+const StyledCloseModalButton = styled(Button)`
+display : inline-block;
+position : relative;
+float : right !important;
+background : transparent !important;
+min-width: 0 !important;
+width : 40px;
+border-radius : 50%;
+padding : 8px;
+height : 40px;
+margin : 0 6px;
+`
diff --git a/src/Components/ModalAlterarCover/ModalAlterarCover.js b/src/Components/ModalAlterarCover/ModalAlterarCover.js
new file mode 100644
index 0000000000000000000000000000000000000000..86636826010d9e129fd22192535c8aec56c310ed
--- /dev/null
+++ b/src/Components/ModalAlterarCover/ModalAlterarCover.js
@@ -0,0 +1,85 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useContext, useState} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import {Store} from '../../Store.js'
+import axios from 'axios'
+import {apiUrl} from '../../env';
+import CloseIcon from '@material-ui/icons/Close';
+import Profile from '../../img/default_profile0.png'
+import ComponentAlterarCover from './ComponentAlterarCover.js'
+
+const StyledModal = styled(Modal)`
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+`
+
+export default function ModarAlterarCover (props){
+    const {state, dispatch} = useContext(Store)
+    const [avatarFile, setFile] = useState('')
+
+    {/*const handleUploadCover = (img) => {
+        axios.post(`${apiUrl}`,
+            {
+
+        }
+        ).then( (response) => {
+            dispatch ({
+
+            }, (error) => {
+
+                }
+            )
+        })
+    }*/}
+
+    return (
+
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+             
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+         >
+            <Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
+
+                <ComponentAlterarCover
+                    cover={props.cover}
+                    handleClose={props.handleClose}
+                    id={props.id}
+                />
+            </Fade>
+        </StyledModal>
+
+    )
+}
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
new file mode 100644
index 0000000000000000000000000000000000000000..9d6c588e45636305070905de8b59b0b0dcdc2f89
--- /dev/null
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -0,0 +1,345 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import {Store} from '../Store.js'
+import axios from 'axios'
+import {apiDomain} from '../env';
+import Grid from '@material-ui/core/Grid';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import CloseModalButton from './CloseModalButton'
+import Snackbar from '@material-ui/core/Snackbar';
+import Alert from '../Components/Alert.js';
+import TextField from '@material-ui/core/TextField';
+import { withStyles } from '@material-ui/core/styles';
+
+const StyledRadio = withStyles({
+  root: {
+    color: '#666',
+    '&$checked': {
+      color: '#ff7f00',
+    },
+  },
+  checked: {},
+})((props) => <Radio color="default" {...props} />);
+
+export default function ModalAvaliarRecurso (props) {
+
+    const options = [
+        {
+            text : "O recurso apresenta conteúdo de cunho político-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda política)?", id : 1
+        },
+        {
+            text : "O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?", id : 2
+        },
+        {
+            text : "O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?", id : 3
+        },
+        {
+            text : "Outro motivo para rejeição (falta de descrição, autor, objeto, erros)? Indicar na justificativa se for o caso?", id : 4
+        }
+    ]
+
+    const [avaliacao, setAvaliacao] = useState([null,null,null,null])
+
+    const handleRadios = (event, id) => {
+        let newValue = avaliacao
+        newValue[id - 1] = (event.target.value === "Sim" ? true : false)
+        setAvaliacao(newValue)
+
+        if(avaliacao.indexOf(null) === -1) {
+            toggleDisableButton(false)
+        }
+    }
+
+    const [justificativa, setJustificativa] = useState("")
+    const handleChangeJustificativa = (e) => {
+        setJustificativa(e.target.value)
+    }
+
+    const [snackbarCancelar, toggleSnackbarCancelar] = useState(false)
+    const handleSnackbarCancelar = (value) => toggleSnackbarCancelar(value)
+
+    const handleCancel = () => {
+        handleSnackbarCancelar(true)
+
+        props.handleClose()
+    }
+
+    const [buttonDisabled, toggleDisableButton] = useState(true)
+
+    const handleAvaliar = () => {
+        let criteria = options
+        avaliacao.map((criterium, index) =>
+             criteria[index]['accepted'] = !criterium
+        )
+        props.confirm(criteria, justificativa, avaliacao.filter((item) => item === true).length > 0 ? false : true)
+        returnToDefault()
+    }
+
+    const returnToDefault = () => {
+        setAvaliacao([null,null,null,null])
+        setJustificativa('')
+        toggleDisableButton(true)
+    }
+
+    return (
+        <>
+        <Snackbar open={snackbarCancelar} autoHideDuration={1000} onClose={toggleSnackbarCancelar}
+        anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+        message="Você cancelou a avaliação deste recurso."
+            />
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+        >
+            <Fade in={props.open}>
+                <Container>
+                    <Header>
+                        <h2>Você está avaliando o recurso
+                        <span style={{fontWeight : "bolder"}}> {props.title}</span>
+                        </h2>
+                        <CloseModalButton handleClose={props.handleClose}/>
+                    </Header>
+
+                    <Content>
+                        <Grid container>
+                            <Grid item xs={12}>
+                                <p>Esse recurso está em conformidade com os critérios? Marque as opções e justifique aquela(s) que não estiverem em conformidade.</p>
+                            </Grid>
+
+                            <FormControl component="fieldset" style={{display:"BlockRuby"}} fullWidth={true}>
+                            {
+                                options.map( (option) =>
+                                <Grid item xs={12} key={option.id} style={{paddingTop : "10px"}}>
+                                    <Grid container>
+                                    <Grid item xs={10}>
+                                        <div style={{height : "100%", display : "flex", alignItems : "center"}}>
+                                            <p>{option.text}</p>
+                                        </div>
+                                    </Grid>
+                                    <Grid item xs={2}>
+                                        <RadioGroup row onChange={(e) => {handleRadios(e, option.id)}}>
+                                            <FormControlLabel value={"Sim"} control={<StyledRadio/>} label="Sim"/>
+                                            <FormControlLabel value={"Não"} control={<StyledRadio/>} label="Não"/>
+                                        </RadioGroup>
+                                    </Grid>
+                                    </Grid>
+                                </Grid>
+                                )
+                            }
+                            </FormControl>
+
+                            <Grid item xs={12}>
+                                <FormControl style={{width : "100%", height : "100px"}}>
+                                    <StyledTextField
+                                        id = {"title-form"}
+                                        label={"Justificativa (opcional)"}
+                                        type = {"text"}
+                                        value = {justificativa}
+                                        onChange = {e => {handleChangeJustificativa(e)}}
+                                        multiline
+                                        fullWidth
+                                        />
+                                </FormControl>
+                            </Grid>
+
+                            <Grid item xs={12}>
+                                <ButtonsDiv>
+                                    <ButtonEnviarAvaliar disabled={buttonDisabled} onClick={() => {handleAvaliar()}}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
+                                    <GreyButton onClick={ () => {handleCancel()}}>CANCELAR</GreyButton>
+                                </ButtonsDiv>
+                            </Grid>
+                        </Grid>
+                    </Content>
+
+                </Container>
+            </Fade>
+        </StyledModal>
+    </>
+    )
+}
+
+const Content = styled.div`
+    padding : 10px 75px 0 75px;
+    overflow : visible;
+    max-width : 100%;
+    color : #666;
+    font-size : 16px;
+
+    .main-content-text {
+        font-size : 15px;
+        line-height : 22px;
+        text-align : justify;
+    }
+
+    p {
+        text-align : start;
+        margin : 0 0 10px;
+    }
+`
+
+const Header = styled.div`
+    display : flex;
+    flex-direction : row;
+    padding : 20px 75px 0 75px;
+    align-items : center;
+    justify-content : space-between;
+    color : #666;
+
+    @media screen and (min-width : 990px) {
+        height : 64px;
+    }
+    @media screen and (max-width : 989px) {
+        max-height : none;
+    }
+
+    h2 {
+        font-size : 26px;
+        font-weight : lighter;
+
+    }
+`
+
+const StyledCloseModalButton = styled(Button)`
+    display : inline-block;
+    position : relative;
+    float : right !important;
+    margin-right : -8px !important;
+    background : transparent !important;
+    min-width: 0 !important;
+    width : 40px;
+`
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`
+
+const Container = styled.div`
+    box-sizing : border-box;
+    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+    background-color : #fff;
+    align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    max-height : none;
+    position : relative;
+    border-radius : 4px;
+    max-width : 100%;
+
+    @media screen and (max-width : 699px) {
+        overflow : scroll;
+        width : 100%;
+        height : 100%;
+    }
+
+    p {
+        margin : 0 0 10px;
+    }
+`
+const StyledTextField = styled(TextField)`
+    font-size : 14px;
+    width : 100% !important;
+    full-width : 100% !important;
+
+    .MuiFormControl-root {
+        margin : 18px 0 !important;
+    }
+
+    label.Mui-focused {
+        color : #ff7f00;
+    }
+
+    label.Mui-focused.Mui-error {
+        color : red;
+    }
+
+    .MuiInput-underline::after {
+        border-bottom: 2px solid #ff7f00;
+    }
+`
+
+const ButtonsDiv = styled.div`
+    display : flex;
+    max-width : 100%;
+    text-align : start;
+    align-items : center;
+    padding : 0 0 20px 0;
+
+    @media screen and (min-width : 990px) {
+        flex-direction : row;
+    }
+    @media screen and (max-width : 989px) {
+        flex-direction : column;
+    }
+`
+const GreyButton = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    max-height : 36px !important;
+
+    background-color : transparent !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+    font-weight : 600 !important;
+
+
+`
+
+const ButtonEnviarAvaliar = styled(Button)`
+    color : ${(props) => props.disabled ? "rgba(0,0,0,0.38)" : "rgba(255,255,255,0.87) !important"};
+    box-shadow : ${(props) => props.disabled ? "none !important" : "0 2px 5px 0 rgba(0,0,0,.26) !important"};
+    font-weight : 600 !important;
+    background-color : ${(props) => props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"};
+    margin-left : 8px !important;
+    margin-right : 8px !important;
+
+    .MuiButton-label {
+        padding-left : 32px !important;
+        padding-right : 32px !important;
+    }
+`
diff --git a/src/Components/ModalConfirmarCuradoria.js b/src/Components/ModalConfirmarCuradoria.js
new file mode 100644
index 0000000000000000000000000000000000000000..9e12906b13c7e0a0457819160a1dd358515c7b24
--- /dev/null
+++ b/src/Components/ModalConfirmarCuradoria.js
@@ -0,0 +1,260 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import {Store} from '../Store.js'
+import axios from 'axios'
+import {apiDomain, apiUrl} from '../env';
+import Grid from '@material-ui/core/Grid';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import CloseModalButton from './CloseModalButton'
+import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
+
+export default function ModalConfirmarCuradoriaOpen (props) {
+
+    const handleCancel = () => {
+        props.handleClose()
+        props.cancel()
+    }
+
+    const transformReportCriteria = (criteria) => {
+        let newArr = []
+        criteria.map((criterium) =>
+            newArr.push({"question_id" : criterium.id, "accepted" : criterium.accepted})
+        )
+        return newArr
+    }
+
+    const handleConfirmation = () => {
+        let config = getAxiosConfig()
+
+        let payload = {
+            "submission" : {
+                "justification" : props.justificativa,
+                "answers" : transformReportCriteria(props.reportCriteria)
+            }
+        }
+
+        axios.post( (`${apiUrl}/submissions/` + props.recursoId + '/answer'), payload, config).then(
+            (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                console.log(response.data)
+                props.finalizeCuratorshipFlow()
+            }, (error) => {console.log(error)}
+        )
+    }
+
+    return (
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+        >
+            <Fade in={props.open}>
+                <Container recusado={!props.aceito}>
+                    <Header>
+                        <span style={{width:"32px"}}/>
+                        <h2>Recurso a ser {props.aceito ? 'aprovado' : 'recusado'}</h2>
+                        <CloseModalButton handleClose={props.handleClose}/>
+                    </Header>
+                    <Content>
+                        {
+                            props.aceito ?
+                            (
+                                <p>Este recurso será publicado na plataforma. Você confirma essa avaliação?
+                                </p>
+                            )
+                            :
+                            (
+                                <>
+                                <p>Agradecemos a sua contribuição. Você avaliou que o recurso não está em conformidade com o(s) seguinte(s) critério(s):
+                                </p>
+                                {
+                                    props.reportCriteria.filter((criterium) => criterium.accepted === false).map( (criterium) =>
+                                        <p key={criterium.id} className="reason-offensive">{criterium.text}</p>
+                                    )
+                                }
+                                <p>Você confirma essa avaliação? Ao confirmar, o recurso não será publicado na plataforma.</p>
+                                </>
+                            )
+                        }
+                            <ButtonsDiv>
+                                {
+                                    props.aceito ?
+                                    (
+                                        <ButtonEnviarAvaliar onClick={() => {handleConfirmation()}}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
+                                    )
+                                    :
+                                    (
+                                        <ButtonEnviarAvaliar onClick={() => {handleConfirmation()}}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
+                                    )
+                                }
+                                <GreyButton onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
+                            </ButtonsDiv>
+                    </Content>
+                </Container>
+            </Fade>
+        </StyledModal>
+    )
+}
+
+
+const Content = styled.div`
+    padding : 30px;
+    overflow : visible;
+    max-width : 100%;
+    color : #666;
+    font-size : 16px;
+    text-align : start;
+    .reason-offensive {
+        font-weight : 700;
+    }
+
+    p {
+        margin : 0 0 10px;
+    }
+`
+
+const Header = styled.div`
+    display : flex;
+    flex-direction : row;
+    align-items : center;
+    max-height : none;
+    justify-content : space-between;
+    color : #666;
+
+    h2 {
+        font-size : 30px;
+        margin-top : 20px;
+        margin-bottom : 10px;
+        font-weight : lighter;
+    }
+`
+
+const StyledCloseModalButton = styled(Button)`
+    display : inline-block;
+    position : relative;
+    float : right !important;
+    margin-right : 4px !important;
+    background : transparent !important;
+    min-width: 0 !important;
+    width : 40px;
+`
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`
+
+const Container = styled.div`
+    box-sizing : border-box;
+    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+    background-color : #fff;
+    align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    position : relative;
+    border-radius : 4px;
+    max-width : 100%;
+    max-height : ${props => props.recusado ? 'none' : '370px'};
+
+    @media screen and (max-width : 699px) {
+        overflow : ${props => props.recusado ? 'scroll' : 'visible'};
+        width : 100%;
+        height : 100%;
+    }
+
+    p {
+        margin : 0 0 10px;
+    }
+`
+const ButtonsDiv = styled.div`
+    display : flex;
+    max-width : 100%;
+    text-align : center;
+    align-items : center;
+    justify-content : center;
+    padding-top : 20px;
+
+    @media screen and (min-width : 990px) {
+        flex-direction : row;
+    }
+    @media screen and (max-width : 989px) {
+        flex-direction : column;
+    }
+`
+const GreyButton = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    max-height : 36px !important;
+
+    background-color : transparent !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+    font-weight : 600 !important;
+    .MuiButton-label {
+        padding-left : 16px !important;
+        padding-right : 16px !important;
+    }
+    @media screen and (max-width : 989px) {
+        margin-top : 10px !important;
+    }
+`
+
+const ButtonEnviarAvaliar = styled(Button)`
+    color : rgba(255,255,255,0.87) !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    font-weight : 600 !important;
+    background-color : #ff7f00 !important;
+    margin-left : 8px !important;
+    margin-right : 8px !important;
+
+    .MuiButton-label {
+        padding-left : 16px !important;
+        padding-right : 16px !important;
+    }
+`
diff --git a/src/Components/ModalConfirmarUnfollow.js b/src/Components/ModalConfirmarUnfollow.js
index 6d1ee356259ba6a825e76f273faaefdab8b764dd..f8deb98a454280ce7a6c78f952caabf12f3e2527 100644
--- a/src/Components/ModalConfirmarUnfollow.js
+++ b/src/Components/ModalConfirmarUnfollow.js
@@ -8,36 +8,54 @@ import { Store } from '../Store.js';
 import axios from 'axios'
 import {apiUrl} from '../env';
 import CloseIcon from '@material-ui/icons/Close';
+import CloseModalButton from './CloseModalButton'
 
 const StyledModal = styled(Modal)`
-    margin : 0 !important;
-    margin-left : 0 !important;
+    .djXaxP{
+        margin : 0 !important;
+    }
     display : flex;
     align-items: center;
     justify-content : center;
     text-align : center;
     padding : 10px !important;
-    border-radius : 4px;
     max-width : none;
     max-height : none;
-    min-width: 1500px;
-    min-height: 150px !important;
 `
 
 const HeaderDiv = styled.div`
-    max-width : 100%;
     display : flex;
+    flex-direction : row;
     align-items : center;
-    align-content : center;
+    text-align : center;
+    margin : 20px 30px;
+
+    h3 {
+        font-size : 24px;
+        margin-top : 20px;
+        margin-bottpm : 10px
+        font-weight : normal;
+        color : #666
+    }
 `
 const ContentContainer = styled.div`
-    width : 30%;
     box-sizing : border-box;
     background-color : white;
     max-width : none;
     align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    max-height : none;
+    position : relative;
+    padding : 10px;
     border-radius : 4px;
-    font-family : 'Roboto', sans serif;
+    color : #666;
+
+    @media screen and (max-width : 899px) {
+        width : 100%;
+        max-height : 600px;
+    }
 `
 const ButtonCancelar = styled(Button)`
     &:hover {
@@ -56,7 +74,7 @@ const ButtonConfirmar = styled(Button)`
     border-radius : 3px !important;
 `
 
-export default function IllegalContentModal (props) {
+export default function ModalConfirmarUnfollow (props) {
     const text = {
         header : "Tem certeza que deseja deixar de seguir este usuário?",
         explanation : "Este usuário deixará de fazer parte da sua rede."
@@ -67,8 +85,8 @@ export default function IllegalContentModal (props) {
         aria-labelledby="transition-modal-title"
         aria-describedby="transition-modal-description"
         open={props.open}
-        animation={true}
-        centered={true}
+
+        centered="true"
         onClose={props.handleClose}
         closeAfterTransition
         BackdropComponent={Backdrop}
@@ -80,12 +98,10 @@ export default function IllegalContentModal (props) {
                 <ContentContainer>
                     <HeaderDiv>
                         <span style={{width:"32px"}}/>
-                        <h3 style={{fontSize : "24px", marginTop:"20px", marginBottom:"10px", fontWeight : "normal"}}>
+                        <h3>
                             {text.header}
                         </h3>
-                        <Button style={{marginRight:"0", color:"000"}} onClick={props.handleClose}>
-                            <CloseIcon style={{color:"#666", cursor:"pointer", verticalAlign:"middle"}}/>
-                        </Button>
+                        <CloseModalButton handleClose={props.handleClose}/>
                     </HeaderDiv>
                     <div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
                         <div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
new file mode 100644
index 0000000000000000000000000000000000000000..9c1b61b65600d0bef69cf3ee21bd37ec03216f7c
--- /dev/null
+++ b/src/Components/ModalExcluirColecao.js
@@ -0,0 +1,157 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import {Store} from '../Store.js'
+import axios from 'axios'
+import {apiUrl} from '../env';
+import GreyButton from './GreyButton.js'
+import PurpleButton from './PurpleButton.js'
+import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'
+import SnackbarComponent from './SnackbarComponent'
+
+export default function ModalExcluirColecao (props) {
+    const [snackbarOpen, toggleSnackbar] = useState(false)
+
+    const handleDelete = () => {
+        let config = getAxiosConfig()
+
+        axios.delete( (`${apiUrl}/collections/` + props.id), config
+        ).then( (response) => {
+            if ( response.headers['access-token'] ) {
+                sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+            }
+            console.log(response)
+            toggleSnackbar(true)
+            props.handleClose()
+        }, (error) => {console.log(error);})
+    }
+
+    return (
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+        >
+            <Fade in={props.open}>
+            <>
+                <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluída com sucesso"}/>
+                <Container>
+                    <Header>
+                        <h2>Tem certeza que deseja excluir esta Coleção?</h2>
+                    </Header>
+
+                    <Content>
+                        <p>A exclusão de uma coleção é permanente. Não é possível desfazer.</p>
+                        <ButtonsDiv>
+                            <GreyButton
+                                callback={props.handleClose}
+                                text={"CANCELAR"}
+                                />
+                            <PurpleButton
+                                callback={handleDelete}
+                                text={"EXCLUIR"}
+                                />
+                        </ButtonsDiv>
+                    </Content>
+                </Container>
+                </>
+            </Fade>
+        </StyledModal>
+    )
+}
+
+const ButtonsDiv = styled.div`
+    display : flex;
+    align-items : center;
+    align-content : center;
+    justify-content : space-evenly;
+    padding-top : 20px;
+
+`
+
+const Content = styled.div`
+    padding : 10px 30px 20px;
+    overflow : visible;
+    display : flex;
+    flex-direction : column;
+
+    p {
+        margin : 0 0 10px;
+    }
+`
+
+const Header = styled.div`
+    display : flex;
+    flex-direction : row;
+    align-items : center;
+    text-align : center;
+    margin : 20px 30px;
+
+    h2 {
+        font-size : 26px;
+        font-weight : lighter;
+        color : #666
+    }
+`
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`
+
+const Container = styled.div`
+    box-sizing : border-box;
+    background-color : white;
+    max-width : none;
+    align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    max-height : none;
+    position : relative;
+    padding : 10px;
+    border-radius : 4px;
+    color : #666;
+
+    @media screen and (max-width : 899px) {
+        width : 100%;
+        max-height : 600px;
+    }
+`
diff --git a/src/Components/ModalExcluirComentario.js b/src/Components/ModalExcluirComentario.js
new file mode 100644
index 0000000000000000000000000000000000000000..88ceeceff8c5c798b2e1fe85872451a43178172e
--- /dev/null
+++ b/src/Components/ModalExcluirComentario.js
@@ -0,0 +1,103 @@
+import React, {useContext} from 'react';
+import Modal from '@material-ui/core/Modal';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import { Button } from '@material-ui/core';
+import Backdrop from '@material-ui/core/Backdrop';
+import { Store } from '../Store.js';
+import axios from 'axios'
+import {apiUrl} from '../env';
+
+const StyledModal = styled(Modal)`
+    margin : 0 !important;
+    margin-left : 0 !important;
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    border-radius : 4px;
+    max-width : none;
+    max-height : none;
+    min-width: 150px;
+    min-height: 150px !important;
+`
+
+const HeaderDiv = styled.div`
+    width : 100%;
+    max-width : 100%;
+    display : flex;
+    align-items : center;
+    align-content : center;
+`
+const ContentContainer = styled.div`
+    box-sizing : border-box;
+    background-color : white;
+    max-width : none;
+    min-wdith : 240px;
+    align : center;
+    border-radius : 4px;
+    font-family : 'Roboto', sans serif;
+    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)!important;
+`
+const ButtonCancelar = styled(Button)`
+    background-color : rgba(158,158,158,0.2) !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+    margin : 0 8px !important;
+    font-weight : 600 !important;
+`
+
+const ButtonConfirmar = styled(Button)`
+    background-color : #ff7f00 !important;
+    color : #fff !important;
+    border-radius : 3px !important;
+    margin : 0 8px !important;
+    font-weight : 600 !important;
+`
+
+export default function ModalExcluir (props) {
+    const text = {
+        header : "Tem certeza que deseja excluir este comentário?",
+        explanation : "A exclusão de um comentário é permanente. Não é possível desfazer."
+    }
+
+    return (
+        <StyledModal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={props.open}
+         
+        centered="true"
+        onClose={props.handleClose}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+            timeout: 500,
+        }}
+        >
+            <Fade in={props.open}>
+                <ContentContainer>
+                    <HeaderDiv>
+                        <h3 style={{fontSize : "24px", margin : "20px 15px 10px", fontWeight : "normal"}}>
+                            {text.header}
+                        </h3>
+                    </HeaderDiv>
+                    <div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
+                        <div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
+                            <span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
+                        </div>
+                        <div style={{display : "flex", flexDirection : "row", justifyContent: "center"}}>
+                            <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+                            <ButtonConfirmar onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
+                        </div>
+                    </div>
+                </ContentContainer>
+            </Fade>
+
+        </StyledModal>
+    )
+
+}
diff --git a/src/Components/ModalLearningObjectPublished.js b/src/Components/ModalLearningObjectPublished.js
new file mode 100644
index 0000000000000000000000000000000000000000..8fe0d148a07896c378474e0928e2684ab0eb6ae2
--- /dev/null
+++ b/src/Components/ModalLearningObjectPublished.js
@@ -0,0 +1,236 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useRef} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import SignUpContainer from './SignUpContainerFunction.js'
+import {Store} from '../Store.js'
+import axios from 'axios'
+import {apiDomain} from '../env';
+import Grid from '@material-ui/core/Grid';
+import Facebook from '../img/facebook.svg'
+import Twitter from '../img/twitter.svg'
+import LinkIcon from '../img/link_icon.svg'
+import CloseModalButton from './CloseModalButton.js'
+
+export default function ModalLearningObjectPublished (props) {
+    const refContainer = useRef(props.link);
+
+    function copyToClipboard(e) {
+        let copyText = document.getElementById('p-text')
+        console.log(copyText)
+    };
+
+    return (
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+        >
+            <Fade in={props.open}>
+                <Container>
+                    <Header>
+                        <span style={{width:"32px"}}/>
+                        <h2>O seu recurso foi publicado!</h2>
+                        <CloseModalButton handleClose={props.handleClose}/>
+                    </Header>
+
+                    <Content >
+                        <Grid container>
+                            <Grid item xs={4} style={{paddingRight : "15px", paddingLeft : "15px"}}>
+                                <div className="backgroundImg"/>
+                            </Grid>
+                            <Grid item xs={8} style={{paddingRight : "15px", paddingLeft : "15px", paddingTop : "20px"}}>
+                                <div className="main-content-text">
+                                    <p>Seu recurso já está disponível na Plataforma. Você receberá notificações sempre que alguém favoritar, compartilhar e relatar experiência com o Recurso.</p>
+                                </div>
+                            </Grid>
+                        </Grid>
+                    </Content>
+                    <ShareContainer>
+                        <p>Gostaria de convidar o seus amigos para conhecer o recurso?</p>
+                        <p>Compartilhe nas redes sociais:</p>
+                        <div className="logos-shared">
+                            <a
+                                href={"https://www.facebook.com/sharer/sharer.php?u=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
+                                target="_blank">
+                                <ShareButton>
+                                    <img src={Facebook} alt="facebook-logo"/>
+                                </ShareButton>
+                            </a>
+
+                            <a
+                                href={"https://www.twitter.com/intent/tweet?url=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
+                                target="_blank">
+                                <ShareButton>
+                                    <img src={Twitter} alt="twitter-logo"/>
+                                </ShareButton>
+                            </a>
+
+                            <ShareButton >
+                                <img src={LinkIcon} alt="link-icon"/>
+                            </ShareButton>
+                        </div>
+                    </ShareContainer>
+                </Container>
+            </Fade>
+        </StyledModal>
+    )
+}
+
+const ShareButton = styled(Button)`
+    text-align :center;
+    margin : 0 !important;
+
+    .MuiButton-label {
+        display : flex !important;
+        flex-direction : column !important;
+        justify-content : center !important;
+        font-weight : 700 !important;
+    }
+
+    img {
+        height : 50px;
+        width : 50px;
+        padding-top : 10px;
+        vertical-align : middle;
+    }
+
+    p {
+        margin : 0 0 10px;
+    }
+`
+
+const ShareContainer = styled.div`
+    padding-top : 20px;
+    background-color : #f1f1f1;
+    width : 100%;
+    height : 215px;
+    font-size : 18px;
+    line-height : 30px;
+    text-align : center;
+    max-width : 600px;
+    color : #666;
+    border-radius : 4px;
+
+    .logos-shared {
+        font-size : 18px;
+        line-height : 30px;
+        text-align : center;
+        display : flex;
+        flex-direction : row;
+        justify-content : center;
+    }
+`
+
+const Content = styled.div`
+    padding : 20px 30px;
+    overflow : visible;
+    max-width : 600px;
+    color : #666;
+
+    .backgroundImg {
+        background-image : url(https://plataformaintegrada.mec.gov.br/img/Publicar.png);
+        width : 145px;
+        height : 125px;
+        background-repeat : no-repeat;
+        background-size : contain;
+        margin : 0;
+    }
+
+    .main-content-text {
+        font-size : 15px;
+        line-height : 22px;
+        text-align : justify;
+    }
+`
+
+const Header = styled.div`
+    display : flex;
+    flex-direction : row;
+    padding : 10px 26px 0 26px;
+    align-items : center;
+    justify-content : space-between;
+    height : 64px;
+
+    h2 {
+        font-size : 26px;
+        font-weight : lighter;
+        color : #666
+    }
+`
+
+const StyledCloseModalButton = styled(Button)`
+    display : inline-block;
+    position : relative;
+    float : right !important;
+    margin-right : -8px !important;
+    background : transparent !important;
+    min-width: 0 !important;
+    width : 40px;
+`
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`
+
+const Container = styled.div`
+    box-sizing : border-box;
+    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+    background-color : #fff;
+    align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    max-height : none;
+    position : relative;
+    border-radius : 4px;
+
+    @media screen and (min-width : 700px) {
+        max-width : 600px;
+    }
+
+    @media screen and (max-width : 699px) {
+        width : 100%;
+        height : 100%;
+    }
+
+    p {
+        margin : 0 0 10px;
+    }
+`
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index 069b9770f95df55164bd7773cbba3fb4521eb3df..03f16486b99a2b9efdd96b6def38d08c97f507b4 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.js
@@ -15,13 +15,22 @@ GNU Affero General Public License for more details.
 
 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/>.*/
-import React, {useContext} from 'react';
+import React, {useState, useEffect} from 'react';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import { Button } from '@material-ui/core';
 import Badge from '@material-ui/core/Badge';
 import styled from 'styled-components'
-import Dropdown from './Dropdown';
-
+import Menu from '@material-ui/core/Menu';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import OpenIcon from '@material-ui/icons/OpenInNew';
+import ReportIcon from '@material-ui/icons/Error';
+import NotificationsInner from './NotificationsInner.js'
+import {apiDomain, apiUrl} from '../env.js'
+import axios from 'axios'
+import ActivityListItem from './ActivityListItem.js'
+import {getAxiosConfig} from './HelperFunctions/getAxiosConfig.js'
 const StyledBadge = styled(Badge) `
     .MuiBadge-dot-45{
         height : 9px ;
@@ -41,19 +50,106 @@ const StyledNotificationButton = styled(Button)`
     height : 56px !important;
     width : 56px !important;
     border-radius : 50% !important;
-    &&:hover {
-        color : #00bcd4;
+    &:hover {
+        color : #00bcd4 !important;
     }
 `
 
 export default function Notification (props) {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [notifications, setNotifications] = useState([]);
+    const [notificatonsLength, setLength] = useState(0);
+    useEffect(() => {
+        let config = getAxiosConfig()
+        axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
+        .then( (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+
+                console.log('atividades response: ', response)
+                setNotifications(response.data)
+                setLength(response.data.length)
+
+            },
+            (error) => {
+                console.log('error while running getNotifications')
+            }
+        )
+    }, [])
+    function handleClick(event) {
+        setAnchorEl(event.currentTarget);
+    }
 
+    function handleClose() {
+        setAnchorEl(null);
+    }
     return (
-        <StyledNotificationButton>
-            <StyledBadge badgeContent="1" color="secondary" variant="dot" overlap="circle" classname="badge">
+        <React.Fragment>
+        <StyledNotificationButton onClick={handleClick}>
+            <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
                 <StyledNotificationsIcon/>
             </StyledBadge>
         </StyledNotificationButton>
+        <StyledMenu
+            id="simple-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+        >
+            <ContainerDiv>
+                <div className="cabecalho">
+                    <span style={{fontSize : "15px"}}>NOTIFICAÇÕES •</span>
+                    <span className="cabecalho-marcar">Marcar todas como lidas</span>
+                </div>
+                {
+                    notifications.map( (notification) =>
+                        <ActivityListItem
+                            onMenuBar={true}
+                            avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
+                            activity = {notification.activity}
+                            actionType = {notification.trackable_type}
+                            objectType = {notification.recipient_type}
+                            createdAt = {notification.created_at}
+                            ownerName = {notification.owner.name}
+                            ownerHref = {'/usuario-publico/' + notification.owner.id}
+                            recipientName =  {notification.recipient.name}
+                        />
+                    )
+                }
+            </ContainerDiv>
+        </StyledMenu>
+        </React.Fragment>
     )
 
 }
+
+const StyledMenu = styled(Menu)`
+    
+`
+
+const ContainerDiv = styled.div`
+    margin-top : 10px;
+    right : 5%;
+    width : 360px;
+    max-height : 400px;
+    position : absolute;
+    box-shadow : 8px 8px 8px 8px
+    rgba(0,0,0,.1);
+    overflow-y : scroll;
+    padding : 5px 5px 5px 5px;
+    min-width : 160px;
+
+    .cabecalho {
+        border-bottom : 1px solid #666;
+
+        .cabecalho-marcar {
+            font-family: Lato,bold;
+            font-size: 12px;
+            -webkit-text-decoration-line: underline;
+            text-decoration-line: underline;
+            float: right;
+        }
+    }
+`
diff --git a/src/Components/NotificationsInner.js b/src/Components/NotificationsInner.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b80924a112447925393c4d6a3117aa9826d7e58
--- /dev/null
+++ b/src/Components/NotificationsInner.js
@@ -0,0 +1,79 @@
+import React, {useState, useContext, useEffect} from 'react'
+import styled from 'styled-components'
+import {apiDomain, apiUrl} from '../env.js'
+import axios from 'axios'
+import ActivityListItem from './ActivityListItem.js'
+import {getAxiosConfig} from './HelperFunctions/getAxiosConfig.js'
+
+export default function NotificationInner (props) {
+    const [notifications, setNotifications] = useState([]);
+    const [notificatonsLength, setLength] = useState(0);
+    useEffect(() => {
+        let config = getAxiosConfig()
+        axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
+        .then( (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+
+                console.log('atividades response: ', response)
+                setNotifications(response.data)
+                setLength(response.data.length)
+
+            },
+            (error) => {
+                console.log('error while running getNotifications')
+            }
+        )
+    }, [])
+
+    return (
+        <ContainerDiv>
+            <div className="cabecalho">
+                <span style={{fontSize : "15px"}}>NOTIFICAÇÕES •</span>
+                <span className="cabecalho-marcar">Marcar todas como lidas</span>
+            </div>
+            {
+                notifications.map( (notification) =>
+                    <ActivityListItem
+                        onMenuBar={true}
+                        avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
+                        activity = {notification.activity}
+                        actionType = {notification.trackable_type}
+                        objectType = {notification.recipient_type}
+                        createdAt = {notification.created_at}
+                        ownerName = {notification.owner.name}
+                        ownerHref = {'/usuario-publico/' + notification.owner.id}
+                        recipientName =  {notification.recipient.name}
+                    />
+                )
+            }
+        </ContainerDiv>
+
+    )
+}
+
+const ContainerDiv = styled.div`
+    margin-top : 10px;
+    right : 5%;
+    width : 360px;
+    max-height : 400px;
+    position : absolute;
+    box-shadow : 8px 8px 8px 8px
+    rgba(0,0,0,.1);
+    overflow-y : scroll;
+    padding : 5px 5px 5px 5px;
+    min-width : 160px;
+
+    .cabecalho {
+        border-bottom : 1px solid #666;
+
+        .cabecalho-marcar {
+            font-family: Lato,bold;
+            font-size: 12px;
+            -webkit-text-decoration-line: underline;
+            text-decoration-line: underline;
+            float: right;
+        }
+    }
+`
diff --git a/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js b/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js
index 05d49f3bbc1ef2f412cb6109dc3bd51ceaa3040a..cc25a3b4aeb1f0fad21b2d9f56e6b9d6f915c719 100644
--- a/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js
+++ b/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js
@@ -41,8 +41,8 @@ export default function ModalConfirmarProfessor (props){
             aria-labelledby="transition-modal-title"
             aria-describedby="transition-modal-description"
             open={props.open}
-            animation={true}
-            centered={true}
+             
+            centered="true"
             onClose={props.handleClose}
             closeAfterTransition
             BackdropComponent={Backdrop}
diff --git a/src/Components/PasswordRecoveryComponents/Default.js b/src/Components/PasswordRecoveryComponents/Default.js
index db733e0805dd5e5d6ef50f0066c24ec2caf79ff3..ddbb4f43a3128596508fa1696a5fe4aa59820015 100644
--- a/src/Components/PasswordRecoveryComponents/Default.js
+++ b/src/Components/PasswordRecoveryComponents/Default.js
@@ -17,7 +17,7 @@ export default function Default (props) {
                     error = {props.error}
                 />
                 <div style={{display:"flex", justifyContent:"center"}}>
-                    <CompletarCadastroButton onClick={(e) => props.onSubmit(e, props.value)}>BUSCAR</CompletarCadastroButton>
+                    <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton>
                 </div>
             </form>
         </div>
diff --git a/src/Components/PasswordRecoveryComponents/Error.js b/src/Components/PasswordRecoveryComponents/Error.js
index 387d333eadd483302f10598315f131d71b46f101..38ea3937b4b3713e2ac3b363f8d582ff6d21c0f4 100644
--- a/src/Components/PasswordRecoveryComponents/Error.js
+++ b/src/Components/PasswordRecoveryComponents/Error.js
@@ -2,11 +2,11 @@ import React from 'react'
 import {CompletarCadastroButton} from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
 import FormInput from "../FormInput.js"
 
-export default function Default (props) {
+export default function Error (props) {
     return (
         <div style={{overflow:"hidden", display:"inline-block"}}>
             <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Ops! Não encontramos essa conta</h2>
-            <p>{props.email}</p>
+            <p>{props.value}</p>
             <p>Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
             <form onSubmit={(e) => props.onSubmit(e)}>
                 <FormInput
@@ -19,7 +19,7 @@ export default function Default (props) {
                     error = {props.error}
                 />
                 <div style={{display:"flex", justifyContent:"center"}}>
-                    <CompletarCadastroButton onClick={(e) => props.onSubmit(e, props.value)}>BUSCAR</CompletarCadastroButton>
+                    <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton>
                 </div>
             </form>
         </div>
diff --git a/src/Components/PasswordRecoveryComponents/Success.js b/src/Components/PasswordRecoveryComponents/Success.js
index 7ee31805eb6787594953a5ab4b6268cd361ab82f..d366bc3c8958f7560816e5ee27fe0172c0fb2789 100644
--- a/src/Components/PasswordRecoveryComponents/Success.js
+++ b/src/Components/PasswordRecoveryComponents/Success.js
@@ -6,7 +6,7 @@ export default function Default (props) {
     return (
         <div style={{overflow:"hidden", display:"inline-block", fontSize:"14px", textAlign:"start"}}>
             <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Feito! Confira seu e-mail</h2>
-            <p> Enviamos um link para <span style={{color:"#00bcd4"}}>{props.email}</span> que permite alterar sua senha. </p>
+            <p> Enviamos um link para <span style={{color:"#00bcd4"}}>{String(props.email)}</span> que permite alterar sua senha. </p>
             <p style={{marginBottom:"30px"}}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
             <p> Não é o seu e-mail? <span style={{color:"#00bcd4", cursor:"pointer"}} onClick={() => {props.changeSwitch('default')}}> Tente Novamente.</span></p>
         </div>
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index 3b62deef23b511ad971908294c360ad7f4ffe887..fe3536dc8c3afb0eb810835cb5f5c56430660d21 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import Typography from '@material-ui/core/Typography';
 import CardContent from '@material-ui/core/CardContent';
 import styled from 'styled-components'
@@ -6,11 +6,14 @@ import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Radio from '@material-ui/core/Radio';
 import FormControl from '@material-ui/core/FormControl';
-
+import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
+import axios from 'axios'
+import {apiUrl} from '../env';
 
 const StyledFormControl = styled(FormControl)`
     display: "block ruby";
-    margin-top : 0 !importantcd ;
+    margin-top : 0 !important ;
 `
 
 const StyledDivEvaluateQuestion = styled.div`
@@ -18,7 +21,35 @@ const StyledDivEvaluateQuestion = styled.div`
     justify-content : space-between;
 `
 
+const BlueRadio = withStyles({
+  root: {
+    color: '#666',
+    '&$checked': {
+      color: '#00bcd4',
+    },
+  },
+  checked: {},
+})((props) => <Radio color="default" {...props} />);
+
 export default function PublicationPermissionsContent (props) {
+    {/*To DO change to get https://api.portalmec.c3sl.ufpr.br/v1/questions*/}
+
+    const [questionsArr, setQuestionsArr] = useState([])
+    const handleSetQuestionsArr = (newArr) => {setQuestionsArr(newArr)}
+
+    useEffect(() => {
+        axios.get(`${apiUrl}/questions/`).then(
+            (response) => {
+                console.log(response)
+                handleSetQuestionsArr(response.data)
+            },
+            (error) => {
+                console.log('falhou em get questions')
+            }
+        )
+
+    }, [])
+
     return (
         <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
             <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)", fontSize:"26px"}}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
@@ -38,34 +69,65 @@ export default function PublicationPermissionsContent (props) {
                     inviabiliza a publicação do recurso em nossa rede.
                     </Typography>
                     <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
+
                     <StyledFormControl component="fieldset" style={{display:"BlockRuby"}}  margin='dense' fullWidth={true}>
-                        <StyledDivEvaluateQuestion>
-                        <p>
-                        O recurso apresenta conteúdo de cunho político-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda política)?
-                        </p>
-                        <RadioGroup row name="radio1" onChange={props.handleRadios}>
-                            <FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
-                        </RadioGroup>
-                        </StyledDivEvaluateQuestion>
-                        <StyledDivEvaluateQuestion>
-                        <p>
-                        O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
-                        </p>
-                        <RadioGroup row name="radio2" onChange={props.handleRadios}>
-                            <FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
-                        </RadioGroup>
-                        </StyledDivEvaluateQuestion>
-                        <StyledDivEvaluateQuestion>
-                        <p>
-                        O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
-                        </p>
-                        <RadioGroup row name="radio3" onChange={props.handleRadios}>
-                            <FormControlLabel value="Sim" control={<Radio color="primary"/>} label="Sim"/> <FormControlLabel value="Não" control={<Radio color="primary"/>} label="Não"/>
-                        </RadioGroup>
-                        </StyledDivEvaluateQuestion>
+                        <Grid container>
+                        {
+                            questionsArr.map((question, index) =>
+
+                            question.id !== 4 &&
+                            <React.Fragment key={question.id}>
+                                <Grid item xs={10}>
+                                    <p>{question.description}</p>
+                                </Grid>
+                                <Grid item xs={2}>
+                                    <RadioGroup row name={"radio" + (index + 1)} onChange={props.handleRadios}>
+                                        <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+                                    </RadioGroup>
+                                </Grid>
+                            </React.Fragment>
+                            
+                        )
+                        }
+                    </Grid>
                     </StyledFormControl>
                 </div>
         </CardContent>
 
     )
 }
+
+{/*
+    <Grid item xs={10}>
+    <p>
+    O recurso apresenta conteúdo de cunho político-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda política)?
+    </p>
+    </Grid>
+    <Grid item xs={2}>
+    <RadioGroup row name="radio1" onChange={props.handleRadios}>
+        <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+    </RadioGroup>
+    </Grid>
+
+    <Grid item xs={10}>
+    <p>
+    O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
+    </p>
+    </Grid>
+    <Grid item xs={2}>
+    <RadioGroup row name="radio2" onChange={props.handleRadios}>
+        <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+    </RadioGroup>
+    </Grid>
+    <Grid item xs={10}>
+    <p>
+    O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
+    </p>
+    </Grid>
+    <Grid item xs={2}>
+    <RadioGroup row name="radio3" onChange={props.handleRadios}>
+        <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+    </RadioGroup>
+    </Grid>
+    </Grid>
+    */}
diff --git a/src/Components/PurpleButton.js b/src/Components/PurpleButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b57b823d14aedd9bb2604fa0de6b9a4ea73da72
--- /dev/null
+++ b/src/Components/PurpleButton.js
@@ -0,0 +1,52 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React from 'react'
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+
+export default function PurpleButton (props) {
+    return (
+        <StyledButton onClick={props.callback}>
+            {props.text}
+        </StyledButton>
+    )
+}
+
+const StyledButton = styled(Button)`
+    max-height : 36px !important;
+    background-color : #673ab7 !important;
+    color : #fff !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+
+    .button-text {
+        cursor : pointer;
+        line-height : 36px;
+        text-align : center;
+        color : currentColor;
+        white-space : nowrap;
+        text-transform : uppercase;
+        font-weight : 600 !important;
+        font-size : 14px;
+        font-style : inherit;
+        font-variant : inherit;
+        padding : 6px 16px !important;
+    }
+`
diff --git a/src/Components/RedirectModal.js b/src/Components/RedirectModal.js
new file mode 100644
index 0000000000000000000000000000000000000000..bc786eca8e32d73651fcb3b7f279b0aa9b0a5180
--- /dev/null
+++ b/src/Components/RedirectModal.js
@@ -0,0 +1,171 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useEffect, useState} from 'react'
+import styled from 'styled-components'
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import CloseIcon from '@material-ui/icons/Close';
+
+function CloseModalButton (props) {
+    return (
+        <StyledCloseModalButton onClick={props.handleClose}>
+            <CloseIcon/>
+        </StyledCloseModalButton>
+    )
+}
+
+const StyledCloseModalButton = styled(Button)`
+    display : inline-block;
+    position : absolute !important;
+    right : 8px;
+    top : 8px;
+    float : right !important;
+    margin-right : -8px !important;
+    background : transparent !important;
+    min-width: 0 !important;
+
+    width : 40px;
+`
+
+
+export default function RedirectModal (props) {
+
+    return (
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+        >
+            <Fade in={props.open}>
+                <Container>
+                    <CloseModalButton handleClose={props.handleClose}/>
+                    <Header>
+                        <span style={{width:"32px"}}/>
+                        <h2>Você será redirecionado para outro site</h2>
+                    </Header>
+                    <Content>
+                        <span style={{fontWeight : "600"}}>Uma nova aba ou janela irá abrir, deseja continuar?</span>
+                        <div style={{paddingTop : "20px", paddingBottom : "10px"}}>
+                            Lembre-se de que você pode reportar caso considere o conteúdo abusivo/ofensivo ou caso a página não corresponda a descrição apresentada.
+                        </div>
+                        <section style={{display : "flex", flexDirection : "row", justifyContent : "center"}}>
+                            <ButtonGrey onClick={props.handleClose}>CANCELAR</ButtonGrey>
+                            <a href={props.link} target="_blank" rel="noreferrer noopener" style={{textDecoration : "none !important"}}><ButtonOrange>CONTINUAR</ButtonOrange></a>
+                        </section>
+                    </Content>
+                </Container>
+            </Fade>
+        </StyledModal>
+    )
+}
+
+const ButtonOrange = styled(Button)`
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    background-color : #ff7f00 !important;
+    color : #fff !important;
+    text-decoration : none !important;
+    text-transform : uppercase !important;
+    outline : none !important;
+    text-align : center !important;
+    max-height : 36px;
+    margin-top : 5px !important;
+    font-size : 14px !important;
+    font-weight : 600 !important;
+`
+
+
+const ButtonGrey = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    margin-top : 5px !important;
+    margin-right : 15px !important;
+    background-color : transparent !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+    font-size : 14px !important;
+    font-weight : 600 !important;
+
+`
+
+const Content = styled.div`
+    color : #666;
+    padding : 20px 30px;
+    overflow : visible;
+    text-align : center;
+    font-size : 14px;
+`
+const Header = styled.div`
+    display : flex;
+    flex-direction : row;
+    align-items : center;
+    justify-content : space-between;
+    h2 {
+        font-size : 26px;
+        font-weight : lighter;
+        color : #666
+        padding : 10px 20px 0 20px;
+
+    }
+`
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`
+const Container = styled.div`
+    box-sizing : border-box;
+    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px gba(0,0,0,.12);
+    background-color : white;
+    align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    max-height : none;
+    position : relative;
+    padding : 10px;
+    border-radius : 4px;
+    @media screen and (min-width : 700px) {
+        max-width : 395px;
+        height : 326px;
+    }
+    @media screen and (max-width : 699px) {
+        width : 100%;
+        height : 100%;
+    }
+`
diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js
index 19e961fb3f2fdf07495d1e951f5277181179f342..ea8bb313cc7adc7f1b60187ae780e55a0ae0befb 100644
--- a/src/Components/ReportButton.js
+++ b/src/Components/ReportButton.js
@@ -58,7 +58,10 @@ export default function ReportButton (props) {
         <>
         {
             reportModal &&
-            <ReportModal open={reportModal} handleClose={() => handleModal()} {...props}/>
+            <ReportModal open={reportModal} handleClose={() => handleModal()}
+                    form="user" complainableId={props.complainableId}
+                    complainableType={props.complainableType}
+                    {...props}/>
         }
         {/*
             loginModal &&
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..fcea00e793912b73c072b2b146a33d809be9402c
--- /dev/null
+++ b/src/Components/ReportColecaoForm.js
@@ -0,0 +1,153 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+import React, {useContext} from 'react';
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import {StyledFormControl, ButtonsDiv, ButtonCancelar} from './ReportUserForm.js'
+import { withStyles } from '@material-ui/core/styles';
+
+const StyledRadio = withStyles({
+  root: {
+    color: '#666',
+    '&$checked': {
+      color: '#673ab7',
+    },
+  },
+  checked: {},
+})((props) => <Radio color="default" {...props} />);
+
+export default function ReportColecaoForm (props) {
+    const [value, setValue] = React.useState(-1);
+
+    const handleChange = (event) => {
+        setValue(event.target.value);
+    };
+
+    /*values are set according to backend complaint id*/
+    const [options] = React.useState([
+        {value : "1", text : 'A Coleção viola os direitos autorais.'},
+        {value : "2", text : 'A Coleção contém conteúdo ofensivo/abusivo.'},
+        {value : "5", text : 'A descrição da Coleção não corresponde ao seu conteúdo.'}
+    ])
+
+    const [moreInfo, setMoreInfo] = React.useState({
+        key : false,
+        value : "",
+    })
+
+    const handleChangeMoreInfo = (e) => {
+        const userInput = e.target.value
+
+        const flag = userInput.length > 150 ? true : false
+
+        setMoreInfo({...moreInfo,
+            key : flag,
+            value : userInput
+        })
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault()
+        const finalRadioValue = value
+        const finalMoreInfo = moreInfo
+
+        if( finalRadioValue != -1 && !(finalMoreInfo.key)) {
+            props.handleSubmit(finalRadioValue, finalMoreInfo.value)
+        }
+        else {
+            console.log('oops')
+        }
+    }
+
+    return (
+        <form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
+        <StyledFormControl component="fieldset">
+            <RadioGroup value={value} onChange={handleChange}>
+                {
+                    options.map(option =>
+                        <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
+                    )
+                }
+            </RadioGroup>
+        </StyledFormControl>
+
+        <StyledTextField
+            id = {"report-text-field"}
+            label={"Escreva mais sobre o problema"}
+            value = {moreInfo.value}
+            onChange = {e => handleChangeMoreInfo(e)}
+            helperText = {moreInfo.value.length + '/150'}
+            multiline={true}
+            rowsMax = {"5"}
+            error = {moreInfo.key}
+            required = {false}
+            helperText ={moreInfo.value.length + '/150'}
+            style={{width : "100%"}}
+        />
+
+        <ButtonsDiv>
+            <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+            <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
+        </ButtonsDiv>
+    </form>
+    )
+}
+
+const StyledTextField = styled(TextField)`
+    .MuiFormHelperText-root {
+        text-align : left;
+    }
+
+    label.Mui-focused {
+        color : #673ab7;
+    }
+
+    label.Mui-focused.Mui-error {
+        color : red;
+    }
+
+    .MuiInput-underline::after {
+        border-bottom: 2px solid #673ab7;
+    }
+`
+const ButtonEnviar = styled(Button)`
+    background-color : #673ab7 !important;
+    color : #fff !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    height: 36px !important;
+    border-radius: 3px !important;
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    outline : none !important;
+    min-width : 88px !important;
+    vertical-align : middle !important;
+    margin : 6px 8px !important;
+    text-decoration : none !important;
+
+    .MuiButton-label {
+        padding-right : 16px;
+        padding-left : 16px;
+    }
+`
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 5843515ef66f7226201576bbf327af6563c8ddbf..ed472b3890cda0cbc7bd02e7aa6b1f44714e0131 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -27,7 +27,9 @@ import {Store} from '../Store.js'
 import axios from 'axios'
 import {apiUrl} from '../env';
 import CloseIcon from '@material-ui/icons/Close';
-import ReportForm from './ReportForm.js'
+import ReportUserForm from './ReportUserForm.js'
+import ReportRecursoForm from './ReportRecursoForm.js'
+import ReportColecaoForm from './ReportColecaoForm.js'
 
 function CloseModalButton (props) {
     return (
@@ -55,18 +57,34 @@ export default function ReportModal (props) {
         }
         console.log(payload)
 
-        {/*
-            axios.post(`${apiUrl}/complaints`,
-            {
-                "complaint" : {
-                    "user_id" : state.currentUser.id,
-                    "description" : description,
-                    "complainable_id" : props.complainableId,
-                    "complainable_type" : props.complainableType,
-                    "complaint_reason_id" : complaint_reason_id
-                }
-            }).then( (response) => {console.log(response)}, (error) => {console.log(error)})
-        */}
+        axios.post(`${apiUrl}/complaints`,
+        {
+            "complaint" : {
+                "user_id" : state.currentUser.id,
+                "description" : description,
+                "complainable_id" : props.complainableId,
+                "complainable_type" : props.complainableType,
+                "complaint_reason_id" : complaint_reason_id
+            }
+        }).then( (response) => {console.log(response)}, (error) => {console.log(error)})
+    }
+
+    const renderForm = (formType) => {
+        switch (formType) {
+            case 'colecao':
+                return (
+                    <ReportColecaoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+                )
+            case 'recurso':
+                    return (
+                    <ReportRecursoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+                    )
+                break;
+            default:
+                return (
+                <ReportUserForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+                )
+            }
     }
 
     return (
@@ -74,8 +92,8 @@ export default function ReportModal (props) {
             aria-labelledby="transition-modal-title"
             aria-describedby="transition-modal-description"
             open={props.open}
-            animation={true}
-            centered={true}
+
+            centered="true"
             onClose={props.handleClose}
             closeAfterTransition
             BackdropComponent={Backdrop}
@@ -92,7 +110,9 @@ export default function ReportModal (props) {
                     </Header>
 
                     <Content>
-                        <ReportForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+                        {
+                            renderForm(props.form)
+                        }
                     </Content>
                 </ReportContainer>
             </Fade>
@@ -118,7 +138,7 @@ const Header = styled.div`
     h2 {
         font-size : 26px;
         font-weight : lighter;
-
+        color : #666
     }
 `
 
diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..66704bde8cda4ddad3c60c4aaf3ecd22e74760f8
--- /dev/null
+++ b/src/Components/ReportRecursoForm.js
@@ -0,0 +1,114 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+import React, {useContext} from 'react';
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, ButtonEnviar} from './ReportUserForm.js'
+import { withStyles } from '@material-ui/core/styles';
+
+const StyledRadio = withStyles({
+  root: {
+    color: '#666',
+    '&$checked': {
+      color: '#ff7f00',
+    },
+  },
+  checked: {},
+})((props) => <Radio color="default" {...props} />);
+
+export default function ReportRecursoForm (props) {
+    const [value, setValue] = React.useState(-1);
+
+    const handleChange = (event) => {
+        setValue(event.target.value);
+    };
+
+    /*values are set according to backend complaint id*/
+    const [options] = React.useState([
+        {value : "1", text : 'O Recurso viola os direitos autorais.'},
+        {value : "2", text : 'O Recurso contém conteúdo ofensivo/abusivo.'},
+        {value : "5", text : 'A descrição do Recurso não corresponde ao seu conteúdo.'}
+    ])
+
+    const [moreInfo, setMoreInfo] = React.useState({
+        key : false,
+        value : "",
+    })
+
+    const handleChangeMoreInfo = (e) => {
+        const userInput = e.target.value
+
+        const flag = userInput.length > 150 ? true : false
+
+        setMoreInfo({...moreInfo,
+            key : flag,
+            value : userInput
+        })
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault()
+        const finalRadioValue = value
+        const finalMoreInfo = moreInfo
+
+        if( finalRadioValue != -1 && !(finalMoreInfo.key)) {
+            props.handleSubmit(finalRadioValue, finalMoreInfo.value)
+        }
+        else {
+            console.log('oops')
+        }
+    }
+
+    return (
+        <form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
+        <StyledFormControl component="fieldset">
+            <RadioGroup value={value} onChange={handleChange}>
+                {
+                    options.map(option =>
+                        <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
+                    )
+                }
+            </RadioGroup>
+        </StyledFormControl>
+
+        <StyledTextField
+            id = {"report-text-field"}
+            label={"Escreva mais sobre o problema"}
+            value = {moreInfo.value}
+            onChange = {e => handleChangeMoreInfo(e)}
+            helperText = {moreInfo.value.length + '/150'}
+            multiline={true}
+            rowsMax = {"5"}
+            error = {moreInfo.key}
+            required = {false}
+            helperText ={moreInfo.value.length + '/150'}
+            style={{width : "100%"}}
+        />
+
+        <ButtonsDiv>
+            <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+            <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
+        </ButtonsDiv>
+    </form>
+    )
+}
diff --git a/src/Components/ReportForm.js b/src/Components/ReportUserForm.js
similarity index 89%
rename from src/Components/ReportForm.js
rename to src/Components/ReportUserForm.js
index a7ed304a4ed7161b865c0abdd97448c6eb6986b1..2ed7bd88d9cf7b29803d97788159116764263390 100644
--- a/src/Components/ReportForm.js
+++ b/src/Components/ReportUserForm.js
@@ -15,7 +15,7 @@ GNU Affero General Public License for more details.
 
 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/>.*/
-import React, {useContext} from 'react';
+import React, {useState, useContext} from 'react';
 import { Button } from '@material-ui/core';
 import styled from 'styled-components'
 import Radio from '@material-ui/core/Radio';
@@ -23,6 +23,16 @@ import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormControl from '@material-ui/core/FormControl';
 import TextField from '@material-ui/core/TextField';
+import { withStyles } from '@material-ui/core/styles';
+
+const StyledRadio = withStyles({
+  root: {
+    '&$checked': {
+      color: '#ff7f00 !important',
+    },
+  },
+  checked: {},
+})((props) => <Radio color="default" {...props} />);
 
 export default function ReportForm (props) {
     const [value, setValue] = React.useState(-1);
@@ -72,7 +82,7 @@ export default function ReportForm (props) {
                 <RadioGroup value={value} onChange={handleChange}>
                     {
                         options.map(option =>
-                            <FormControlLabel value={option.value} control={<Radio color="orange"/>} label={option.text} />
+                            <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
                         )
                     }
                 </RadioGroup>
@@ -89,7 +99,6 @@ export default function ReportForm (props) {
                 rowsMax = {"5"}
                 error = {moreInfo.key}
                 required = {false}
-                helperText ={moreInfo.value.length + '/150'}
                 style={{width:"100%"}}
             />
 
@@ -101,14 +110,14 @@ export default function ReportForm (props) {
     );
 }
 
-const ButtonsDiv = styled.div`
+export const ButtonsDiv = styled.div`
     display : flex;
     flex-direction : row;
     justify-content : flex-end;
     align-items : center;
 `
 
-const ButtonCancelar = styled(Button)`
+export const ButtonCancelar = styled(Button)`
     &:hover {
         background-color : rgba(158,158,158,0.2) !important;
     }
@@ -123,7 +132,7 @@ const ButtonCancelar = styled(Button)`
     height : 36px !important;
 `
 
-const ButtonEnviar = styled(Button)`
+export const ButtonEnviar = styled(Button)`
     background-color : #ff7f00 !important;
     color : #fff !important;
     font-size: 14px !important;
@@ -144,9 +153,9 @@ const ButtonEnviar = styled(Button)`
         padding-left : 16px;
     }
 `
-const StyledTextField = styled(TextField)`
+export const StyledTextField = styled(TextField)`
     .MuiFormHelperText-root {
-        text-align : right;
+        text-align : left;
     }
 
     label.Mui-focused {
@@ -162,16 +171,15 @@ const StyledTextField = styled(TextField)`
     }
 `
 
-const StyledFormControl = styled(FormControl)`
+export const StyledFormControl = styled(FormControl)`
     .MuiFormControlLabel-root {
         color : #666;
     }
-    .MuiIconButton-label {
-        color : #666;
-    }
-    .PrivateRadioButtonIcon-checked-327 {
+
+    .PrivateRadioButtonIcon-checked {
         color : orange;
     }
+
     .MuiTypography-body1 {
         font-size : 14px;
     }
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index a7fb7d75c4a8ba97c601b927374512192fb9883b..8ff31bd892ff7c08aaacbc4ca208b1b0f12d0917 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -18,8 +18,9 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, {useState, useEffect} from 'react';
 import Card from '@material-ui/core/Card';
+import axios from 'axios'
 import {apiDomain, apiUrl} from '../env';
-import Options from './CardOptions'
+import ResourceCardOptions from './ResourceCardOptions'
 import noAvatar from "../img/default_profile.png";
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -47,16 +48,21 @@ import FavoriteIcon from '@material-ui/icons/Favorite';
 import ButtonGuardarColecao from './ButtonGuardarColecao.js'
 import Slide from '@material-ui/core/Slide';
 import Grid from '@material-ui/core/Grid';
+import {Link} from 'react-router-dom';
+import {getDefaultThumbnail} from './HelperFunctions/getDefaultThumbnail'
+import GetIconByName from './UploadPageComponents/GetIconByName'
+import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
 
 const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
 {label: "Aplicativo" , thumb: aplicativo}, {label: "Áudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label:"Livro digital", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software Educacional", thumb:software}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "Vídeo", thumb:video}]
 
 export default function ResourceCardFunction (props) {
     const [thumbnail, setThumbnail] = useState(null)
-    const [label, setLabel] = useState(props.type ? props.type : "Outros")
+    const [label, setLabel] = useState(props.type)
     const [userAvatar, setUserAvatar] = useState(noAvatar)
     const [slideIn, setSlide] = useState(false)
     const controlSlide = () => {setSlide(!slideIn)}
+    const [liked, toggleLiked] = useState(props.liked)
 
     useEffect( () => {
         //decide which thumbnail to use
@@ -64,9 +70,7 @@ export default function ResourceCardFunction (props) {
             setThumbnail(`${apiDomain}` + props.thumbnail)
         }
         else {
-            //props.type is either the object type or "Outros"
-            const aux = types.find(function(element){return element.label === props.type})
-            setThumbnail(aux.thumb)
+            setThumbnail(getDefaultThumbnail(label))
         }
 
         if (props.avatar) {
@@ -75,6 +79,14 @@ export default function ResourceCardFunction (props) {
 
     }, [])
 
+    const handleLike = () => {
+        let payload = {}
+        let config = getAxiosConfig()
+
+        axios.put( (`${apiUrl}/learning_objects/` + props.id + '/like'),payload, config
+        ).then( (response) => {toggleLiked(!liked)}, (error) => {console.log(error)})
+    }
+
     const SlideAnimationContent = () => {
         return (
             <SlideContentDiv>
@@ -111,28 +123,28 @@ export default function ResourceCardFunction (props) {
                         {
                             props.published &&
                             <Slide direction="right" in={slideIn}>
-                                <a href="" className="text">
+                                <Link to={props.href} className="text">
                                     {SlideAnimationContent()}
-                                </a>
+                                </Link>
                             </Slide>
                         }
-                        <a href=""> {/*add link to learningObject*/}
+                        <Link to={props.href}> {/*add link to learningObject*/}
                             <img className="img-cover" src={thumbnail} alt="learning object thumbnail"/>
-                        </a>
+                        </Link>
                     </Header>
 
                     <Description>
-                        <a href="" className="text"> {/*add link to learningObject*/}
+                        <Link to={props.href} className="text"> {/*add link to learningObject*/}
                             <span>
                                 {props.title}
                             </span>
-                        </a>
+                        </Link>
 
                         {
                             props.published &&
                             <Rating
                               name="customized-empty"
-                              value={props.rating*10}
+                              value={props.rating}
                               precision={0.5}
                               style={{color:"#666"}}
                               emptyIcon={<StarBorderIcon fontSize="inherit" />}
@@ -141,7 +153,7 @@ export default function ResourceCardFunction (props) {
 
                         <Footer>
                             <Type>
-                                <MoreIcon style={{color:"#ff7f00"}}/> {/*get icon based on object type*/}
+                                {GetIconByName(label)}
                                 <span>{label}</span>
                             </Type>
 
@@ -149,8 +161,8 @@ export default function ResourceCardFunction (props) {
                                 props.published &&
                                 <LikeCounter>
                                     <span>{props.likeCount}</span>
-                                    <ButtonNoWidth>
-                                        <FavoriteIcon style={{color : props.liked ? "red" : "#666" }}/>
+                                    <ButtonNoWidth onClick={handleLike}>
+                                        <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
                                     </ButtonNoWidth>
                                 </LikeCounter>
                             }
@@ -162,9 +174,15 @@ export default function ResourceCardFunction (props) {
                     props.published &&
                     <CardReaFooter>
                         <div style={{display : "flex", height : "100%"}}>
-                            <ButtonGuardarColecao/>
+                            <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} recursoId={props.id}
+                                />
                         </div>
-                        <Options/>
+                        <ResourceCardOptions
+                            learningObjectId={props.id}
+                            downloadableLink = {props.downloadableLink}
+                            thumb={props.thumbnail}
+                            title={props.title}
+                            />
                     </CardReaFooter>
                 }
             </CardDiv>
@@ -283,10 +301,17 @@ export const LikeCounter = styled.div`
 
 const Type = styled.div`
     line-height : 1;
-    .MuiSvgIcon-root {
-        font-size : 21px;
-        vertical-align : middle;
+
+    .icon {
+        height : 27px;
+        width : 27px;
         padding-right : .4em;
+        vertical-align : middle
+        align-self : center;
+
+        .st1 {
+            fill : #ff7f00;
+        }
     }
 `
 
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
new file mode 100644
index 0000000000000000000000000000000000000000..53d401f0e2659ccd84189205998aaf0901ab7218
--- /dev/null
+++ b/src/Components/ResourceCardOptions.js
@@ -0,0 +1,187 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useContext, useState} from 'react';
+import {Store} from '../Store.js'
+import styled from 'styled-components'
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import OpenIcon from '@material-ui/icons/OpenInNew';
+import ReportIcon from '@material-ui/icons/Error';
+import axios from 'axios'
+import {apiUrl} from '../env';
+import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
+import ReportModal from './ReportModal.js'
+import {Link} from 'react-router-dom'
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import ShareIcon from '@material-ui/icons/Share';
+import AddIcon from '@material-ui/icons/CreateNewFolder';
+import GuardarModal from './GuardarModal'
+import ShareModal from './ShareModal'
+import SnackbarComponent from './SnackbarComponent'
+
+export default function ResourceCardOptions (props) {
+    const {state} = useContext(Store)
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    function handleClick(event) {
+        setAnchorEl(event.currentTarget);
+    }
+
+    function handleClose() {
+        setAnchorEl(null);
+    }
+
+    const [reportModal, toggleReportModal] = useState(false)
+    const handleModalReportar = (value) => {
+        toggleReportModal(value)
+        {/*if (state.currentUser.id) {
+            toggleReportModal(!reportModal)
+        }
+        else {
+            toggleLoginModal(true)
+        }*/}
+    }
+
+    const [saveToCol, toggleSave] = useState(false)
+    const handleGuardar = () => {
+        if(state.currentUser.id === '') {
+            console.log('abrir login modal');
+        }
+        else {
+            toggleSave(true);
+        }
+        handleClose()
+    }
+
+    const enableDownload = () => {
+        const url = props.downloadableLink
+        window.open(url, '_blank');
+        toggleSnackbar(true)
+    }
+
+    const [shareOpen, toggleShare] = useState(false)
+
+    const handleShare = () => {
+        if(state.currentUser.id === '') {
+            console.log('abrir login modal');
+        }
+        else {
+            toggleShare(true);
+        }
+        handleClose()
+    }
+    const getShareablePageLink = () => {
+        return (window.location.href + "/recurso/" + props.learningObjectId)
+    }
+
+    const [snackbarOpen, toggleSnackbar] = useState(false)
+
+    return (
+        <React.Fragment>
+        <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
+            form="recurso" complainableId={props.learningObjectId}
+            complainableType={"LearningObject"}
+            {...props}
+        />
+        <GuardarModal open={saveToCol} handleClose={() => {toggleSave(false)}}
+            thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
+        />
+        <ShareModal open={shareOpen} handleClose={() => {toggleShare(false)}}
+            thumb={props.thumb} title={props.title} link={getShareablePageLink()}
+        />
+        <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
+            />
+        <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
+            <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+                <MoreVertIcon style={{color : "#666"}}/>
+            </ButtonNoWidth>
+            <Menu
+                id="simple-menu"
+                anchorEl={anchorEl}
+                keepMounted
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+            >
+                <StyledMenuItem onClick={handleClose}>
+                    <Link to={"/recurso/" + props.learningObjectId}>
+                        <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+                    </Link>
+                </StyledMenuItem>
+
+                {
+                    props.downloadableLink &&
+                    <StyledMenuItem onClick={() => {enableDownload(); handleClose()}}>
+                        <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
+                    </StyledMenuItem>
+                }
+
+                <StyledMenuItem onClick={handleShare}>
+                    <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
+                </StyledMenuItem>
+
+                <StyledMenuItem onClick={handleGuardar}>
+                    <ListItemIcon><AddIcon /></ListItemIcon>Guardar
+                </StyledMenuItem>
+
+                <StyledMenuItem onClick={() => {handleModalReportar(true); handleClose()}}>
+                    <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+                </StyledMenuItem>
+            </Menu>
+        </div>
+    </React.Fragment>
+  );
+}
+
+const ButtonNoWidth = styled(Button)`
+    width : 24px !important;
+    min-width : 24px !important;
+    max-height : 24px !important;
+    padding : 0 !important;
+    background-color : #fff !important;
+    color : #a5a5a5 !important;
+    border : 0 !important;
+
+    .MuiButton-root {
+        width : 24px !important;
+        min-width : 12px !important;
+    }
+
+    .MuiSvgIcon-root {
+        padding-right : 0 !important;
+        vertical-align : middle;
+    }
+
+    .MuiButton-label {
+        padding-left : 4px !important;
+    }
+    `
+
+const StyledMenuItem = styled(MenuItem)`
+    color : #666 !important;
+    .MuiSvgIcon-root {
+        vertical-align : middle !important;
+    }
+    a {
+        text-decoration : none !important;
+        color : #666 !important;
+    }
+`
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..efbf0a0349ad1184ac616bd738faffa5abfba7a0
--- /dev/null
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -0,0 +1,258 @@
+import React, {useState} from 'react'
+import styled from 'styled-components'
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import StarIcon from '@material-ui/icons/Star';
+import TextField from "@material-ui/core/TextField";
+import { Button } from '@material-ui/core';
+import axios from 'axios'
+import {apiUrl} from '../../env';
+import EditIcon from '@material-ui/icons/Edit';
+import Grid from '@material-ui/core/Grid';
+
+export default function CommentForm (props) {
+    const [rating, setRating] = useState({
+        error : true,
+        value : 0
+    })
+    const [comment, setComment] = useState({
+        error : false,
+        value : ''
+    })
+
+    const handleChange = (e) => {
+        const userInput = e.target.value
+        const flag = (userInput.length === 0 ? true : false);
+        setComment({...comment, error : flag, value : userInput})
+    }
+
+    const [attemptedSubmit, setAttempt] = useState(false)
+
+    const handleSubmit = (e) => {
+        e.preventDefault()
+        const finalRating = rating
+        const finalComment = comment
+
+
+        if (!(finalRating.error || finalComment.error)) {
+            let config = {
+                headers : {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+                    'Client': sessionStorage.getItem('@portalmec/clientToken'),
+                    'Uid': sessionStorage.getItem('@portalmec/uid'),
+                }
+            }
+            let payload = {
+                "review" : {
+                    "description" : finalComment.value,
+                    "review_ratings_attributes" : [
+                        {
+                            "rating_id" : 1,
+                            "value" : finalRating.value
+                        }
+                    ]
+                }
+            }
+            let type = props.recurso ? 'learning_objects/' : 'collections/'
+            console.log(payload)
+            axios.post( (`${apiUrl}/` + type + props.recursoId + '/reviews'), payload, config
+        ).then((response) => {
+            if ( response.headers['access-token'] ) {
+                sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+            }
+            console.log(response.data);
+             props.handleSnackbar(1);
+              props.rerenderCallback()},
+        (error) => {console.log(error)})
+        }
+        else {
+            setAttempt(true)
+        }
+    }
+
+    let windowWidth = window.innerWidth
+
+    return (
+        <StyledForm onSubmit={handleSubmit}>
+            <label htmlFor="avaliacao-estrelas" className="start-label">
+                {props.recurso ? "Este recurso foi útil?*" : "Esta coleção foi útil?*"}
+            </label>
+            <div className="stars-container">
+                <Rating
+                  name="avaliacao-estrelas"
+                  value={rating.value}
+                  precision={0.5}
+                  style={{color:"#ff9226"}}
+                  onChange = {(e, newValue) => {setRating({...rating, error : newValue === null ? true : false, value : newValue})}}
+                  emptyIcon={<StarIcon fontSize="inherit" style={{color : "#666"}} />}
+                  getLabelText={(value) => {return(value + ' Estrela' + (value !== 1 ? 's' : ''))}}
+                />
+            </div>
+            <div className="star-alert" style={attemptedSubmit ? {visibility : "visible"} : {visibility : "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>
+
+            <Grid container>
+                {
+                    windowWidth > 990 ?
+                    (
+                        <>
+                        <Grid item xs={10}>
+                            <StyledTextField
+                                colecao={!props.recurso}
+                                value={comment.value}
+                                multiline
+                                rows="5"
+                                error={comment.error}
+                                label={props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção"}
+                                onChange={e => handleChange(e)}
+                                required={true}
+                                help = {comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
+                                />
+                        </Grid>
+                        <Grid item xs={2}>
+                            <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}>
+                                {
+                                    props.recurso ?
+                                    (
+                                        <OrangeButton type="submit">Publicar</OrangeButton>
+                                    )
+                                    :
+                                    (
+                                        <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
+                                    )
+                                }
+                            </div>
+                        </Grid>
+
+                        <div className="campos-obrigatorios">* Campos obrigatórios.</div>
+                        </>
+                    )
+                    :
+                    (
+                        <>
+                        <Grid item xs={12}>
+                            <StyledTextField
+                                colecao={!props.recurso}
+                                value={comment.value}
+                                multiline
+                                rows="5"
+                                error={comment.error}
+                                label={props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção"}
+                                onChange={e => handleChange(e)}
+                                required={true}
+                                help = {comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
+                                />
+                        </Grid>
+                        <Grid item xs={12}>
+                            <div style={{paddingTop : "18px", display : "flex", justifyContent : "space-between"}}>
+                                <div className="campos-obrigatorios">* Campos obrigatórios.</div>
+                                <div style={{width : "40%"}}>
+                                {
+                                    props.recurso ?
+                                    (
+                                        <OrangeButton type="submit">Publicar</OrangeButton>
+                                    )
+                                    :
+                                    (
+                                        <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
+                                    )
+                                }
+                                </div>
+                            </div>
+                        </Grid>
+                    </>
+                    )
+                }
+            </Grid >
+        </StyledForm>
+    )
+}
+
+const PurpleButton = styled(Button)`
+    background-color : #673ab7 !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    font-weight : 600 !important;
+    color : #fff !important;
+    .icon {
+        vertical-align : middle !important;
+        font-weight : normal !important;
+        font-style : normal !important;
+        font-size : 24px !important;
+        line-height : 1 !important;
+        letter-spacing : normal !important;
+        text-transform : none !important;
+        display : inline-block !important;
+        white-space : nowrap !important;
+        word-wrap : normal !important;
+        direction : ltr !important;
+        padding-right : 2px;
+    }
+`
+
+const OrangeButton = styled(Button)`
+    color : rgba(255,255,255,0.87) !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    font-weight : 600 !important;
+    background-color : #ff7f00 !important;
+`
+
+const StyledTextField = styled(TextField)`
+    .MuiInputBase-root {
+        margin-bottom : 5px;
+    }
+
+    label.Mui-focused {
+        color : ${props => props.colecao ? "#673ab7" : "rgb(255,127,0)"}
+    }
+
+    .MuiInput-underline::after {
+        border-bottom: ${props => props.colecao ? "2px solid #673ab7" : "2px solid rgb(255,127,0)" };
+    }
+
+    label.Mui-focused.Mui-error {
+        color : red;
+    }
+
+    width: 95%;
+`
+
+const StyledForm = styled.form`
+    display : flex;
+    flex-direction : column;
+    text-align : start;
+    @media screen and (max-width : 990px) {
+        padding-left : 15px;
+    }
+
+    .start-label {
+        font-size : 14px;
+        max-width : 100%;
+        display : inline-block;
+        margin-bottom : 0;
+        color : #a5a5a5;
+        font-weight : 400;
+    }
+
+    .stars-container {
+        padding-top : 10px;
+        padding-bottom : 5px;
+        display : flex;
+        flex-direction : row;
+        align-self : flex-start;
+        margin-bottom : 5px;
+        color : #a5a5a5;
+    }
+
+    .star-alert {
+        color : #666;
+        text-align : start;
+    }
+
+    .campos-obrigatorios {
+        padding-top : 18px;
+        font-weight : 400;
+        font-size : 12px;
+        color :#a5a5a5;
+    }
+`
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
new file mode 100644
index 0000000000000000000000000000000000000000..924a690434497aa0f7e133ff4ddec765310d5566
--- /dev/null
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -0,0 +1,214 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useContext, useEffect} from 'react'
+import {Store} from '../../Store.js'
+import styled from 'styled-components'
+import Grid from '@material-ui/core/Grid';
+import { Button } from '@material-ui/core';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import Comentarios from '../../img/comentarios.png'
+import {apiUrl, apiDomain} from '../../env';
+import CommentForm from './CommentForm.js'
+import axios from 'axios'
+import Comment from '../Comment.js'
+
+export default function CommentsArea (props) {
+    const {state} = useContext(Store)
+    const [comentarios, setComentarios] = useState([])
+    const [gambiarra, setState] = useState(0)
+    const forceUpdate = () => {setState(gambiarra + 1)}
+
+    useEffect( () => {
+        axios.get( (`${apiUrl}/learning_objects/` + props.recursoId + '/reviews')
+    ).then( (response) => {
+        if ( response.headers['access-token'] ) {
+            sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+        }
+        console.log(response)
+        setComentarios(response.data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
+    }, (error) => {console.log(error)})
+    }, [gambiarra])
+
+    return (
+        <Grid container spacing={2} style={{padding : "10px"}}>
+            {
+                (state.currentUser.id !== '') ?
+                (
+                        <Grid item xs={12} >
+                            <GrayContainer>
+                                <h3>Conte sua experiência com o Recurso</h3>
+                                <Grid container style={{paddingTop : "20px"}}>
+                                    <Grid item xs={2} style={{paddingLeft : "15px", paddingRight : "15px"}}>
+                                        <img src={apiDomain + state.currentUser.userAvatar} className="minha-imagem" alt="user avatar"/>
+                                    </Grid>
+                                    <Grid item xs={10}>
+                                        <CommentForm
+                                            recursoId={props.recursoId}
+                                            handleSnackbar={props.handleSnackbar}
+                                            rerenderCallback={forceUpdate}
+                                            recurso={props.recurso}
+                                            />
+                                    </Grid>
+                                </Grid>
+                            </GrayContainer>
+                        </Grid>
+                )
+                :
+                (
+                        <Grid item xs={12}>
+                            <LogInToComment>
+                                <span className="span-laranja">Você precisa entrar para comentar</span>
+                                {/*adicionar funcionalidade ao botao de entrar*/}
+                                <Button style={{textTransform : "uppercase", color : "#666", fontWeight : "700"}}>
+                                     <ExitToAppIcon/>ENTRAR
+                                 </Button>
+                            </LogInToComment>
+                        </Grid>
+                )
+            }
+            {
+                comentarios.length !== 0 ?
+                (
+                            <ComentariosBox>
+                                <h3>{comentarios.length} {comentarios.length != 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
+                                {
+                                    comentarios.map( comentario =>
+                                            <div className="comentario-template" key={comentario.id}>
+                                                <Comment
+                                                    authorID={comentario.user ? comentario.user.id : null}
+                                                    authorAvatar={comentario.user ? comentario.user.avatar : null}
+                                                    authorName={comentario.user ? comentario.user.name : null}
+                                                    name={comentario.name}
+                                                    rating={comentario.rating_average}
+                                                    reviewRatings = {comentario.review_ratings}
+                                                    description={comentario.description}
+                                                    createdAt={comentario.created_at}
+                                                    recurso={true}
+                                                    reviewID={comentario.id}
+                                                    objectID={props.recursoId}
+                                                    rerenderCallback={forceUpdate}
+                                                    handleSnackbar={props.handleSnackbar}
+                                                    />
+                                            </div>
+                                    )
+                                }
+                            </ComentariosBox>
+                )
+                :
+                (
+                        <Grid item xs={12}>
+                            <LogInToComment>
+                                <img src={Comentarios} />
+                                <span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
+                                <AoRelatar>
+                                    Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo país.
+                                </AoRelatar>
+                            </LogInToComment>
+                        </Grid>
+                )
+            }
+        </Grid>
+    )
+}
+
+
+const ComentariosBox = styled.div`
+    display : flex;
+    flex-direction : column;
+    padding : 20px;
+    width : 100%;
+
+    h3 {
+        font-family: 'Roboto Light','Roboto Regular',Roboto;
+        font-weight: 300;
+        font-style: normal;
+        color:#666;
+        font-size: 1.857em;
+        margin: 15px 2%;
+        text-align : flex-start;
+    }
+
+    .comentario-template {
+        padding : 20px 0;
+        border-bottom : 1px solid #f4f4f4;
+    }
+`
+const AoRelatar = styled.div`
+    width : 70%;
+    font-size : 20px;
+    font-weight : 300;
+    text-align : center;
+    padding-bottom : 20px;
+`
+
+const LogInToComment = styled.div`
+    display : flex;
+    flex-direction : column;
+    text-align : center;
+    padding : 20px;
+    align-items : center;
+
+    .span-laranja {
+        font-size : 24px;
+        font-weight : 700;
+        padding-bottom : 5px;
+        color : #ff7f00;
+    }
+
+    img {
+        object-fit : contain !important;
+        background-color : transparent !important;
+    }
+`
+
+const GrayContainer = styled.div`
+    background-color : #fafafa;
+    font-weight : 400;
+    display : flex;
+    flex-direction : column;
+    justify-content : space-between;
+    font-size : 14px;
+    padding-bottom : 20px;
+    @media screen and (min-width : 990px) {
+        padding-right : 15px;
+        padding-left : 15px;
+    }
+
+    h3 {
+        font-family : 'Roboto Light','Roboto Regular',Roboto;
+        font-weight: 300;
+        font-style: normal;
+        color: #666;
+        font-size: 1.857em;
+        margin-bottom : 10px;
+        margin-left : 2%;
+        margin-top : 2%;
+    }
+
+    .minha-imagem {
+        height: 60px;
+        width: 60px;
+        border-radius: 50%;
+        margin-left: 2%;
+        margin-top: 5%;
+    }
+    img {
+        vertical-align :middle;
+    }
+`
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea2253c4718394b629ae4603ce7d1645d3142d43
--- /dev/null
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -0,0 +1,336 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useContext} from 'react'
+import {Store} from '../../Store.js'
+import styled from 'styled-components'
+import Grid from '@material-ui/core/Grid';
+import { Button } from '@material-ui/core';
+import ErrorIcon from '@material-ui/icons/Error';
+import ShareIcon from '@material-ui/icons/Share';
+import FolderIcon from '@material-ui/icons/Folder';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import CallMadeIcon from '@material-ui/icons/CallMade';
+import {Link} from 'react-router-dom'
+import ReportModal from '../ReportModal.js'
+import ReportRecursoForm from '../ReportRecursoForm.js'
+import ShareModal from '../ShareModal.js'
+import GuardarModal from '../GuardarModal.js'
+import RedirectModal from '../RedirectModal'
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+function ReportButton (props) {
+    return (
+            !props.complained ?
+            (
+                <ButtonGrey onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
+                    <span className="button-text">
+                        <ErrorIcon className="icon"/> Reportar abuso ou erro
+                    </span>
+                </ButtonGrey>
+            )
+            :
+            (
+                <ButtonGrey>
+                    <span className="button-text-report">
+                        <ErrorIcon className="icon"/> Você já reportou este recurso
+                    </span>
+                </ButtonGrey>
+            )
+    )
+}
+
+function DownloadButton (props) {
+    return (
+            props.downloadableLink ?
+            (
+                    <ButtonOrange onClick={props.enableDownload}>
+                        <span className="text">
+                            <GetAppIcon className="icon"/> Baixar Recurso
+                            </span>
+                        </ButtonOrange>
+            )
+            :
+                props.link ?
+                (
+                        <ButtonOrange onClick={props.toggleRedirect}>
+                            <span className="text">
+                                <CallMadeIcon className="icon"/> Abrir Recurso
+                                </span>
+                            </ButtonOrange>
+                )
+                :
+                (
+                    <React.Fragment/>
+                )
+    )
+}
+
+export default function Footer (props) {
+    const {state} = useContext(Store)
+    const enableDownload = () => {
+        const url = props.downloadableLink
+        window.open(url, '_blank');
+        props.handleSnackbar(0)
+    }
+    let windowWidth = window.innerWidth
+    const [reportOpen, toggleReport] = useState(false)
+    const [shareOpen, toggleShare] = useState(false)
+    const [saveToCol, toggleSave] = useState(false)
+    const [redirectOpen, toggleRedirect] = useState(false)
+
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    function handleClick(event) {
+      setAnchorEl(event.currentTarget);
+    }
+
+    function handleClose() {
+      setAnchorEl(null);
+    }
+
+    return (
+        <React.Fragment>
+            {/*-------------------------------MODALS---------------------------------------*/}
+            <ReportModal open={reportOpen} handleClose={() => {toggleReport(false)}}
+                form="recurso"
+                complainableId={props.recursoId}
+                complainableType={"LearningObject"}
+                />
+            <ShareModal open={shareOpen} handleClose={() => {toggleShare(false)}}
+                thumb={props.thumb} title={props.title} link={props.currPageLink}
+                />
+
+            <GuardarModal open={saveToCol} handleClose={() => {toggleSave(false)}}
+                thumb={props.thumb} title={props.title} recursoId={props.recursoId}
+                />
+            <RedirectModal open={redirectOpen} handleClose={() => {toggleRedirect(false)}}
+                link={props.link}
+                />
+            {/*----------------------------------------------------------------------------*/}
+
+            {/*-----------------------------BUTTONS----------------------------------------*/}
+            <OpcoesDiv>
+                <StyledGrid container>
+                    {
+                        windowWidth > 990 ?
+                        (
+                            <React.Fragment>
+                            {/*Botao Reportar*/}
+                            <Grid item xs={3}>
+                                <ReportButton
+                                    userLoggedIn={state.currentUser.id === '' ? false : true}
+                                    toggleReport={() => {toggleReport(true)}}
+                                    openLogin={() => console.log('abrir login modal')}
+                                    complained={props.complained}
+                                    />
+                            </Grid>
+
+                            {/*Botao Compartilhar*/}
+                            <Grid item xs={3}>
+                                <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleShare(true)}>
+                                    <span className="button-text">
+                                        <ShareIcon className="icon"/> Compartilhar
+                                    </span>
+                                </ButtonGrey>
+                            </Grid>
+
+                            {/*Botao Guardar*/}
+                            <Grid item xs={3}>
+                                <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleSave(true)}>
+                                    <span className="button-text">
+                                        <FolderIcon className="icon"/>Guardar
+                                    </span>
+                                </ButtonGrey>
+                            </Grid>
+
+                            <Grid item xs={3} style={{justifyContent : "right !important"}}>
+                                <DownloadButton
+                                    downloadableLink={props.downloadableLink}
+                                    link={props.link}
+                                    enableDownload={enableDownload}
+                                    toggleRedirect={() => {toggleRedirect(true)}}
+                                    />
+                            </Grid>
+                            </React.Fragment>
+                        )
+                        :
+                        (
+                            <React.Fragment>
+                            {/*Botao Guardar*/}
+                            <Grid item xs={4}>
+                                <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleSave(true)}>
+                                    <span className="button-text">
+                                        <FolderIcon className="icon"/>Guardar
+                                    </span>
+                                </ButtonGrey>
+                            </Grid>
+
+                            <Grid item xs={7}>
+                            <DownloadButton
+                                downloadableLink={props.downloadableLink}
+                                link={props.link}
+                                enableDownload={enableDownload}
+                                toggleRedirect={() => {toggleRedirect(true)}}
+                                />
+                            </Grid>
+
+                            <Grid item xs={1}>
+                                <Button aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+                                    <MoreVertIcon/>
+                                </Button>
+                                <Menu
+                                  id="simple-menu"
+                                  anchorEl={anchorEl}
+                                  keepMounted
+                                  open={Boolean(anchorEl)}
+                                  onClose={handleClose}
+                                >
+                                    <MenuItem>
+                                        <ReportButton
+                                            userLoggedIn={state.currentUser.id === '' ? false : true}
+                                            toggleReport={() => {toggleReport(true)}}
+                                            openLogin={() => console.log('abrir login modal')}
+                                            complained={props.complained}
+                                            />
+                                    </MenuItem>
+                                    <MenuItem>
+                                        <ButtonGrey onClick={state.currentUser.id === '' ? () => console.log('abrir login modal') : () => toggleShare(true)}>
+                                            <span className="button-text">
+                                                <ShareIcon className="icon"/> Compartilhar
+                                            </span>
+                                        </ButtonGrey>
+                                    </MenuItem>
+                                </Menu>
+                            </Grid>
+                            </React.Fragment>
+                        )
+                    }
+
+
+                </StyledGrid>
+            </OpcoesDiv>
+        </React.Fragment>
+    )
+}
+
+const OpcoesDiv = styled.div`
+    display : flex;
+    align-items : center;
+    height : 65px;
+    background-color : #fafafa;
+`
+
+const StyledGrid = styled(Grid)`
+    @media screen and (min-width: 990px) {
+        padding-left : 15px !important;
+    }
+
+    .MuiGrid-item {
+        padding-right : 15px;
+        padding-left : 15px;
+        display : flex;
+        justify-content : center;
+    }
+`
+
+const ButtonGrey = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    background-color : transparent !important;
+    color : #666 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+
+    .icon {
+        vertical-align : middle !important;
+        font-weight : normal !important;
+        font-style : normal !important;
+        font-size : 24px !important;
+        line-height : 1 !important;
+        letter-spacing : normal !important;
+        text-transform : none !important;
+        display : inline-block !important;
+        white-space : nowrap !important;
+        word-wrap : normal !important;
+        direction : ltr !important;
+        padding-right : 2px;
+        color : inherit !important;
+    }
+
+    .button-text {
+        cursor : pointer;
+        line-height : 36px;
+        text-align : center;
+        color : currentColor;
+        white-space : nowrap;
+        text-transform : uppercase;
+        font-weight : 600;
+        font-size : 14px;
+        font-style : inherit;
+        font-variant : inherit;
+    }
+    .button-text-report {
+        cursor : pointer;
+        line-height : 36px;
+        text-align : center;
+        color : red !important;
+        white-space : nowrap;
+        text-transform : uppercase;
+        font-weight : 600;
+        font-size : 14px;
+        font-style : inherit;
+        font-variant : inherit;
+    }
+`
+
+const ButtonOrange = styled(Button)`
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    background-color : #ff7f00 !important;
+    color : #fff !important;
+    text-decoration : none !important;
+    text-transform : uppercase !important;
+    outline : none !important;
+    text-align : center !important;
+    max-height : 36px;
+    margin-top : 5px !important;
+
+    .icon {
+        vertical-align : middle !important;
+        font-weight : normal !important;
+        font-style : normal !important;
+        font-size : 24px !important;
+        line-height : 1 !important;
+        letter-spacing : normal !important;
+        text-transform : none !important;
+        display : inline-block !important;
+        white-space : nowrap !important;
+        word-wrap : normal !important;
+        direction : ltr !important;
+        padding-right : 2px;
+    }
+
+    .text {
+        font-size : 14px;
+        font-weight : 600;
+    }
+`
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b4bfa627f4d5d8d4b8b2c612c607845c706b4c7
--- /dev/null
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -0,0 +1,403 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useContext, useState, useEffect} from 'react'
+import {Store} from '../../Store'
+import styled from 'styled-components'
+import Grid from '@material-ui/core/Grid';
+import {Link} from 'react-router-dom'
+import {NoIcon} from '../ContactButtons/FollowButton.js'
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Collapse from '@material-ui/core/Collapse';
+import SdCardIcon from '@material-ui/icons/SdCard';
+import TranslateIcon from '@material-ui/icons/Translate';
+import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import DateRangeIcon from '@material-ui/icons/DateRange';
+import UpdateIcon from '@material-ui/icons/Update';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import License from '../../img/cc_license.png'
+import ContactCardOptions from '../ContactCardOptions.js'
+
+function AdditionalInfoItem (props) {
+    return (
+        <span className="meta-objeto">
+            {props.icon}
+            <span>{props.label}</span>
+            {props.value}
+        </span>
+    )
+}
+
+export default function Sobre (props) {
+    const {state} = useContext(Store)
+
+    const [collapsed, setCollapsed] = useState(false)
+    const toggleCollapsed = () => {setCollapsed(!collapsed)};
+
+    var moment = require('moment')
+
+    const [additionalInfo, setAdditionalInfo] = useState()
+
+    useEffect(() => {
+        let aux = []
+
+        if (props.attachments && props.attachments[0]){
+            aux.push(<AdditionalInfoItem
+                icon={<SdCardIcon/>}
+                label={'Tamanho: '}
+                value={(props.attachments[0].size / 1000000).toFixed(2) + ' Mb'}
+                key={props.attachments[0].id}
+                />)
+        }
+
+        if(props.language){
+            props.language.map( (lang) =>
+                aux.push(<AdditionalInfoItem
+                    icon={<TranslateIcon/>}
+                    label={'Idioma: '}
+                    value={lang.name}
+                    key={lang.id}
+                    />
+            ))
+        }
+
+        if (props.mimeType){
+            aux.push(<AdditionalInfoItem
+                icon={<InsertDriveFileIcon/>}
+                label={'Formato: '}
+                value={props.mimeType}
+                key={props.mimeType}
+                />)
+        }
+        if (props.createdAt) {
+            aux.push(<AdditionalInfoItem
+                icon={<DateRangeIcon/>}
+                label={'Data de Envio: '}
+                value={moment(props.createdAt).format("DD/MM/YYYY")}
+                key={"dateCreatedAt"}
+                />)
+        }
+        if (props.updatedAt) {
+            aux.push(<AdditionalInfoItem
+                icon={<UpdateIcon/>}
+                label={'Modificado em: '}
+                value={moment(props.createdAt).format("DD/MM/YYYY")}
+                key={"dateUpdatedAt"}
+                />)
+        }
+        if (props.license) {
+            aux.push(<AdditionalInfoItem
+                icon={<AssignmentIcon/>}
+                label={'Tipo de licença: '}
+                value={
+                    <div className="license-link">
+                        <a href={props.license.url}>
+                            <img src={License} alt="license"/>
+                        </a>
+                        <p>
+                            {props.license.name}
+                        </p>
+                    </div>
+                }
+                key={props.license.id}
+                />)
+        }
+        else {
+            aux.push(<AdditionalInfoItem
+                icon={<AssignmentIcon/>}
+                label={'Tipo de licença: '}
+                value={
+                    <div className="license-link">
+                        <p>
+                            Informação não disponível.
+                        </p>
+                    </div>
+                }
+                key={"no-license"}/>)
+        }
+        setAdditionalInfo(aux)
+    }, [])
+
+    let windowWidth = window.innerWidth
+
+    return (
+        <Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
+
+            <Grid item xs={windowWidth > 990 ? 9 : 12} style={{paddingRight : "15px"}}>
+                <Collapse in={collapsed} collapsedHeight={338}>
+                    <SobreDiv>
+                        <div className="titulo">
+                            Sobre o Recurso
+                        </div>
+
+                        <div className="sobre-conteudo">
+                            <div className="tags-container">
+                                {
+                                    props.tags &&
+                                    props.tags.map( (tag) =>
+                                        <span key={tag.name}>{tag.name}</span>
+                                    )
+                                }
+                            </div>
+                            <div className="conteudo">
+                                <p className="descricao-objeto">{props.description}</p>
+                                {
+                                    props.author &&
+                                    <p className="autoria">
+                                        <b>Autoria: </b>{props.author}
+                                    </p>
+                                }
+                            </div>
+                        </div>
+
+                        <div className="titulo">
+                            Informações Adicionais
+                        </div>
+
+                        {additionalInfo}
+
+                    </SobreDiv>
+                </Collapse>
+            </Grid>
+
+            <Grid item xs={windowWidth > 990 ? 3 : 12}>
+                <MetasObjeto>
+                    <div className="enviado-por">
+                        Enviado por:
+                    </div>
+
+
+                    <div className="foto-autor">
+                        <Link to={"/usuario-publico/" + props.id}>
+                            <img src={props.avatar} alt="user avatar"/>
+                        </Link>
+                    </div>
+
+                    <div className="nome-autor">
+                        <Link to={"/usuario-publico/" + props.id} style={{textDecoration : "none"}}>
+                            <span className="span-st">{props.publisher}</span>
+                        </Link>
+                    </div>
+
+                    <div style={{paddingTop : "0.75em", display : "flex", justifyContent : "center"}}>
+                    {
+                        (props.id != state.currentUser.id) &&
+                        <>
+                        <NoIcon followableID={props.id}/>
+                        <ContactCardOptions followableID={props.id}/>
+                        </>
+                    }
+                    </div>
+                </MetasObjeto>
+            </Grid>
+
+            <Grid item xs={12} style={{paddingTop : "15px"}}>
+                <CollapseControl onClick={() => {toggleCollapsed()}}>
+                    {
+                        collapsed ?
+                        (
+                                <React.Fragment>
+                                    <span>VER MENOS</span>
+                                    <ExpandLessIcon/>
+                                </React.Fragment>
+                        )
+                        :
+                        (
+                                <React.Fragment>
+                                    <span>VER MAIS</span>
+                                    <ExpandMoreIcon/>
+                                </React.Fragment>
+                        )
+                    }
+                </CollapseControl>
+            </Grid>
+        </Grid>
+    )
+}
+
+const CollapseControl = styled.div`
+    display : flex;
+    justify-content : center;
+    align-content : center;
+    align-items : center;
+    height : 50px;
+    border-top : 1px solid #e5e5e5;
+    color : #666;
+    font-weight : 700;
+    cursor : pointer;
+
+    .MuiSvgIcon-root {
+        vertical-align : middle
+    }
+
+    span {
+        text-transform : uppercase;
+        font-size : 14px;
+    }
+`
+
+const SobreDiv = styled.div`
+    padding-left : 3% !important;
+    padding-top : 3% !important;
+    .titulo {
+        margin-top : 2% !important;
+        margin : 0;
+        margin-bottom : 10px;
+        font-family : 'Roboto Light','Roboto Regular',Roboto;
+        font-weight : 300;
+        font-style : normal;
+        color : #666;
+        font-size : 1.857em;
+    }
+
+    .sobre-conteudo {
+        .tags-container {
+            padding : 0;
+            width : 100%;
+            display : flex;
+            flex-direction : row;
+            align-items : center;
+            font-size : .8em;
+
+            span {
+                text-transform : capitalize;
+                display : inline-flex;
+                border-radius : 15px;
+                background-color : #e5e5e5;
+                margin-right : 3px;
+                padding : 3px 7px;
+                line-height : 18px;
+                margin-bottom : 3px;
+                color : #666;
+                font-size : .8em
+            }
+        }
+
+        .conteudo {
+            font-size : 14px;
+            .descricao-objeto {
+                text-align: justify;
+                margin-bottom: 20px;
+                margin-top: 20px;
+            }
+            .autoria {
+                margin-bottom : 30px;
+            }
+
+            p {
+                margin : 0 0 10px;
+            }
+        }
+    }
+
+    .meta-objeto {
+        width: 100%;
+        display: inline-block;
+        margin-bottom: 15px;
+        font-size : 14px;
+
+        .MuiSvgIcon-root {
+            vertical-align : middle
+        }
+
+        span {
+            margin-left : 2%;
+            font-weight : 700;
+        }
+
+        .license-link {
+            text-align : center;
+            display : inline-grid;
+
+            a {
+                text-decoration : none !important;
+                color : initial;
+
+                img {
+                    vertical-align : middle;
+                    width : auto !important;
+                    height : auto !important;
+                    float : inherit !important;
+                }
+            }
+
+            p {
+                margin : 0 0 10px;
+            }
+        }
+    }
+`
+
+const MetasObjeto = styled.div`
+    margin : 20px 0;
+    -webkit-box-orient : vertical;
+    -webkit-box-direction : normal;
+    -ms-flex-direction : column;
+    flex-direction : column;
+    -webkit-box-pack : start;
+    -ms-flex-pack : start;
+    justify-content : flex-start;
+    padding : 20px;
+    text-align : center;
+
+    @media screen and (min-width : 990px) {
+        border-left : 1px solid #e5e5e5;
+    }
+
+    .span-st {
+        position : relative;
+        font-size : 14px;
+        color: #666;
+    }
+
+    .enviado-por {
+        font-size : 14px;
+        color :#666;
+        font-weight : 500;
+        margin-bottom : 5px;
+        margin-top : 20px;
+        text-align : center;
+    }
+
+    .foto-autor {
+        display : -webkit-box;
+        display : -ms-flexbox;
+        display : flex;
+        -webkit-box-pack : center;
+        -ms-flex-pack : center;
+        justify-content : center;
+        -webkit-box-align : center;
+        -ms-flex-align : center;
+        align-items : center;
+        padding-top : 10px;
+
+        img {
+            width : 60px;
+            height : 60px;
+            border-radius : 50%;
+            vertical-align : middle;
+        }
+    }
+
+    .nome-autor {
+        text-align : center;
+        font-weight : 500;
+    }
+`
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c7c400f5a279838b28a7c11b4a3aa34b72caa1e
--- /dev/null
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -0,0 +1,277 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useEffect, useState, useContext} from 'react'
+import {Store} from '../../Store.js'
+import styled from 'styled-components'
+import Firulas from '../Firulas.js'
+import Grid from '@material-ui/core/Grid';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import EditIcon from '@material-ui/icons/Edit';
+import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import Button from '@material-ui/core/Button';
+import {Link, Redirect} from 'react-router-dom'
+import Alert from '../Alert.js';
+import Snackbar from '@material-ui/core/Snackbar';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+
+export default function TextoObjeto (props) {
+    const {state} = useContext(Store)
+
+    const [outrasTematicas, setOutrasTem] = useState('')
+    const [componentesCurriculares, setCompCurr] = useState('')
+    const [eduStages, setEduStages] = useState('')
+
+    const extractComponentesCurriculares = (subjects) => {
+        if (subjects) {
+            let outrasTem = []
+            let compCurr = []
+
+            subjects.map((subject) => {
+                if (!subject.theme) {
+                    compCurr.push(subject.name)
+                }
+                else {
+                    outrasTem.push(subject.name)
+                }
+            })
+            setOutrasTem(outrasTem.join(' - '))
+            setCompCurr(compCurr.join(' - '))
+        }
+        else {
+            setOutrasTem("Dado não identificado")
+            setCompCurr("Dado não identificado")
+        }
+    }
+
+    const extractEduStages = (stages) => {
+        return(stages ? stages.map((stage) => {return (stage.name)}).join(' - ') : undefined)
+    }
+
+    useEffect(() => {
+        extractComponentesCurriculares(props.subjects)
+        setEduStages(extractEduStages(props.educationalStages))
+    }, [])
+
+    const infos = [
+        {label : 'Tipo de Recurso: ', text : (props.objType ? props.objType : "Dado não identificado")},
+        {label : 'Componentes Curriculares: ', text : componentesCurriculares},
+        {label : 'Outras Temáticas: ', text : outrasTematicas},
+        {label : 'Etapas de Ensino: ', text : eduStages}
+    ]
+
+    const [snackbarOpen, toggleSnackbar] = useState(false)
+    const [publisherDeletedObject, toggleDeleted] = useState(false)
+    const handleDelete = () => {
+        let config = getAxiosConfig()
+        axios.delete((`${apiUrl}/learning_objects/` + props.recursoId), config).then(
+            (response) => {
+                toggleSnackbar(true)
+                console.log(response.data)
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                toggleDeleted(true)
+            },
+            (error) => {
+                console.log(error)
+            }
+        )
+    }
+
+    const checkAccessLevel = (levelToCheck) => {
+        if (state.currentUser.id != '') {
+            return(checkUserRole(levelToCheck))
+        }
+        else {
+            return(false)
+        }
+    }
+
+    const checkUserRole = (userRole) => {
+        return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
+    }
+
+    return (
+        <TextoObjetoDiv>
+            {   publisherDeletedObject &&
+                <Redirect to="/"/>
+            }
+            <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
+            anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+            >
+                <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
+                    Recurso excluido com sucesso!
+                </Alert>
+            </Snackbar>
+            <Grid container style={{paddingLeft : "15px"}}>
+                <Grid item xs={11}>
+                    <h3>{props.name}</h3>
+                    {
+                        props.stateRecurso !== "submitted" &&
+                        <Firulas
+                            rating={props.rating}
+                            likesCount={props.likesCount}
+                            liked={props.likedBool}
+                            recursoId={props.recursoId}
+                        />
+                    }
+
+                    {
+                        infos.map( (info) =>
+                            <span className={"info-recurso"} key={info.label}>
+                                <span className={"info-cabecalho-recurso"}>{info.label}</span>
+                                <span className={"dado-recurso"}>{info.text}</span>
+                            </span>
+                        )
+                    }
+
+                    <span className={"views-downloads"}>
+                        <span className={"info-cabecalho-recurso"}>
+                            <VisibilityIcon className={"icon"}/>Visualizações:
+                        </span>&nbsp;
+                        <span className={"dado-recurso"} style={{paddingRight : "50px"}}>{props.viewCount}</span>
+
+                        <span className={"info-cabecalho-recurso"}>
+                            <GetAppIcon className={"icon"}/>Baixados/Acessados:
+                        </span>&nbsp;
+                        <span className={"dado-recurso"}>{props.downloadCount}</span>
+                    </span>
+
+                    {
+                        props.attachments[0] && (props.attachments[0].mime_type==="/audio/mpeg" ||
+                        props.attachments[0].format === "audio") &&
+                        <div className="recurso-container-audio">
+                            <audio controls className="audio audio-objeto">
+                                <source src={props.audioUrl} type="audio/mp3"/>
+                            </audio>
+                        </div>
+                    }
+
+                    {/*|| checkUserRole('publisher')*/}
+                    {
+                        props.stateRecurso === "submitted" &&
+                        <div className="alert-warning">
+                            Esse recurso ainda não foi publicado por estar esperando análise da curadoria
+                        </div>
+                    }
+
+                    {/*|| checkUserRole('publisher')*/}
+                    {
+                        props.stateRecurso === "draft" &&
+                        <div className="alert-warning">
+                            Esse recurso ainda é um rascunho, termine de editar para publicá-lo
+                        </div>
+                    }
+                </Grid>
+                <Grid item xs={1}>
+                    {/*|| checkUserRole('publisher')*/}
+                    {props.id === state.currentUser.id  &&
+                        <React.Fragment>
+                            {
+                                (checkAccessLevel('publisher') || props.stateRecurso === "draft") &&
+                                <Link to={"/editar-recurso/" + props.recursoId}>
+                                    <Button style={{color : "#666"}}><EditIcon/></Button>
+                                </Link>
+                            }
+                            <Button style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
+                        </React.Fragment>
+                    }
+
+                </Grid>
+            </Grid>
+        </TextoObjetoDiv>
+    )
+}
+
+const TextoObjetoDiv = styled.div`
+    padding : 20px 20px 0 20px;
+    display : flex;
+    flex-direction : column;
+    justify-content : flex-start;
+    flex-wrap : no-wrap;
+    align-content : center;
+    align-items : flex-start;
+
+    h3 {
+        font-size : 26px;
+        font-weight : 400;
+        margin : 0;
+        padding-bottom : 15px;
+    }
+
+    .info-recurso {
+        display : inline-block;
+        width : 100%;
+        font-size : 15px;
+        font-weight : lighter;
+        margin-bottom : 12px;
+    }
+
+    .info-cabecalho-recurso {
+        font-size : 15px;
+    }
+
+    .dado-recurso {
+        font-size : 15px;
+        font-weight : 600;
+    }
+
+    .views-downloads {
+        font-size : 15px;
+        font-weight : lighter;
+        margin-bottom : 12px;
+    }
+
+    .icon {
+        color : #666;
+        vertical-align : middle;
+        margin-right : 2px;
+    }
+
+    .alert-warning {
+        color : #8a6d3b;
+        background-color : #fcf8e3;
+        border-color : #faebcc;
+        padding: 15px;
+        margin-bottom: 20px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        font-size : 14px;
+    }
+
+    .recurso-container-audio {
+        width : 100%;
+        margin-top : 20px;
+
+        .audio-objeto {
+            height : 32px;
+            width : 100%;
+            margin : 10px 0 8px 0;
+            background-color : #e5e5e5;
+        }
+
+        .audio {
+            display : inline-block;
+            vertical-align : baseline;
+        }
+    }
+`
diff --git a/src/Components/ResourcePageComponents/VideoPlayer.js b/src/Components/ResourcePageComponents/VideoPlayer.js
new file mode 100644
index 0000000000000000000000000000000000000000..35e3846f6ea03a5015cf94121b69e4c3f2546180
--- /dev/null
+++ b/src/Components/ResourcePageComponents/VideoPlayer.js
@@ -0,0 +1,88 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React from 'react'
+import styled from 'styled-components'
+
+function GetEmbeddedLink (link) {
+    if (link.indexOf("youtube") != -1) {  //plain youtebe.com/ link
+        if(link.indexOf("embed/") != -1) { //if it's already an embedded link, return it
+            return link
+        }
+        link = link.split("&")[0] //else remove features and other queries
+        var link = link.split("v=")[1] //get video id
+        var embed = "https://www.youtube.com/embed/" + link; //create embedded link
+   }
+   else if (link.indexOf("youtu.be") != -1) { //if it's a youtu.be link
+       link = link.split("&")[0].split("?")[0] //remove queries and features if existent
+       link = link.split(".be/")[1] //get video id
+       var embed = "https://www.youtube.com/embed/" + link; //create embedded link
+   }
+   else if (link.indexOf("vimeo") != -1) {    //if the 13th character = o (vimeo videos)
+       link = link.split("?")[0].split("/")
+       console.log(link)   //key # = from 19th character on
+       var embed = "https://player.vimeo.com/video/" + link.pop();    //Add vimeo link before key #
+   }
+   return embed
+}
+
+
+export default function VideoPlayer (props) {
+
+    return (
+        <>
+        {
+            props.urlVerified ?
+            (
+                <VideoContainer>
+                    <iframe
+                    src={GetEmbeddedLink(props.link)}
+                    frameBorder="0" allowFullScreen className="video"
+                    />
+                </VideoContainer>
+            )
+            :
+            (
+                <VideoContainer>
+                    <video controls className="video">
+                    <source src={props.videoUrl} type="video/webm"/>
+                    <source src={props.videoUrl} type="video/mp4"/>
+                    <p>Seu navegador não permite a exibição deste vídeo. É necessário baixar o vídeo para poder visualizá-lo.</p>
+                    </video>
+                </VideoContainer>
+
+            )
+        }
+        </>
+    )
+}
+
+const VideoContainer = styled.div`
+    position : relative;
+    width : 100%;
+    height : 0;
+    padding-bottom : 56.25%;
+
+    .video {
+        width : 100%;
+        height : 100%;
+        position : absolute;
+        top : 0;
+        left : 0;
+    }
+`
diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js
new file mode 100644
index 0000000000000000000000000000000000000000..1f3b771286cd3f95c331295e9691277914e11842
--- /dev/null
+++ b/src/Components/ShareModal.js
@@ -0,0 +1,248 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useRef} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import SignUpContainer from './SignUpContainerFunction.js'
+import {Store} from '../Store.js'
+import axios from 'axios'
+import {apiDomain} from '../env';
+import Grid from '@material-ui/core/Grid';
+import Facebook from '../img/facebook.svg'
+import Twitter from '../img/twitter.svg'
+import LinkIcon from '../img/link_icon.svg'
+import CloseModalButton from './CloseModalButton.js'
+
+export default function ReportModal (props) {
+    const refContainer = useRef(props.link);
+
+    function copyToClipboard(e) {
+        let copyText = document.getElementById('p-text')
+        console.log(copyText)
+    };
+
+    return (
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+            centered="true"
+            onClose={props.handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 500,
+            }}
+        >
+            <Fade in={props.open}>
+                <Container>
+                    <Header>
+                        <span style={{width:"32px"}}/>
+                        <h2>Compartilhar este recurso</h2>
+                        <CloseModalButton handleClose={props.handleClose}/>
+                    </Header>
+                    <Content style={{paddingTop : "0"}}>
+                        <ResourceInfo>
+                            <img src={apiDomain + props.thumb} alt="thumbnail recurso"/>
+                            <div className="text">
+                                <strong>{props.title}</strong>
+                                <span>{props.link}</span>
+                            </div>
+                        </ResourceInfo>
+                        <ShareInfo>
+                        <Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
+
+                            {/*Share to facebook*/}
+                            <Grid item xs={4}>
+                                <a
+                                    href={"https://www.facebook.com/sharer/sharer.php?u=" + props.link}
+                                    target="_blank">
+                                    <ShareButton>
+                                        <img src={Facebook} alt="facebook-logo"/>
+                                        <p>FACEBOOK</p>
+                                    </ShareButton>
+                                </a>
+                            </Grid>
+
+                            {/*Share to Twitter*/}
+                            <Grid item xs={4}>
+                                <a
+                                    href={"https://www.twitter.com/intent/tweet?url=" + props.link}
+                                    target="_blank">
+                                    <ShareButton>
+                                        <img src={Twitter} alt="twitter-logo"/>
+                                        <p>TWITTER</p>
+                                    </ShareButton>
+                                </a>
+                            </Grid>
+
+                            {/*Get shareable link*/}
+                            <Grid item xs={4}>
+                                <ShareButton onClick={copyToClipboard}>
+                                    <img src={LinkIcon} alt="link-icon"/>
+                                    <p id="p-text" value={props.link}>COPIAR LINK</p>
+                                </ShareButton>
+                            </Grid>
+                        </Grid>
+                        </ShareInfo>
+                    </Content>
+                </Container>
+            </Fade>
+        </StyledModal>
+    )
+}
+
+const ShareButton = styled(Button)`
+    text-align :center;
+    margin : 0 !important;
+    min-height : 121px !important;
+
+    .MuiButton-label {
+        display : flex !important;
+        flex-direction : column !important;
+        justify-content : center !important;
+        font-weight : 700 !important;
+    }
+
+    img {
+        height : 75px;
+        width : 75px;
+        padding-top : 10px;
+        vertical-align : middle;
+    }
+
+    p {
+        margin : 0 0 10px;
+    }
+`
+
+const ShareInfo = styled.div`
+    padding-top : 20px;
+    color : #000;
+`
+
+const ResourceInfo = styled.div`
+    margin-top : 0;
+    background-color : #f4f4f4;
+    overflow : hidden;
+    border-radius : 5px;
+    display : flex;
+    flex-direction : row;
+    align-items : center;
+    align-content : center;
+    max-wdith : 100%;
+    justify-content : space-between;
+
+    .text {
+        max-height : 100%;
+        max-width : 66.66%;
+        display : flex;
+        flex-direction : column;
+        text-align : left;
+        padding-right : 10px;
+    }
+
+    img {
+        object-fit : cover;
+        height : 115px;
+        max-width : 165px;
+        background-color : #e5e5e5;
+        float : left;
+        padding : 0;
+
+        @media screen and (min-width : 600px) {
+            margin-right : 20px;
+            margin-bottom : 0;
+        }
+        @media screen and (max-width : 768px) {
+            width : 100%;
+        }
+    }
+
+`
+
+const Content = styled.div`
+    padding : 20px 30px;
+    overflow : visible;
+
+`
+
+const Header = styled.div`
+    display : flex;
+    flex-direction : row;
+    padding : 10px 26px 0 26px;
+    align-items : center;
+    justify-content : space-between;
+    height : 64px;
+
+    h2 {
+        font-size : 26px;
+        font-weight : lighter;
+        color : #666
+    }
+`
+
+const StyledCloseModalButton = styled(Button)`
+    display : inline-block;
+    position : relative;
+    float : right !important;
+    margin-right : -8px !important;
+    background : transparent !important;
+    min-width: 0 !important;
+    width : 40px;
+`
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    text-align : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`
+
+const Container = styled.div`
+    box-sizing : border-box;
+    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+    background-color : white;
+    align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    max-height : none;
+    position : relative;
+    padding : 10px;
+    border-radius : 4px;
+
+    @media screen and (min-width : 700px) {
+        max-width : 600px;
+    }
+
+    @media screen and (max-width : 699px) {
+        width : 100%;
+        height : 100%;
+    }
+`
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index 550ac75f94c16b4aa6bb42c6a5fe0174db3054a4..b4c156af213fcc92dd57daa0996ce4a40d8381b6 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -92,8 +92,8 @@ export default function SignUpModal (props) {
             aria-labelledby="transition-modal-title"
             aria-describedby="transition-modal-description"
             open={props.open}
-            animation={true}
-            centered={true}
+             
+            centered="true"
             onClose={props.handleClose}
             closeAfterTransition
             BackdropComponent={Backdrop}
diff --git a/src/Components/SnackbarComponent.js b/src/Components/SnackbarComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..74730d3c4b949a6e4af69f5799ba6bad09961fca
--- /dev/null
+++ b/src/Components/SnackbarComponent.js
@@ -0,0 +1,33 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React from 'react'
+import Alert from '../Components/Alert.js';
+import Snackbar from '@material-ui/core/Snackbar';
+
+export default function SnackbarComponent (props) {
+    return (
+        <Snackbar open={props.snackbarOpen} autoHideDuration={1000} onClose={props.handleClose}
+        anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+        >
+            <Alert severity={props.severity} style={{backgroundColor:"#00acc1"}}>
+                {props.text}
+            </Alert>
+        </Snackbar>
+    )
+}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index acd17dcfb6a4f17e78a1eb53e2f68808f582ae6a..dfb193fc5a5db0774c39c7df8095153eedc36c59 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -35,11 +35,14 @@ export default function PanelTemplateColecao (props) {
                     type={card.followable.object_type}
                     description={card.followable.description}
                     author={card.followable.owner.name}
+                    authorID={card.followable.owner.id}
                     avatar={card.followable.owner.avatar}
                     thumbnails={card.followable.items_thumbnails}
                     likeCount={card.followable.likes_count}
                     liked={card.followable.liked}
                     followed={card.followable.followed}
+                    privacy={card.followable.privacy}
+                    id={card.followable.id}
                     />
             )
         }
@@ -52,11 +55,14 @@ export default function PanelTemplateColecao (props) {
                       description={card.description}
                       author={card.owner.name}
                       avatar={card.owner.avatar}
+                      authorID={card.owner.id}
                       thumbnails={card.items_thumbnails}
                       likeCount={card.likes_count}
+                      privacy={card.privacy}
                       liked={card.liked}
                       followed={card.followed}
                       tags={card.tags}
+                      id={card.id}
                   />
             )
         }
@@ -80,6 +86,7 @@ export default function PanelTemplateColecao (props) {
                 (
                     [
                         <React.Fragment>
+
                             <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
                             {
                                 props.sliceArr.map( (card) =>
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index 7ddb12485fd555ceba795474ac7c1e1dc8bee5b9..132b96efa8ba381fa3ad1eb5cdfc0fb66611965f 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -48,12 +48,15 @@ export default function Template (props) {
                                 props.sliceArr.map( (card) =>
                                 <Grid item md={3} xs={12} key={card.id}>
                                     <ResourceCardFunction
+                                        id={card.learning_object.id}
                                         avatar = {card.submitter.avatar}
                                         thumbnail = {card.learning_object.thumbnail}
                                         type = {card.learning_object.object_type ? card.learning_object.object_type : "Outros"}
                                         title={card.learning_object.name}
                                         published={false}
                                         tags={card.educational_stages}
+                                        href={"/recurso/" + card.learning_object.id}
+                                        downloadableLink={card.default_attachment_location}
                                     />
                                 </Grid>
                                 )
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index da632de226bae7ef6e8f51dc07df652024eaea91..6d46e423e6c596efbff5a2725d7ba5d8bb26feab 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -49,14 +49,18 @@ export default function Template (props) {
                                 <Grid item md={3} xs={12} key={card.id}>
                                     <ResourceCardFunction
                                         avatar = {card.publisher.avatar}
+                                        id={card.id}
                                         thumbnail = {card.thumbnail}
-                                        type = {card.object_type ? card.object_type : "Outros"}
+                                        type = {card.object_type !== null? card.object_type : "Outros"}
                                         title={card.name}
                                         published={card.state === "published" ? true : false}
                                         likeCount={card.likes_count}
                                         liked={card.liked}
-                                        rating={card.score}
+                                        rating={card.review_average}
                                         tags={card.educational_stages}
+                                        href={"/recurso/" + card.id}
+                                        downloadableLink={card.default_attachment_location}
+
                                     />
                                 </Grid>
                                 )
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
index 23507b228b38b80d5a65b53e24e942237cb06081..d1c3b1315e2a13da178548ceb5259e4bc47f2a63 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastLearnObj.js
@@ -45,14 +45,18 @@ export default function LastLearnObjs (props) {
                                     <Grid item md={3} xs={12} key={card.id}>
                                         <ResourceCardFunction
                                             avatar = {card.publisher.avatar}
+                                            id={card.id}
                                             thumbnail = {card.thumbnail}
-                                            type = {card.object_type ? card.object_type : "Outros"}
+                                            type = {card.object_type !== null? card.object_type : "Outros"}
                                             title={card.name}
                                             published={card.state === "published" ? true : false}
                                             likeCount={card.likes_count}
                                             liked={card.liked}
-                                            rating={card.score}
+                                            rating={card.review_average}
                                             tags={card.educational_stages}
+                                            href={"/recurso/" + card.id}
+                                            downloadableLink={card.default_attachment_location}
+
                                         />
                                     </Grid>
                                 )
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
index 1281f43b73e5d4b7383c46a324fccaaffd5d7d84..ce445d9ad57aa2b6627018314a45741b23ad1b5b 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
@@ -35,14 +35,17 @@ export default function TabRecursos (props) {
                         <Grid item md={3} xs={12} key={card.id}>
                             <ResourceCardFunction
                                 avatar = {card.publisher.avatar}
+                                id={card.id}
                                 thumbnail = {card.thumbnail}
                                 type = {card.object_type ? card.object_type : "Outros"}
                                 title={card.name}
                                 published={card.state === "published" ? true : false}
                                 likeCount={card.likes_count}
                                 liked={card.liked}
-                                rating={card.score}
+                                rating={card.review_average}
                                 tags={card.educational_stages}
+                                downloadableLink={card.default_attachment_location}
+
                             />
                         </Grid>
                     )
diff --git a/src/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js
index 81aa7e85c18af601c0b11657a85394fba9b57126..2570be1d40a302c096a4432e8feede85b95f3685 100644
--- a/src/Components/TabPanels/StyledComponents.js
+++ b/src/Components/TabPanels/StyledComponents.js
@@ -216,6 +216,9 @@ export const StyledTabs = styled(Tabs)`
     .MuiTab-textColorPrimary.Mui-selected {
         color : #00bcd4;
     }
+    .PrivateTabIndicator-colorPrimary-4 {
+        background-color : #00bcd4 !important;
+    }
 `
 
 export const RodapeDiv = styled.div`
diff --git a/src/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js
index f42b10b76815f6ad90b22aef132cfe27282edf69..00a3a1f234162ecfb29633818e7a5f1497a34c12 100644
--- a/src/Components/TabPanels/TabPanelStatusEConquistas.js
+++ b/src/Components/TabPanels/TabPanelStatusEConquistas.js
@@ -64,8 +64,9 @@ export default function TabPanelStatusEConquistas (props) {
 									name={a.title}
 									description={a.description}
 									src={a.imgsrc}
-									requirements={a.requirements}	/>
-									//requirements={[{name: "teste", description: "teste"}]}/>
+									requirements={a.requirements}
+                                    />
+									
 							</Grid>
 						)}
 				)}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index c99aa29b228553c831bb59e7fa459e60b7e0253f..f7883396f3359173d24eace08e1826429bdd8210 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -31,7 +31,7 @@ import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
 import Title from '../PanelComponents/PanelTitle.js'
 import CollectionCardFunction from '../../CollectionCardFunction.js'
 import {ButtonsAreaColecao} from '../PanelComponents/ButtonsArea'
-
+import CriarColecaoModal from '../../CriarColecaoModal.js'
 
 export default function TabPanelColecoes (props) {
     const [loading, handleLoading] = useState(true)
@@ -42,15 +42,15 @@ export default function TabPanelColecoes (props) {
     const [followedCollections, setFollowedCollections] = useState([])
     const [followedCollectionsSlice, setFollowedCollectionsSlice] = useState([])
 
-    useEffect( () => {
+    const getInfo = () => {
         axios.all([
             axios.get((`${apiUrl}/users/` + props.id + '/collections'), props.config),
             axios.get((`${apiUrl}/users/` + props.id + '/following/Collection'), props.config),
         ])
         .then( (responseArr) => {
                 console.log('responseArr Colecoes: ', responseArr)
-                if (responseArr[0].headers['access-token']) {
-                    sessionStorage.setItem('@portalmec/accessToken', responseArr[0].headers['access-token'])
+                if (responseArr[1].headers['access-token']) {
+                    sessionStorage.setItem('@portalmec/accessToken', responseArr[1].headers['access-token'])
                 }
 
                 handleLoading(false)
@@ -66,6 +66,10 @@ export default function TabPanelColecoes (props) {
                 console.log('error while running axios all')
             }
         )
+    }
+
+    useEffect( () => {
+        getInfo()
     }, [])
 
     const showMoreUserCollections = () => {
@@ -82,7 +86,6 @@ export default function TabPanelColecoes (props) {
 
     const showAllFollowedCollections = () => {setFollowedCollectionsSlice(followedCollections)}
 
-
     return (
         <>
         {
@@ -115,7 +118,7 @@ export default function TabPanelColecoes (props) {
                             sliceArr={userCollectionsSlice}
                             showMore={showMoreUserCollections}
                             showAll={showAllUserCollections}
-                            followed={false}
+                            callback={getInfo}
                         />
 
                         <PanelTemplateColecao
@@ -136,9 +139,13 @@ export default function TabPanelColecoes (props) {
 }
 
 function Tentativa (props) {
+    const [modalOpen, toggleModal] = useState(false)
+    const handleModal = () => {toggleModal(!modalOpen)};
 
     return (
         <WhiteContainer>
+            <CriarColecaoModal open={modalOpen} handleClose={() => {handleModal(); props.callback()}}/>
+
             <Title
                 title={props.title}
                 length={props.length}
@@ -146,7 +153,7 @@ function Tentativa (props) {
 
             <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
                 <Grid item md={3} xs={12}>
-                    <CardDiv>
+                    <CardDiv onClick={()=>{handleModal()}}>
                         <div style={{backgroundColor:"#673ab7", height:"250px", display:"flex", justifyContent:"center", alignItems:"center"}}>
                             <CreateNewFolderIcon style={{color:"#fff", fontSize:"70px"}}/>
                             <p style={{fontSize:"16px", margin:"0 0 10px", color : "#fff"}}>
@@ -179,11 +186,14 @@ function Tentativa (props) {
                                           description={card.description}
                                           author={card.owner.name}
                                           avatar={card.owner.avatar}
+                                          authorID={card.owner.id}
                                           thumbnails={card.items_thumbnails}
                                           likeCount={card.likes_count}
                                           liked={card.liked}
                                           followed={card.followed}
                                           tags={card.tags}
+                                          privacy={card.privacy}
+                                          id={card.id}
                                       />
                                 </Grid>
                                 )
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index 7eeb48faaf83e45ffda8505f3e98111accc8f859..07a5751e3a40ddb7942c8a20ea412a4b97bbf3d5 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -47,7 +47,7 @@ export default function TabPanelEditarPerfil (props) {
         handleAlterarFoto(!hoverAlterarFoto)
     }
 
-    const updateCover = (selectorFiles : FileList) => {
+    const updateCover = (selectorFiles) => {
         console.log(selectorFiles)
         console.log(selectorFiles[0].name)
     }
diff --git a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
index 76694ffc904dfd6c1da3664f57a2f196ef0bcdf9..3d9c93d09707c27216f21b79fefc1ba8567b7d48 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
@@ -99,7 +99,7 @@ export default function TabPanelAtividades (props) {
                         <React.Fragment>
                             <Template
                                 length = {learningObjects.length}
-                                titleText = {learningObjects.length == 1 ? "Recurso Publicado" : "Recursos Publicados"}
+                                titleText = {learningObjects.length === 1 ? "Recurso Publicado" : "Recursos Publicados"}
                                 noContentText={"Você ainda não publicou nenhum Recurso!"}
                                 slice={learningObjectsSlice}
                                 showMore={showMoreLearnObj}
@@ -108,7 +108,7 @@ export default function TabPanelAtividades (props) {
 
                             <Template
                                 length = {drafts.length}
-                                titleText = {drafts.length == 1 ? "Rascunho Publicado" : "Rascunhos Publicados"}
+                                titleText = {drafts.length === 1 ? "Rascunho Publicado" : "Rascunhos Publicados"}
                                 noContentText={"Você não tem nenhum recurso sendo editado."}
                                 slice={draftsSlice}
                                 showMore={showMoreDrafts}
diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js
new file mode 100644
index 0000000000000000000000000000000000000000..8add164e3a46bcef35c155d223f788a682af6c5f
--- /dev/null
+++ b/src/Components/UploadPageComponents/ButtonsDiv.js
@@ -0,0 +1,77 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react'
+import ModalCancelar from './ModalCancelar.js'
+import { GreyButton, OrangeButton, StyledDiv } from './StyledComponents';
+import Grid from '@material-ui/core/Grid';
+import {Redirect} from 'react-router-dom'
+export default function ButtonsDiv (props) {
+    const [modalCancelar, toggleModalCancelar] = useState(false)
+    const [redirectTrue, toggleRedirect] = useState(false)
+    return (
+        <>
+        <ModalCancelar
+             open={modalCancelar}
+             handleClose={() => {toggleModalCancelar(false)}}
+             draftID={props.draftID}
+             />
+
+         {
+             redirectTrue &&
+             <Redirect to="/"/>
+         }
+         <Grid container justify="center">
+
+             {/*botao excluir na pagina de editar*/}
+            <Grid item md={2} xs={6}>
+                <GreyButton onClick={() => {toggleModalCancelar(true)}}>
+                    <span className="button-text">
+                    CANCELAR
+                    </span>
+                </GreyButton>
+            </Grid>
+
+            {
+                props.onPartTwo &&
+                <Grid item md={2} xs={6}>
+                    <GreyButton onClick={() => {props.stepperControl(-1)}}>
+                        <span className="button-text">
+                        VOLTAR
+                        </span>
+                    </GreyButton>
+                </Grid>
+            }
+
+            <Grid item md={4} xs={12}>
+                <GreyButton onClick={() => {if(window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true)}}>
+                    <span className="button-text">
+                    CONTINUAR MAIS TARDE
+                    </span>
+                </GreyButton>
+            </Grid>
+
+            <Grid item md={4} xs={12}>
+                <OrangeButton type="submit">
+                SALVAR E AVANÇAR
+                </OrangeButton>
+            </Grid>
+        </Grid>
+        </>
+    )
+}
diff --git a/src/Components/UploadPageComponents/ChooseLinkSection.js b/src/Components/UploadPageComponents/ChooseLinkSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..ef282d1de8b75c8d3b1372fc3fdd38f5aeb6198d
--- /dev/null
+++ b/src/Components/UploadPageComponents/ChooseLinkSection.js
@@ -0,0 +1,99 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react'
+import styled from 'styled-components'
+import LinkIcon from '../../img/link_icon.svg'
+import { Button } from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
+import UndoIcon from '@material-ui/icons/Undo';
+import {WrapperBox, StyledTextField, BlueButton, GrayButton} from './StyledComponents.js'
+
+export default function ChooseLink (props) {
+    const [linkSent, setLinkSent] = useState(false)
+    const [link, setLink] = useState({flag : false, value : ""})
+    const handleLink = (e) => {
+        let userInput = e.target.value
+        const urlRegex = new RegExp(
+            "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i"
+        )
+        let flag = !(urlRegex.test(userInput))
+        setLink({...link,
+            flag : flag,
+            value : userInput}
+        )
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault()
+        console.log(link.flag)
+        if (!link.flag) {
+            props.submit(link.value)
+            setLinkSent(true)
+        }
+    }
+
+
+    return (
+        <WrapperBox>
+            <div className="inner">
+                <div className="upload-title"> Enviar Link</div>
+
+                <div className="flex-column">
+                    <p>Insira o link da página do recurso abaixo:</p>
+                    <form onSubmit={(e) => {handleSubmit(e)}}>
+                        <StyledTextField
+                            id = {"choose-link-form"}
+                            label={"Exemplo: http://google.com"}
+                            type = {"text"}
+                            value = {link.value}
+                            onChange = {e => {handleLink(e)}}
+                            helperText = {link.flag ? "Faltou inserir um endereço eletrônico" : ""}
+                            multiline={true}
+                            rowsMax = {"10"}
+                            rows={1}
+                            error = {link.flag}
+                            required = {true}
+                            disabled={linkSent}
+                        />
+
+                        <div className="buttons-div">
+                        {
+                            linkSent ?
+                            (
+                                <BlueButton onClick={() => {setLinkSent(false)}}>Editar</BlueButton>
+                            )
+                            :
+                            (
+                                <>
+                                    <GrayButton onClick={() => {props.handleNextStage("default")}}>
+                                        <span className="button-text">
+                                            <UndoIcon className="icon"/>Voltar
+                                        </span>
+                                        </GrayButton>
+                                    <BlueButton type="submit">SALVAR</BlueButton>
+                                </>
+                            )
+                        }
+                    </div>
+                    </form>
+                </div>
+            </div>
+        </WrapperBox>
+    )
+}
diff --git a/src/Components/UploadPageComponents/DragAndDrop.tsx b/src/Components/UploadPageComponents/DragAndDrop.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d416b22257648c2c500ef0cb85150e7acfacae20
--- /dev/null
+++ b/src/Components/UploadPageComponents/DragAndDrop.tsx
@@ -0,0 +1,153 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect} from 'react'
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import {DottedBox, BlueButton} from './StyledComponents.js';
+import FileToUpload from './FileToUpload'
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
+
+type Props = {
+    draftID : string;
+}
+
+const UploadMediaComponent: React.FC<Props> = ({draftID, children}) => {
+    const [filesToUpload, setFilesToUpload] = useState<FileToUpload | undefined>(undefined);
+
+    const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const files: FileList | null = e.target.files;
+        if(!files) return;
+
+        let fileToUpload: FileToUpload = new FileToUpload(files[0], files[0].name, draftID);
+
+        setFilesToUpload(fileToUpload);
+        if (fileToUpload != undefined){
+            console.log(fileToUpload.uploadFile())
+
+        }
+    };
+
+    return (
+        <div className="upload-container">
+            <h2 className="upload-title">File Uploader</h2>
+            <div className="upload-form">
+                <form id="file_upload">
+                    <DottedBox
+
+                        >
+                        <AddAPhotoIcon className="icon"/>
+                        <input
+                            type="file"
+                            onChange = {onFileChange}
+                            id="upload-file-thumbnail"
+                            style={{display : "none"}}
+                            />
+                        <BlueButton>
+                            <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
+                                ESCOLHER IMAGEM
+                            </label>
+                        </BlueButton>
+                        <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+                    </DottedBox>
+                </form>
+            </div>
+        </div>
+    )
+}
+UploadMediaComponent.displayName = 'UploadMedia';
+export default UploadMediaComponent;
+
+{/*<div className="upload-file-select">
+    <label htmlFor="file_1">Select files for upload</label>
+    <input id="file_1" type="file" multiple onChange={onFileChange}/>
+</div>
+
+<div className="upload-file-list">
+    {filesToUpload.map((f,i) => <div className="upload-file" key={i}>{f.name} - {f.file.size}bytes</div>)}
+</div>
+
+<div className="upload-submit">
+    <input type="submit" value="submit"/>
+</div>*/}
+
+{/*
+    const [dropDepth, setDropDepth] = useState(0)
+    const [inDropZone, toggleInDropZone] = useState(false)
+    const [fileList, setFileList] = useState([])
+
+    const handleDragEnter = e => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setDropDepth(dropDepth + 1)
+    };
+
+    const handleDragLeave = e => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setDropDepth(dropDepth - 1)
+        if (dropDepth > 0)
+            toggleInDropZone(true)
+    };
+
+    const handleDragOver = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'copy';
+        toggleInDropZone(true)
+    };
+
+    const handleDrop = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        let files = [...e.dataTransfer.files]
+
+        if (files && files.length > 0) {
+            props.acceptFile(files[0])
+        }
+    };
+
+    const handleUpload = (e, selectorFiles : FileList) => {
+        e.preventDefault();
+        props.acceptFile(selectorFiles[0])
+    }
+
+
+    <DottedBox
+    onDrop={e => handleDrop(e)}
+    onDragOver={e => handleDragOver(e)}
+    onDragEnter={e => handleDragEnter(e)}
+    onDragLeave={e => handleDragLeave(e)}
+    >
+    <CloudUploadIcon className="icon"/>
+    <input
+        type="file"
+        onChange = {(e) => handleUpload(e, e.target.files)}
+        id="upload-file"
+        style={{display : "none"}}
+        />
+    <BlueButton>
+        <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
+            ESCOLHER O ARQUIVO
+        </label>
+    </BlueButton>
+    <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+</DottedBox>
+    */}
diff --git a/src/Components/UploadPageComponents/FileToUpload.ts b/src/Components/UploadPageComponents/FileToUpload.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0fba0fc8204700a5e47bdd98516b8aa474e98133
--- /dev/null
+++ b/src/Components/UploadPageComponents/FileToUpload.ts
@@ -0,0 +1,88 @@
+export default class FileToUpload {
+    static chunkSize = 262144;
+    readonly request: XMLHttpRequest;
+    readonly uploadUrl: string;
+    readonly file: File;
+    readonly name: string;
+    readonly draftID: string;
+    readonly _chunkIdentifier: string;
+    private _chunkNumber: number;
+    currentChunkStartByte: number;
+    currentChunkFinalByte: number;
+
+    constructor(file: File, name: string, draftID : string) {
+        this.request = new XMLHttpRequest();
+        this.request.onreadystatechange = function(ev: Event) {
+            if(this.readyState === XMLHttpRequest.DONE){
+                if (this.getResponseHeader('access-token') != null) {
+                    console.log(this.getResponseHeader('access-token'))
+                    sessionStorage.setItem('@portalmec/accessToken', this.getResponseHeader('access-token')!)
+                }
+            }
+        }
+        this.request.overrideMimeType('application/octet-stream');
+
+        this.file = file;
+        this.name = name;
+        this.draftID = draftID;
+        this.uploadUrl = 'https://api.portalmec.c3sl.ufpr.br/v1/learning_objects/' + draftID + '/chunk'
+        this._chunkIdentifier = draftID + '-'  + this.name;
+        this._chunkNumber = 0;
+
+        this.currentChunkStartByte = 0;
+        this.currentChunkFinalByte = FileToUpload.chunkSize > this.file.size ? this.file.size : FileToUpload.chunkSize;
+    }
+
+    uploadFile() {
+        this.request.open('POST', this.uploadUrl, true);
+
+        let chunk: Blob = this.file.slice(this.currentChunkStartByte, this.currentChunkFinalByte);  // split the file according to the boundaries
+
+        //set necessary headers
+        this.request.setRequestHeader('Content-Range', `bytes ${this.currentChunkStartByte}-${this.currentChunkFinalByte}/${this.file.size}`);
+        if (sessionStorage.getItem('@portalmec/uid') != undefined) {
+            this.request.setRequestHeader('uid', sessionStorage.getItem('@portalmec/uid')!)
+        }
+        if (sessionStorage.getItem('@portalmec/clientToken') != undefined) {
+            this.request.setRequestHeader('client', String(sessionStorage.getItem('@portalmec/clientToken')))
+        }
+        if (sessionStorage.getItem('@portalmec/accessToken') != undefined) {
+            this.request.setRequestHeader('access-token', String(sessionStorage.getItem('@portalmec/accessToken')))
+        }
+
+        this.request.onload = () => {
+            const remainingBytes = this.file.size - this.currentChunkFinalByte;
+
+            if(this.currentChunkFinalByte === this.file.size) {
+                alert('Yay, upload completed! Chao!');
+                return('done');
+            } else if (remainingBytes < FileToUpload.chunkSize) {
+                // if the remaining chunk is smaller than the chunk size we defined
+                this.currentChunkStartByte = this.currentChunkFinalByte;
+                this.currentChunkFinalByte = this.currentChunkStartByte + remainingBytes;
+            }
+            else {
+                // keep chunking
+                this.currentChunkStartByte = this.currentChunkFinalByte;
+                this.currentChunkFinalByte = this.currentChunkStartByte + FileToUpload.chunkSize;
+            }
+
+            this._chunkNumber = this._chunkNumber + 1
+            this.uploadFile();
+        }
+
+        //add attributes
+        const formData = new FormData();
+        formData.append('_chunkFilename', this.file.name);
+        formData.append('_chunkIdentifier', this._chunkIdentifier);
+        formData.append('_totalChunks', String(Math.ceil(this.file.size/FileToUpload.chunkSize)));
+        formData.append('_chunkSize', String(FileToUpload.chunkSize));
+        formData.append('_currentChunkSize', String(this.currentChunkFinalByte - this.currentChunkStartByte));
+        formData.append('_chunkNumber', String(this._chunkNumber));
+        formData.append('_totalSize', String(this.file.size));
+        formData.append('file', chunk);
+
+        this.request.send(formData);// send it now!
+    }
+
+}
diff --git a/src/Components/UploadPageComponents/FileUploadStage.js b/src/Components/UploadPageComponents/FileUploadStage.js
new file mode 100644
index 0000000000000000000000000000000000000000..5419bb3f7ce1dfc0574a3965c32ede36a7fcd425
--- /dev/null
+++ b/src/Components/UploadPageComponents/FileUploadStage.js
@@ -0,0 +1,72 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react'
+import styled from 'styled-components'
+import {WrapperBox} from './StyledComponents.js'
+import DoneIcon from '@material-ui/icons/Done';
+import DeleteIcon from '@material-ui/icons/Delete';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import axios from 'axios'
+import {apiUrl} from '../../env';
+
+export default function FileUploadStage (props) {
+    const [uploading, toggleUploading] = useState(true)
+
+    const handleDelete = () => {
+        let config = getAxiosConfig
+
+        axios.delete( (`${apiUrl}/learning_objects/` + props.draftID), config).then(
+            (response) => {
+                console.log(response)
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                props.handleNextStage("default")
+            },
+            (error) => {console.log(error)})
+    }
+
+    return (
+        <WrapperBox>
+            <div className="inner">
+                <div className="upload-title">
+                    {uploading ? 'Carregando arquivo' : 'O arquivo foi carregado'}
+                </div>
+
+                <div className="uploading">
+                    <div className="upload-item">
+                        <div className="item-info">
+                            <div className="file-status">
+                                <DoneIcon className="icon icon-margin"/> {props.file.name}
+                            </div>
+                            <div className="remove-file" onClick={handleDelete}>
+                                Excluir <DeleteIcon className="icon icon-remove"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="warning">
+                        <span>Não se esqueça de preencher as</span>
+                        <br/>
+                        <span>informações sobre o recurso ao lado.</span>
+                    </div>
+                </div>
+            </div>
+        </WrapperBox>
+    )
+}
diff --git a/src/Components/UploadPageComponents/Forms/Autor.js b/src/Components/UploadPageComponents/Forms/Autor.js
new file mode 100644
index 0000000000000000000000000000000000000000..c2427708808305757edb1df197161c5909abd9af
--- /dev/null
+++ b/src/Components/UploadPageComponents/Forms/Autor.js
@@ -0,0 +1,76 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, memo, useContext} from 'react'
+import {Store} from '../../../Store.js'
+import { withStyles } from '@material-ui/core/styles';
+
+import FormControl from '@material-ui/core/FormControl';
+import {StyledTextField, StyledFormLabel, OutroAutorTextField} from '../StyledComponents.js'
+import FormHelperText from '@material-ui/core/FormHelperText';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const BlueRadio = withStyles({
+  root: {
+    color: '#666',
+    '&$checked': {
+      color: '#00bcd4',
+    },
+  },
+  checked: {},
+})((props) => <Radio color="default" {...props} />);
+
+function Autor (props) {
+    const {state} = useContext(Store)
+    const [authorValue, setAuthorValue] = useState(props.initialValue ? props.initialValue : -1)
+    const [outroAutor, setOutroAutor] = useState(props.initialOutroAutor ? props.initialOutroAutor : '')
+
+    const getAuthor = () => {
+        return authorValue === "0" ? state.currentUser.username : outroAutor
+    }
+
+    return (
+        <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("author", getAuthor(), props.draftID)}}>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                <b>Autor do recurso</b>
+            </StyledFormLabel>
+            <RadioGroup ara-label="Autor do Recurso" name="Autor do Recurso" value={authorValue} onChange={(e) => {setAuthorValue(e.target.value)}}>
+                 <FormControlLabel value="0" control={<BlueRadio />} label="Sou o(a) autor(a) deste recurso"/>
+                 <FormControlLabel value="1" control={<BlueRadio/>}
+                     label={
+                         <div style={{display : "flex", alignItems : "center"}}>
+                             Outro:
+                             <OutroAutorTextField
+                                 id = {"outro-autor-form"}
+                                 placeholder={"Nome dos autores"}
+                                 type = {"text"}
+                                 value = {outroAutor}
+                                 onChange = {e => {setOutroAutor(e.target.value)}}
+                                 disabled = {authorValue === "0"}
+                                 style={{paddingLeft : "5px", width : "100%"}}
+                            />
+                        </div>}
+                />
+             </RadioGroup>
+        </FormControl>
+    )
+}
+
+export default memo(Autor)
diff --git a/src/Components/UploadPageComponents/Forms/Idioma.js b/src/Components/UploadPageComponents/Forms/Idioma.js
new file mode 100644
index 0000000000000000000000000000000000000000..ced59ebd7233165a30cb9dfa6b804633054bb014
--- /dev/null
+++ b/src/Components/UploadPageComponents/Forms/Idioma.js
@@ -0,0 +1,64 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect} from 'react'
+import FormControl from '@material-ui/core/FormControl';
+import {StyledFormLabel} from '../StyledComponents.js'
+import ListItemText from '@material-ui/core/ListItemText';
+import Checkbox from '@material-ui/core/Checkbox';
+import Input from '@material-ui/core/Input';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+
+export default function Idioma (props) {
+    const [chosenLanguage, setChosenLanguage] = useState(props.initialValue ? props.initialValue : [])
+    const [ids, setIds] = useState(props.initialIDValues ? props.initialIDValues : [])
+
+    const handleChangeLanguage = (event) => {
+        console.log(event.target.value)
+        let newLanguage = event.target.value.pop()
+        setChosenLanguage(chosenLanguage => [...chosenLanguage, newLanguage.name]);
+        setIds(ids => [...ids, newLanguage.id])
+      };
+
+
+    return (
+        <FormControl required style={{minWidth : "30%"}}>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                <b>Idioma</b>
+            </StyledFormLabel>
+          <Select
+            value={chosenLanguage}
+            multiple
+            renderValue={(selected) => selected.join(', ')}
+            name="Idioma"
+            onChange={handleChangeLanguage}
+            onBlur={() => {props.onBlurCallback("language_ids", ids, props.draftID)}}
+          >
+            {
+                props.languages.map( language =>
+                    <MenuItem key={language.name} value={language}>
+                        <Checkbox checked={chosenLanguage.indexOf(language.name) > -1} />
+                        <ListItemText primary={language.name} />
+                    </MenuItem>
+                )
+            }
+        </Select>
+        </FormControl>
+    )
+}
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
new file mode 100644
index 0000000000000000000000000000000000000000..238d0b7a42aead95b8f4fcc5778796c05bb7600a
--- /dev/null
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -0,0 +1,87 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, memo, useEffect} from 'react'
+import FormControl from '@material-ui/core/FormControl';
+import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Chip from '@material-ui/core/Chip';
+
+function Keywords (props) {
+
+    const [keywords, setKeywords] = useState(props.initialValue ? props.initialValue : [])
+    const handleSetKeywords = (newKeyword) => {setKeywords(newKeyword)}
+    const deleteKeyword = (keywordToDelete) => {
+        setKeywords(keywords.filter((keyword) => keyword !== keywordToDelete))
+    }
+
+    const [keywordsBuffer, setKeywordsBuffer] = useState('')
+
+    const handleKeywords = (event) => {
+        let userInput = event.target.value;
+
+        if(userInput.indexOf(',') != -1 ) {
+            if(userInput.length > 1) {
+                handleSetKeywords([...keywords, userInput.split(',')[0]])
+            }
+            setKeywordsBuffer('')
+        }
+        else {
+            setKeywordsBuffer(userInput)
+        }
+    }
+
+
+    return (
+        <React.Fragment>
+            <FormControl required={true} style={{width : "100%"}}>
+                <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                    <b>Palavras-chave para buscar o Recurso</b>
+                    <span style={{color : "#a5a5a5", paddingLeft : "10px"}}>
+                    (Use vírgula ou enter para separar as palavras-chave)</span>
+                </StyledFormLabel>
+                <StyledTextField
+                    id = {"text-form"}
+                    placeholder={"Ex: Biomas, Geografia, ..."}
+                    type = {"text"}
+                    value={keywordsBuffer}
+                    onChange={handleKeywords}
+                    onKeyDown={(event) => {
+                        if(event.keyCode === 13){
+                            handleSetKeywords([...keywords, keywordsBuffer])
+                            setKeywordsBuffer('')}}
+                        }
+                    fullWidth
+                    onBlur={() => {props.onBlurCallback("tags", keywords, props.draftID)}}
+                />
+            </FormControl>
+            {
+                keywords.length !== 0 &&
+                <FormHelperText>
+                    {
+                        keywords.map( (keyword) =>
+                            <Chip label={keyword} key={keyword} onDelete={() => deleteKeyword(keyword)} />
+                        )
+                    }
+                </FormHelperText>
+            }
+        </React.Fragment>
+    )
+}
+
+export default memo(Keywords)
diff --git a/src/Components/UploadPageComponents/Forms/NewTitle.js b/src/Components/UploadPageComponents/Forms/NewTitle.js
new file mode 100644
index 0000000000000000000000000000000000000000..0a763dc0a08fd0d399f7daf3b127a9620d24965c
--- /dev/null
+++ b/src/Components/UploadPageComponents/Forms/NewTitle.js
@@ -0,0 +1,62 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, memo} from 'react'
+import FormControl from '@material-ui/core/FormControl';
+import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+
+function NewTitle (props) {
+
+    const [objTitle, setFormValue] = useState({
+        error : false,
+        value : props.initialValue ? props.initialValue : ""
+    })
+    const handleChangeTitle = (e) => {
+        let userInput = e.target.value
+        let flag = (userInput.length > 100 || userInput.length === 0 ? true : false)
+        setFormValue({...objTitle,
+            error : flag,
+            value : userInput
+        })
+    }
+
+    return (
+        <FormControl required={true} style={{width : "100%", height : "100px"}}>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                <b>Título do Recurso</b>
+            </StyledFormLabel>
+            <StyledTextField
+                id = {"title-form"}
+                placeholder={"Ex: Jogo Virtual sobre os Biomas do Brasil"}
+                type = {"text"}
+                value = {objTitle.value}
+                onChange = {e => {handleChangeTitle(e)}}
+                helperText = {objTitle.value.length + "/100"}
+                error = {objTitle.error}
+                fullWidth
+                onBlur={() => {props.onBlurCallback("name", objTitle.value, props.draftID)}}
+                />
+            {objTitle.value.length === 0 && objTitle.error &&
+                <FormHelperText style={{fontSize : "14px", position : "relative", top : "-26px"}}>Faltou definir um título.</FormHelperText>}
+        </FormControl>
+    )
+}
+
+export default memo(NewTitle)
diff --git a/src/Components/UploadPageComponents/Forms/SobreORecurso.js b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
new file mode 100644
index 0000000000000000000000000000000000000000..93ea7daab57031935510a63cf5794039c69fcf6c
--- /dev/null
+++ b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
@@ -0,0 +1,48 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, memo, useEffect} from 'react'
+import FormControl from '@material-ui/core/FormControl';
+import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
+
+function SobreORecurso (props) {
+    const [objDescription, setDescription] = useState(props.initialValue ? props.initialValue : '')
+    const handleSetDescription = (event) => {setDescription(event.target.value)}
+
+
+    return (
+        <FormControl style={{width : "100%"}}>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                <b>Descrição geral do Recurso</b> (Opcional)
+            </StyledFormLabel>
+            <StyledTextField
+                id = {"description-form"}
+                placeholder={"Quais assuntos são contemplados neste Recurso? Para quais objetivos este  Recurso pode ser destinado?"}
+                type = {"text"}
+                value={objDescription}
+                onChange={handleSetDescription}
+                fullWidth
+                multiline
+                rows={5}
+                onBlur={() => {props.onBlurCallback("description", objDescription, props.draftID)}}
+            />
+        </FormControl>
+    )
+}
+
+export default memo(SobreORecurso);
diff --git a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
new file mode 100644
index 0000000000000000000000000000000000000000..55474c92981e3229868b4b02538a06aa6cd8b9bf
--- /dev/null
+++ b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
@@ -0,0 +1,51 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, memo} from 'react'
+import FormControl from '@material-ui/core/FormControl';
+import {StyledRadio, ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+
+function TipoDeRecurso (props) {
+
+    const [objTypeValue, chooseObjType] = useState(props.initialValue ? props.initialValue : 0)
+    const handleChangeObjType = (event) => {chooseObjType(Number(event.target.value))}
+
+    return (
+        <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("object_type_id", objTypeValue, props.draftID)}}>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                <b>Tipo de recurso</b>
+            </StyledFormLabel>
+            <RadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={objTypeValue} onChange={handleChangeObjType} style={{justifyContent : "center"}}>
+                {
+                    props.objTypes.map( (type) =>
+                    <FormControlLabel key={type.id} value={type.id}
+                        control={<StyledRadio label={type.name} checked={objTypeValue === type.id}/>}
+                        />
+                    )
+
+                }
+            </RadioGroup>
+        </FormControl>
+    )
+}
+
+export default memo(TipoDeRecurso)
diff --git a/src/Components/UploadPageComponents/GetIconByName.js b/src/Components/UploadPageComponents/GetIconByName.js
new file mode 100644
index 0000000000000000000000000000000000000000..2d4bb7c6c5fbe268131da5cbbf09acbd9357835c
--- /dev/null
+++ b/src/Components/UploadPageComponents/GetIconByName.js
@@ -0,0 +1,167 @@
+import React from 'react'
+import {ReactComponent as AplicativoMovelIcon} from '../../img/object_type_icons/object-type_aplicativo-movel.svg'
+import {ReactComponent as ApresentacaoIcon} from '../../img/object_type_icons/object-type_apresentacao.svg'
+import {ReactComponent as AudioIcon} from '../../img/object_type_icons/object-type_audio.svg'
+import {ReactComponent as ImagemIcon} from '../../img/object_type_icons/object-type_imagem.svg'
+import {ReactComponent as InfograficoIcon} from '../../img/object_type_icons/object-type_infografico.svg'
+import {ReactComponent as JogoIcon} from '../../img/object_type_icons/object-type_jogo.svg'
+import {ReactComponent as LivroDigitalIcon} from '../../img/object_type_icons/object-type_livro-digital.svg'
+import {ReactComponent as MapaIcon} from '../../img/object_type_icons/object-type_mapa.svg'
+import {ReactComponent as OutrosIcon} from '../../img/object_type_icons/object-type_outros.svg'
+import {ReactComponent as SoftwareEducacionalIcon} from '../../img/object_type_icons/object-type_software-educacional.svg'
+import {ReactComponent as TextoIcon} from '../../img/object_type_icons/object-type_texto.svg'
+import {ReactComponent as VideoIcon} from '../../img/object_type_icons/object-type_video.svg'
+import {ReactComponent as AnimacaoIcon} from '../../img/object_type_icons/object-type_animacao.svg'
+
+import {ReactComponent as Arte} from '../../img/subject_icons/subject_arte.svg'
+import {ReactComponent as Biologia} from '../../img/subject_icons/subject_biologia.svg'
+import {ReactComponent as CienciasNatureza} from '../../img/subject_icons/subject_ciencias-da-natureza.svg'
+import {ReactComponent as DireitosHumanos} from '../../img/subject_icons/subject_direitos-humanos.svg'
+import {ReactComponent as EducacaoAmbiental} from '../../img/subject_icons/subject_educacao-ambiental.svg'
+import {ReactComponent as EducacaoCampo} from '../../img/subject_icons/subject_educacao-do-campo.svg'
+import {ReactComponent as EducacaoEspecial} from '../../img/subject_icons/subject_educacao-especial.svg'
+import {ReactComponent as EducacaoFisica} from '../../img/subject_icons/subject_educacao-fisica.svg'
+import {ReactComponent as EducacaoIndigena} from '../../img/subject_icons/subject_educacao-indigena.svg'
+import {ReactComponent as EducacaoQuilombola} from '../../img/subject_icons/subject_educacao-quilombola.svg'
+import {ReactComponent as EducacaoSexual} from '../../img/subject_icons/subject_educacao-sexual.svg'
+import {ReactComponent as EnsinoReligioso} from '../../img/subject_icons/subject_ensino-religioso.svg'
+import {ReactComponent as Filosofia} from '../../img/subject_icons/subject_filosofia.svg'
+import {ReactComponent as Fisica} from '../../img/subject_icons/subject_fisica.svg'
+import {ReactComponent as Geografia} from '../../img/subject_icons/subject_geografia.svg'
+import {ReactComponent as Historia} from '../../img/subject_icons/subject_historia.svg'
+import {ReactComponent as Informatica} from '../../img/subject_icons/subject_informatica.svg'
+import {ReactComponent as LinguaEspanhola} from '../../img/subject_icons/subject_lingua-espanhola.svg'
+import {ReactComponent as LinguaInglesa} from '../../img/subject_icons/subject_lingua-inglesa.svg'
+import {ReactComponent as LinguaPortuguesa} from '../../img/subject_icons/subject_lingua-portuguesa.svg'
+import {ReactComponent as Matematica} from '../../img/subject_icons/subject_matematica.svg'
+import {ReactComponent as OutrasLinguas} from '../../img/subject_icons/subject_outras-linguas.svg'
+import {ReactComponent as Quimica} from '../../img/subject_icons/subject_quimica.svg'
+import {ReactComponent as Sociologia} from '../../img/subject_icons/subject_sociologia.svg'
+import {ReactComponent as Outros} from '../../img/subject_icons/subject_outros.svg'
+
+
+
+export function GetSubjectIconByName (subjName) {
+    switch (subjName) {
+        case "Arte":
+            return <Arte className="icon"/>
+            break;
+        case "Biologia":
+            return <Biologia className="icon"/>
+            break;
+        case "Ciências da Natureza":
+            return <CienciasNatureza className="icon"/>
+            break;
+        case "Direitos Humanos":
+            return <DireitosHumanos className="icon"/>
+            break;
+        case "Educação Ambiental":
+            return <EducacaoAmbiental className="icon"/>;
+            break;
+        case "Educação do Campo":
+            return <EducacaoCampo className="icon"/>;
+            break;
+        case "Educação Especial":
+            return <EducacaoEspecial className="icon"/>;
+            break;
+        case "Educação Física":
+            return <EducacaoFisica className="icon"/>;
+            break;
+        case "Educação Indígena":
+            return <EducacaoIndigena className="icon"/>;
+            break;
+        case "Educação Quilombola":
+            return <EducacaoQuilombola className="icon"/>;
+            break;
+        case "Educação Sexual":
+            return <EducacaoSexual className="icon"/>;
+            break;
+        case "Ensino Religioso":
+            return <EnsinoReligioso className="icon"/>;
+            break;
+        case "Filosofia":
+            return <Filosofia className="icon"/>;;
+            break;
+        case "Física":
+            return <Fisica className="icon"/>;
+            break;
+        case "Geografia":
+            return <Geografia className="icon"/>;
+            break;
+        case "História":
+            return <Historia className="icon"/>;
+            break;
+        case "Informática":
+            return <Informatica className="icon"/>;
+            break;
+        case "Língua Espanhola":
+            return <LinguaEspanhola className="icon"/>;
+            break;
+        case "Língua Inglesa":
+            return <LinguaInglesa className="icon"/>;
+            break;
+        case "Língua Portuguesa":
+            return <LinguaPortuguesa className="icon"/>;
+            break;
+        case "Matemática":
+            return <Matematica className="icon"/>;
+            break;
+        case "Outras Línguas":
+            return <OutrasLinguas className="icon"/>;
+            break;
+        case "Química":
+            return <Quimica className="icon"/>;
+            break;
+        case "Sociologia":
+            return <Sociologia className="icon"/>;
+            break;
+        default:
+            return <Outros className="icon"/>;
+            break;
+    }
+}
+
+export default function GetIconByName (objName) {
+    switch (objName.toLowerCase()) {
+        case "imagem":
+            return <ImagemIcon className="icon" />;
+            break;
+        case "mapa":
+            return <MapaIcon className="icon"/>;
+            break;
+        case "software educacional" :
+            return <SoftwareEducacionalIcon className="icon"/>;
+            break;
+        case "aplicativo móvel":
+            return <AplicativoMovelIcon className="icon"/>;
+            break;
+        case "apresentação":
+            return <ApresentacaoIcon className="icon"/>;
+            break;
+        case "áudio":
+            return <AudioIcon className="icon"/>;
+            break;
+        case "infográfico":
+            return <InfograficoIcon className="icon"/>;
+            break;
+        case "jogo":
+            return <JogoIcon className="icon"/>;
+            break;
+        case "livro digital" :
+            return <LivroDigitalIcon className="icon"/>;
+            break;
+        case "texto":
+            return <TextoIcon className="icon"/>;
+            break;
+        case "vídeo":
+            return <VideoIcon className="icon"/>;
+            break;
+        case "animação":
+            return <AnimacaoIcon className="icon"/>;
+            break;
+        default:
+            return <OutrosIcon className="icon"/>;
+            break;
+
+        }
+}
diff --git a/src/Components/UploadPageComponents/ModalCancelar.js b/src/Components/UploadPageComponents/ModalCancelar.js
new file mode 100644
index 0000000000000000000000000000000000000000..44f17b032ed9e8b67ba0de04fc913c702b8b0db9
--- /dev/null
+++ b/src/Components/UploadPageComponents/ModalCancelar.js
@@ -0,0 +1,174 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect} from 'react'
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import CloseIcon from '@material-ui/icons/Close';
+import axios from 'axios'
+import {apiUrl} from '../../env';
+import {Link} from 'react-router-dom'
+
+export default function ModalCancelar (props) {
+    const handleDelete = () => {
+        console.log(props.draftID)
+        {/*delete the draft*/}
+        if (props.draftID) {
+            let config = {
+                headers : {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'Access-Token': sessionStorage.getItem('@portalmec/accessToken'),
+                    'Client': sessionStorage.getItem('@portalmec/clientToken'),
+                    'Uid': sessionStorage.getItem('@portalmec/uid'),
+                }
+            }
+            axios.delete( (`${apiUrl}/learning_objects/` + props.draftID), config).then(
+                (response) => {
+                    console.log(response)
+                    if ( response.headers['access-token'] ) {
+                        sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                    }
+                }, (error) => {console.log(error)})
+        }
+        {/*close modal*/}
+        props.handleClose()
+        {/*change current page to home page*/}
+        console.log('ir pra home')
+
+    }
+
+    return (
+        <StyledModal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            open={props.open}
+            centered="true"
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            onClose={props.handleClose}
+            BackdropProps={{
+                timeout: 500,
+            }}
+        >
+            <Fade in={props.open}>
+                <Container>
+                    <Content>
+                        <h2>Tem certeza que deseja cancelar?</h2>
+                        <p>Ao clicar no botão "OK", o seu recurso NÃO será salvo.</p>
+                    </Content>
+                    <ButtonsArea>
+                        <StyledButton onClick={props.handleClose}>VOLTAR</StyledButton>
+                        <Link to="/" style={{textDecoration : "none !important"}}>
+                            <StyledButton onClick={handleDelete}>OK</StyledButton>
+                        </Link>
+                    </ButtonsArea>
+                </Container>
+            </Fade>
+        </StyledModal>
+    )
+}
+
+const ButtonsArea = styled.div`
+    display : flex;
+    align-items : center;
+    justify-content : flex-end;
+    padding-right : 8px;
+    padding-left : 16px;
+    min-height : 52px;
+`
+
+const Content = styled.div`
+    padding : 24px;
+    overflow : visible;
+    max-width : 470px;
+    h2 {
+        margin-top : 0;
+        font-size : 20px;
+        font-weight : bold;
+        color : #666;
+        margin-bottom : 10px;
+    }
+
+    p {
+        margin : 0 0 10px;
+        font-size : 14px;
+        color : #666;
+    }
+`
+
+
+const StyledModal = styled(Modal)`
+    .djXaxP{
+        margin : 0 !important;
+    }
+    display : flex;
+    align-items: center;
+    justify-content : center;
+    padding : 10px !important;
+    max-width : none;
+    max-height : none;
+`
+
+const Container = styled.div`
+    box-sizing : border-box;
+    background-color : white;
+    max-width : none;
+    align : center;
+    display : flex;
+    flex-direction : column;
+    min-width : 240px;
+    max-height : none;
+    position : relative;
+    border-radius : 4px;
+    box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+
+    @media screen and (max-width : 899px) {
+        width : 100%;
+        height : 100%;
+    }
+`
+const StyledButton = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    max-height : 36px !important;
+
+    background-color : transparent !important;
+    color : #00bcd4 !important;
+    text-decoration : none !important;
+    outline : none !important;
+    text-align : center !important;
+
+    .button-text {
+        cursor : pointer;
+        line-height : 36px;
+        text-align : center;
+        color : currentColor;
+        white-space : nowrap;
+        text-transform : uppercase;
+        font-weight : 600 !important;
+        font-size : 14px;
+        font-style : inherit;
+        font-variant : inherit;
+        padding : 6px 16px !important;
+    }
+`
diff --git a/src/Components/UploadPageComponents/PartOne.js b/src/Components/UploadPageComponents/PartOne.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd02f792230d6f69971c805b054fc3c137544f29
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -0,0 +1,119 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect} from 'react'
+import Grid from '@material-ui/core/Grid';
+import styled from 'styled-components'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import ButtonsDiv from './ButtonsDiv.js'
+import { makeStyles } from '@material-ui/core/styles';
+import {ObjTypeBox, StyledFormHelperText, OutroAutorTextField, StyledFormLabel, StyledTextField, StyledNativeSelect} from './StyledComponents.js'
+
+import SobreORecurso from './Forms/SobreORecurso.js'
+import NewTitle from './Forms/NewTitle.js'
+import Keywords from './Forms/Keywords.js'
+import Autor from './Forms/Autor.js'
+import TipoDeRecurso from './Forms/TipoDeRecurso.js'
+import Idioma from './Forms/Idioma.js'
+import {SendInfo} from './SendInfo.js'
+
+export default function PartOne (props) {
+    {/*const [subjects, setSubjects] = useState([])*/}
+    const [languages, setLanguages] = useState([])
+    const [objTypes, setObjTypes] = useState([])
+
+    useEffect( () => {
+            {/*get the list of subjects*/}
+        {/*    axios.get(`${apiUrl}/subjects/`).then(
+                (response) => {
+                    console.log(response.data)
+                    setSubjects(response.data)
+                }, (error) => {
+                    console.log(error)
+                }
+            )*/}
+
+            {/*get the list of object_types*/}
+            axios.get(`${apiUrl}/object_types/`).then(
+                (response) => {
+                    setObjTypes(response.data.sort((a, b) => (a.name) > (b.name) ? 1 : -1))
+                }, (error) => {
+                    console.log(error)
+                }
+            )
+
+            {/*get the list of languages*/}
+            axios.get(`${apiUrl}/languages/`).then(
+                (response) => {
+                    setLanguages(response.data)
+                }, (error) => {
+                    console.log(error)
+                }
+            )
+    }, [])
+
+    const handleSubmit = () => {
+        props.stepperControl(1)
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            {/*------------------------------Titulo-----------------------------------------*/}
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                <NewTitle draftID={props.draftID} onBlurCallback={SendInfo}/>
+            </Grid>
+
+            {/*------------------------------Sobre------------------------------------------*/}
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                <SobreORecurso draftID={props.draftID} onBlurCallback={SendInfo}/>
+            </Grid>
+
+            {/*------------------------------Palavras-chave------------------------------------------*/}
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                <Keywords  draftID={props.draftID} onBlurCallback={SendInfo}/>
+            </Grid>
+
+            {/*------------------------------Autor------------------------------------------*/}
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                <Autor  draftID={props.draftID} onBlurCallback={SendInfo}/>
+            </Grid>
+
+            {/*------------------------------Tipo do Objeto------------------------------------------*/}
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                <TipoDeRecurso objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}/>
+            </Grid>
+
+            {/*------------------------------Idioma------------------------------------------*/}
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+              <Idioma languages={languages}  draftID={props.draftID} onBlurCallback={SendInfo}/>
+            </Grid>
+
+            {/*------------------------------Botoes------------------------------------------*/}
+            <Grid item xs={12}>
+                <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl}/>
+            </Grid>
+
+            <Grid item xs={12} style={{marginTop : "20px"}}>
+                <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
+                    * Campos obrigatórios
+                </span>
+            </Grid>
+        </form>
+    )
+}
diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
new file mode 100644
index 0000000000000000000000000000000000000000..cce31c71977d064486e3f4253e5e9006c6833abd
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -0,0 +1,479 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect, useContext} from 'react'
+import {Store} from '../../Store.js'
+import Grid from '@material-ui/core/Grid';
+import styled from 'styled-components'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import Stepper from './Stepper.js'
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import LoadingSpinner from '../LoadingSpinner.js'
+import MoreIcon from '@material-ui/icons/More';
+import SdCardIcon from '@material-ui/icons/SdCard';
+import DateRangeIcon from '@material-ui/icons/DateRange';
+import UpdateIcon from '@material-ui/icons/Update';
+import TranslateIcon from '@material-ui/icons/Translate';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import { GrayButton, OrangeButton} from './StyledComponents';
+import ModalCancelar from './ModalCancelar.js'
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import {getDefaultThumbnail} from '../HelperFunctions/getDefaultThumbnail'
+
+export default function PartThree (props) {
+    var moment = require('moment')
+    const now = moment()
+    const {state} = useContext(Store)
+    const [loading, setLoading] = useState(true)
+
+    const [draft, setDraft] = useState({})
+    const [subjects, setSubjects] = useState('')
+    const [tags, setTags] = useState([])
+    const [description, setDescription] = useState('')
+    const [author, setAuthor] = useState('')
+
+    useEffect(() => {
+        if (state.currentUser.id !== "") {
+            const config = getAxiosConfig()
+            axios.get( (`${apiUrl}/learning_objects/` + props.draftID), config
+            ).then( (response) => {
+                console.log(response.data)
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                setDraft(response.data)
+
+                /*extract subjects*/
+                setSubjects(response.data.subjects.map((subject)=>(subject.name)).join(', '))
+                setTags(response.data.tags.map(tag => tag.name))
+                setDescription(response.data.description)
+                setAuthor(response.data.author)
+                setLoading(false)
+            }, (error) => {console.log(error)})
+        }
+    }, [state.currentUser.id])
+
+    let windowWidth = window.innerWidth
+    const [modalCancelar, toggleModalCancelar] = useState(false)
+
+    const checkAccessLevel = (levelToCheck) => {
+        if (state.currentUser.id != '') {
+            return(checkUserRole(levelToCheck))
+        }
+    }
+
+    const checkUserRole = (userRole) => {
+        return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
+    }
+
+    return (
+        <React.Fragment>
+        {
+            !loading ?
+            (
+                <React.Fragment>
+                <ModalCancelar
+                     open={modalCancelar}
+                     handleClose={() => {toggleModalCancelar(false)}}
+                     draftID={draft.id}
+                     />
+                <Grid container style={{backgroundColor : "#f4f4f4"}}>
+                    <Grid item xs={12}>
+                        <StyledSessao1 className="page-content-preview">
+                            <div className="cabecalho">
+                                <div className="feedback-upload">
+                                    <Stepper activeStep={props.activeStep}/>
+                                    <h2>Quase lá, agora só falta publicar!</h2>
+                                    <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
+                                </div>
+                            </div>
+                        </StyledSessao1>
+
+                        <CaixaContainer>
+                            <div>
+                                <div className="cabecalho-objeto">
+                                    <img className="img-objeto"
+                                        src={draft.thumbnail === null ? getDefaultThumbnail(draft.object_type) : apiDomain + draft.thumbnail}/>
+                                    <div className="texto-objeto">
+                                        <h3>{draft.name}</h3>
+                                        <div className="rating-objeto">
+                                            <Rating
+                                              name="customized-empty"
+                                              value={draft.score}
+                                              precision={0.5}
+                                              style={{color:"#666"}}
+                                              emptyIcon={<StarBorderIcon fontSize="inherit" />}
+                                            />
+                                        </div>
+
+                                        <div className="relacionado">
+                                            Relacionado com: {subjects}
+                                        </div>
+
+                                        <div className="tags-objeto">
+                                            {tags.map((tag) => <div className="tag" key={tag}>{tag}</div>)}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="sobre-objeto">
+                                    <Grid container>
+                                        <Grid item xs={windowWidth > 990 ? 7 : 12} className="left">
+                                            <div className="titulo">
+                                                Sobre o Recurso
+                                            </div>
+                                            <div className="sobre-conteudo">
+                                                <p className="descricao">{description}</p>
+                                                {
+                                                    author !== '' &&
+                                                    <p className="autor">
+                                                        <b>Autoria:</b>
+                                                        <br/>
+                                                        {author}
+                                                    </p>
+                                                }
+                                            </div>
+                                        </Grid>
+
+                                        <Grid item xs={windowWidth > 990 ? 4 : 12} className="right">
+                                            <span className="meta-objeto">
+                                                <MoreIcon/> <b>Tipo de mídia: </b>{draft.object_type}
+                                            </span>
+
+                                            <span className="meta-objeto">
+                                                <SdCardIcon/> <b>Tamanho: </b>
+                                            </span>
+
+                                            <span className="meta-objeto">
+                                                <DateRangeIcon/> <b>Enviado: </b>
+                                                {moment(draft.created_at).format("DD/MM/YYYY")}
+                                            </span>
+
+                                            <span className="meta-objeto">
+                                                <UpdateIcon/><b>Atualização: </b>
+                                                {moment(draft.updated_at).format("DD/MM/YYYY")}
+                                            </span>
+
+                                            {
+                                                draft.language.map( (language =>
+                                                    <span className="meta-objeto" key={language.id}>
+                                                        <TranslateIcon/><b>Idioma: </b>{language.name}
+                                                    </span>
+                                                ))
+                                            }
+
+                                            <span className="meta-objeto">
+                                                <AssignmentIcon/><b>Licença: </b>{draft.license.name}
+                                            </span>
+                                        </Grid>
+                                    </Grid>
+                                </div>
+                            </div>
+                        </CaixaContainer>
+                        <Sessao3>
+                            <form>
+                            <Grid container>
+                                <Grid item xs={windowWidth > 990 ? 6 : 12} style={{paddingRight : "15px", paddingLeft : "15px", textAlign: windowWidth > 990 ? 'right' : 'center'}}>
+                                    <span style={{fontSize : "14px"}}>
+                                        Para segurança da plataforma <br/> marque que você não é um robô
+                                    </span>
+                                </Grid>
+
+                                <Grid item xs={windowWidth > 990 ? 6 : 12} style={{paddingRight : "15px", paddingLeft : "15px",  textAlign: windowWidth > 990 ? 'left' : 'center'}}>
+                                    <span>Recaptcha</span>
+                                </Grid>
+                                <Grid item xs={12} style={{paddingRight : "15px", paddingLeft : "15px", marginTop : "30px", textAlign : 'center'}}>
+                                    <GrayButton onClick={() => {props.stepperControl(-1)}}>VOLTAR</GrayButton>
+                                    <GrayButton onClick={() => {toggleModalCancelar(true)}}>CANCELAR</GrayButton>
+                                    {
+                                        checkAccessLevel("partner") ?
+                                        (
+                                            <OrangeButton onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
+                                        )
+                                        :
+                                        (
+                                            <OrangeButton onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
+                                        )
+
+                                    }
+                                </Grid>
+                            </Grid>
+                            </form>
+                        </Sessao3>
+                    </Grid>
+                </Grid>
+                </React.Fragment>
+            )
+            :
+            (
+                <LoadingSpinner text="CARREGANDO"/>
+            )
+        }
+    </React.Fragment>
+    )
+}
+
+const Sessao3 = styled.div`
+    position : relative;
+    top : -120px;
+    padding-right :15px;
+    padding-left :15px;
+    margin-right : auto;
+    margin-left : auto;
+    @media screen and (min-width: 768px) {
+        width : 750px;
+    }
+    @media screen and (min-width: 992px) {
+        width : 970px;
+    }
+    @media screen and (min-width: 1200px) {
+        width : 970px;
+    }
+    color : #666;
+    background-color : #f4f4f4;
+
+`
+
+const CaixaContainer = styled.div`
+    background-color : rgba(238,238,238,.5);
+    border-radius : 5px;
+    position : relative;
+    top : -145px;
+    padding : 10px;
+
+    margin-right : auto;
+    margin-left : auto;
+    @media screen and (min-width: 768px) {
+        width : 750px;
+    }
+    @media screen and (min-width: 992px) {
+        width : 970px;
+    }
+    @media screen and (min-width: 1200px) {
+        width : 970px;
+    }
+
+
+    .cabecalho-objeto {
+        background-color:#fff;
+        box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+        padding: 0;
+        margin-top: 30px;
+        margin-bottom: 30px;
+        position: relative;
+        min-height: 100px;
+        margin-top: 0;
+        margin-bottom: 10px;
+        color : #666;
+
+        .img-objeto {
+            background-color:#e5e5e5;
+            height: 270px;
+            width: 400px;
+            float: left;
+            padding: 0;
+        }
+
+        .texto-objeto {
+            padding: 20px 20px 0 20px;
+            height: content;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            -ms-flex-wrap: nowrap;
+            flex-wrap: nowrap;
+            -webkit-box-pack: start;
+            -ms-flex-pack: start;
+            justify-content: flex-start;
+            -ms-flex-line-pack: center;
+            align-content: center;
+            -webkit-box-align: start;
+            -ms-flex-align: start;
+            align-items: flex-start;
+
+            h3 {
+                font-size: 26px;
+                font-weight: 400;
+                margin: 0;
+                padding-bottom: 15px;
+            }
+
+            .rating-objeto {
+                margin : 0;
+                display : inline-flex;
+                padding-bottom : 10px;
+            }
+
+            .relacionado {
+                font-weight : 500;
+                font-size : 13px;
+            }
+
+            .tags-objeto {
+                max-height: 54px;
+                font-size: .8em;
+                overflow: hidden;
+                clear: both;
+                display: -webkit-inline-box;
+                display: -ms-inline-flexbox;
+                display: inline-flex;
+                -ms-flex-wrap: wrap;
+                flex-wrap: wrap;
+
+                .tag {
+                    display: -webkit-inline-box;
+                    display: -ms-inline-flexbox;
+                    display: inline-flex;
+                    margin-right: 3px;
+                    background-color: #e5e5e5;
+                    padding: 3px 7px;
+                    border-radius: 15px;
+                    line-height: 18px;
+                    color: #666;
+                    margin-bottom: 3px;
+                }
+            }
+        }
+    }
+
+    .sobre-objeto {
+        margin-top : 0;
+        margin-bottom : 0;
+        min-height : 275px;
+        display : flex;
+        background-color: #fff;
+        box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+        padding: 0;
+        position: relative;
+        min-height: 500px;
+
+        .left {
+            @media screen and (min-width : 990px) {
+                margin-left : 4% !important;
+                margin-top : 4% !important;
+            }
+
+            @media screen and (max-width : 989px) {
+                margin : 0;
+                padding : 20px;
+                padding-bottom : 0;
+            }
+
+            .titulo {
+                margin-top: 2% !important;
+                margin-bottom: 10px;
+                font-family: 'Roboto Light','Roboto Regular',Roboto;
+                font-weight: 300;
+                font-style: normal;
+                color:#666;
+                font-size: 1.857em;
+            }
+
+            .sobre-conteudo {
+                flex : 1;
+                color : #666;
+                font-size : 14px !important;
+
+                .descricao {
+                    text-align: justify;
+                    margin-bottom: 20px;
+                    margin-top: 20px;
+                }
+
+                .autor {
+                    margin : 0 0 10px !important;
+                }
+            }
+        }
+
+        .right {
+            margin-top : 4% !important;
+            border-left: 1px solid #e5e5e5;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            -webkit-box-pack: start;
+            -ms-flex-pack: start;
+            justify-content: flex-start;
+            padding: 20px;
+            position : relative;
+            margin-bottom : 20px;
+
+            .meta-objeto {
+                position: relative;
+                width: 100%;
+                font-size: 14px;
+                color: #666;
+                margin-bottom: 20px;
+                display : inline-block;
+            }
+
+            .MuiSvgIcon-root {
+                vertical-align : middle !important;
+                margin-right : 15px !important;
+            }
+        }
+    }
+}
+`
+
+const StyledSessao1 = styled.div`
+    color : #fff;
+    background-color : #00bcd4;
+    float : none;
+    height : 300px;
+    text-align : center;
+    padding-top : 48px;
+    padding-bottom : 48px;
+    margin-bottom : 30px;
+
+    .cabecalho {
+        display : flex;
+        flex-direction : column;
+        align-items : center;
+        margin-bottom : 30px;
+
+        .feedback-upload {
+            display : flex;
+            flex-direction : column;
+            justify-content : center;
+            text-align : center
+            margin-top : 20px;
+            width : 55%;
+        }
+
+        h2 {
+            margint-top : 0;
+            font-size : 26px;
+            font-weight : lighter;
+            margin-bottom : 10px;
+        }
+
+        .subtitle {
+            font-size : 16px;
+
+        }
+    }
+`
diff --git a/src/Components/UploadPageComponents/PartTwo.js b/src/Components/UploadPageComponents/PartTwo.js
new file mode 100644
index 0000000000000000000000000000000000000000..29374bd7c875625165f5f0a14c02d3284f463539
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwo.js
@@ -0,0 +1,181 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect} from 'react'
+import Grid from '@material-ui/core/Grid';
+import styled from 'styled-components'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import DragAndDropThumbnail from './PartTwoComponents/DragAndDropThumbnail'
+import EducationalStage from './PartTwoComponents/EducationalStage'
+import Licenca from './PartTwoComponents/Licenca'
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import {StyledFormLabel} from './StyledComponents.js'
+import ButtonsDiv from './ButtonsDiv.js'
+import SubjectsAndThemes from './PartTwoComponents/SubjectsAndThemes.js'
+import {SendInfo} from './SendInfo.js'
+import EditThumbnail from './PartTwoComponents/EditThumbnail.js'
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig'
+import DisplayThumbnail from './PartTwoComponents/DisplayThumbnail.js'
+import CustomCircularProgress from './PartTwoComponents/CustomCircularProgress';
+
+export function LoadingDiv () {
+    return (
+        <div style={{width : "100%", display : "flex", alignItems : "center", justifyContent : "center", color : "#666"}}>
+            <CustomCircularProgress/> CARREGANDO IMAGEM
+        </div>
+    )
+}
+
+export default function PartTwo (props) {
+    const [eduStages, setEduStages] = useState([])
+    const [subjects, setSubjects] = useState([])
+    const [themes, setThemes] = useState([])
+
+    useEffect(() => {
+        axios.get(`${apiUrl}/educational_stages/`).then(
+            (response) => {console.log(response);
+                setEduStages(response.data)
+            },
+            (error) => {console.log(error)}
+        )
+
+        axios.get(`${apiUrl}/subjects/`).then(
+            (response) => {console.log(response);
+                setSubjects(response.data.filter(subject => subject.theme === false).sort((a,b) => a.name > b.name ? 1 : -1))
+                setThemes(response.data.filter(subject => subject.theme === true).sort((a,b) => a.name > b.name ? 1 : -1))
+            },
+            (error) => {console.log(error)}
+        )
+    }, [])
+
+
+     /*------------------------Licenca------------------------*/
+
+     const [termsCheckbox, setChecked]  = useState(false)
+     const toggleCheckbox = (event) => {
+            setChecked(event.target.checked)
+     }
+
+     const [thumbnail, setThumbnail] = useState('')
+     const [tempUrl, setTempUrl] = useState('')
+
+     const acceptFile = (file) => {
+         const objectURL = URL.createObjectURL(file)
+         console.log(file)
+         setTempUrl(objectURL)
+         setThumbnailStage('editing')
+     }
+     const updateThumb = (newThumbnail) => {
+         setThumbnail(newThumbnail)
+         console.log(thumbnail)
+
+     }
+     const finalizeThumb = () => {
+         setThumbnailStage('uploading')
+         let config = getAxiosConfig()
+         let fdThumb = new FormData()
+         fdThumb.set('learning_object[thumbnail]', thumbnail)
+         axios.put((`${apiUrl}/learning_objects/` + props.draftID), fdThumb, config).then(
+             (response) => {
+                 setThumbnailStage('done')
+                 console.log(response.data)
+                 if ( response.headers['access-token'] ) {
+                     sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                 }
+             },
+             (error) => {console.log(error)}
+         )
+     }
+
+     const [thumbnailStage, setThumbnailStage] = useState('default')
+
+     const chooseRenderStageThumbnail = () => {
+         switch(thumbnailStage) {
+             case 'uploading':
+                return (<LoadingDiv/>)
+                break;
+             case 'done':
+                return (<DisplayThumbnail acceptFile={acceptFile} thumbnail={thumbnail}/>)
+                break;
+             case 'editing':
+                return (<EditThumbnail finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
+                break;
+             default :
+                return (<DragAndDropThumbnail acceptFile={acceptFile}/>)
+                break;
+
+         }
+     }
+
+     const handleSubmit = () => {
+         props.stepperControl(1)
+     }
+
+     return (
+        <form style={{width : "100%"}} onSubmit={handleSubmit}>
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                {chooseRenderStageThumbnail()}
+            </Grid>
+
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                <EducationalStage draftID={props.draftID} eduStages={eduStages} onBlurCallback={SendInfo}/>
+            </Grid>
+
+            <SubjectsAndThemes  draftID={props.draftID} subjects={subjects} themes={themes} onUploadPage={true} onBlurCallback={SendInfo}/>
+
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                <Licenca draftID={props.draftID} onBlurCallback={SendInfo}/>
+            </Grid>
+
+            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                <StyledFormControl required >
+                    <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                        <b>Confirme se você concorda com os <a href="/termos" style={{color : "#ff7f00"}}>termos de uso e de propriedade intelectual</a></b>
+                    </StyledFormLabel>
+                    <FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={<Checkbox checked={termsCheckbox} onChange={toggleCheckbox}/>}
+                        />
+                </StyledFormControl>
+            </Grid>
+
+            <Grid item xs={12}>
+                    <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl} onPartTwo={true}/>
+            </Grid>
+
+            <Grid item xs={12} style={{marginTop : "20px"}}>
+                <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
+                    * Campos obrigatórios
+                </span>
+            </Grid>
+        </form>
+    )
+}
+
+const StyledFormControl = styled(FormControl)`
+    .MuiCheckbox-colorSecondary.Mui-checked {
+        color : #00bcd4 !important;
+    }
+
+    .label {
+        font-size : 14px !important;
+        color : #666 !important;
+        font-weight : 200 !important;
+    }
+`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
new file mode 100644
index 0000000000000000000000000000000000000000..617a8e70b6a022139e4ecd843fa792117a38515c
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    color : "#666",
+  },
+}));
+
+export default function CustomCircularProgress () {
+  const classes = useStyles();
+
+  return (
+    <CircularProgress className={classes.root}/>
+  );
+}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc123a4c47254ea324aa5b6e68df5614e08bd4ac
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
@@ -0,0 +1,114 @@
+import React from 'react'
+import {StyledFormLabel} from '../StyledComponents.js'
+import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
+import Grid from '@material-ui/core/Grid';
+import styled from 'styled-components'
+
+export default function DisplayThumbnail (props) {
+    let windowWidth = window.innerWidth
+
+    const handleUpload = (e, selectorFiles) => {
+        e.preventDefault();
+        props.acceptFile(selectorFiles[0])
+    }
+
+    return (
+        <React.Fragment>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                {
+                    props.onEditPage ?
+                    (
+                        <b style={{fontWeight : "ligther"}}>Imagem ilustrativa do recurso</b>
+                    )
+                    :
+                    (
+                        <>
+                        <b>Editando Imagem</b>
+                        <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+                        </>
+                    )
+                }
+            </StyledFormLabel>
+            <ImagemCarregada container>
+                <Grid item xs={windowWidth > 990 ? 6 : 12}>
+                    <div className="img-preview">
+                        <img src={props.thumbnail}/>
+                        <div className="alterar-imagem">
+                            <input type="file" onChange = {(e) => handleUpload(e, e.target.files)} id="upload-file-thumbnail" style={{display : "none"}}
+                            />
+                        <label htmlFor="upload-file-thumbnail" style={{height : "100%", width : "inherit", cursor : "pointer"}}>
+                                <div className="interacoes">
+                                    SUBSTITUIR <AddAPhotoIcon/>
+                                </div>
+                            </label>
+                                <div className="interacoes" onClick={() => {props.handleDelete()}}>
+                                DELETAR <AddAPhotoIcon/>
+                            </div>
+                        </div>
+                    </div>
+                </Grid>
+                <Grid item xs={windowWidth > 990 ? 6 : 12}>
+                    <div className="aviso-imagem-carregada">
+                    Sua imagem foi enviada, porém pode ser que demore alguns minutos até nosso servidor atualiza-la na página do recurso.
+                    </div>
+                </Grid>
+            </ImagemCarregada>
+        </React.Fragment>
+    )
+}
+
+const ImagemCarregada = styled(Grid)`
+        .aviso-imagem-carregada {
+            color :#a5a5a5;
+            font-size : 12px;
+            font-weight : 500;
+            text-align : justify;
+            float : right;
+            margin-right : 20px;
+
+            @media screen and (min-width : 990px) {
+                padding-top : 20px;
+                padding-left : 10px;
+            }
+        }
+
+        .img-preview {
+            display : block;
+            max-height : 500px;
+            overflow : hidden;
+            border-radius : 10px;
+            position : relative;
+
+            .alterar-imagem{
+                position : absolute;
+                bottom : 0;
+                display : flex;
+                flex-direction : row;
+                width : 100%;
+                justify-content : flex-end;
+                background-color : rgba(0,0,0,.5);
+
+                .interacoes {
+                    cursor : pointer;
+                    display : flex;
+                    justify-content : flex-end;
+                    align-items : flex-end;
+                    height : 100%;
+                    padding : 10px;
+                    color : #fff;
+                    font-size : 14px;
+                    .MuiSvgIcon-root {
+                        vertical-align : middle !important;
+                    }
+                }
+            }
+
+            img {
+                height : 100%;
+                width : 100%;
+                object-fit : cover;
+                border-radius : 10px;
+                border : 0;
+            }
+        }
+`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
new file mode 100644
index 0000000000000000000000000000000000000000..f72f957dff64f132f68349fa66249bbbd574a10d
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
@@ -0,0 +1,106 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react'
+import {DottedBox, BlueButton} from '../StyledComponents.js';
+import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
+import FormControl from '@material-ui/core/FormControl';
+import {StyledTextField, StyledFormLabel, OutroAutorTextField} from '../StyledComponents.js'
+
+export default function DragAndDropThumbnail (props) {
+    const [dropDepth, setDropDepth] = useState(0)
+    const [inDropZone, toggleInDropZone] = useState(false)
+    const [fileList, setFileList] = useState([])
+
+    const handleDragEnter = e => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setDropDepth(dropDepth + 1)
+    };
+
+    const handleDragLeave = e => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setDropDepth(dropDepth - 1)
+        if (dropDepth > 0)
+            toggleInDropZone(true)
+    };
+
+    const handleDragOver = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'copy';
+        toggleInDropZone(true)
+    };
+
+    const handleDrop = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log(files)
+        let files = [...e.dataTransfer.files]
+        if (files && files.length > 0) {
+            props.acceptFile(files)
+        }
+    };
+
+    const handleUpload = (e, selectorFiles) => {
+        e.preventDefault();
+        props.acceptFile(selectorFiles[0])
+    }
+    return (
+        <FormControl style={{width : "100%"}}>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                {
+                    props.onEditPage ?
+                    (
+                        <b style={{textAlign : "center", fontSize : "26px", fontWeight : "ligther"}}>Inserir Imagem Ilustrativa</b>
+                    )
+                    :
+                    (
+                        <>
+                        <b>Imagem Ilustrativa do Recurso</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+                        </>
+                    )
+                }
+            </StyledFormLabel>
+            <DottedBox
+                onDrop={e => handleDrop(e)}
+                onDragOver={e => handleDragOver(e)}
+                onDragEnter={e => handleDragEnter(e)}
+                onDragLeave={e => handleDragLeave(e)}
+                thumbnail
+                >
+                <AddAPhotoIcon className="icon"/>
+                <input
+                    type="file"
+                    onChange = {(e) => handleUpload(e, e.target.files)}
+                    id="upload-file-thumbnail"
+                    style={{display : "none"}}
+                    />
+                <BlueButton>
+                    <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
+                        ESCOLHER IMAGEM
+                    </label>
+                </BlueButton>
+                <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+            </DottedBox>
+        </FormControl>
+    )
+}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
new file mode 100644
index 0000000000000000000000000000000000000000..35be2ce523737088ba7892dac513b255050d9925
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
@@ -0,0 +1,37 @@
+import React, {useState} from 'react'
+import {StyledFormLabel} from '../StyledComponents.js'
+import Cropper from '../../Cropper'
+import { Button } from '@material-ui/core';
+import styled from 'styled-components'
+
+export default function EditThumbnail (props) {
+    const [crop] = useState({
+        unit: "%" ,
+        width : 100,
+        aspect: 9/3
+    });
+    return (
+        <>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                <b>Editando Imagem</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+            </StyledFormLabel>
+            <div style={{display : "flex", alignItems : "center", flexDirection : "column"}}>
+                <div style={{maxWidth : "500px", maxHeight : "300px", padding : "20px"}}>
+                    <Cropper src={props.tempImgURL} crop={crop} circularCrop={false} update={props.updateThumb}/>
+                </div>
+                <StyledButton onClick={() => {props.finalizeThumb()}}>SELECIONAR IMAGEM</StyledButton>
+            </div>
+        </>
+
+    )
+}
+
+const StyledButton = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    background-color : #fff !important;
+    border : solid 1px #00bcd4 !important;
+    font-weight : 600 !important;
+    color : #00bcd4 !important;
+`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
new file mode 100644
index 0000000000000000000000000000000000000000..0935c3aa5a92bed3646f4d1a2e692693543cc12b
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
@@ -0,0 +1,63 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect} from 'react'
+import FormControl from '@material-ui/core/FormControl';
+import {StyledFormLabel} from '../StyledComponents.js'
+import Checkbox from '@material-ui/core/Checkbox';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import styled from 'styled-components'
+
+export default function EducationalStage (props) {
+
+    const [selected, setSelect] = useState(props.initialValue ? props.initialValue : [])
+    const handleSet = (event) => {
+        let newValue = event.target.value
+
+        if(selected.indexOf(newValue) > - 1) {
+            setSelect(selected.filter(item => item !== newValue))
+        }
+        else {
+            setSelect(selected => [...selected, event.target.value])
+        }
+    }
+
+    return (
+        <FormControl required style={{minWidth : "30%"}}>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                <b>Nível de ensino</b> <span style={{color : "#a5a5a5"}}>(Selecione uma ou mais opções)</span>
+            </StyledFormLabel>
+            <StyledFormGroup onBlur={() => {props.onBlurCallback("educational_stages", selected, props.draftID)}}>
+                {
+                    props.eduStages.map(stage =>
+                        <FormControlLabel key={stage.id} label={stage.name}
+                            control={<Checkbox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet}/>}/>
+                    )
+                }
+            </StyledFormGroup>
+        </FormControl>
+
+    )
+}
+
+const StyledFormGroup = styled(FormGroup)`
+    .MuiCheckbox-colorSecondary.Mui-checked {
+        color : #00bcd4 !important;
+    }
+`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
new file mode 100644
index 0000000000000000000000000000000000000000..56454430d871c6765abb56a45655d341115231e2
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
@@ -0,0 +1,90 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect, memo} from 'react'
+import styled from 'styled-components'
+import FormControl from '@material-ui/core/FormControl';
+import {ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import {GetSubjectIconByName} from '../GetIconByName.js'
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../../env';
+
+function Licenca (props) {
+
+    const options = [
+        {name : "CC BY", description : "(Esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original)", id : 1},
+
+        {name : "CC BY-SA", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id : 2},
+
+        {name : "CC BY-NC", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos)", id : 4},
+
+        {name : "CC BY-NC SA", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id : 5},
+
+        {name : "CC BY-NC-ND 3.0 BR", description : "(Atribuição-NãoComercial-SemDerivações 3.0 Brasil. Esta licença permite compartilhar, copiar e redistribuir o material em qualquer suporte ou formato)", id : 12}
+    ]
+
+    const [value, setValue] = useState(props.initialValue ? props.initialValue : -1)
+    const handleChange = (event) => {setValue(Number(event.target.value))}
+
+    return (
+        <FormControl required="true" style={{width : "100%"}}>
+            <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                <b>Licença do Uso do Conteúdo</b> <a href="https://br.creativecommons.org/licencas/" style={{color : "#ff7f00", textDecoration : "underline"}}>Saiba mais</a>
+            </StyledFormLabel>
+            <StyledRadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("license_id", value, props.draftID)}}>
+                {
+                    options.map( (option) =>
+                    <FormControlLabel key={option.id} value={option.id}
+                        control={<Radio />}
+                        label={
+                            <span className="title">{option.name}
+                            <span className="parentese"> {option.description}</span>
+                            </span>
+                            }
+                        />
+                    )
+
+                }
+            </StyledRadioGroup>
+        </FormControl>
+    )
+}
+
+export default memo(Licenca)
+
+const StyledRadioGroup = styled(RadioGroup)`
+    .MuiFormControlLabel-root {
+            display : block !important;
+            margin-bottom : 16px !important;
+    }
+
+    .title {
+        font-size: 14px;
+        font-weight: 600;
+        color:#666;
+        padding-left: 2px;
+    }
+    .parentese {
+        font-weight: 200;
+        color:#a5a5a5;
+        padding-left: 10px;
+    }
+`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa50529d1679efd8156892f7f36e99ed684240e2
--- /dev/null
+++ b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
@@ -0,0 +1,139 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect, memo} from 'react'
+import { makeStyles } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
+import {ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
+import FormGroup from '@material-ui/core/FormGroup';
+import {GetSubjectIconByName} from '../GetIconByName.js'
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../../env';
+import Checkbox from '@material-ui/core/Checkbox';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles({
+  root: {
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+}})
+
+function StyledCheckbox (props) {
+    const classes = useStyles();
+    return (
+        <Checkbox
+            className={classes.root}
+            disableRipple
+            checkedIcon = {
+                <ObjTypeBox checked>
+                    <span>
+                        {GetSubjectIconByName(props.label)}
+                        <p>{props.label}</p>
+                    </span>
+                </ObjTypeBox>
+            }
+            icon = {
+                <ObjTypeBox>
+                    <span>
+                        {GetSubjectIconByName(props.label)}
+                        <p>{props.label}</p>
+                    </span>
+                </ObjTypeBox>
+            }
+            {...props}
+        />
+    )
+}
+
+
+function SubjectsAndThemes (props) {
+    const [value, setValue] = useState(props.initialValue ? props.initialValue : [])
+
+    const handleChange = (event) => {
+        const newValue = event.target.value
+
+        if((value.indexOf(newValue) > -1)) {
+            setValue(value.filter(item => item !== newValue))
+        }
+        else {
+            setValue(value => [...value, newValue])
+        }
+     }
+
+    return (
+        <React.Fragment>
+        <Grid item xs={12} style={{paddingBottom : "40px"}}>
+            <FormControl required style={{width : "100%"}}>
+                <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                    <b>Componente curricular</b> <span>(Selecione uma ou mais opções)</span>
+                </StyledFormLabel>
+                <FormGroup row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
+                    {
+                        props.subjects.map( (subject) =>
+                        <>
+                        <FormControlLabel key={subject.id} value={subject.id}
+                            control={
+                                <StyledCheckbox
+                                    label={subject.name}
+                                    checked={value.indexOf(String(subject.id)) > -1}
+                                    onChange={handleChange}
+                                    />}
+                            />
+                        </>
+                        )
+
+                    }
+                </FormGroup>
+            </FormControl>
+        </Grid>
+
+        {
+
+        props.onUploadPage &&
+        <Grid item xs={12} style={{paddingBottom : "40px"}}>
+            <FormControl style={{width : "100%"}}>
+                <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+                    <b>Outras Temáticas</b>
+                </StyledFormLabel>
+                <FormGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
+                    {
+                        props.themes.map( (theme) =>
+                        <FormControlLabel key={theme.id} value={theme.id}
+                            control={
+                                <StyledCheckbox
+                                    label={theme.name}
+                                    checked={value.indexOf(String(theme.id)) > -1}
+                                    onChange={handleChange}
+
+                                    />
+                            }
+                            />
+                        )
+
+                    }
+                </FormGroup>
+            </FormControl>
+        </Grid>
+        }
+        </React.Fragment>
+    )
+}
+
+export default memo(SubjectsAndThemes)
diff --git a/src/Components/UploadPageComponents/ReactFileToUpload.js b/src/Components/UploadPageComponents/ReactFileToUpload.js
new file mode 100644
index 0000000000000000000000000000000000000000..d7342d9c1c0b9484c719e1085f2bc43973a81f6c
--- /dev/null
+++ b/src/Components/UploadPageComponents/ReactFileToUpload.js
@@ -0,0 +1,113 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect} from 'react'
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import {DottedBox, BlueButton} from './StyledComponents.js';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
+import axios from 'axios'
+import {apiUrl} from '../../env';
+
+export default function ReactFileToUpload (props) {
+    const [fileToUpload, setFileToUpload] = useState(null); 
+    const chunkSize = 262144
+    const uploadUrl = `${apiUrl}/learning_objects/` + props.draftID + '/chunk'
+    const [fileName, setFileName] = useState(null)
+    const [fileSize, setFileSize] = useState(null)
+    const [fileDoneUploading, setFileDoneUploading] = useState(false)
+
+    async function onFileChange (e) {
+        const files = e.target.files;
+        if(!files) return;
+
+        let newFile = e.target.files[0]
+        console.log(newFile)
+        setFileToUpload(newFile);
+        setFileName(newFile.name)
+        setFileSize(newFile.size)
+
+        let total = Math.ceil(newFile.size/chunkSize)
+        let currentChunkStartByte = 0;
+        let currentChunkFinalByte = chunkSize > newFile.size ? newFile.size : chunkSize;
+        let chunkIdentifier = props.draftID + '-' + newFile.name;
+        let remainingBytes = 0
+
+        for (var i = 0; i < total; i++) {
+            let chunk = newFile.slice(currentChunkStartByte, currentChunkFinalByte)
+            let config = getAxiosConfig()
+            let formData = new FormData()
+            formData.append('_chunkFilename', newFile.name);
+            formData.append('_chunkIdentifier', chunkIdentifier);
+            formData.append('_totalChunks', total);
+            formData.append('_chunkSize', chunkSize);
+            formData.append('_currentChunkSize', chunk.size);
+            formData.append('_chunkNumber', i);
+            formData.append('_totalSize', newFile.size);
+            formData.append('file', chunk);
+
+            try {
+                const response = await axios.post(uploadUrl, formData, config);
+                console.log(response)
+                if (response.headers['access-token']) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                remainingBytes = newFile.size - currentChunkFinalByte;
+                if (currentChunkFinalByte === newFile.size) {
+                    setFileDoneUploading(true)
+                }
+                else if (remainingBytes < chunkSize) {
+                    currentChunkStartByte = currentChunkFinalByte;
+                    currentChunkFinalByte = currentChunkStartByte + remainingBytes;
+                }
+                else {
+                    currentChunkStartByte = currentChunkFinalByte;
+                    currentChunkFinalByte = currentChunkStartByte + chunkSize;
+                }
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    };
+
+    return (
+        <div className="upload-container">
+            <h2 className="upload-title">File Uploader</h2>
+            <div className="upload-form">
+                <form id="file_upload">
+                    <DottedBox
+                        >
+                        <AddAPhotoIcon className="icon"/>
+                        <input
+                            type="file"
+                            onChange = {onFileChange}
+                            id="upload-file-thumbnail"
+                            style={{display : "none"}}
+                            />
+                        <BlueButton>
+                            <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
+                                ESCOLHER IMAGEM
+                            </label>
+                        </BlueButton>
+                        <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+                    </DottedBox>
+                </form>
+            </div>
+        </div>
+    )
+}
diff --git a/src/Components/UploadPageComponents/SendInfo.js b/src/Components/UploadPageComponents/SendInfo.js
new file mode 100644
index 0000000000000000000000000000000000000000..99d6a2ad0eda450e292fcdd87c77ec1cf2eef267
--- /dev/null
+++ b/src/Components/UploadPageComponents/SendInfo.js
@@ -0,0 +1,42 @@
+import React, {useContext} from 'react'
+import {Store} from '../../Store.js'
+import axios from 'axios'
+import {apiUrl} from '../../env';
+
+
+export function SendInfo (fieldName, payload, draftID) {
+    console.log('fieldName', fieldName, 'payload', payload, 'draftID', draftID)
+    const key = fieldName
+    let value = payload
+    if (key === "tags") {
+        value = payload.map( (tag, index) =>
+            index = { "name" : tag}
+        )
+    }
+
+    const putObject = {
+        "learning_object" : {
+            "id" : draftID
+        }
+    }
+    putObject.learning_object[key] = value
+    console.log(putObject)
+
+    let config = {
+        headers : {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+        }
+    }
+    config.headers["Access-Token"] = sessionStorage.getItem('@portalmec/accessToken');
+    config.headers.Client = sessionStorage.getItem('@portalmec/clientToken')
+    config.headers.Uid = sessionStorage.getItem('@portalmec/uid')
+    axios.put((`${apiUrl}/learning_objects/` + draftID), putObject, config).
+    then( (response) => {
+        if ( response.headers['access-token'] ) {
+            sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+        }
+        console.log(response)
+    }, (error) => {console.log(error)})
+
+}
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
new file mode 100644
index 0000000000000000000000000000000000000000..f67809843a6b64c58808fcd9a655c87705579a92
--- /dev/null
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -0,0 +1,165 @@
+import React from 'react';
+import styled from 'styled-components'
+import PropTypes from 'prop-types';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import Check from '@material-ui/icons/Check';
+import SettingsIcon from '@material-ui/icons/Settings';
+import GroupAddIcon from '@material-ui/icons/GroupAdd';
+import VideoLabelIcon from '@material-ui/icons/VideoLabel';
+import StepConnector from '@material-ui/core/StepConnector';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const useColorlibStepIconStyles = makeStyles({
+  root: {
+    backgroundColor: '#fff',
+    color: '#00bcd4',
+    width: 36,
+    height: 36,
+    display: 'flex',
+    border : 'solid 3px #00bcd4',
+    borderRadius: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  active: {
+    backgroundColor : '#00bcd4',
+    color : '#fff',
+  },
+  completed: {
+    backgroundColor : '#00bcd4',
+    color : '#fff',
+  },
+});
+
+function ColorlibStepIcon(props) {
+  const classes = useColorlibStepIconStyles();
+  const { active, completed } = props;
+
+  const icons = {
+    1: '1',
+    2: '2',
+    3: '3',
+  };
+
+  return (
+    <div
+      className={clsx(classes.root, {
+        [classes.active]: active,
+        [classes.completed]: completed,
+      })}
+    >
+      {completed ? <Check className={classes.completed} /> : icons[String(props.icon)]}
+    </div>
+  );
+}
+
+ColorlibStepIcon.propTypes = {
+  /**
+   * Whether this step is active.
+   */
+  active: PropTypes.bool,
+  /**
+   * Mark the step as completed. Is passed to child components.
+   */
+  completed: PropTypes.bool,
+  /**
+   * The label displayed in the step icon.
+   */
+  icon: PropTypes.node,
+};
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+  },
+  button: {
+    marginRight: theme.spacing(1),
+  },
+  instructions: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+function getSteps() {
+  return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step) {
+  switch (step) {
+    case 0:
+      return 'Select campaign settings...';
+    case 1:
+      return 'What is an ad group anyways?';
+    case 2:
+      return 'This is the bit I really care about!';
+    default:
+      return 'Unknown step';
+  }
+}
+
+export default function CustomizedSteppers(props) {
+  const classes = useStyles();
+  const steps = getSteps();
+
+{/*  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const handleReset = () => {
+    setActiveStep(0);
+  };*/}
+
+  return (
+
+     <>
+     <StyledStepper style={{backgroundColor : "#e5e5e5", borderRadius : "50px", justifyContent : "space-between"}} activeStep={props.activeStep} connector={<></>}>
+        {steps.map((label) => (
+          <Step key={label}>
+            <StepLabel StepIconComponent={ColorlibStepIcon}/>
+          </Step>
+        ))}
+      </StyledStepper>
+      {/*<div>
+        {activeStep === steps.length ? (
+          <div>
+            <Button onClick={handleReset} className={classes.button}>
+              Reset
+            </Button>
+          </div>
+        ) : (
+          <div>
+            <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
+            <div>
+              <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
+                Back
+              </Button>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={handleNext}
+                className={classes.button}
+              >
+                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+              </Button>
+            </div>
+          </div>
+        )}
+        </div>*/}
+    </>
+    );
+}
+
+const StyledStepper = styled(Stepper)`
+    padding : 7px !important;
+
+`
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
new file mode 100644
index 0000000000000000000000000000000000000000..2bac9300c9e0085b20b308ad48c4714c1796faec
--- /dev/null
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -0,0 +1,501 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React from 'react'
+import styled from 'styled-components'
+import { Button } from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormLabel from '@material-ui/core/FormLabel';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import { makeStyles } from '@material-ui/core/styles';
+import Radio from '@material-ui/core/Radio';
+import GetIconByName from './GetIconByName.js'
+
+export const StyledFormHelperText = styled(FormHelperText)`
+    .MuiFormHelperText-root {
+        text-align : right !important.
+    }
+`
+
+export const DottedBox = styled.div`
+    align-self : center;
+    width : ${props => props.thumbnail ? "100%" : "320px"};
+    background-color : ${props => props.thumbnail ? "transparent" : "#f4f4f4"};
+    border : ${props => props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4"};
+    align-items : center;
+    border-radius  : 10px;
+    display : flex;
+    flex-direction : column;
+    padding : 20px 0;
+    color : ${props => props.thumbnail ? "#a5a5a5" : "$666"};
+
+    .icon {
+        font-size : 40px !important;
+        color : #00bcd4 !important;
+        margin-bottom : 10px !important;
+        vertical-align : middle !important;
+        font-weight : normal !important;
+        font-style : normal !important;
+        line-height : 1 !important;
+        letter-spacing : normal !important;
+        text-transform : none !important;
+        display : inline-block !important;
+        white-space : nowrap !important;
+        word-wrap : normal !important;
+        direction : ltr !important;
+        padding-right : 2px;
+    }
+`
+
+export const BlueButton = styled(Button)`
+    &:hover {
+        background-color : #00acc1 !important;
+    }
+    color : #fff !important;
+    background-color : #00bcd4 !important;
+    height : 36px !important;
+    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+    font-weight : 600 !important;
+    min-width : 88px !important;
+    align-self : center !important;
+    padding : 16px !important;
+`
+
+export const GrayButton = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    height : 36px !important;
+    font-weight : 600 !important;
+    color : #666 !important;
+    background-color: transparent;
+    min-width : 88px !important;
+    height : 36px !important;
+    margin-left : 8px !important;
+    margin-right : 8px !important;
+    .icon {
+        vertical-align : middle !important;
+        font-weight : normal !important;
+        font-style : normal !important;
+        font-size : 24px !important;
+        line-height : 1 !important;
+        letter-spacing : normal !important;
+        text-transform : none !important;
+        display : inline-block !important;
+        white-space : nowrap !important;
+        word-wrap : normal !important;
+        direction : ltr !important;
+        padding-right : 2px;
+        color : inherit !important;
+    }
+
+    .button-text {
+        cursor : pointer;
+        line-height : 36px;
+        text-align : center;
+        color : currentColor;
+        white-space : nowrap;
+        text-transform : uppercase;
+        font-weight : 600;
+        font-size : 14px;
+        font-style : inherit;
+        font-variant : inherit;
+    }
+`
+
+export const WrapperBox = styled.div`
+    padding : 0;
+    margin-bottom : 15px;
+    display : block;
+    border-radius : 3px;
+    box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    background-color : #fff;
+    font-size : 14px;
+
+    .inner {
+        display : block;
+        padding : 20px;
+    }
+
+    .upload-title {
+        text-align : center;
+        font-size : 26px;
+        margin-bottom : 10px;
+        font-weight : lighter;
+    }
+
+    .flex-column {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column;
+
+        p {
+            margin : 0 0 10px;
+        }
+
+        .buttons-div {
+            padding-top : 10px;
+            padding-left : 15px;
+            padding-right : 15px;
+            display: flex;
+            flex-direction : row;
+            justify-content : space-evenly;
+            text-align : center;
+        }
+    }
+
+    .strike-box {
+        display : flex;
+        flex-direction : row;
+        justify-content : center;
+
+        .strike {
+            border-bottom : solid 1px #e5e5e5;
+            display : inline-block;
+            vertical-align : middle;
+            width : 40%;
+            margin-bottom : 2em;
+        }
+
+        h3 {
+            margin : 20px 0;
+            font-weight : 400;
+            overflow : hidden;
+            text-align : center;
+            font-size : 14px;
+            color : #666;
+            padding : 0 5px;
+        }
+    }
+
+    .enviar-link-texto {
+        padding-left : 15px;
+        padding-right : 15px;
+        text-align : center;
+        font-size : 14px;
+        margin-bottom : 5px;
+
+        img {
+            height : 35px;
+            vertical-align : middle;
+        }
+    }
+
+    .uploading {
+        margin-top : 30px;
+
+        .upload-item {
+            margin-bottom : 5px;
+
+            .item-info {
+                display : flex;
+                flex-direction : row;
+                justify-content : space-between;
+                align-items : center;
+                padding : 5px 0;
+                font-size : 14px;
+
+                .icon {
+                    vertical-align : middle !important;
+                    font-weight : normal !important;
+                    font-style : normal !important;
+                    font-size : 24px !important;
+                    line-height : 1 !important;
+                    letter-spacing : normal !important;
+                    text-transform : none !important;
+                    display : inline-block !important;
+                    white-space : nowrap !important;
+                    word-wrap : normal !important;
+                    direction : ltr !important;
+                    padding-right : 2px;
+                }
+
+                .file-status {
+                    .icon-margin {
+                        color : #00bcd4;
+                        margin-right : 5px;
+                    }
+                    .MuiLinearProgress-root {
+                        width : 100% !important;
+                    }
+                }
+
+                .icon-remove {
+                    color : #666;
+                    font-size : 20px;
+                }
+            }
+        }
+
+        .warning {
+            padding: 40px 0 20px 0;
+            margin-top: 40px;
+            border-top: solid 1px #f4f4f4;
+            text-align: center;
+
+            span {
+                font-size : 16px;
+                font-weight : lighter;
+            }
+        }
+    }
+`
+
+export const InfoBox = styled.div`
+    background-color : #fff;
+    padding : 30px;
+    box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    margin-bottom : 30px;
+    border-radius : 3px;
+
+    .cabecalho {
+        display : flex;
+        flex-direction : column;
+        align-items : center;
+        margin-bottom : 30px;
+
+        h2 {
+            margin-top : 0;
+            font-size : 26px;
+            font-weight : lighter;
+            margin-bottom : 10px;
+        }
+
+        .feedback-upload {
+            display : flex;
+            flex-direction : column;
+            justify-content : center;
+            text-align : center
+            margin-top : 20px;
+            width : 65%;
+        }
+    }
+`
+export const ObjTypeBox = styled.div`
+    height : 100px;
+    width : 100px;
+    border-radius : 10px;
+    background-color : ${props => props.checked ? "#00bcd4" : "#f4f4f4"};
+    color : ${props => props.checked ? "#fff" : "#00bcd4"};
+
+    span {
+        padding-top : 5%;
+        display : flex;
+        flex-direction : column;
+        justify-content : center;
+
+        .icon {
+            color : inherit;
+            align-self : center;
+            height : 48px;
+            width : 48px;
+        }
+
+        p {
+            height : 28px;
+            font-size : 14px;
+            text-align : center;
+            line-height : 14px;
+        }
+
+        svg path {
+            fill : ${props => props.checked ? "#fff" : "#00bcd4"};
+        }
+    }
+`
+
+export const OutroAutorTextField = styled(TextField)`
+    font-size : 14px;
+    width : 100% !important;
+
+    .MuiFormControl-root {
+        margin : 18px 0 !important;
+    }
+
+    .MuiFormHelperText-root {
+        text-align : left;
+        font-size : 14px !important ;
+    }
+
+    label.Mui-focused {
+        color : #00bcd4;
+    }
+
+    label.Mui-focused.Mui-error {
+        color : red;
+    }
+
+    .MuiInput-underline::after {
+        border-bottom: 1px solid #00bcd4;
+    }
+    .MuiFormHelperText-root {
+        font-size : 12px !important;
+        text-align : right !important;
+    }
+`
+
+export const StyledFormLabel = styled(FormLabel)`
+    b {
+        color : #666 !important;
+    }
+    span {
+        color : #a5a5a5;
+    }
+`
+
+export const StyledTextField = styled(TextField)`
+    font-size : 14px;
+    width : 100% !important;
+    full-width : 100% !important;
+
+    .MuiFormControl-root {
+        margin : 18px 0 !important;
+    }
+
+
+    .MuiFormHelperText-root {
+        text-align : left;
+        font-size : 14px !important ;
+    }
+
+    label.Mui-focused {
+        color : #00bcd4;
+    }
+
+    label.Mui-focused.Mui-error {
+        color : red;
+    }
+
+    .MuiInput-underline::after {
+        border-bottom: 2px solid #00bcd4;
+    }
+    .MuiFormHelperText-root {
+        font-size : 12px !important;
+        text-align : right !important;
+    }
+`
+
+
+ const StyledNativeSelect = styled(NativeSelect)`
+    .MuiInput-underline::after {
+        border-bottom: 1px solid #00bcd4 !important;
+    }
+ `
+ const useStyles = makeStyles({
+   root: {
+     '&:hover': {
+       backgroundColor: 'transparent',
+     },
+ }})
+
+ export function StyledRadio (props) {
+     const classes = useStyles();
+     return (
+         <Radio
+             className={classes.root}
+             disableRipple
+             checkedIcon = {
+                 <ObjTypeBox checked>
+                     <span>
+                         {GetIconByName(props.label)}
+                         <p>{props.label}</p>
+                     </span>
+                 </ObjTypeBox>
+             }
+             icon = {
+                 <ObjTypeBox>
+                     <span>
+                         {GetIconByName(props.label)}
+                         <p>{props.label}</p>
+                     </span>
+                 </ObjTypeBox>
+             }
+             {...props}
+         />
+     )
+ }
+
+ export const StyledDiv = styled.div`
+     display : flex;
+     margin-top : 30px;
+     justify-content : space-evenly;
+ `
+
+ export const OrangeButton = styled(Button)`
+    max-height : 36px !important;
+     color : rgba(255,255,255,0.87) !important;
+     box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+     font-weight : 600 !important;
+     background-color : #ff7f00 !important;
+     margin-left : 8px !important;
+     margin-right : 8px !important;
+ `
+
+ export const GreyButton = styled(Button)`
+     &:hover {
+         background-color : rgba(158,158,158,0.2) !important;
+     }
+     max-height : 36px !important;
+
+     background-color : transparent !important;
+     color : #666 !important;
+     text-decoration : none !important;
+     outline : none !important;
+     text-align : center !important;
+
+     .button-text {
+         cursor : pointer;
+         line-height : 36px;
+         text-align : center;
+         color : currentColor;
+         white-space : nowrap;
+         text-transform : uppercase;
+         font-weight : 600 !important;
+         font-size : 14px;
+         font-style : inherit;
+         font-variant : inherit;
+         padding : 6px 16px !important;
+     }
+ `
+
+ export const Background = styled.div `
+     padding-top : 40px;
+     background-color : #f4f4f4;
+     color : #666;
+
+     .container {
+         padding : 0;
+         margin-right : auto;
+         margin-left : auto;
+
+         @media screen and (min-width: 768px) {
+             width : 750px;
+         }
+         @media screen and (min-width: 992px) {
+             width : 970px;
+         }
+         @media screen and (min-width: 1200px) {
+             width : 1170px;
+         }
+     }
+ `
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
new file mode 100644
index 0000000000000000000000000000000000000000..4219c73f7fe0b145115157da045a98947aea62bb
--- /dev/null
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -0,0 +1,306 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState} from 'react'
+import LinkIcon from '../../img/link_icon.svg'
+import ChooseLink from './ChooseLinkSection.js'
+import {WrapperBox, StyledTextField, BlueButton, GrayButton} from './StyledComponents.js';
+import UploadMediaComponent from './ReactFileToUpload.js'
+import FileUploadStage from './FileUploadStage.js'
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import {DottedBox} from './StyledComponents.js';
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
+import axios from 'axios'
+import {apiUrl} from '../../env';
+import DoneIcon from '@material-ui/icons/Done';
+import DeleteIcon from '@material-ui/icons/Delete';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import Alert from '../Alert.js';
+import Snackbar from '@material-ui/core/Snackbar';
+
+export default function UploadFileWrapper (props) {
+    /*-----------------------------------------------------------------
+        - Wrapper for file upload box
+        - has three different stages:
+            - Default: prompts user to select a file or a link
+            - Choosing Link: displayed when the user selects "ENVIAR LINK"; renders "ChooseLinkSection.js"
+            - file selected: displayed when the user has chosen a file to upload. this section shows the upload progress and lets the user delete the current object and return to default stage
+            - error: displayed when an error occurs during the file upload.
+
+        - Props used:
+            - submit : called when the user clicks "ENVIAR" inside ChooseLinkSection; renders the alert snackbar to let them know the link was submitted
+    */
+
+    const [stage, setStage] = useState(props.prevFile ? "fileSelected" : "default")
+    const handleNextStage = (newStage) => {setStage(newStage)}
+
+    const [fileToUpload, setFileToUpload] = useState(null);
+    const chunkSize = 262144
+    const uploadUrl = `${apiUrl}/learning_objects/` + props.draftID + '/chunk'
+    const [fileName, setFileName] = useState(props.prevFile ? props.prevFile.name : null)
+    const [fileDoneUploading, setFileDoneUploading] = useState(props.prevFile ? true : false)
+    const [uploadProgress, setProgress] = useState(0)
+    const [attachmentID, setAttachmentID] = useState(props.prevFile ? props.prevFile.id : null)
+
+    async function onFileChange (file) {
+        if(!file) return;
+
+        let newFile = file
+        console.log(newFile)
+        setFileToUpload(newFile);
+        setFileName(newFile.name)
+
+        let total = Math.ceil(newFile.size/chunkSize)
+        let currentChunkStartByte = 0;
+        let currentChunkFinalByte = chunkSize > newFile.size ? newFile.size : chunkSize;
+        let chunkIdentifier = props.draftID + '-' + newFile.name;
+        let remainingBytes = 0
+        handleNextStage("fileSelected")
+        for (var i = 0; i < total; i++) {
+            let chunk = newFile.slice(currentChunkStartByte, currentChunkFinalByte)
+            let config = getAxiosConfig()
+            let formData = new FormData()
+            formData.append('_chunkFilename', newFile.name);
+            formData.append('_chunkIdentifier', chunkIdentifier);
+            formData.append('_totalChunks', total);
+            formData.append('_chunkSize', chunkSize);
+            formData.append('_currentChunkSize', chunk.size);
+            formData.append('_chunkNumber', i);
+            formData.append('_totalSize', newFile.size);
+            formData.append('file', chunk);
+
+            try {
+                const response = await axios.post(uploadUrl, formData, config);
+                console.log(response)
+                if (response.headers['access-token']) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                setProgress(Math.round((currentChunkFinalByte/newFile.size) * 100))
+                remainingBytes = newFile.size - currentChunkFinalByte;
+                if (currentChunkFinalByte === newFile.size) {
+                    setFileDoneUploading(true)
+                    setAttachmentID(response.data.id)
+                }
+                else if (remainingBytes < chunkSize) {
+                    currentChunkStartByte = currentChunkFinalByte;
+                    currentChunkFinalByte = currentChunkStartByte + remainingBytes;
+                }
+                else {
+                    currentChunkStartByte = currentChunkFinalByte;
+                    currentChunkFinalByte = currentChunkStartByte + chunkSize;
+                }
+            } catch (error) {
+                console.log(error)
+                handleNextStage("error")
+                return;
+            }
+        }
+    };
+
+    const handleDelete = () => {
+        if (attachmentID != null) {
+
+        let config = getAxiosConfig()
+        axios.delete( (`${apiUrl}/learning_objects/` + props.draftID + '/attachment/' + attachmentID), config).then(
+            (response) => {
+                console.log(response)
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                handleNextStage("default")
+            },
+            (error) => {console.log(error)})
+        }
+    }
+
+    const handleCancel = () => {
+        console.log('cancelar request')
+    }
+
+    const handleDragOver = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'copy';
+    };
+
+    const handleDrop = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        let files = [...e.dataTransfer.files]
+
+        console.log('files: ', files)
+        if (files && files.length > 0) {
+            onFileChange(files[0])
+        }
+    };
+
+    const [snackbarOpen, toggleSnackbar] = useState(false)
+    const handleChooseLink = (link) => {
+        let config = getAxiosConfig()
+        let payload = {
+            "learning_object" : {
+                "id" : props.draftID,
+                "link" : link
+            }
+        }
+        axios.put((`${apiUrl}/learning_objects/` + props.draftID), payload, config).then(
+            (response) => {
+                console.log(response)
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                toggleSnackbar(true)
+            }, (error) => {
+                console.log(error)
+            }
+        )
+
+    }
+
+    switch (stage) {
+        case "error":
+            return(
+                <WrapperBox>
+                    <div className="inner">
+                        <div className="upload-title">Erro</div>
+                            <span>Clique no botão para tentar novamente.</span>
+                        <div className="flex-column">
+                            <div className="buttons-div">
+                                <GrayButton onClick={() => {handleNextStage("default")}}>
+                                    <span className="button-text">
+                                        Voltar
+                                    </span>
+                                </GrayButton>
+                            </div>
+                        </div>
+                    </div>
+                </WrapperBox>
+            )
+            break;
+        case "fileSelected":
+            return(
+                <WrapperBox>
+                    <div className="inner">
+                        <div className="upload-title">
+                            {fileDoneUploading ? 'O arquivo foi carregado' : 'Carregando arquivo'}
+                        </div>
+
+                        <div className="uploading">
+                            <div className="upload-item">
+                                <div className="item-info">
+                                    {
+                                        fileDoneUploading ?
+                                        (
+                                            <React.Fragment>
+                                                <div className="file-status">
+                                                    <DoneIcon className="icon icon-margin"/> {fileName}
+                                                    </div>
+                                                    <GrayButton onClick={() => {handleDelete()}}>
+                                                        Excluir <DeleteIcon className="icon icon-remove"/>
+                                                    </GrayButton>
+                                            </React.Fragment>
+                                        )
+                                        :
+                                        (
+                                            <React.Fragment>
+                                            <div className="file-status">
+                                                {uploadProgress}% {fileName}
+                                            </div>
+                                            <GrayButton onClick={() => {handleCancel()}}>
+                                                Cancelar <DeleteIcon className="icon icon-remove"/>
+                                            </GrayButton>
+                                            </React.Fragment>
+                                        )
+                                    }
+                                </div>
+                            </div>
+                            <div className="warning">
+                                <span>Não se esqueça de preencher as</span>
+                                <br/>
+                                <span>informações sobre o recurso ao lado.</span>
+                            </div>
+                        </div>
+                    </div>
+                </WrapperBox>
+            )
+            break;
+        case "choosingLink":
+            return (
+                <React.Fragment>
+                    <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
+                        anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+                        >
+                        <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
+                            Link salvo com sucesso!
+                        </Alert>
+                    </Snackbar>
+                    <ChooseLink handleNextStage={handleNextStage} submit={handleChooseLink}/>
+                </React.Fragment>
+            )
+            break;
+        default:
+            return(
+                <WrapperBox>
+                    <div className="inner">
+                        <div className="upload-title"> Enviar Recurso</div>
+                        <div className="flex-column">
+
+                            <div className="upload-container">
+                                <div className="upload-form">
+                                    <form id="file_upload">
+                                        <DottedBox
+                                            onDrop={e => handleDrop(e)}
+                                            onDragOver={e => handleDragOver(e)}
+                                            >
+                                            <AddAPhotoIcon className="icon"/>
+                                            <input
+                                                type="file"
+                                                onChange = {(e) => {onFileChange(e.target.files[0])}}
+                                                id="upload-file"
+                                                style={{display : "none"}}
+                                                />
+                                            <BlueButton>
+                                                <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
+                                                    ESCOLHER IMAGEM
+                                                </label>
+                                            </BlueButton>
+                                            <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+                                        </DottedBox>
+                                    </form>
+                                </div>
+                            </div>
+
+                            <div className="strike-box">
+                                <div className="strike"/><h3>ou</h3><div className="strike"/>
+                            </div>
+
+                            <div className="enviar-link-texto">
+                                <img src={LinkIcon}/>
+                                <br/>
+                                <span>Enviar link de um recurso de outro site</span>
+                            </div>
+
+                            <BlueButton onClick={ () => {handleNextStage("choosingLink")} }>ENVIAR LINK</BlueButton>
+                        </div>
+                    </div>
+                </WrapperBox>
+            )
+    }
+
+}
diff --git a/src/Components/UserPageComponents/Avatar.js b/src/Components/UserPageComponents/Avatar.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1026a358b3b784ce81494ed1f502da63800c045
--- /dev/null
+++ b/src/Components/UserPageComponents/Avatar.js
@@ -0,0 +1,82 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+import React, {useState, useContext, useEffect} from 'react';
+import styled from 'styled-components'
+import { Store } from '../../Store.js';
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import noAvatar from "../../img/default_profile.png";
+import ModalAlterarAvatar from '../ModalAlterarAvatar/ModalAlterarAvatar.js'
+
+export default function ProfileAvatar (props) {
+    const {state, dispatch} = useContext(Store)
+
+    const [currentAvatar, setAvatar] = useState(state.currentUser.userAvatar)
+
+    const [hoverBool, toggleHover] = React.useState(false)
+    const handleToggleHover = () => {toggleHover(!hoverBool)}
+
+    const [open, toggleOpen] = useState(false)
+    const controlModal = () => {toggleOpen(!open)}
+
+    useEffect(() => {setAvatar(state.currentUser.userAvatar)}, state.currentUser.userAvatar)
+
+    return (
+        <>
+            <ModalAlterarAvatar
+                open={open}
+                handleClose={controlModal}
+                userAvatar={currentAvatar}
+                id={props.id}
+            />
+
+            <ProfileAvatarDiv onMouseEnter={handleToggleHover} onMouseLeave={handleToggleHover} onClick={controlModal}>
+                <img src={currentAvatar ? apiDomain + currentAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
+                <ChangeAvatarDiv  style={ {display : hoverBool ? 'flex' : 'none'}}>
+                    <span>Alterar Foto</span>
+                </ChangeAvatarDiv>
+            </ProfileAvatarDiv>
+
+        </>
+    )
+}
+
+const ProfileAvatarDiv = styled.div`
+    bottom : -55px;
+    left : 60px;
+    border-radius : 100%;
+    position : absolute;
+    width : 150px;
+    height : 150px;
+    overflow : hidden;
+    border : 8px solid #fff;
+    outline : 0;
+    cursor : pointer;
+    background-color : #a5a5a5;
+`
+
+const ChangeAvatarDiv = styled.div`
+  height : 40px;
+  position: absolute;
+  width : 100%;
+  bottom : 0;
+  display : flex;
+  background-color : #000;
+  color : #fff;
+  justify-content : center;
+`
diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js
new file mode 100644
index 0000000000000000000000000000000000000000..2af5bd7473f2414f1e3a97e627ff01cf5b028b87
--- /dev/null
+++ b/src/Components/UserPageComponents/Cover.js
@@ -0,0 +1,68 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+import React, {useState, useContext, useEffect} from 'react';
+import { Store } from '../../Store.js';
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import {CoverContainer} from '../TabPanels/StyledComponents.js'
+import IconButton from '@material-ui/core/IconButton';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+import Tooltip from '@material-ui/core/Tooltip';
+import ModalAlterarCover from '../ModalAlterarCover/ModalAlterarCover.js'
+
+export default function Cover (props) {
+    const {state} = useContext(Store)
+
+    const [currentCover, setCoverImg] = useState(state.currentUser.userCover)
+    const [tempCover, setTempCover] = useState('')
+
+    const [open, toggleOpen] = useState(false)
+    const controlModal = () => {toggleOpen(!open)}
+
+    const updateCover = (selectorFiles) => {
+        const objectURL = URL.createObjectURL(selectorFiles[0])
+        console.log(objectURL)
+        setTempCover(objectURL)
+        controlModal()
+    }
+
+    useEffect( () => {
+        setCoverImg(state.currentUser.userCover)
+    }, state.currentUser.userCover)
+    return (
+        <>
+            <ModalAlterarCover
+                open = {open}
+                handleClose={controlModal}
+                cover={tempCover}
+                id={props.id}
+            />
+            <CoverContainer>
+                {currentCover && <img src={apiDomain + currentCover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
+                <input accept="image/*" style = {{display:"none"}} id="choose-cover-file" type="file" onChange={(e) => updateCover(e.target.files)}/>
+                <label htmlFor="choose-cover-file">
+                    <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
+                        <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
+                            <PhotoCamera />
+                        </IconButton>
+                    </Tooltip>
+                </label>
+            </CoverContainer>
+        </>
+    )
+}
diff --git a/src/Components/UserPageComponents/EditProfileButton.js b/src/Components/UserPageComponents/EditProfileButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..4df7df2c7a5a6b4794ca5fd926d7440c77cc3ec1
--- /dev/null
+++ b/src/Components/UserPageComponents/EditProfileButton.js
@@ -0,0 +1,74 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+import React from 'react';
+import { Store } from '../../Store.js';
+import styled from 'styled-components'
+import {Link} from 'react-router-dom';
+import EditIcon from '@material-ui/icons/Edit';
+import Button from '@material-ui/core/Button';
+
+export default function EditProfileButton () {
+    const {state} = React.useContext(Store)
+
+    return (
+        <EditProfileAnchor to="/editarperfil">
+            <Button>
+                {state.windowSize.width >=900 ?
+                    (
+                        <React.Fragment>
+                            <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
+                        </React.Fragment>
+                    )
+                    :
+                    (
+                        <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
+                    )
+                }
+            </Button>
+        </EditProfileAnchor>
+    )
+}
+
+const EditProfileAnchor = styled(Link)`
+  Button {
+      box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
+      background-color : #fafafa;
+      position : absolute;
+      right : 5px;
+      bottom : 0;
+      margin-bottom : 20px;
+      color : #666;
+      padding : 0 10px;
+      text-decoration : none;
+      border-radius : 3px;
+      @media screen and (min-width: 800px) {
+          min-height : 36px;
+          min-width : 88px;
+      }
+      line-height : 36px;
+      border : 0;
+      display: inline-block;
+      text-align : center;
+      :hover{
+        background-color : #fafafa;
+      }
+      @media screen and (max-width: 600px) {
+          max-width : 44px !important ;
+      }
+  }
+`
diff --git a/src/Components/UserPageComponents/SubmitterStatus.js b/src/Components/UserPageComponents/SubmitterStatus.js
new file mode 100644
index 0000000000000000000000000000000000000000..47924373223205e9a81575cc957fbb4f371bce34
--- /dev/null
+++ b/src/Components/UserPageComponents/SubmitterStatus.js
@@ -0,0 +1,51 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+import React, {useContext} from 'react';
+import { Store } from '../../Store.js';
+import CheckDecagram from '../../img/check-decagram-gray.svg'
+
+export default function SubmitterStatus (props) {
+    const {state} = React.useContext(Store)
+
+    let text;
+    switch (state.currentUser.submitter_request) {
+        case 'requested':
+            text = "Verificando cadastro de professor(a)"
+            break;
+        case 'accepted':
+            text = "Professor(a)"
+            break;
+        default:
+            text = "Você é professor(a) e gostaria de publicar recursos?"
+    }
+
+    return (
+        <React.Fragment>
+            <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
+                <span style={{cursor:"pointer"}}>
+                                <span style={{paddingRight:"5px"}}>
+                                    <img src={CheckDecagram}/>
+                                </span>
+                                {text}
+                                <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
+                </span>
+            </p>
+        </React.Fragment>
+    )
+
+}
diff --git a/src/Components/UserPageComponents/UserInfo.js b/src/Components/UserPageComponents/UserInfo.js
new file mode 100644
index 0000000000000000000000000000000000000000..0a45ac75dff68aeb5065a2610a9c8cdc75a14b37
--- /dev/null
+++ b/src/Components/UserPageComponents/UserInfo.js
@@ -0,0 +1,36 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+import React, {useContext} from 'react';
+import { Store } from '../../Store.js';
+import {UserProfileInfoDiv} from '../TabPanels/StyledComponents.js'
+
+export default function UserInfo (props) {
+    const {state} = useContext(Store)
+
+    const user = state.currentUser.username
+    const education = state.currentUser.education
+
+    return (
+        <UserProfileInfoDiv>
+            <p style={{fontSize:"28px", color:"#fff", paddingTop:"5px", paddingBottom:"5px", fontWeight:"500", backgroundColor:"#77777796", borderRadius : "5px"}}>{user}</p>
+            <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
+                <p>{education}</p>
+            </div>
+        </UserProfileInfoDiv>
+    )
+}
diff --git a/src/Components/menulist.js b/src/Components/menulist.js
deleted file mode 100644
index cb0703899148dc5386135228a18356a8eb72b8d8..0000000000000000000000000000000000000000
--- a/src/Components/menulist.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-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/>.*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import Grow from '@material-ui/core/Grow';
-import Paper from '@material-ui/core/Paper';
-import Popper from '@material-ui/core/Popper';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = theme => ({
-  root: {
-    display: 'flex',
-  },
-  paper: {
-    marginRight: theme.spacing.unit * 2,
-  },
-});
-
-class MenuListComposition extends React.Component {
-  state = {
-    open: false,
-  };
-
-  handleToggle = () => {
-    this.setState(state => ({ open: !state.open }));
-  };
-
-  handleClose = event => {
-    if (this.anchorEl.contains(event.target)) {
-      return;
-    }
-
-    this.setState({ open: false });
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { open } = this.state;
-
-    return (
-      <div className={classes.root}>
-
-        <div>
-          <Button
-            buttonRef={node => {
-              this.anchorEl = node;
-            }}
-            aria-owns={open ? 'menu-list-grow' : undefined}
-            aria-haspopup="true"
-            onClick={this.handleToggle}
-          >
-            {this.props.label}
-          </Button>
-          <Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
-            {({ TransitionProps, placement }) => (
-              <Grow
-                {...TransitionProps}
-                id="menu-list-grow"
-                style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
-              >
-                <Paper>
-                  <ClickAwayListener onClickAway={this.handleClose}>
-                    <MenuList>
-                      <MenuItem onClick={this.handleClose}>Profile</MenuItem>
-                      <MenuItem onClick={this.handleClose}>My account</MenuItem>
-                      <MenuItem onClick={this.handleClose}>Logout</MenuItem>
-                    </MenuList>
-                  </ClickAwayListener>
-                </Paper>
-              </Grow>
-            )}
-          </Popper>
-        </div>
-      </div>
-    );
-  }
-}
-
-MenuListComposition.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(MenuListComposition);
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..2597832c9390ffb0d18167f05f0b7982e53d38d5
--- /dev/null
+++ b/src/Pages/EditLearningObjectPage.js
@@ -0,0 +1,392 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect, useContext} from 'react'
+import {Store} from '../Store.js'
+import styled from 'styled-components'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../env';
+import Grid from '@material-ui/core/Grid';
+import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
+import Alert from '../Components/Alert.js';
+import Snackbar from '@material-ui/core/Snackbar';
+import {GreyButton, OrangeButton, InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
+import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig.js'
+import {Background} from '../Components/UploadPageComponents/StyledComponents'
+import LoadingSpinner from '../Components/LoadingSpinner'
+import NewTitle from '../Components/UploadPageComponents/Forms/NewTitle.js'
+import SobreORecurso from '../Components/UploadPageComponents/Forms/SobreORecurso.js'
+import Keywords from '../Components/UploadPageComponents/Forms/Keywords.js'
+import Autor from '../Components/UploadPageComponents/Forms/Autor.js'
+import TipoDeRecurso from '../Components/UploadPageComponents/Forms/TipoDeRecurso.js'
+import Idioma from '../Components/UploadPageComponents/Forms/Idioma.js'
+import EducationalStage from '../Components/UploadPageComponents/PartTwoComponents/EducationalStage.js'
+import SubjectsAndThemes from '../Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js'
+import Licenca from '../Components/UploadPageComponents/PartTwoComponents/Licenca.js'
+import { Button } from '@material-ui/core';
+import {LoadingDiv} from '../Components/UploadPageComponents/PartTwo.js'
+import EditThumbnail from '../Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js'
+import DisplayThumbnail from '../Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js'
+import CustomCircularProgress from '../Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress';
+import DragAndDropThumbnail from '../Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail'
+
+
+export default function EditLearningObjectPage (props) {
+    const recursoId = props.match.params.recursoId
+    const {state} = useContext(Store)
+    const [learningObject, setLearningObject] = useState({})
+    const [objTypes, setObjTypes] = useState([])
+    const [languages, setLanguages] = useState([])
+    const [eduStages, setEduStages] = useState([])
+    const [subjects, setSubjects] = useState([])
+
+    useEffect( () => {
+        const config = getAxiosConfig()
+        axios.get( (`${apiUrl}/learning_objects/` + recursoId), config
+            ).then( (response) => {
+                console.log(response.data)
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                setLearningObject(response.data)
+                if(response.data.thumbnail) {
+                    setThumbnail(response.data.thumbnail)
+                    setThumbnailStage('done')
+                }
+                setUpdatedInfo({...updatedInfo, ['id'] : response.data.id})
+                toggleLoading(false)
+            }, (error) => {console.log(error)}
+        )
+
+        axios.get(`${apiUrl}/object_types/`).then(
+            (response) => {
+                setObjTypes(response.data.sort((a, b) => (a.name) > (b.name) ? 1 : -1))
+            }, (error) => {
+                console.log(error)
+            }
+        )
+
+        axios.get(`${apiUrl}/languages/`).then(
+            (response) => {
+                setLanguages(response.data)
+            }, (error) => {
+                console.log(error)
+            }
+        )
+
+        axios.get(`${apiUrl}/educational_stages/`).then(
+            (response) => {
+                setEduStages(response.data)
+            },
+            (error) => {console.log(error)}
+        )
+
+        axios.get(`${apiUrl}/subjects/`).then(
+            (response) => {
+                setSubjects(response.data.sort((a,b) => a.name > b.name ? 1 : -1))
+            },
+            (error) => {console.log(error)}
+        )
+    }, [, state.currentUser.id])
+
+    const [loading, toggleLoading] = useState(true)
+
+    const [updatedInfo, setUpdatedInfo] = useState({})
+
+    const onBlurCallback = (fieldName, payload) => {
+        setUpdatedInfo({...updatedInfo, [fieldName] : payload})
+    }
+
+    const [snackbarOpen, toggleSnackbar] = useState(false)
+
+    const handleDelete = () => {
+        let config = getAxiosConfig()
+        axios.delete((`${apiUrl}/learning_objects/` + learningObject.id), config).then(
+            (response) => {
+                toggleSnackbar(true)
+                console.log(response.data)
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                props.history.push("/")
+            },
+            (error) => {
+                console.log(error)
+            }
+        )
+    }
+
+    const handleUpdateInfo = () => {
+        let config = getAxiosConfig()
+        console.log(updatedInfo)
+        let payload = {
+            "learning_object" : updatedInfo
+        }
+        console.log(payload)
+        axios.put((`${apiUrl}/learning_objects/` + learningObject.id), payload, config).then(
+            (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                console.log(response.data); props.history.goBack()
+            },
+            (error) => {console.log(error)}
+        )
+    }
+
+    const handlePost = () => {
+        let config = getAxiosConfig()
+        console.log(updatedInfo)
+        let payload = {
+            "learning_object" : updatedInfo
+        }
+        console.log(payload)
+        axios.post((`${apiUrl}/learning_objects/` + learningObject.id + '/publish'), payload, config).then(
+            (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                console.log(response.data);
+                props.history.push('/recurso/' + learningObject.id)
+            },
+            (error) => {console.log(error)}
+        )
+    }
+
+    const [thumbnailStage, setThumbnailStage] = useState('default')
+
+    const [thumbnail, setThumbnail] = useState('')
+    const [tempUrl, setTempUrl] = useState('')
+
+    const acceptFile = (file) => {
+        const objectURL = URL.createObjectURL(file)
+        console.log('acceptFile: ', file)
+        setTempUrl(objectURL)
+        setThumbnailStage('editing')
+    }
+    const updateThumb = (newThumbnail) => {
+        setThumbnail(newThumbnail)
+        console.log('updateThumb: ', thumbnail)
+
+    }
+
+    const finalizeThumb = () => {
+        setThumbnailStage('uploading')
+        let config = {
+            headers : {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            }
+        }
+        config.headers["access-Token"] = sessionStorage.getItem('@portalmec/accessToken');
+        config.headers.client = sessionStorage.getItem('@portalmec/clientToken')
+        config.headers.uid = sessionStorage.getItem('@portalmec/uid')
+
+        let fdThumb = new FormData()
+        fdThumb.set('learning_object[thumbnail]', thumbnail)
+        axios.put((`${apiUrl}/learning_objects/` + learningObject.id), fdThumb, config).then(
+            (response) => {
+                setThumbnailStage('done')
+                console.log(response.data)
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                if(response.data.thumbnail) {
+                    setThumbnail(response.data.thumbnail)
+                    setThumbnailStage('done')
+                }
+            },
+            (error) => {
+                setThumbnailStage('default')
+            }
+        )
+    }
+
+    const handleDeleteThumbnail = () => {
+        let config = {
+            headers : {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            }
+        }
+        config.headers["access-Token"] = sessionStorage.getItem('@portalmec/accessToken');
+        config.headers.client = sessionStorage.getItem('@portalmec/clientToken')
+        config.headers.uid = sessionStorage.getItem('@portalmec/uid')
+
+        let fdThumb = new FormData()
+        fdThumb.set('learning_object[thumbnail]', null)
+        axios.put((`${apiUrl}/learning_objects/` + learningObject.id), fdThumb, config).then(
+            (response) => {
+                setThumbnailStage('default')
+                console.log(response.data)
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+            },
+            (error) => {
+                console.log(error)
+            }
+        )
+    }
+
+    const chooseRenderStageThumbnail = () => {
+        switch(thumbnailStage) {
+            case 'uploading':
+               return (<LoadingDiv/>)
+               break;
+            case 'done':
+               return (<DisplayThumbnail acceptFile={acceptFile} thumbnail={`${apiDomain}` + thumbnail} onEditPage={true} handleDelete={handleDeleteThumbnail}/>)
+               break;
+            case 'editing':
+               return (<EditThumbnail finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
+               break;
+            default :
+               return (<DragAndDropThumbnail acceptFile={acceptFile} onEditPage={true}/>)
+               break;
+
+        }
+    }
+    return (
+        <React.Fragment>
+            <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
+            anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+            >
+                <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
+                    Recurso excluido com sucesso!
+                </Alert>
+            </Snackbar>
+        {
+            !loading ?
+            (
+                <Background>
+                    <div className="container">
+                            <Grid container spacing={2}>
+                                <Grid item md={4} xs={12}>
+                                    <UploadFileWrapper draftID={recursoId} prevFile={learningObject. attachments ? learningObject.attachments[0] : null}/>
+                                </Grid>
+                                <Grid item md={8} xs={12}>
+                                    <InfoBox>
+                                        <form onSubmit={handlePost}>
+                                            <div className="cabecalho">
+                                                <h2>Editar Recurso</h2>
+                                            </div>
+
+                                            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                                                {chooseRenderStageThumbnail()}
+                                            </Grid>
+
+                                            <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+                                                <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                                                    <NewTitle draftID={learningObject.id} initialValue={learningObject.name}
+                                                        onBlurCallback={onBlurCallback}
+                                                        />
+                                                </Grid>
+
+                                            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                                                <SobreORecurso draftID={learningObject.id} initialValue={learningObject.description} onBlurCallback={onBlurCallback}/>
+                                            </Grid>
+
+                                            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                                                <Keywords  draftID={learningObject.id} initialValue={learningObject.tags.map((tag) => tag.name)}
+                                                    onBlurCallback={onBlurCallback}/>
+                                            </Grid>
+
+                                            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                                                <Autor  draftID={learningObject.id}
+                                                    initialValue={
+                                                        learningObject.author === state.currentUser.username ?
+                                                        0 : 1
+                                                    }
+                                                    initialOutroAutor={
+                                                        learningObject.author !== state.currentUser.username ?
+                                                        learningObject.author : ''
+                                                    }
+                                                    onBlurCallback={onBlurCallback}
+                                                     />
+                                            </Grid>
+
+                                            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                                                <TipoDeRecurso objTypes={objTypes} draftID={learningObject.id}
+                                                    initialValue={learningObject.object_type !== null ? objTypes.filter((type) => type.name === learningObject.object_type)[0].id : null} onBlurCallback={onBlurCallback} />
+                                            </Grid>
+
+                                            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                                              <Idioma languages={languages}  draftID={learningObject.id} initialValue={learningObject.language.map((language) => language.name)} initialIDValues={learningObject.language.map((language) => language.id)}
+                                                  onBlurCallback={onBlurCallback} />
+                                            </Grid>
+
+                                            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                                                <EducationalStage draftID={learningObject.id} eduStages={eduStages} initialValue={learningObject.educational_stages.map((stage) => String(stage.id))} onBlurCallback={onBlurCallback}
+                                                    />
+                                            </Grid>
+
+                                            <SubjectsAndThemes draftId={learningObject.id} subjects={subjects} initialValue={learningObject.subjects.map(subject => String(subject.id))} onBlurCallback={onBlurCallback}/>
+
+                                            <Grid item xs={12} style={{paddingBottom : "40px"}}>
+                                                <Licenca draftID={learningObject.id} initialValue={learningObject.license ? learningObject.license.id : null} onBlurCallback={onBlurCallback}/>
+                                            </Grid>
+
+                                            <Grid item xs={12}>
+                                                <div style={{display : "flex", justifyContent : "center"}}>
+                                                        <GreyButton onClick={handleDelete}>
+                                                            <span className="button-text">
+                                                            EXCLUIR
+                                                            </span>
+                                                        </GreyButton>
+
+                                                        <GreyButton onClick={props.history.goBack}>
+                                                            <span className="button-text">
+                                                            CANCELAR
+                                                            </span>
+                                                        </GreyButton>
+
+                                                    <OrangeButton onClick={() => {handleUpdateInfo()}}>
+                                                        SALVAR ALTERAÇÕES
+                                                        </OrangeButton>
+
+                                                    {
+                                                        learningObject.state === "draft" &&
+                                                            <OrangeButton type="submit">
+                                                            PUBLICAR RECURSO
+                                                            </OrangeButton>
+                                                    }
+                                                </div>
+                                            </Grid>
+
+                                            <Grid item xs={12} style={{marginTop : "20px"}}>
+                                                <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
+                                                    * Campos obrigatórios
+                                                </span>
+                                            </Grid>
+                                            </Grid>
+
+                                        </form>
+                                    </InfoBox>
+                                </Grid>
+                            </Grid>
+                    </div>
+                </Background>
+            )
+            :
+            (
+                <LoadingSpinner text={"CARREGANDO"}/>
+            )
+        }
+        </React.Fragment>
+    )
+}
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index bc23dd00aa5ccae6dfa183342c0f1703b7fa86ab..8a2783de2e3ce40c466d4747f56d2565bcd3d377 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -11,7 +11,7 @@ import axios from 'axios'
 import {apiUrl} from '../env';
 
 export default function PageProfessor (props) {
-    const {state, dispatch} = useContext(Store)
+    const {state} = useContext(Store)
     const [modalOpen, toggleModal] = useState(false)
     const handleModal = () => {
         toggleModal(!modalOpen) ;
@@ -167,38 +167,3 @@ export default function PageProfessor (props) {
         </>
     )
 }
-
-const ContainerDiv = styled.div`
-    .card {
-        box-shadow : 0 0 5px 0 rgba(0,0,0,.25);
-        background-color :#fff;
-        text-align : start;
-        margin-left : auto;
-        margin-right : auto;
-    }
-
-    .part-one {
-        max-width : 570px;
-    }
-
-    .container {
-        padding-right : 15px;
-        padding-left : 15px;
-    }
-
-    .content {
-        margin-top : 16px;
-        margin-bottom : 16px;
-        margin-right : 10%;
-        margin-left : 10%;
-    }
-
-    h4 {
-        font-family : Roboto;
-        font-style : normal;
-        font-weight : 300;
-        line-height : 36px;
-        font-size : 26px;
-        margin-top : 20px;
-    }
-`
diff --git a/src/Pages/PasswordRecoveryPage.js b/src/Pages/PasswordRecoveryPage.js
index 70895507161afa2a6272b01898fb5bd798d65d33..82038103ec38d07b3cedb99394d567b9f62b2f22 100644
--- a/src/Pages/PasswordRecoveryPage.js
+++ b/src/Pages/PasswordRecoveryPage.js
@@ -8,19 +8,21 @@ import ValidateUserInput from '../Components/FormValidationFunction.js'
 import {CompletarCadastroButton} from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
 import Default from '../Components/PasswordRecoveryComponents/Default.js'
 import Success from '../Components/PasswordRecoveryComponents/Success.js'
+import CaseError from '../Components/PasswordRecoveryComponents/Error.js'
 import {Store} from '../Store.js'
-import Error from '../Components/PasswordRecoveryComponents/Error.js'
 import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
+import {apiUrl, apiDomain} from '../env';
+import axios from 'axios'
+
 
 export default function PasswordRecoveryPage (props) {
     const {state, dispatch} = useContext(Store)
 
     const [formEmail, setEmail] = useState(
         {
-            dict : {
-                key : false,
-                value : ""
-            }
+            key : false,
+            value : ""
+
         }
     )
 
@@ -28,32 +30,40 @@ export default function PasswordRecoveryPage (props) {
         const userInput = e.target.value
         const flag = ValidateUserInput('email', userInput)
 
-        setEmail({...formEmail, dict : {
+        setEmail({...formEmail,
             key : flag,
             value : userInput
-        }})
-        console.log(formEmail)
+        })
     }
 
     const [aux, setCase] = useState('default')
-    const handleChangeSwitch = (value) => setCase(value);
+    const handleChangeSwitch = (value) => {
+        console.log(value)
+        if (value !== "success") {
+            setEmail({key : false, value : ""})
+        }
+        setCase(value)
+    };
 
-    const onSubmit = (e, email) => {
+    const onSubmit = (e) => {
         e.stopPropagation()
-        const query = email
-
-        setEmail({...formEmail, dict : {
-            key : false,
-            value : ''
-        }})
-        handleChangeSwitch('error')
+        const payload = {
+            "email" : formEmail.value,
+            "redirect_url" : "https://plataformaintegrada.mec.gov.br/recuperar-senha#/alterar-senha"
+        }
+        axios.post((`${apiUrl}/auth/password`), payload).then(
+            (response) => {
+                console.log(response)
+                handleChangeSwitch(response.data.success ? "success" : "error")
+            },
+            (error) => {console.log(error)})
     }
 
 
     const components = {
-        default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.dict.value} error={formEmail.dict.key}/>,
-        success : <Success email={state.currentUser.email} changeSwitch={handleChangeSwitch}/>,
-        error : <Error email={state.currentUser.email} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.dict.value} error={formEmail.dict.key}/>
+        default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>,
+        success : <Success email={formEmail.value} changeSwitch={handleChangeSwitch}/>,
+        error : <CaseError handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>
     }
 
     const switchFunction = (value) => {
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index a073ebdca4a7d50c8af1d4d7f4a4d072df6107f6..2c38097a295c96674ee4935aa944af8a223181c7 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -74,7 +74,7 @@ const RenderUserProfileInfo = (userName) => {
     return (
         <UserProfileInfoDiv>
             <p
-            style={{fontSize:"28px", color:"#fff", marginBottom : "2px", fontWeight:"500", borderRadius : "5px"}}
+            style={{fontSize:"28px", color:"#fff", marginBottom : "2px", fontWeight:"500", borderRadius : "5px", textShadow : "0 1px 2px rgba(0,0,0,.45)"}}
             >
                 {userName}
             </p>
@@ -193,7 +193,7 @@ export default function PublicUserPage (props) {
                                         >
                                             {
                                                 tabs.map( (tab) =>
-                                                    <Tab label ={tab} key={tab}
+                                                    <Tab label={tab} key={tab}
                                                         disabled={tab === "Recursos" && learningObjArr.length === 0 || tab === "Coleções" && collectionsArr.length === 0}
                                                         />
                                                 )
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index af32a875baf451ca68a0ddf1f3e649ad2473c66d..0c113cd2845698182acdc1ffde54c5bca393b889 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.js
@@ -31,7 +31,6 @@ const CardStyled = styled(Card)`
   background-color: white;
   max-width: 1700px;
   padding-top: 52px;
-  margin-left: 7em;
   @media ${device.mobileM} {
     width: 100%;
     height: 100%;
@@ -47,9 +46,28 @@ const Styledspan = styled.span`
   letter-spacing: 0.01em;
 `;
 
-const Styledhr = styled.hr`
-  color: #dadada;
-`;
+const Background = styled.div`
+    padding-top : 40px;
+    background-color : #f4f4f4;
+    color : #666;
+    padding-bottom : 40px;
+
+    .container {
+        padding : 0;
+        margin-right : auto;
+        margin-left : auto;
+
+        @media screen and (min-width: 768px) {
+            width : 750px;
+        }
+        @media screen and (min-width: 992px) {
+            width : 970px;
+        }
+        @media screen and (min-width: 1200px) {
+            width : 1170px;
+        }
+    }
+`
 
 export default function PermissionsContainer(props) {
   const { state, dispatch } = useContext(Store);
@@ -112,19 +130,13 @@ export default function PermissionsContainer(props) {
               handleClose={closeModal}
               disableBackdropClick={true}
             />
-            <div
-              style={{
-                paddingTop: "5vh",
-                paddingBottom: "5vh",
-                backgroundColor: "#f4f4f4"
-              }}
+        <Background
             >
-              <div style={{}}>
+              <div className="container">
                 <CardStyled variant="outlined">
                   <PublicationPermissionsContent handleRadios={handleRadios} />
-                  <Styledhr />
                   <CardActions
-                    style={{ justifyContent: "center", padding: "25px" }}
+                    style={{ justifyContent: "center", padding: "25px", borderTop : "2px solide #dadada" }}
                   >
                     <div>
                       <div style={{ fontSize: "14px" }}>
@@ -155,8 +167,8 @@ export default function PermissionsContainer(props) {
                             <Styledspan
                               style={
                                 unavailableButton
-                                  ? { color: "#666666" }
-                                  : { color: "#ffffff" }
+                                  ? { color: "#666666", fontWeight : "600" }
+                                  : { color: "#ffffff", fontWeight : "600" }
                               }
                             >
                               Continuar{" "}
@@ -165,10 +177,10 @@ export default function PermissionsContainer(props) {
                           <Button
                             style={{
                               marginLeft: "45px",
-                              backgroundColor: "#e9e9e9"
+                              backgroundColor: "#e9e9e9",
                             }}
                           >
-                            <Styledspan style={{ color: "rgb(102, 102, 102)" }}>
+                            <Styledspan style={{ color: "rgb(102, 102, 102)" , fontWeight : "600 !important"}}>
                               Cancelar
                             </Styledspan>
                           </Button>
@@ -178,7 +190,7 @@ export default function PermissionsContainer(props) {
                   </CardActions>
                 </CardStyled>
               </div>
-            </div>
+          </Background>
           </>
         ]
       ) : (
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 53569b8c10016a945537bfbfb5053fa31c7420cd..9ed188d5fd6539de5da9d98253e1921c5f91a3b2 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -16,16 +16,341 @@ GNU Affero General Public License for more details.
 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/>.*/
 
-import React, {Component} from 'react';
-import AboutResource from '../Components/AboutResource'
+import React, {useEffect, useState, useContext} from 'react'
+import {Store} from '../Store.js'
+import styled from 'styled-components'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../env';
+import Grid from '@material-ui/core/Grid';
+import TextoObjeto from '../Components/ResourcePageComponents/TextoObjeto.js'
+import Footer from '../Components/ResourcePageComponents/Footer.js'
+import Sobre from '../Components/ResourcePageComponents/Sobre.js'
+import CommentsArea from '../Components/ResourcePageComponents/CommentsArea.js'
+import noAvatar from "../img/default_profile.png";
+import Snackbar from '@material-ui/core/Snackbar';
+import Alert from '../Components/Alert.js';
+import VideoPlayer from '../Components/ResourcePageComponents/VideoPlayer.js'
+import LoadingSpinner from '../Components/LoadingSpinner.js'
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import ButtonAvaliarRecurso from '../Components/ButtonAvaliarRecurso'
+import ModalAvaliarRecurso from '../Components/ModalAvaliarRecurso'
+import ModalConfirmarCuradoria from '../Components/ModalConfirmarCuradoria'
+import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'
 
-class ResourcePage extends Component {
+function urlVerify (url) {
+    return (url ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 : false)
+}
 
-    render() {
-      return (
-        <AboutResource/>
-      );
+export default function LearningObjectPage (props){
+    const {state} = useContext(Store)
+    const id = props.match.params.recursoId
+    const [carregando, toggle] = useState(true)
+    const [recurso, setRecurso] = useState({})
+
+    useEffect( () => {
+        let config = {
+            headers : {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            }
+        }
+        if (state.currentUser.id !== "") {
+            config.headers["Access-Token"] = sessionStorage.getItem('@portalmec/accessToken');
+            config.headers.Client = sessionStorage.getItem('@portalmec/clientToken')
+            config.headers.Uid = sessionStorage.getItem('@portalmec/uid')
+        }
+
+        axios.get( (`${apiUrl}/learning_objects/` + id), config
+        ).then( (response) => {
+            if ( response.headers['access-token'] ) {
+                sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+            }
+            console.log(response)
+            setRecurso(response.data)
+            toggle(false)
+        }, (error) => {console.log(error);})
+    }, [, state.currentUser])
+
+
+    const [snackbarOpen, toggleSnackbar] = useState(false)
+    const handleSnackbar = (index) => {setIndex(index); toggleSnackbar(true)}
+    const snackbarText = [
+        "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!",
+        "Seu comentário foi publicado com sucesso!",
+        "Comentário editado com sucesso.",
+        "Comentário deletado com sucesso.",
+        "O Recurso foi guardado na coleção!"
+    ]
+    const [snackbarIndex, setIndex] = useState(0)
+    const classes = useStyles()
+    const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false)
+    const handleModalCuradoria = (value) => {toggleModalCuradoria(value)}
+
+    const checkAccessLevel = (levelToCheck) => {
+        if (state.currentUser.id != '') {
+            return(checkUserRole(levelToCheck))
+        }
+        else {
+            return(false)
+        }
+    }
+
+    const checkUserRole = (userRole) => {
+        return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
+    }
+
+    const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(false)
+    const handleModalConfirmarCuradoria = (value) => {toggleModalConfirmarCuradoria(value)}
+    const [reportCriteria, setReportCriteria] = useState([])
+    const [justificativa, setJustificativa] = useState('')
+    const [submissionAccepted, setSubmissionAccepted] = useState('')
+
+    const handleConfirm = (criteria, justification, accepted) => {
+        console.log('criteria: ', criteria)
+        console.log('justification: ', justification)
+        setReportCriteria(criteria)
+        setJustificativa(justification)
+        setSubmissionAccepted(accepted)
+        handleModalCuradoria(false)
+        handleModalConfirmarCuradoria(true)
     }
-  }
 
-export default ResourcePage;
+    const finalizeCuratorshipFlow = () => {
+        handleModalConfirmarCuradoria(false)
+        let config = getAxiosConfig()
+        axios.get( (`${apiUrl}/learning_objects/` + id), config
+        ).then( (response) => {
+            if ( response.headers['access-token'] ) {
+                sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+            }
+            console.log(response)
+            setRecurso(response.data)
+        }, (error) => {console.log(error);})
+    }
+
+    return (
+        <React.Fragment>
+        <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+        anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+        >
+            <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
+                {snackbarText[snackbarIndex]}
+            </Alert>
+        </Snackbar>
+
+        <ModalAvaliarRecurso open={modalCuradoriaOpen} handleClose={() => {handleModalCuradoria(false)}}
+            title={recurso.name} confirm={handleConfirm} setCriteria={setReportCriteria}
+            />
+        <ModalConfirmarCuradoria aceito={submissionAccepted} reportCriteria={reportCriteria} justificativa={justificativa} open={modalConfirmarCuradoriaOpen} handleClose={() => {handleModalConfirmarCuradoria(false)}} cancel={() => {handleModalCuradoria(true)}} recursoId={id}
+            finalizeCuratorshipFlow={finalizeCuratorshipFlow}
+            />
+        <Background>
+            {
+                carregando ?
+                (
+                    <LoadingSpinner text={"Carregando Recurso"}/>
+                )
+                :
+                (
+                    <>
+                        <Grid container spacing={2}>
+                            {
+                                recurso.object_type === "Vídeo" &&
+                                !recurso.link ?
+                                (
+                                    <Grid item xs={12}><Card>
+                                        <VideoPlayer
+                                            link={recurso.link}
+                                            urlVerified={false}
+                                            videoUrl = {recurso.default_attachment_location}
+                                            />
+                                    </Card></Grid>
+
+                                )
+                                :
+                                (
+                                    urlVerify(recurso.link) &&
+                                    <Grid item xs={12}><Card>
+                                    <VideoPlayer
+                                        link={recurso.link}
+                                        urlVerified={true}
+                                    />
+                                    </Card></Grid>
+                                )
+                            }
+
+
+                            <Grid item xs={12}>
+                                <Card>
+                                    <div>
+                                    {recurso.thumbnail &&
+                                        <img src={apiDomain + recurso.thumbnail}/>
+                                    }
+
+
+
+
+                                    <TextoObjeto
+                                        name={recurso.name}
+                                        rating={recurso.review_average}
+                                        recursoId={id}
+                                        likesCount={recurso.likes_count}
+                                        likedBool={recurso.liked}
+                                        objType={recurso.object_type}
+                                        subjects={recurso.subjects}
+                                        educationalStages={recurso.educational_stages}
+                                        viewCount={recurso.views_count}
+                                        downloadCount={recurso.downloads_count}
+                                        id={recurso.publisher ? recurso.publisher.id : undefined}
+                                        stateRecurso={recurso.state}
+                                        attachments={recurso.attachments}
+                                        audioUrl={recurso.default_attachment_location}
+                                        />
+                                    </div>
+
+
+                                    <Footer
+                                        recursoId={id}
+                                        downloadableLink = {recurso.default_attachment_location}
+                                        handleSnackbar={handleSnackbar}
+                                        link={recurso.link}
+                                        title={recurso.name}
+                                        thumb={recurso.thumbnail}
+                                        currPageLink={window.location.href}
+                                        handleSnackbar={handleSnackbar}
+                                        complained={recurso.complained}
+                                        />
+                                </Card>
+                            </Grid>
+
+                            <Grid item xs={12}>
+                                <Card>
+                                    {/*todo: change render method on additional item info*/}
+                                    <Sobre
+                                        avatar={recurso.publisher ? (recurso.publisher.avatar ? (apiDomain + recurso.publisher.avatar) : noAvatar) : noAvatar}
+                                        publisher={recurso.publisher ? recurso.publisher.name : undefined}
+                                        id={recurso.publisher ? recurso.publisher.id : undefined}
+                                        description={recurso.description}
+                                        author={recurso.author}
+                                        tags={recurso.tags}
+                                        attachments={recurso.attachments}
+                                        language={recurso.language}
+                                        mimeType={recurso.default_mime_type}
+                                        createdAt={recurso.created_at}
+                                        updatedAt={recurso.updated_at}
+                                        license={recurso.license}
+                                        />
+                                </Card>
+                            </Grid>
+
+                            {
+                                recurso.state !== "submitted" &&
+                                <Grid item xs={12}>
+                                    <Card>
+                                        {/*adicionar funcionalidade ao botao de entrar*/}
+                                        <CommentsArea
+                                            recursoId = {id}
+                                            handleSnackbar={handleSnackbar}
+                                            objType={recurso.object_type}
+                                            recurso={true}
+                                            />
+                                    </Card>
+                                </Grid>
+                            }
+                        </Grid>
+
+                        {
+                            recurso.state === 'submitted' && checkAccessLevel('curator') &&
+                            <AppBar position="fixed" color="primary" className={classes.appBar}>
+                                <StyledAppBarContainer>
+                                    <div className="container">
+                                        <div className="botoes">
+                                            <ButtonAvaliarRecurso callback={() => {handleModalCuradoria(true)}}/>
+                                        </div>
+                                    </div>
+                                </StyledAppBarContainer>
+                            </AppBar>
+                        }
+                        </>
+                )
+            }
+
+        </Background>
+        </React.Fragment>
+    )
+}
+
+const useStyles = makeStyles((theme) => ({
+  appBar: {
+    top: 'auto',
+    bottom: 0,
+    height : '100px',
+    backgroundColor : '#fff',
+    boxShadow : '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
+  },
+}));
+
+const StyledAppBarContainer = styled.div`
+    .container {
+        display : flex;
+        flex-direction : row;
+        justify-content : flex-start
+        margin-right : auto;
+        margin-left : auto;
+        @media screen and (min-width: 1200px) {
+            width : 1170px;
+        }
+        @media screen and (min-width: 992px) and (max-width : 1199px){
+            width : 970px;
+        }
+        @media screen and (min-width: 768px) and (max-width : 991px) {
+            width : 750px;
+        }
+
+        .botoes {
+            margin-top : 2em;
+            display : flex;
+            align-items : center;
+        }
+    }
+`
+
+const Background = styled.div`
+    background-color : #f4f4f4;
+    color : #666;
+    font-family : 'Roboto', sans serif;
+    padding-top : 30px;
+`
+
+const Card = styled.div`
+    background-color : #fff;
+    box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+    margin-bottom : 30px;
+    margin-right : auto;
+    margin-left : auto;
+    display : flex;
+    flex-direction : column;
+    @media screen and (min-width: 1200px) {
+        width : 1170px;
+    }
+    @media screen and (min-width: 992px) and (max-width : 1199px){
+        width : 970px;
+    }
+    @media screen and (min-width: 768px) and (max-width : 991px) {
+        width : 750px;
+    }
+
+    img {
+        background-color : #e5e5e5;
+        height : 270px;
+        width : 400px;
+        float : left;
+        padding : 0;
+        object-fit : cover;
+        @media screen and (max-width: 768px) {
+            height : auto;
+            width : 100%;
+        }
+    }
+`
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index e0b6dde2e54179074a63d3c4ab9e8e3bf81557ed..7a168814b56a521e46b8a86e5dd2155b25e168f4 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -24,13 +24,14 @@ import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import LabeledCheckbox from "../Components/Checkbox.js"
 import TermsPageContent from '../Components/TermsPageContent.js'
-
+import AppBar from '@material-ui/core/AppBar';
+import { makeStyles } from '@material-ui/core/styles';
+import {Link} from 'react-router-dom'
 const CardStyled = styled(Card)`
     box-sizing : border-box;
     background-color : white;
     max-width: 1700px;
     padding-top: 52px;
-    margin-left:7em;
     @media ${device.mobileM} {
         width : 100%;
         height : 100%;
@@ -55,14 +56,34 @@ const StyledSpanContinuar = styled.span`
     color: #fff;
 `
 
-const Styledhr = styled.hr`
-    color: #dadada;
+const Background = styled.div`
+    padding-top : 40px;
+    background-color : #f4f4f4;
+    color : #666;
+    padding-bottom : 40px;
+
+    .container {
+        padding : 0;
+        margin-right : auto;
+        margin-left : auto;
+
+        @media screen and (min-width: 768px) {
+            width : 750px;
+        }
+        @media screen and (min-width: 992px) {
+            width : 970px;
+        }
+        @media screen and (min-width: 1200px) {
+            width : 1170px;
+        }
+    }
 `
 
 export default function TermsContainer (props) {
         const {state, dispatch} = useContext(Store)
         const [checked, setChecked] = useState(false);
         const [unavailableButton, setButtonAvailability] = useState(true);
+        const classes = useStyles()
 
         const handleChecked = e => {
             setChecked(e.target.checked);
@@ -76,7 +97,7 @@ export default function TermsContainer (props) {
                 userAgreement: true
             })
 
-            if (props.location.state.redirectedFromModal) {
+            if (props.cameFromPublishButton) {
                 props.history.push('/professor')
             }else {
                 props.history.push('/permission')
@@ -85,35 +106,126 @@ export default function TermsContainer (props) {
         }
 
         return (
-                <div style={{paddingTop:"5vh", paddingBottom:"5vh", backgroundColor :"#f4f4f4"}}>
-                <div>
-                <CardStyled variant="outlined">
-                    <TermsPageContent/>
-                    <Styledhr/>
-                    <CardActions style={{justifyContent:"center", padding:"25px"}}>
-                        <div>
+                <Background>
+                <div className="container">
+                    <CardStyled variant="outlined">
+                        <TermsPageContent/>
+                    </CardStyled>
+                </div>
+                <AppBar position="fixed" color="primary" className={classes.appBar}>
+                    <StyledAppBarContainer>
+                        <div className="container">
                             <div style={{fontSize:"14px"}}>
-                                <LabeledCheckbox label={<Styledspan>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
-                                <div style={{marginLeft:"1em", paddingLeft:"16px", color:"#a0a0a0", justifyContent:"center",display:"flex"}}>
-                                    <Button disabled = {unavailableButton}
-                                        style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
-                                        onClick={handleAgreement}
-                                    >
-                                        <StyledSpanContinuar  style={unavailableButton ? {color:"#666666"} : {}}>
+                                <LabeledCheckbox label={<Styledspan style={{color : "#666", fontWeight : "600"}}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
+                            </div>
+                            <div className="botoes">
+                                <Button disabled = {unavailableButton}
+                                style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
+                                onClick={handleAgreement}
+                                >
+                                    <StyledSpanContinuar  style={unavailableButton ? {color:"#666666"} : {}}>
                                         Continuar
-                                        </StyledSpanContinuar>
-                                    </Button>
-                                    <Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
-                                        <Styledspan style={{color:"rgb(102, 102, 102)"}}>
-                                        Cancelar
-                                        </Styledspan>
-                                    </Button>
-                                </div>
+                                    </StyledSpanContinuar>
+                                </Button>
+                                <Link to="/">
+                                    <GrayButton>
+                                            Cancelar
+                                    </GrayButton>
+                                </Link>
                             </div>
                         </div>
-                    </CardActions>
-                    </CardStyled>
-                </div>
-            </div>
+                    </StyledAppBarContainer>
+                </AppBar>
+            </Background>
         )
 }
+
+const GrayButton = styled(Button)`
+    &:hover {
+        background-color : rgba(158,158,158,0.2) !important;
+    }
+    height : 36px !important;
+    font-weight : 600 !important;
+    color : #666 !important;
+    background-color: transparent;
+    min-width : 88px !important;
+    height : 36px !important;
+    margin-left : 8px !important;
+    margin-right : 8px !important;
+
+    .button-text {
+        cursor : pointer;
+        line-height : 22px;
+        text-align : center;
+        color : currentColor;
+        white-space : nowrap;
+        text-transform : uppercase;
+        font-weight : 600;
+        font-size : 15px;
+        font-style : inherit;
+        font-variant : inherit;
+        font-family: 'Roboto', sans serif;
+        letter-spacing: .01em;
+    }
+`
+
+const useStyles = makeStyles((theme) => ({
+  appBar: {
+    top: 'auto',
+    bottom: 0,
+    height : '100px',
+    backgroundColor : '#fff',
+    boxShadow : '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
+  },
+}));
+
+
+const StyledAppBarContainer = styled.div`
+    .container {
+        display : flex;
+        flex-direction : column;
+        justify-content : flex-start
+        margin-right : auto;
+        margin-left : auto;
+        padding-top : 5px;
+
+        @media screen and (min-width: 1200px) {
+            width : 1170px;
+        }
+        @media screen and (min-width: 992px) and (max-width : 1199px){
+            width : 970px;
+        }
+        @media screen and (min-width: 768px) and (max-width : 991px) {
+            width : 750px;
+            padding : 0 1em 1em 1em;
+        }
+
+        .botoes {
+            display : flex;
+            align-items : center;
+        }
+    }
+`
+
+{/*<CardActions style={{justifyContent:"center", padding:"25px", borderTop : "2px solid #dadada"}}>
+<div>
+<div style={{fontSize:"14px"}}>
+<LabeledCheckbox label={<Styledspan>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
+<div style={{marginLeft:"1em", paddingLeft:"16px", color:"#a0a0a0", justifyContent:"center",display:"flex"}}>
+<Button disabled = {unavailableButton}
+style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
+onClick={handleAgreement}
+>
+<StyledSpanContinuar  style={unavailableButton ? {color:"#666666"} : {}}>
+Continuar
+</StyledSpanContinuar>
+</Button>
+<Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
+<Styledspan style={{color:"rgb(102, 102, 102)"}}>
+Cancelar
+</Styledspan>
+</Button>
+</div>
+</div>
+</div>
+</CardActions>*/}
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..b37b9238f2b948b90ab935b77c1f24efb6afb38c
--- /dev/null
+++ b/src/Pages/UploadPage.js
@@ -0,0 +1,167 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+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/>.*/
+
+import React, {useState, useEffect, useContext} from 'react'
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../env';
+import Grid from '@material-ui/core/Grid';
+import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
+import {Store} from '../Store.js'
+import {InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
+import Stepper from '../Components/UploadPageComponents/Stepper.js'
+import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig.js'
+import PartOne from '../Components/UploadPageComponents/PartOne.js'
+import PartTwo from '../Components/UploadPageComponents/PartTwo.js'
+import PartThree from '../Components/UploadPageComponents/PartThree.js'
+import ModalLearningObjectPublished from '../Components/ModalLearningObjectPublished.js'
+import {Background} from '../Components/UploadPageComponents/StyledComponents'
+import LoadingSpinner from '../Components/LoadingSpinner.js'
+import {Redirect} from 'react-router-dom'
+
+export default function UploadPage (props) {
+    const {state} = useContext(Store)
+
+    {/*Object : link or file uploaded*/}
+    const [object, setObject] = useState()
+
+    const [loading, toggleLoading] = useState(true)
+    const [draft, setDraft] = useState({})
+    useEffect( () => {
+        if (state.currentUser.id !== "") {
+            const config = getAxiosConfig()
+            let payload = {}
+            axios.post( (`${apiUrl}/learning_objects/`), payload, config
+            ).then( (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                setDraft(response.data)
+                toggleLoading(false)
+                console.log(response)
+            }, (error) => {console.log(error)})
+        }
+    }, [])
+
+    const [activeStep, setActiveStep] = React.useState(0);
+    const stepperControl=(increment)=>{setActiveStep(activeStep + increment)}
+
+    const [objectSubmitted, toggleModal] = useState(false)
+    const handleModal = (value) => {toggleModal(value)}
+
+    const handlePost = () => {
+        if (state.currentUser.id !== "") {
+            const config = getAxiosConfig()
+            let payload = {}
+            axios.post( (`${apiUrl}/learning_objects/` + draft.id + '/publish'), payload, config
+            ).then( (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                handleModal(true)
+                console.log(response)
+
+            }, (error) => {console.log(error)})
+        }
+    }
+
+    const handleSubmit = () => {
+        if (state.currentUser.id !== "") {
+            const config = getAxiosConfig()
+            let payload = {
+                "submission" : {
+                    "learning_object_id" : draft.id
+                }
+            }
+
+            axios.post( (`${apiUrl}/submissions/`), payload, config
+            ).then( (response) => {
+                if ( response.headers['access-token'] ) {
+                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+                }
+                handleModal(true)
+                console.log(response)
+
+            }, (error) => {console.log(error)})
+        }
+    }
+
+    return (
+        <React.Fragment>
+            {
+                state.currentUser.id === '' &&
+                <Redirect to="/"/>
+            }
+            {
+                loading === true ?
+                (
+                    <LoadingSpinner text={"CARREGANDO..."}/>
+                )
+                :
+                (
+                    <>
+                    <ModalLearningObjectPublished
+                        open={objectSubmitted}
+                        handleClose={() => {toggleModal(false); props.history.push('/')}}
+                        draftID={draft.id}
+                        />
+                    {
+                        activeStep === 2 ?
+                        (
+                            <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit}/>
+                        )
+                        :
+                        (
+                            <Background>
+                                <div className="container">
+                                    <Grid container spacing={2}>
+                                        <Grid item md={4} xs={12}>
+                                            <UploadFileWrapper draftID={draft.id}/>
+                                        </Grid>
+                                        <Grid item md={8} xs={12}>
+                                            <InfoBox>
+                                                <div className="cabecalho">
+                                                    <h2>Informações sobre o Recurso</h2>
+                                                    <div className="feedback-upload">
+                                                        <Stepper activeStep={activeStep}/>
+                                                    </div>
+                                                </div>
+                                                {
+                                                    activeStep === 0 &&
+                                                    <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+                                                        <PartOne draftID={draft.id} stepperControl={stepperControl}/>
+                                                    </Grid>
+                                                }
+                                                {
+                                                    activeStep === 1 &&
+                                                    <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+                                                        <PartTwo draftID={draft.id} stepperControl={stepperControl}/>
+                                                    </Grid>
+                                                }
+                                            </InfoBox>
+                                        </Grid>
+                                    </Grid>
+                                </div>
+                            </Background>
+                        )
+                    }
+                    </>
+                )
+    }
+    </React.Fragment>
+)
+}
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 2beb4cb68731153beee32e433844cc44ae47e1e4..2835ae0a11345d45b45f7e4b1404132ec8804b68 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -18,16 +18,8 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 
 import React, {useState, useContext, useEffect} from 'react';
 import styled from 'styled-components'
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import PhotoCamera from '@material-ui/icons/PhotoCamera';
-import Tooltip from '@material-ui/core/Tooltip';
 import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-import {Link} from 'react-router-dom';
-import Popover from '@material-ui/core/Popover';
 import { Store } from '../Store.js';
-import EditIcon from '@material-ui/icons/Edit';
-import CheckDecagram from '../img/check-decagram-gray.svg'
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Paper from '@material-ui/core/Paper';
@@ -39,105 +31,15 @@ import TabPanelColecoes from '../Components/TabPanels/UserPageTabs/PanelColecoes
 import TabPanelRede from '../Components/TabPanels/UserPageTabs/PanelRede.js'
 import TabPanelStatusEConquistas from '../Components/TabPanels/TabPanelStatusEConquistas.js'
 import TabPanelCuradoria from '../Components/TabPanels/UserPageTabs/PanelCuradoria.js'
-
 import axios from 'axios'
 import {apiUrl, apiDomain} from '../env';
-import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
 import Grid from '@material-ui/core/Grid';
-import noAvatar from "../img/default_profile.png";
-import {HeaderContainer, UserProfileContainer, UserProfileInfoDiv, CoverContainer, CheckTeacherDiv, StyledTabs, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
-
-const PageCover = (currentCover, updateCover) => {
-    //displays current user cover and lets them upload a new cover
-    //on accepting file input, calls coverModal to handle further customization
-    return (
-        <CoverContainer>
-            {currentCover && <img src={apiDomain + currentCover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
-            <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e)}/>
-            <label htmlFor="icon-button-file">
-                <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
-                    <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
-                        <PhotoCamera />
-                    </IconButton>
-                </Tooltip>
-            </label>
-        </CoverContainer>
-    )
-}
-
-const ProfileAvatar = (currentAvatar, hoverTrue, handleHoverAlterarFoto, modalControl) => {
-    //display current user avatar and lets them upload a new one
-    //on click, calls AvatarModal to handle file selection
-    return (
-        <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto} onClick={modalControl}>
-            <img src={currentAvatar ? apiDomain + currentAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
-            <ChangeAvatarDiv  style={ {display : hoverTrue ? 'flex' : 'none'}}>
-                <span>Alterar Foto</span>
-            </ChangeAvatarDiv>
-        </ProfileAvatarDiv>
-    )
-}
-
-const UserProfileInfo = (user, education) => {
-    return (
-        <UserProfileInfoDiv>
-            <p style={{fontSize:"28px", color:"#fff", paddingTop:"5px", paddingBottom:"5px", fontWeight:"500", backgroundColor:"#77777796", borderRadius : "5px"}}>{user}</p>
-            <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
-                <p>{education}</p>
-            </div>
-        </UserProfileInfoDiv>
-    )
-}
-
-const EditProfileButton = () => {
-    const {state} = React.useContext(Store)
-    return (
-        <EditProfileAnchor to="/editarperfil">
-            <Button>
-                {state.windowSize.width >=900 ?
-                    (
-                        <React.Fragment>
-                            <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
-                        </React.Fragment>
-                    )
-                    :
-                    (
-                        <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
-                    )
-                }
-            </Button>
-        </EditProfileAnchor>
-    )
-}
-
-const SubmitterStatus = (status) => {
-    let text;
-    switch (status) {
-        case 'requested':
-            text = "Verificando cadastro de professor(a)"
-            break;
-        case 'accepted':
-            text = "Professor(a)"
-            break;
-        default:
-            text = "Você é professor(a) e gostaria de publicar recursos?"
-    }
-
-    return (
-        <React.Fragment>
-            <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
-                <span style={{cursor:"pointer"}}>
-                                <span style={{paddingRight:"5px"}}>
-                                    <img src={CheckDecagram}/>
-                                </span>
-                                {text}
-                                <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
-                </span>
-            </p>
-        </React.Fragment>
-    )
-
-}
+import {HeaderContainer, UserProfileContainer, CheckTeacherDiv, StyledTabs, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
+    import Cover from '../Components/UserPageComponents/Cover.js'
+import ProfileAvatar from '../Components/UserPageComponents/Avatar.js'
+import UserInfo from '../Components/UserPageComponents/UserInfo.js'
+import EditProfileButton from '../Components/UserPageComponents/EditProfileButton.js'
+import SubmitterStatus from '../Components/UserPageComponents/SubmitterStatus.js'
 
 const GetHeaderConfig = () => {
 
@@ -157,26 +59,16 @@ const GetHeaderConfig = () => {
 
 export default function UserPage (props){
     const {state, dispatch} = useContext(Store)
-    const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
+    const id = state.currentUser.id
+
     const [tabValue, setTabValue] = useState(
         Number(props.location.state) || 0
     );
     const [tabs, setTabs] = useState([
         'Atividades', 'Status e Conquistas', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
     ])
-    {/*sessionStorage.getItem('@portalmec/username')*/}
-    const user = state.currentUser.username
-    {/*sessionStorage.getItem('@portalmec/id')*/}
-    const id = state.currentUser.id
-    const [modalOpen, handleModal] = useState(false)
-    const [coverImg, setCoverImg] = useState(state.currentUser.userCover)
-
-    const modalControl = () => {
-        handleModal(!modalOpen)
-    }
-
-    const handleHoverAlterarFoto = () => {
-        handleAlterarFoto(!hoverAlterarFoto)
+    const handleChangeTab = (event, newValue) => {
+        setTabValue(newValue)
     }
 
     useEffect( () => {
@@ -189,21 +81,7 @@ export default function UserPage (props){
         })
         .then( (response) => {
             console.log(response)
-                dispatch ({
-                    type : 'USER_ACCESSED_USER_PAGE',
-                    set: {
-                        id : response.data.id,
-                        email : response.data.email,
-                        username : response.data.name,
-                        accessToken : response.headers['access-token'],
-                        clientToken : state.currentUser.clientToken,
-                        userAvatar : response.data.avatar,
-                        userCover : response.data.cover,
-                        followCount : response.data.follow_count,
-                        collectionsCount: response.data.collections_count,
-                        submitter_request : response.data.submitter_request,
-                    }
-                })
+                
                 if((response.data.role_ids.includes(4))) {
                     setTabs([
                         'Atividades', 'Status e Conquistas', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
@@ -220,19 +98,6 @@ export default function UserPage (props){
         props.history.push('/')
     }
 
-    const handleChangeTab = (event, newValue) => {
-        setTabValue(newValue)
-    }
-
-    const updateCover = (selectorFiles : FileList) => {
-        const objectURL = URL.createObjectURL(selectorFiles[0])
-        console.log(objectURL)
-        //setCoverImg(img)
-        //modal selecionar posicao do coverImg
-
-
-    }
-
     return (
         <>
         <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
@@ -257,17 +122,14 @@ export default function UserPage (props){
                                     <div style={{padding : "10px 0 8px 0"}}>
                                         <UserProfileContainer>
                                             <HeaderContainer>
-                                                {PageCover(state.currentUser.userCover, (e) => updateCover(e.target.files))}
-
-                                                {ProfileAvatar(state.currentUser.userAvatar, hoverAlterarFoto, handleHoverAlterarFoto, modalControl)}
-
-                                                {UserProfileInfo(user, state.currentUser.education)}
-
-                                                {EditProfileButton()}
+                                                <Cover id={id}/>
+                                                <ProfileAvatar id={id}/>
+                                                <UserInfo/>
+                                                <EditProfileButton/>
                                             </HeaderContainer>
 
                                             <CheckTeacherDiv>
-                                                {SubmitterStatus(state.currentUser.submitter_request)}
+                                                <SubmitterStatus />
                                             </CheckTeacherDiv>
 
                                             <RodapeDiv>
@@ -328,62 +190,6 @@ export default function UserPage (props){
   }
 
 
-const ProfileAvatarDiv = styled.div`
-    bottom : -65px;
-    left : 60px;
-    border-radius : 100%;
-    position : absolute;
-    width : 150px;
-    height : 150px;
-    overflow : hidden;
-    border : 8px solid #fff;
-    outline : 0;
-    cursor : pointer;
-    background-color : #a5a5a5;
-`
-
-export const ChangeAvatarDiv = styled.div`
-  height : 40px;
-  position: absolute;
-  width : 100%;
-  bottom : 0;
-  display : flex;
-  background-color : #000;
-  color : #fff;
-  justify-content : center;
-`
-
-
-const EditProfileAnchor = styled(Link)`
-  Button {
-      box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
-      background-color : #fafafa;
-      position : absolute;
-      right : 5px;
-      bottom : 0;
-      margin-bottom : 20px;
-      color : #666;
-      padding : 0 10px;
-      text-decoration : none;
-      border-radius : 3px;
-      @media screen and (min-width: 800px) {
-          min-height : 36px;
-          min-width : 88px;
-      }
-      line-height : 36px;
-      border : 0;
-      display: inline-block;
-      text-align : center;
-      :hover{
-        background-color : #fafafa;
-      }
-      @media screen and (max-width: 600px) {
-          max-width : 44px !important ;
-      }
-  }
-`
-
-
 const StyledTab = styled(Tab)`
     .Mui-selected {
         border-bottom-color : #00bcd4 !important;
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 4c9562b1141c286e14c1e79d7af40f43ca4c067f..ad0dead21f5d83f11b46a41287905ec38f6763a3 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -212,7 +212,7 @@ class UserTerms extends Component {
 
       return (
         <div style={{color:"rgba(0,0,0,0.87"}} >
-        
+
 
           <BannerStyle>
             <h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"6rem",marginBottom:"16px",fontSize:"52px",fontFamily: "'Pompiere', cursive",color:"#fff",fontWeight:"500"}}>TERMOS DE USO</h2>
diff --git a/src/Store.js b/src/Store.js
index 8a8c0e961ad7fa2828bc64695ffa0613430cb959..2d5aaa81d7419740f6f4a34618975773ea836cac 100644
--- a/src/Store.js
+++ b/src/Store.js
@@ -35,6 +35,7 @@ const initialState = {
     height: 0
 },
   currentUser: {
+      askTeacherQuestion : true,
       id : '',
       username : '',
       email : '',
@@ -45,7 +46,8 @@ const initialState = {
       uid : '',
       followCount : 0,
       collectionsCount : 0,
-      submitter_request : 'default'
+      submitter_request : 'default',
+      roles : []
   }
 }
 
@@ -99,6 +101,11 @@ function reducer(state, action) {
             ...state,
             currentUser : action.set
         }
+    case 'USER_CHANGED_COVER':
+        return {
+            ...state,
+            currentUser : action.currUser
+        }
     default:
       return state
   }
diff --git a/src/img/cc_license.png b/src/img/cc_license.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcb047a53b1ae83749aabc59ba93fbe4646d23f3
Binary files /dev/null and b/src/img/cc_license.png differ
diff --git a/src/img/ecd.png b/src/img/ecd.png
new file mode 100644
index 0000000000000000000000000000000000000000..46b6ccc37527909668b77dbcb1cfcd2b9eedf7c1
Binary files /dev/null and b/src/img/ecd.png differ
diff --git a/src/img/facebook.svg b/src/img/facebook.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9f26683d6c6e48183deb7869d12add3da9324834
--- /dev/null
+++ b/src/img/facebook.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 50C38.8071 50 50 38.8071 50 25C50 11.1929 38.8071 0 25 0C11.1929 0 0 11.1929 0 25C0 38.8071 11.1929 50 25 50Z" fill="#3B5998"/>
+<path d="M31.2852 25.9792H26.8242V42.322H20.0655V25.9792H16.8511V20.2357H20.0655V16.519C20.0655 13.8611 21.3281 9.69922 26.8844 9.69922L31.8908 9.72016V15.2952H28.2583C27.6625 15.2952 26.8247 15.5929 26.8247 16.8608V20.241H31.8757L31.2852 25.9792Z" fill="white"/>
+</svg>
diff --git a/src/img/link_icon.svg b/src/img/link_icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5f2d96763de83f27ecc3a3774c1570813419e7d9
--- /dev/null
+++ b/src/img/link_icon.svg
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F4F4F4;}
+	.st1{fill:none;}
+	.st2{fill:#1BB8D1;}
+	.st3{opacity:0.2;fill:#5E5E5E;}
+	.st4{fill:#3D3D3D;}
+	.st5{fill:none;stroke:#879AA2;stroke-miterlimit:10;stroke-dasharray:3;}
+	.st6{fill:none;stroke:#F07D1A;stroke-miterlimit:10;}
+	.st7{fill:none;stroke:#B5B4B4;stroke-width:0.5;stroke-miterlimit:10;}
+	.st8{fill:#F07D1A;}
+	.st9{fill:#FFFFFF;}
+	.st10{fill:#CBD4D7;stroke:#B5B4B4;stroke-width:0.5;stroke-miterlimit:10;}
+	.st11{fill:#1DB8D1;}
+	.st12{fill:#879AA2;}
+	.st13{fill:none;stroke:#879AA2;stroke-miterlimit:10;}
+	.st14{fill:none;stroke:#879AA2;stroke-miterlimit:10;stroke-dasharray:2.9932,2.9932;}
+	.st15{fill:none;stroke:#879AA2;stroke-miterlimit:10;stroke-dasharray:2.9723,2.9723;}
+	.st16{fill:#FCD7B2;}
+	.st17{fill:none;stroke:#F07D1A;stroke-width:5;stroke-miterlimit:10;}
+	.st18{fill:#5E5E5E;}
+	.st19{fill:none;stroke:#879AA2;stroke-width:1.5;stroke-miterlimit:10;}
+	.st20{fill:none;stroke:#879AA2;stroke-width:2;stroke-miterlimit:10;}
+	.st21{fill:none;stroke:#5E5E5E;stroke-width:3;stroke-miterlimit:10;}
+	.st22{fill:none;stroke:#879AA2;stroke-width:0.5;stroke-miterlimit:10;}
+	.st23{fill:#EEF0F2;}
+	.st24{fill:#EEF0F2;stroke:#879AA2;stroke-width:0.5;stroke-miterlimit:10;}
+	.st25{fill:none;stroke:#CBD4D7;stroke-miterlimit:10;}
+	.st26{fill:#B6DFE9;}
+	.st27{fill:none;stroke:#879AA2;stroke-miterlimit:10;stroke-dasharray:3.0202,3.0202;}
+	.st28{fill:none;stroke:#879AA2;stroke-miterlimit:10;stroke-dasharray:2.9409,2.9409;}
+	.st29{fill:#CBD4D7;}
+	.st30{fill:none;stroke:#B5B4B4;stroke-width:0.5;stroke-linecap:round;stroke-miterlimit:10;}
+	.st31{fill:#525252;}
+	.st32{fill:none;stroke:#1BB8D1;stroke-miterlimit:10;}
+	.st33{fill:#B53F8F;}
+	.st34{fill:none;stroke:#B53F8F;stroke-width:2;stroke-miterlimit:10;}
+	.st35{fill:none;stroke:#CBD4D7;stroke-width:1.4;stroke-miterlimit:10;}
+	.st36{fill:none;stroke:#1BB8D1;stroke-miterlimit:10;stroke-dasharray:3;}
+	.st37{fill:#D9D9D9;}
+	.st38{fill:none;stroke:#CBD4D7;stroke-width:1.8;stroke-miterlimit:10;}
+	.st39{fill:#FBFBFB;}
+	.st40{fill:#F07E1B;}
+	.st41{fill:#EEF0F1;}
+	.st42{fill:none;stroke:#F07E1B;stroke-width:1.5;stroke-miterlimit:10;}
+	.st43{fill:none;stroke:#E6007E;stroke-miterlimit:10;}
+	.st44{opacity:0.4;fill:#05080A;}
+	.st45{opacity:0.6;fill:#05080A;}
+	.st46{display:none;}
+	.st47{fill:none;stroke:#E6007E;stroke-width:3;stroke-miterlimit:10;}
+	.st48{fill:none;stroke:#E31E17;stroke-miterlimit:10;}
+	.st49{display:inline;fill:none;stroke:#010202;stroke-linecap:round;stroke-miterlimit:10;}
+	.st50{display:inline;fill:none;stroke:#C11718;stroke-width:1.6;stroke-miterlimit:10;}
+</style>
+<g id="BG_1_">
+</g>
+<g id="BG">
+</g>
+<g id="Cards">
+</g>
+<g id="Camada_11">
+</g>
+<g id="Elementos">
+	<g id="ic_x5F_inbox">
+	</g>
+	<g>
+		<g>
+			<g>
+				<path class="st29" d="M12.3,50c-2.8,0-5.4-1.1-7.4-3.1l-1.8-1.8c-2-2-3.1-4.6-3.1-7.4c0-2.8,1.1-5.4,3.1-7.4l11.8-11.8
+					c2-2,4.6-3.1,7.4-3.1c2.8,0,5.4,1.1,7.4,3.1l1.8,1.8l-2,2l-1.8-1.8c-1.4-1.4-3.3-2.2-5.4-2.2c-2,0-3.9,0.8-5.4,2.2L5.1,32.4
+					c-1.4,1.4-2.2,3.3-2.2,5.4c0,2,0.8,3.9,2.2,5.4l1.8,1.8c1.4,1.4,3.3,2.2,5.4,2.2c2,0,3.9-0.8,5.4-2.2l8.2-8.2l2,2l-8.2,8.2
+					C17.7,48.9,15,50,12.3,50z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<path class="st29" d="M27.7,34.5c-2.8,0-5.4-1.1-7.4-3.1l2-2c1.4,1.4,3.3,2.2,5.4,2.2c2,0,3.9-0.8,5.4-2.2l11.8-11.8
+					c1.4-1.4,2.2-3.3,2.2-5.4s-0.8-3.9-2.2-5.4L43.1,5c-3-3-7.8-3-10.7,0l-8.2,8.2l-2-2L30.4,3C34.4-1,41.1-1,45.1,3l1.8,1.8
+					c2,2,3.1,4.6,3.1,7.4c0,2.8-1.1,5.4-3.1,7.4L35.1,31.5C33.1,33.4,30.5,34.5,27.7,34.5z"/>
+			</g>
+		</g>
+	</g>
+</g>
+<g id="Camada_7">
+</g>
+<g id="Guides2" class="st46">
+</g>
+<g id="Especificações">
+</g>
+<g id="Guides" class="st46">
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_animacao.svg b/src/img/object_type_icons/object-type_animacao.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bcf7537f396b2e27b76fdde7792cd2fd0993ff24
--- /dev/null
+++ b/src/img/object_type_icons/object-type_animacao.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<rect x="2.8" y="38.6" class="st1" width="15.5" height="1.5"/>
+	<polygon class="st1" points="17.5,23.3 2.8,23.3 2.8,24.8 17.5,24.8 17.5,31.8 19,31.8 19,16.3 17.5,16.3 	"/>
+	<polygon class="st1" points="24.2,31.6 22.7,31.6 22.7,47.1 24.2,47.1 24.2,40.1 49.2,40.1 49.2,38.6 24.2,38.6 	"/>
+	<polygon class="st1" points="34.5,7.8 34.5,0.8 33,0.8 33,16.3 34.5,16.3 34.5,9.3 49.2,9.3 49.2,7.8 	"/>
+	<rect x="23.5" y="23.3" class="st1" width="25.7" height="1.5"/>
+	<rect x="2.8" y="7.8" class="st1" width="25.7" height="1.5"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_aplicativo-movel.svg b/src/img/object_type_icons/object-type_aplicativo-movel.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2b6a3c2f802bf7eb3e1844c53ba9f3a0cf2c5be0
--- /dev/null
+++ b/src/img/object_type_icons/object-type_aplicativo-movel.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M34.4,2.4H17.6c-2.6,0-4.8,2.1-4.8,4.8v33.6c0,2.6,2.1,4.8,4.8,4.8h16.9c2.6,0,4.8-2.1,4.8-4.8V7.2
+		C39.2,4.5,37.1,2.4,34.4,2.4z M14.3,8.3h23.4v29.6H14.3V8.3z M17.6,3.9h16.9c1.8,0,3.3,1.5,3.3,3.3v0.1H14.3V7.2
+		C14.3,5.4,15.8,3.9,17.6,3.9z M34.4,44H17.6c-1.8,0-3.3-1.5-3.3-3.3v-1.9h23.4v1.9C37.7,42.5,36.2,44,34.4,44z"/>
+	<path class="st1" d="M28.4,40.4h-4.7c-0.6,0-1,0.4-1,1s0.4,1,1,1h4.7c0.6,0,1-0.4,1-1S28.9,40.4,28.4,40.4z"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_apresentacao.svg b/src/img/object_type_icons/object-type_apresentacao.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7dc07625646842e55faea44dccffe6d9237e661d
--- /dev/null
+++ b/src/img/object_type_icons/object-type_apresentacao.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M49.3,5.1h-2.3c-0.1,0-0.2,0-0.3,0H41h-9.7C31,2.6,28.7,0.5,26,0.5c-2.7,0-5,2-5.3,4.6H7.3h-2
+		c-0.1,0-0.2,0-0.3,0H2.8C2.3,5.1,2,5.5,2,5.9v0c0,0.4,0.3,0.8,0.8,0.8h1.6v29.5c0,0.4,0.3,0.8,0.8,0.8h12.4l-2.8,9.5
+		c0,0.1,0,0.1,0,0.2c0,0.3,0.2,0.6,0.5,0.7c0.4,0.1,0.8-0.1,0.9-0.5l3-9.9h14l3,9.9c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.1,0,0.2,0
+		c0.3-0.1,0.5-0.4,0.5-0.7c0-0.1,0-0.1,0-0.2l-2.8-9.5h12.4c0.4,0,0.8-0.3,0.8-0.8V6.7h1.6c0.4,0,0.8-0.4,0.8-0.8S49.7,5.1,49.3,5.1
+		z M26,2c1.9,0,3.5,1.4,3.8,3.1h-7.6C22.5,3.4,24.1,2,26,2z M46.2,35.4H33.6H5.8V6.7h1.5h14h9.3H41h5.2V35.4z"/>
+	<path class="st1" d="M9.2,10.6v20.9c0,0.3,0.2,0.5,0.5,0.5h32.6c0.3,0,0.5-0.2,0.5-0.5V10.6c0-0.3-0.2-0.5-0.5-0.5H9.7
+		C9.4,10.1,9.2,10.3,9.2,10.6z M10.2,11.1h31.6V31H10.2V11.1z"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_audio.svg b/src/img/object_type_icons/object-type_audio.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c7905aececcf6588df174d6e92c322d8ffe515fd
--- /dev/null
+++ b/src/img/object_type_icons/object-type_audio.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M42.6,9.4c-3.3-4.1-7.7-6.8-12.9-8c-0.4-0.1-0.8,0.1-0.9,0.5c-0.1,0.4,0.1,0.8,0.5,0.9c4.9,1.2,9,3.7,12.1,7.5
+		c3.1,3.8,4.7,8.4,4.8,13.6c-0.1,5.3-1.7,9.9-4.8,13.7c-3.1,3.8-7.2,6.3-12.1,7.5c-0.4,0.1-0.6,0.5-0.5,0.9c0.1,0.3,0.4,0.6,0.7,0.6
+		c0.1,0,0.1,0,0.2,0c5.2-1.3,9.5-4,12.9-8c3.3-4.1,5.1-9,5.2-14.6C47.7,18.3,46,13.4,42.6,9.4z"/>
+	<path class="st1" d="M29.2,33.2c-0.4,0.2-0.5,0.6-0.4,1c0.1,0.3,0.4,0.4,0.7,0.4c0.1,0,0.2,0,0.3-0.1c2-0.9,3.6-2.3,4.8-4.2
+		c1.2-1.9,1.8-4,1.8-6.4s-0.6-4.6-1.8-6.4c-1.2-1.9-2.8-3.3-4.8-4.3c-0.4-0.2-0.8,0-1,0.3c-0.2,0.4,0,0.8,0.3,1
+		c1.7,0.9,3.2,2.1,4.2,3.8c1,1.6,1.6,3.5,1.6,5.6s-0.5,4-1.6,5.6C32.4,31.2,31,32.4,29.2,33.2z"/>
+	<path class="st1" d="M24.8,3.2c-0.3-0.1-0.6-0.1-0.8,0.2L11.8,15.6H5c-0.4,0-0.8,0.3-0.8,0.8v15c0,0.4,0.3,0.8,0.8,0.8h6.6L24,44.5
+		c0.1,0.1,0.3,0.2,0.5,0.2c0.1,0,0.2,0,0.3-0.1c0.3-0.1,0.5-0.4,0.5-0.7V3.9C25.3,3.6,25.1,3.3,24.8,3.2z M5.7,17.1H8V21
+		c0,0.3,0.2,0.5,0.5,0.5S9,21.3,9,21v-3.9h2.3v13.5H9v-3.9c0-0.3-0.2-0.5-0.5-0.5S8,26.4,8,26.7v3.9H5.7V17.1z M23.8,42.2l-11-11
+		V16.8l11-11V42.2z"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_imagem.svg b/src/img/object_type_icons/object-type_imagem.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c6cc9fa5b8312e4843289c51d4e3b6af95ee1e5b
--- /dev/null
+++ b/src/img/object_type_icons/object-type_imagem.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M47.5,2.3c-1.1-1.1-2.5-1.6-4.1-1.6H8.5c-1.6,0-3,0.6-4.1,1.7C3.3,3.5,2.8,4.9,2.8,6.5v34.9
+		c0,1.6,0.6,3,1.7,4.1c1.1,1.1,2.5,1.7,4.1,1.7h35c1.6,0,2.9-0.6,4-1.7c1.1-1.1,1.7-2.5,1.7-4.1V6.5C49.3,4.8,48.6,3.4,47.5,2.3z
+		 M47.6,41.3c0,1.2-0.4,2.2-1.2,3c-0.8,0.8-1.8,1.2-3,1.2H8.5c-1.2,0-2.2-0.4-3-1.2s-1.2-1.8-1.2-3V6.4c0-1.2,0.4-2.2,1.2-3
+		s1.8-1.2,3-1.2h34.8c1.3,0,2.3,0.4,3.1,1.2c0.8,0.8,1.2,1.8,1.2,3.1V41.3z"/>
+	<path class="st1" d="M23.5,34l-6.3-7.5L7,39.7h38l-12.8-17L23.5,34z M10.1,38.2l7.2-9.3l6.3,7.5l8.6-11.2l9.8,13H10.1z"/>
+	<path class="st1" d="M37.8,36c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.2,0,0.3-0.1c0.2-0.2,0.3-0.5,0.1-0.7l-5.3-6.7
+		c-0.2-0.2-0.5-0.3-0.7-0.1c-0.2,0.2-0.3,0.5-0.1,0.7L37.8,36z"/>
+	<path class="st1" d="M13.6,20.2c2.3,0,4.3-1.9,4.3-4.3s-1.9-4.3-4.3-4.3S9.4,13.7,9.4,16S11.3,20.2,13.6,20.2z M13.6,13.2
+		c1.5,0,2.8,1.2,2.8,2.8s-1.2,2.8-2.8,2.8s-2.8-1.2-2.8-2.8S12.1,13.2,13.6,13.2z"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_infografico.svg b/src/img/object_type_icons/object-type_infografico.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b17502d0cc1b45ac62b4d5193f272452e66bc99e
--- /dev/null
+++ b/src/img/object_type_icons/object-type_infografico.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 72 47.7" style="enable-background:new 0 0.1 72 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.2" class="st0" width="71.9" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<rect x="46.1" y="36.3" class="st1" width="24.1" height="1"/>
+	<rect x="46.1" y="29" class="st1" width="24.1" height="1"/>
+	<rect x="46.1" y="21.7" class="st1" width="24.1" height="1"/>
+	<rect x="46.1" y="14.4" class="st1" width="24.1" height="1"/>
+	<path class="st1" d="M23.4,20.8c0.1,0,0.2,0,0.3-0.1l13.9-8c0.1-0.1,0.2-0.2,0.2-0.3s0-0.3-0.1-0.4c-3.2-4.8-8.5-7.9-14.3-8.2
+		c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.2-0.2,0.4v16c0,0.2,0.1,0.3,0.3,0.4C23.2,20.8,23.3,20.8,23.4,20.8z M23.9,4.8
+		c5.1,0.4,9.8,3.1,12.7,7.3l-12.7,7.3V4.8z"/>
+	<path class="st1" d="M36.3,17c-0.2-0.1-0.4,0-0.6,0.1L20.4,26l0,0l-0.3,0.2v-18c0-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.4-0.2-0.6-0.2
+		C9.5,7.9,1.8,16,1.8,25.8c0,10.2,8.3,18.5,18.5,18.5S38.7,36,38.7,25.8c0-2.9-0.7-5.7-2-8.4C36.6,17.2,36.5,17.1,36.3,17z
+		 M20.3,42.7c-9.4,0-17-7.6-17-17c0-8.7,6.6-16,15.3-16.9v18.5c0,0.3,0.1,0.5,0.4,0.6c0.2,0.1,0.5,0.1,0.8,0l1.4-0.8h0l14.6-8.4
+		c1,2.2,1.5,4.5,1.5,7C37.2,35.1,29.6,42.7,20.3,42.7z"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_jogo.svg b/src/img/object_type_icons/object-type_jogo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5f924ad9d8ea29e38cc7ac447a328d1defe7788f
--- /dev/null
+++ b/src/img/object_type_icons/object-type_jogo.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M34.2,28.5c-2.1,0-3.9,1.7-3.9,3.9c0,2.1,1.7,3.9,3.9,3.9s3.9-1.7,3.9-3.9C38.1,30.2,36.3,28.5,34.2,28.5z
+		 M34.2,34.7c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4s2.4,1.1,2.4,2.4C36.6,33.6,35.5,34.7,34.2,34.7z"/>
+	<path class="st1" d="M40.4,22.3c-2.1,0-3.9,1.7-3.9,3.9s1.7,3.9,3.9,3.9c2.1,0,3.9-1.7,3.9-3.9S42.5,22.3,40.4,22.3z M40.4,28.5
+		c-1.3,0-2.4-1.1-2.4-2.4s1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4S41.7,28.5,40.4,28.5z"/>
+	<path class="st1" d="M19.6,26.5h-3.1v-3.1c0-0.4-0.3-0.8-0.8-0.8h-3.9c-0.4,0-0.8,0.3-0.8,0.8v3.1H7.9c-0.4,0-0.8,0.3-0.8,0.8v3.9
+		c0,0.4,0.3,0.8,0.8,0.8H11v3.1c0,0.4,0.3,0.8,0.8,0.8h3.9c0.4,0,0.8-0.3,0.8-0.8v-3.1h3.1c0.4,0,0.8-0.3,0.8-0.8v-3.9
+		C20.3,26.8,20,26.5,19.6,26.5z M18.8,30.4h-3.1c-0.4,0-0.8,0.3-0.8,0.8v3.1h-2.4v-3.1c0-0.4-0.3-0.8-0.8-0.8H8.6V28h3.1
+		c0.4,0,0.8-0.3,0.8-0.8v-3.1h2.4v3.1c0,0.4,0.3,0.8,0.8,0.8h3.1V30.4z"/>
+	<path class="st1" d="M37.3,14.9H14.7c-7.9,0-14.3,6.4-14.3,14.3c0,7.9,6.4,14.3,14.3,14.3c4,0,7.7-1.6,10.4-4.5h1.7
+		c2.7,2.9,6.5,4.5,10.4,4.5c7.9,0,14.3-6.4,14.3-14.3C51.6,21.3,45.2,14.9,37.3,14.9z M37.3,42c-3.6,0-7.1-1.6-9.5-4.3
+		c-0.1-0.2-0.3-0.3-0.6-0.3h-2.4c-0.2,0-0.4,0.1-0.6,0.3c-2.4,2.7-5.9,4.3-9.5,4.3C7.6,42,1.9,36.3,1.9,29.2
+		c0-7.1,5.8-12.8,12.8-12.8h22.6c7.1,0,12.8,5.8,12.8,12.8C50.1,36.3,44.4,42,37.3,42z"/>
+	<path class="st1" d="M34.8,10.9c9.8,0,9.9-6.4,9.9-6.5h-1.5c0,0-0.1,5-8.4,5c-9.7,0-9.8,4.5-9.8,4.7l1.5,0
+		C26.4,14,26.7,10.9,34.8,10.9z"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_livro-digital.svg b/src/img/object_type_icons/object-type_livro-digital.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b3cafb622f6598da72fe44f7a9c2e54ff9399386
--- /dev/null
+++ b/src/img/object_type_icons/object-type_livro-digital.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M10.8,38.2h30.3V5.9H10.8V38.2z M12.3,7.4h27.3v29.3H12.3V7.4z"/>
+	<path class="st1" d="M39.5,0.1H12.5C9.5,0.1,7,2.6,7,5.7v36.5c0,3.1,2.5,5.6,5.6,5.6h26.9c3.1,0,5.6-2.5,5.6-5.6V5.7
+		C45,2.6,42.5,0.1,39.5,0.1z M43.5,42.2c0,2.2-1.8,4.1-4.1,4.1H12.5c-2.2,0-4.1-1.8-4.1-4.1V5.7c0-2.2,1.8-4.1,4.1-4.1h26.9
+		c2.2,0,4.1,1.8,4.1,4.1V42.2z"/>
+	<rect x="17.3" y="30.4" class="st1" width="19" height="1"/>
+	<rect x="17.3" y="24.6" class="st1" width="19" height="1"/>
+	<rect x="17.3" y="18.9" class="st1" width="19" height="1"/>
+	<rect x="21.5" y="13.1" class="st1" width="14.7" height="1"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_mapa.svg b/src/img/object_type_icons/object-type_mapa.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ba45576f7b2add93bfff978bee58313eeee391ce
--- /dev/null
+++ b/src/img/object_type_icons/object-type_mapa.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M49.2,6.3L33.7,3.7c-0.1,0-0.2,0-0.2,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0L18.4,7.3c0,0,0,0-0.1,0
+		c-0.1,0-0.1,0-0.2,0L3.1,3.7c-0.2-0.1-0.5,0-0.6,0.1C2.3,4,2.2,4.2,2.2,4.4v7.9c0,0,0,0,0,0s0,0,0,0v26.8c0,0.3,0.2,0.6,0.5,0.7
+		l15.5,4.3c0.1,0,0.3,0,0.4,0L34,40.1l14.8,4.1c0.1,0,0.1,0,0.2,0c0.2,0,0.3-0.1,0.5-0.2c0.2-0.1,0.3-0.4,0.3-0.6V7.1
+		C49.8,6.7,49.5,6.4,49.2,6.3z M3.7,5.4l13.8,3.3v27.2c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V8.6l13.7-3.3v33.5l-13.7,3.7v-3.2
+		c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8v3.1L3.7,38.6V5.4z M48.3,42.5l-14.1-3.9c0,0,0,0,0,0V5.3l14.1,2.4V42.5z"/>
+	<path class="st1" d="M41.9,38.6l3.6,1c0,0,0.1,0,0.1,0c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0c0.1-0.1,0.1-0.1,0.2-0.2c0,0,0,0,0,0
+		c0,0,0,0,0-0.1c0,0,0,0,0-0.1v-3.3c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v2.6l-2.9-0.8c-0.3-0.1-0.5,0.1-0.6,0.3
+		C41.5,38.3,41.7,38.5,41.9,38.6z"/>
+	<path class="st1" d="M9.4,8.4L6.2,7.7c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0
+		c0,0-0.1,0-0.1,0.1c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1v3.2c0,0.3,0.2,0.5,0.5,0.5
+		s0.5-0.2,0.5-0.5V8.8l2.5,0.6c0,0,0.1,0,0.1,0c0.2,0,0.4-0.2,0.5-0.4C9.8,8.8,9.6,8.5,9.4,8.4z"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_outros.svg b/src/img/object_type_icons/object-type_outros.svg
new file mode 100644
index 0000000000000000000000000000000000000000..85949020fad02fc7e0744b0f5b51adf77dd726a2
--- /dev/null
+++ b/src/img/object_type_icons/object-type_outros.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g id="Camada_6_7_">
+	<g>
+		<g>
+			<g>
+				<g>
+					<path class="st1" d="M16.9,24c0-1.5,1-2.5,2.4-2.5s2.3,1,2.3,2.5c0,1.4-0.9,2.5-2.4,2.5C17.9,26.4,16.9,25.4,16.9,24z"/>
+				</g>
+				<g>
+					<path class="st1" d="M26.6,24c0-1.5,1-2.5,2.4-2.5s2.3,1,2.3,2.5c0,1.4-0.9,2.5-2.4,2.5C27.6,26.4,26.6,25.4,26.6,24z"/>
+				</g>
+				<g>
+					<path class="st1" d="M36.3,24c0-1.5,1-2.5,2.4-2.5s2.3,1,2.3,2.5c0,1.4-0.9,2.5-2.4,2.5C37.3,26.4,36.3,25.4,36.3,24z"/>
+				</g>
+			</g>
+			<g>
+				<path class="st1" d="M46.8,43.5H15.7c-1.8-0.1-3.1-0.8-4.1-2.2L0.1,24L11.6,6.6c0.9-1.4,2.2-2.1,3.9-2.2h31.3
+					c1.4,0,2.5,0.5,3.5,1.4l0,0c1,1,1.5,2.2,1.5,3.6v29.1c0,1.4-0.5,2.6-1.4,3.5C49.4,43,48.2,43.5,46.8,43.5z M1.9,24l11,16.5
+					c0.7,1,1.7,1.5,2.9,1.5h31c1,0,1.8-0.3,2.5-1s1-1.5,1-2.5V9.4c0-1-0.3-1.8-1-2.5l0,0c-0.7-0.6-1.5-1-2.5-1H15.5
+					c-1.1,0.1-2,0.6-2.7,1.6L1.9,24z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_software-educacional.svg b/src/img/object_type_icons/object-type_software-educacional.svg
new file mode 100644
index 0000000000000000000000000000000000000000..eebeb2a75ea96bfb0979211b84991fe3288e8382
--- /dev/null
+++ b/src/img/object_type_icons/object-type_software-educacional.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD5;}
+</style>
+<path class="st0" d="M0,0h60v60H0V0z"/>
+<g>
+	<path class="st1" d="M48.7,10.6H11.3c-2.6,0-4.7,2.1-4.7,4.7v24.9c0,2.6,2.1,4.7,4.7,4.7h18.4v2.6h-8c-0.6,0-1,0.4-1,1s0.4,1,1,1
+		h16.6c0.6,0,1-0.4,1-1s-0.4-1-1-1h-8v-2.6h18.4c2.6,0,4.7-2.1,4.7-4.7V15.3C53.4,12.7,51.3,10.6,48.7,10.6z M52.4,40.2
+		c0,2-1.6,3.7-3.7,3.7H11.3c-2,0-3.7-1.6-3.7-3.7V15.3c0-2,1.6-3.7,3.7-3.7h37.4c2,0,3.7,1.6,3.7,3.7V40.2z"/>
+	<path class="st1" d="M46.4,14.8H13.6c-1.6,0-2.8,1.3-2.8,2.9v20.2c0,1.6,1.3,2.9,2.8,2.9h32.7c1.6,0,2.9-1.3,2.9-2.9V17.6
+		C49.2,16,47.9,14.8,46.4,14.8z M48.2,37.8c0,1-0.8,1.9-1.9,1.9H13.6c-1,0-1.8-0.8-1.8-1.9V17.6c0-1,0.8-1.9,1.8-1.9h32.7
+		c1,0,1.9,0.8,1.9,1.9V37.8z"/>
+	<path class="st1" d="M34.4,21.4c-0.2-0.2-0.5-0.2-0.7,0l-1.4,1.4c-0.2,0.2-0.2,0.5,0,0.7l4.2,4.2L32.2,32c-0.2,0.2-0.2,0.5,0,0.7
+		l1.4,1.4c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l6-6c0.2-0.2,0.2-0.5,0-0.7L34.4,21.4z M34,33l-0.7-0.7l4.2-4.2
+		c0.2-0.2,0.2-0.5,0-0.7l-4.2-4.2l0.7-0.7l5.3,5.3L34,33z"/>
+	<path class="st1" d="M27.9,23.1c0-0.1-0.1-0.3-0.1-0.4l-1.4-1.4c-0.2-0.2-0.5-0.2-0.7,0l-6,6c-0.2,0.2-0.2,0.5,0,0.7l6,6
+		c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l1.4-1.4c0.1-0.1,0.1-0.2,0.1-0.4s-0.1-0.3-0.1-0.4l-4.2-4.2l4.2-4.2
+		C27.8,23.4,27.9,23.3,27.9,23.1z M22.4,27.4c-0.1,0.1-0.1,0.2-0.1,0.4s0.1,0.3,0.1,0.4l4.2,4.2L26,33l-5.3-5.3l5.3-5.3l0.7,0.7
+		L22.4,27.4z"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_texto.svg b/src/img/object_type_icons/object-type_texto.svg
new file mode 100644
index 0000000000000000000000000000000000000000..13a99e1f67ba0484d5a463b6259a173d9930ce93
--- /dev/null
+++ b/src/img/object_type_icons/object-type_texto.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<rect x="15.6" y="32.1" class="st1" width="21.3" height="1"/>
+	<rect x="15.6" y="25.9" class="st1" width="21.3" height="1"/>
+	<rect x="15.6" y="19.7" class="st1" width="21.3" height="1"/>
+	<rect x="15.6" y="13.5" class="st1" width="9.8" height="1"/>
+	<path class="st1" d="M41.8,12.2L31.2,1.7c-0.1-0.1-0.3-0.2-0.5-0.2h-16c-2.6,0-4.7,2.1-4.7,4.7v35.5c0,2.6,2.1,4.7,4.7,4.7h22.7
+		c2.6,0,4.7-2.1,4.7-4.7V12.8C42,12.6,41.9,12.4,41.8,12.2z M40.5,13.1v0.2h-7c-1.9,0-3.4-1.5-3.4-3.4V3h0.3L40.5,13.1z M37.3,44.9
+		H14.7c-1.7,0-3.2-1.4-3.2-3.2V6.2c0-1.7,1.4-3.2,3.2-3.2h14.5v6.9c0,2.4,2,4.4,4.4,4.4h7v27.4C40.5,43.5,39.1,44.9,37.3,44.9z"/>
+</g>
+</svg>
diff --git a/src/img/object_type_icons/object-type_video.svg b/src/img/object_type_icons/object-type_video.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1879fd2889832593b8c4d571676eef7ab3613676
--- /dev/null
+++ b/src/img/object_type_icons/object-type_video.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M34,19.4l-13.7-7.8c-0.2-0.1-0.5-0.1-0.7,0c-0.2,0.1-0.4,0.4-0.4,0.6v15.6c0,0.3,0.1,0.5,0.4,0.6
+		c0.1,0.1,0.2,0.1,0.4,0.1c0.1,0,0.3,0,0.4-0.1L34,20.7c0.2-0.1,0.4-0.4,0.4-0.7S34.3,19.5,34,19.4z M20.7,26.5v-13L32.2,20
+		L20.7,26.5z"/>
+	<path class="st1" d="M42.1,40.5c-1.2,0-2.2,0.9-2.5,2H0.4v1h39.3c0.2,1.2,1.3,2,2.5,2s2.2-0.9,2.5-2h7v-1h-7
+		C44.4,41.3,43.4,40.5,42.1,40.5z M42.1,44.5c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S43,44.5,42.1,44.5z"/>
+	<path class="st1" d="M46.1,2.4H5.9C2.7,2.4,0.1,5,0.1,8.1v23.8c0,3.2,2.6,5.8,5.8,5.8h40.3c3.2,0,5.8-2.6,5.8-5.8V8.1
+		C51.9,5,49.3,2.4,46.1,2.4z M50.4,31.9c0,2.3-1.9,4.3-4.3,4.3H5.9c-2.3,0-4.3-1.9-4.3-4.3V8.1c0-2.3,1.9-4.3,4.3-4.3h40.3
+		c2.3,0,4.3,1.9,4.3,4.3V31.9z"/>
+	<path class="st1" d="M3.5,9.2v0.5h1V9.2c0-1.4,1.1-2.5,2.5-2.5h0.5v-1H7C5.1,5.7,3.5,7.3,3.5,9.2z"/>
+	<path class="st1" d="M47.5,30.8c0,1.4-1.1,2.5-2.5,2.5h-0.5v1H45c1.9,0,3.5-1.6,3.5-3.5v-0.5h-1V30.8z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_arte.svg b/src/img/subject_icons/subject_arte.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7997b02f718543c77a1862441ac98a7dd4e6e4fe
--- /dev/null
+++ b/src/img/subject_icons/subject_arte.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M51,11.7c-1.7-2.2-4.5-3.6-7.2-3.6c-3.1,0-5.7,1.9-6.8,4.5c-0.6-1.8-1.6-3.4-2.9-4.7
+		C26.8,0.7,14.3,1.4,6.2,9.5c-8.1,8.1-8.1,21.3,0,29.4c4,4,9.4,6.1,14.7,6.1c5.3,0,10.6-2,14.7-6.1c0.7-0.7,1.2-1.8,1.2-2.9
+		c0-1.1-0.4-2.1-1.2-2.9C34.8,32.4,34,32,32.9,32c-0.7-0.1-1.3-0.3-1.7-0.7l10.2-10.2c0.2,0,0.5,0.1,0.7,0.1c3.2,0,5.7-2.6,5.7-5.7
+		c0-1.8,1.7-2.6,2.6-2.6h1.5L51,11.7z M32.7,33.4l0.1-0.7L32.7,33.4l0.1,0c0.7,0,1.2,0.2,1.7,0.7c0.5,0.5,0.7,1.2,0.7,1.9
+		s-0.3,1.4-0.7,1.9c-7.6,7.6-19.8,7.6-27.4,0c-7.6-7.6-7.6-19.8,0-27.4c4.1-4.1,9.3-6.2,14.4-6.2c4.3,0,8.4,1.5,11.5,4.6
+		c1.9,1.9,3,4.3,3.1,6.9L18.6,33.3c-1.5,1.5-1.6,4-0.2,5.5c0.7,0.7,1.6,1.1,2.6,1.1c0,0,0.1,0,0.1,0c1,0,2-0.5,2.7-1.2l6.3-6.3
+		C31,33,31.9,33.2,32.7,33.4z M22.9,37.5c-0.5,0.5-1.1,0.7-1.7,0.8c-0.6,0-1.2-0.2-1.6-0.6c-0.9-0.9-0.8-2.4,0.2-3.3l16.9-16.9
+		c0.3,0.8,0.7,1.6,1.3,2.2c0.5,0.5,1.1,0.9,1.7,1.2L22.9,37.5z M46.3,15.5c0,2.3-1.9,4.2-4.2,4.2c-1.1,0-2.2-0.4-3-1.2
+		c-0.8-0.8-1.2-1.9-1.2-3c0-3.2,2.6-5.9,5.9-5.9c1.9,0,3.8,0.8,5.2,2.1C47.6,12.3,46.3,13.5,46.3,15.5z"/>
+	<path class="st1" d="M28.2,29.1l-4,4c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l4-4c0.2-0.2,0.2-0.5,0-0.7
+		S28.4,28.9,28.2,29.1z"/>
+	<path class="st1" d="M40.3,12.3c-0.2,0.2-0.1,0.5,0.1,0.7c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.3-0.1,0.4-0.2c1.8-2.3,4.2-1.1,4.3-1.1
+		c0.3,0.1,0.5,0,0.7-0.2c0.1-0.2,0-0.5-0.2-0.7C44.7,10.4,42.2,9.9,40.3,12.3z"/>
+	<path class="st1" d="M7.1,27.8C6.4,28.5,6,29.5,6,30.5c0,1,0.4,2,1.1,2.7c0.7,0.7,1.7,1.1,2.7,1.1s2-0.4,2.7-1.1
+		c0.7-0.7,1.1-1.7,1.1-2.7c0-1-0.4-2-1.1-2.7C11.1,26.3,8.6,26.3,7.1,27.8z M11.9,32.5c-1,1-3,1-4,0C7.3,32,7,31.3,7,30.5
+		c0-0.8,0.3-1.5,0.8-2s1.2-0.8,2-0.8s1.5,0.3,2,0.8s0.8,1.2,0.8,2C12.7,31.3,12.4,32,11.9,32.5z"/>
+	<path class="st1" d="M11,22.2c0.7-0.7,1.1-1.7,1.1-2.7c0-1-0.4-2-1.1-2.7s-1.7-1.1-2.7-1.1c-1,0-2,0.4-2.7,1.1
+		c-1.4,1.4-1.4,4,0,5.4c0.7,0.7,1.7,1.1,2.7,1.1C9.3,23.3,10.3,22.9,11,22.2z M6.3,17.5c0.5-0.5,1.2-0.8,2-0.8s1.5,0.3,2,0.8
+		s0.8,1.2,0.8,2c0,0.8-0.3,1.5-0.8,2c-1,1-3,1-4,0C5.2,20.4,5.2,18.5,6.3,17.5z"/>
+	<path class="st1" d="M18.9,8.9c-0.7-0.7-1.7-1.1-2.7-1.1c-1,0-2,0.4-2.7,1.1c-0.7,0.7-1.1,1.7-1.1,2.7c0,1,0.4,2,1.1,2.7
+		s1.7,1.1,2.7,1.1c1,0,2-0.4,2.7-1.1C20.3,12.9,20.3,10.3,18.9,8.9z M14.2,13.6c-0.5-0.5-0.8-1.2-0.8-2c0-0.8,0.3-1.5,0.8-2
+		s1.2-0.8,2-0.8c0.8,0,1.5,0.3,2,0.8c1.1,1.1,1.1,3,0,4C17.2,14.6,15.2,14.6,14.2,13.6z"/>
+	<path class="st1" d="M27.2,17c1,0,2-0.4,2.7-1.1c0.7-0.7,1.1-1.7,1.1-2.7c0-1-0.4-2-1.1-2.7c-1.4-1.4-4-1.4-5.4,0
+		c-0.7,0.7-1.1,1.7-1.1,2.7c0,1,0.4,2,1.1,2.7C25.2,16.6,26.2,17,27.2,17z M25.2,11.1c0.5-0.5,1.3-0.8,2-0.8s1.5,0.3,2,0.8
+		c0.5,0.5,0.8,1.2,0.8,2c0,0.8-0.3,1.5-0.8,2c-1.1,1.1-3,1.1-4,0c-0.5-0.5-0.8-1.2-0.8-2C24.4,12.4,24.7,11.7,25.2,11.1z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_biologia.svg b/src/img/subject_icons/subject_biologia.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fafea9451e9525bdade258aa8f5bfaaaf47c436f
--- /dev/null
+++ b/src/img/subject_icons/subject_biologia.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M39.7,1.8v3.8c0,1.5-0.3,2.9-0.9,4.3H17.7c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8H38
+		c-0.6,0.9-1.3,1.9-2.2,2.9c-2.5,2.7-6.1,5.3-9.6,7.7c-3.6,2.5-7.3,5.2-10.2,8.3c-3.4,3.7-5.2,7.7-5.2,11.9v3.8h1.5v-3.8
+		c0-1.7,0.3-3.3,0.9-4.9h21.1c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8H14c0.8-1.5,1.8-3,3.2-4.5c2.8-3,6.5-5.6,10-8.1
+		c3.5-2.5,7.2-5.1,9.8-7.9c3-3.2,4.3-6.2,4.3-9.7V1.8H39.7z"/>
+	<path class="st1" d="M28.6,24c-0.2,0.2-0.4,0.3-0.6,0.5c-0.2,0.2-0.4,0.3-0.7,0.5c1.9,1.4,3.8,2.8,5.5,4.3h-8
+		c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h9.6c0.2,0.2,0.4,0.4,0.6,0.6c3.2,3.4,4.8,7.1,4.8,10.9v0.4H17.3c-0.4,0-0.8,0.3-0.8,0.8
+		s0.3,0.8,0.8,0.8h22.4v1.9h1.5v-3.8c0-4.2-1.7-8.2-5.2-11.9C33.9,28,31.3,26,28.6,24z"/>
+	<path class="st1" d="M23.5,22.2c0.4-0.3,0.9-0.6,1.3-0.9c-1.5-1.1-3-2.1-4.4-3.2h6.9c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-8.7
+		c0,0,0,0,0,0c-0.8-0.7-1.6-1.5-2.3-2.2c-2.7-2.9-3.9-5.6-3.9-8.7V4.9h22.4c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8H12.4V1.8h-1.5
+		v3.8c0,3.5,1.3,6.5,4.3,9.7C17.4,17.7,20.4,20,23.5,22.2z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_ciencias-da-natureza.svg b/src/img/subject_icons/subject_ciencias-da-natureza.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8becb9f0186e736a9a091f433a8d0d18bc21496a
--- /dev/null
+++ b/src/img/subject_icons/subject_ciencias-da-natureza.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M24.8,21.8c0-1.6,0.5-3.3,1.4-4.9c2.4,3.1,5,4,6.9,4.2c2.5,0.3,5.2-0.7,6.9-2.4c3.2-3.3,5.6-17.1,5.7-17.6
+		l0.2-1l-1,0.2c-0.6,0.1-13.6,2.2-17.5,6.2c-2.3,2.4-3.1,5.9-2,9.1c-1,1.5-1.6,3.1-1.9,4.7c-0.8-1.2-1.7-1.8-2.4-2.1
+		c1.4-2.5,0.8-5.8-1.4-7.7C17.2,8.2,8.2,7.1,7.2,7l-1-0.1l0.2,1c0.1,0.4,2,9.3,5,11.9c1.2,1,2.7,1.5,4.1,1.5c1.7,0,3.5-0.7,4.7-2.1
+		c0.9,0.3,3.2,1.6,3.1,6.5v4.4h-10c-1,0-1.9,0.5-2.4,1.2c-0.6,0.8-0.8,1.8-0.5,2.7l3.3,11.5c0.4,1.3,1.6,2.2,2.9,2.2h19.5
+		c1.4,0,2.6-0.9,2.9-2.2L42.4,34c0.3-0.9,0.1-1.9-0.5-2.7c-0.6-0.8-1.5-1.2-2.4-1.2H24.8V21.8z M28.5,7.5c3-3,12.5-5,15.6-5.6
+		c-0.8,4.4-2.9,13.5-5.1,15.8c-1.1,1.1-3.2,2.2-5.7,2c-1.7-0.2-4.2-1.1-6.4-4.4C25.9,12.6,26.5,9.5,28.5,7.5z M19.1,18.2
+		c-1.7,2-4.8,2.2-6.8,0.5C10.4,17,8.8,11.6,8.1,8.6c3.2,0.4,9,1.4,10.6,2.8C20.7,13.1,20.9,16.2,19.1,18.2z M40.7,32.3
+		c0.3,0.4,0.4,0.9,0.3,1.4l-2,6.9h-6.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h6.2l-1,3.6c-0.2,0.7-0.8,1.1-1.5,1.1H16.6
+		c-0.7,0-1.3-0.5-1.5-1.1l-3.3-11.5c-0.1-0.5,0-1,0.3-1.4c0.3-0.4,0.8-0.6,1.2-0.6h26.1C39.9,31.6,40.4,31.9,40.7,32.3z"/>
+	<path class="st1" d="M29.3,13.9c0,0,0.1,0,0.1,0c0.2,0,0.4-0.2,0.5-0.4c0-0.2,1.2-5,9.8-6.6c0.3,0,0.5-0.3,0.4-0.6
+		c0-0.3-0.3-0.5-0.6-0.4c-9.4,1.7-10.6,7.1-10.6,7.4C28.8,13.6,29,13.8,29.3,13.9z"/>
+	<path class="st1" d="M11.8,11.3c-0.3,0-0.5,0.2-0.5,0.4c0,0.3,0.2,0.5,0.4,0.5c0,0,4.8,0.5,6,3.8c0.1,0.2,0.3,0.3,0.5,0.3
+		c0.1,0,0.1,0,0.2,0c0.3-0.1,0.4-0.4,0.3-0.6C17.3,11.9,12,11.4,11.8,11.3z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_direitos-humanos.svg b/src/img/subject_icons/subject_direitos-humanos.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ddf087190b26830daadccbb88150ba73d06b7697
--- /dev/null
+++ b/src/img/subject_icons/subject_direitos-humanos.svg
@@ -0,0 +1,5 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.2472 21.7656C33.0162 21.7656 32.7971 21.8137 32.5901 21.8863V16.4266C32.5901 15.2757 31.6763 14.3397 30.5527 14.3397C30.3217 14.3397 30.1027 14.3877 29.8956 14.4603V14.3877C29.8956 13.2368 28.9744 12.3008 27.8435 12.3008C26.7116 12.3008 25.7913 13.2368 25.7913 14.3877V14.4603C25.5843 14.3877 25.3652 14.3397 25.1343 14.3397C24.0106 14.3397 23.0968 15.2757 23.0968 16.4266V17.2269C22.8898 17.1543 22.6708 17.1063 22.4398 17.1063C21.3161 17.1063 20.4023 18.0423 20.4023 19.1932V28.5251V31.1833C20.4023 32.8244 20.6131 34.6079 22.0919 35.607V44.7853H23.4723V35.6711L23.4677 34.7615L23.0895 34.5673C22.149 34.0819 21.7818 33.1336 21.7818 31.1824V28.5242V19.1923C21.7818 18.8209 22.0763 18.5192 22.4389 18.5192C22.8014 18.5192 23.0959 18.8209 23.0959 19.1923V23.1701V23.9138H24.4763V23.1701V19.1923V16.4257C24.4763 16.0543 24.7708 15.7527 25.1333 15.7527C25.4959 15.7527 25.7904 16.0543 25.7904 16.4257V22.4679V23.1654H27.1708V22.4679V16.4257V14.3868C27.1708 14.0154 27.4726 13.7138 27.8425 13.7138C28.2125 13.7138 28.5143 14.0154 28.5143 14.3868V16.4257V22.4679V24.1768H29.8947V22.4679V16.4257C29.8947 16.0543 30.1892 15.7527 30.5517 15.7527C30.9143 15.7527 31.2088 16.0543 31.2088 16.4257V23.8507V24.7528V26.3665C29.7392 26.5852 28.2668 27.6061 28.2668 30.8204H29.6471C29.6471 28.6835 30.3419 27.7315 31.899 27.7315H32.5892V24.7528V23.8507C32.5892 23.4793 32.8837 23.1777 33.2462 23.1777C33.6088 23.1777 33.9033 23.4793 33.9033 23.8507V28.5242V31.1824C33.9033 32.6236 33.1211 33.9207 31.8631 34.5683L31.4821 34.7634V44.7853H32.8625V35.6146C34.3662 34.672 35.2837 33.012 35.2837 31.1824V28.5242V23.8507C35.2846 22.7016 34.3708 21.7656 33.2472 21.7656Z" fill="#00BCD4"/>
+<path d="M15.4014 23.1534C15.1704 23.1534 14.9532 23.2081 14.7554 23.3005V18.6638C14.7554 17.7796 14.0532 17.0604 13.19 17.0604C12.959 17.0604 12.7419 17.115 12.544 17.2074V16.9915C12.544 16.1074 11.8363 15.3872 10.9658 15.3872C10.0952 15.3872 9.38755 16.1064 9.38755 16.9915V17.2074C9.19062 17.115 8.97252 17.0613 8.74246 17.0613C7.87927 17.0613 7.1762 17.7805 7.1762 18.6647V19.4772C6.97926 19.3849 6.76117 19.3311 6.5311 19.3311C5.66791 19.3311 4.96484 20.0503 4.96484 20.9355V28.5942V30.7755C4.96484 32.1093 5.13693 33.56 6.35166 34.347V41.9398H7.2719L7.26914 33.7805L7.01699 33.6505C6.07742 33.1678 5.88509 32.1517 5.88509 30.7764V28.5952V20.9364C5.88509 20.5716 6.17497 20.2747 6.5311 20.2747C6.88724 20.2747 7.1762 20.5716 7.1762 20.9364V24.2007V24.8106H8.09644V24.2007V20.9364V18.6656C8.09644 18.3008 8.38632 18.0049 8.74246 18.0049C9.09859 18.0049 9.38755 18.3008 9.38755 18.6656V23.6238V24.196H10.3078V23.6238V18.6656V16.9934C10.3078 16.6286 10.6032 16.3317 10.9658 16.3317C11.3284 16.3317 11.6238 16.6286 11.6238 16.9934V18.6656V23.6238V25.0274H12.544V23.6238V18.6656C12.544 18.3008 12.8339 18.0049 13.19 18.0049C13.5461 18.0049 13.8351 18.3008 13.8351 18.6656V24.7597V25.4996V26.9202C12.6443 27.0672 11.4204 27.8562 11.4204 30.4795H12.3406C12.3406 28.6517 12.9434 27.8354 14.2952 27.8354H14.7554V25.4996V24.7597C14.7554 24.3949 15.0452 24.098 15.4014 24.098C15.7575 24.098 16.0465 24.3949 16.0465 24.7597V28.5942V30.7755C16.0465 31.999 15.382 33.1009 14.3136 33.6505L14.0606 33.7815L14.0596 41.9389H14.9799V34.3518C16.2121 33.6033 16.9667 32.2582 16.9667 30.7755V28.5942V24.7597C16.9676 23.8727 16.2646 23.1534 15.4014 23.1534Z" fill="#00BCD4"/>
+<path d="M49.1495 23.1534C48.9185 23.1534 48.7014 23.2081 48.5044 23.2995V18.6627C48.5044 17.7786 47.8014 17.0593 46.9382 17.0593C46.7072 17.0593 46.49 17.114 46.2931 17.2055V16.9896C46.2931 16.1054 45.5845 15.3853 44.7149 15.3853C43.8452 15.3853 43.1366 16.1045 43.1366 16.9896V17.2055C42.9397 17.1131 42.7216 17.0593 42.4915 17.0593C41.6283 17.0593 40.9262 17.7786 40.9262 18.6627V19.4762C40.7283 19.3838 40.5112 19.3292 40.2802 19.3292C39.417 19.3292 38.7148 20.0484 38.7148 20.9335V28.5923V30.7735C38.7148 32.1073 38.8869 33.558 40.1017 34.3451L40.1026 41.9379H41.0228V34.4573L41.0182 33.7776L40.767 33.6485C39.8274 33.164 39.636 32.1488 39.636 30.7735V28.5923V20.9335C39.636 20.5687 39.925 20.2718 40.2811 20.2718C40.6372 20.2718 40.9271 20.5687 40.9271 20.9335V24.1978V24.8077H41.8474V24.1978V20.9335V18.6627C41.8474 18.2979 42.1363 18.002 42.4925 18.002C42.8486 18.002 43.1376 18.2979 43.1376 18.6627V23.6209V24.1931H44.0578V23.6209V18.6627V16.9905C44.0578 16.6257 44.3523 16.3288 44.7158 16.3288C45.0793 16.3288 45.3738 16.6257 45.3738 16.9905V18.6627V23.6209V25.0245H46.294V23.6209V18.6627C46.294 18.2979 46.583 18.002 46.9391 18.002C47.2952 18.002 47.5851 18.2979 47.5851 18.6627V24.7568V25.4967V26.9173C46.3943 27.0643 45.1704 27.8533 45.1704 30.4766H46.0906C46.0906 28.6488 46.6934 27.8325 48.0452 27.8325H48.5054V25.4967V24.7568C48.5054 24.392 48.7943 24.0951 49.1504 24.0951C49.5066 24.0951 49.7955 24.392 49.7955 24.7568V28.5913V30.7726C49.7955 31.9961 49.1311 33.098 48.0618 33.6476L47.8087 33.7786V41.936H48.729V34.3479C49.9621 33.6004 50.7158 32.2553 50.7158 30.7726V28.5913V24.7568C50.7149 23.8726 50.0136 23.1534 49.1495 23.1534Z" fill="#00BCD4"/>
+</svg>
diff --git a/src/img/subject_icons/subject_educacao-ambiental.svg b/src/img/subject_icons/subject_educacao-ambiental.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ac197ccef1494d2cadba5a6f191bfae05039e6bb
--- /dev/null
+++ b/src/img/subject_icons/subject_educacao-ambiental.svg
@@ -0,0 +1,10 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.7444 39.3869C41.6523 39.4812 41.6523 39.5754 41.6523 39.6696C41.6523 39.7638 41.6523 39.9523 41.7444 40.0465C41.8364 40.1407 41.9284 40.1407 42.1125 40.1407C42.2965 40.1407 42.3885 40.1407 42.4806 40.0465C42.5726 39.9523 42.5726 39.8581 42.5726 39.6696C42.5726 39.4812 42.5726 39.3869 42.3885 39.3869C42.2965 39.1985 41.9284 39.1985 41.7444 39.3869Z" fill="#00BCD4"/>
+<path d="M17.8156 42.5894C17.5395 42.5894 17.3555 42.7778 17.3555 43.0605V45.0392C17.3555 45.3219 17.5395 45.5103 17.8156 45.5103C18.0917 45.5103 18.2757 45.3219 18.2757 45.0392V43.0605C18.2757 42.7778 18.0917 42.5894 17.8156 42.5894Z" fill="#00BCD4"/>
+<path d="M22.7878 14.4169C24.0761 14.5111 25.0884 15.4533 25.4565 16.7725C25.5485 16.9609 25.7326 17.1494 25.9166 17.1494H26.0087C26.2847 17.0552 26.3768 16.8667 26.3768 16.584C26.0087 14.888 24.6283 13.6631 22.9718 13.4746C22.6958 13.4746 22.5117 13.6631 22.5117 13.9457C22.5117 14.2284 22.5117 14.4169 22.7878 14.4169Z" fill="#00BCD4"/>
+<path d="M28.125 23.0841C27.8489 22.9899 27.6648 23.1784 27.5728 23.3668C27.2047 24.4975 26.1924 25.2513 25.0881 25.1571C24.9041 25.1571 24.8121 25.2513 24.72 25.3456C24.628 25.4398 24.628 25.6282 24.72 25.8167C25.1802 26.8532 24.9041 28.0781 24.0759 28.8319C23.2476 29.5857 21.9593 29.6799 21.0391 29.1146C20.855 29.0203 20.5789 29.0203 20.3949 29.303C20.3029 29.4915 20.3029 29.7741 20.5789 29.9626C21.1311 30.3395 21.7753 30.5279 22.4194 30.5279C23.2476 30.5279 24.0759 30.2453 24.72 29.6799C25.7323 28.8319 26.1004 27.4185 25.8243 26.1936C27.1127 26.0051 28.125 25.0629 28.5851 23.7437C28.4931 23.3668 28.401 23.1784 28.125 23.0841Z" fill="#00BCD4"/>
+<path d="M15.9772 10.7425C14.6889 11.1194 13.7686 12.0616 13.4925 13.3808C12.2962 13.0039 11.0079 13.3808 10.0876 14.323C8.98332 15.4537 8.79927 17.0556 9.53547 18.4689C9.62749 18.6574 9.81154 18.7516 9.90357 18.7516C9.99559 18.7516 10.0876 18.7516 10.0876 18.6574C10.2717 18.5632 10.3637 18.2805 10.2717 17.9978C9.71952 16.9613 9.90357 15.8306 10.7318 14.9826C11.468 14.1346 12.6643 13.9461 13.6766 14.5115C13.8606 14.6057 13.9527 14.6057 14.1367 14.5115C14.2287 14.4173 14.3208 14.323 14.3208 14.1346C14.4128 13.0039 15.149 12.0616 16.1612 11.7789C17.2655 11.4963 18.3698 11.9674 18.922 12.9096C19.014 13.0981 19.3821 13.1923 19.5662 13.0981C19.7502 13.0039 19.8422 12.627 19.7502 12.4385C18.922 10.9309 17.4496 10.3656 15.9772 10.7425Z" fill="#00BCD4"/>
+<path d="M45.333 15.4529C47.7256 15.4529 49.6581 13.4742 49.6581 11.0243C49.6581 8.57444 47.7256 6.5957 45.333 6.5957C42.9403 6.5957 41.0078 8.57444 41.0078 11.0243C41.0078 13.4742 42.9403 15.4529 45.333 15.4529ZM45.333 7.53796C47.1735 7.53796 48.7379 9.04556 48.7379 11.0243C48.7379 13.003 47.1735 14.5106 45.333 14.5106C43.4925 14.5106 41.9281 13.003 41.9281 11.0243C41.9281 9.04556 43.4925 7.53796 45.333 7.53796Z" fill="#00BCD4"/>
+<path d="M52.1418 49.4699H46.4363V43.8163C46.7123 43.9106 46.9884 43.9106 47.3565 43.9106C48.2768 43.9106 49.4731 43.6279 50.4853 42.6856C52.2338 40.8954 51.4976 38.0686 51.4976 37.9744L51.4056 37.6917L51.1295 37.5975C51.0375 37.5975 48.2767 36.8437 46.5283 38.634C46.1602 39.0109 45.8841 39.3878 45.7001 39.7647C45.516 39.3878 45.2399 39.0109 44.8718 38.634C43.1234 36.8437 40.3626 37.5975 40.2706 37.5975L39.9945 37.6917L39.9025 37.9744C39.9025 38.0686 39.1663 40.8954 40.9148 42.6856C41.927 43.7221 43.0313 44.0048 43.9516 44.0048C44.3197 44.0048 44.6878 44.0048 44.8718 43.9106V49.4699H43.4915H40.2706H31.6203C31.3442 49.4699 31.1602 49.6583 31.1602 49.941C31.1602 50.2237 31.3442 50.4121 31.6203 50.4121H40.2706H43.4915H52.1418C52.4179 50.4121 52.6019 50.2237 52.6019 49.941C52.6019 49.6583 52.4179 49.4699 52.1418 49.4699ZM47.1725 39.2935C48.2768 38.1628 50.0252 38.3513 50.6694 38.4455C50.7614 39.1051 50.9455 40.8954 49.8412 42.0261C48.9209 43.0625 47.7246 43.0625 46.8964 42.9683L49.0129 40.8011C49.197 40.6127 49.197 40.33 49.0129 40.1416C48.8289 39.9531 48.5528 39.9531 48.3688 40.1416L46.2522 42.3087C46.2522 42.2145 46.2522 42.0261 46.2522 41.9318C46.2522 41.8376 46.2522 41.8376 46.2522 41.7434C46.2522 40.9896 46.4363 40.0473 47.1725 39.2935ZM41.651 41.9318C40.5467 40.8011 40.7307 39.0109 40.8227 38.3513C41.4669 38.2571 43.2154 38.0686 44.3197 39.1993C45.0559 39.9531 45.2399 40.8954 45.332 41.5549C45.332 41.6492 45.332 41.7434 45.332 41.7434C45.332 41.8376 45.332 42.0261 45.332 42.1203L43.9516 40.7069C43.7675 40.5185 43.4915 40.5185 43.3074 40.7069C43.1234 40.8954 43.1234 41.178 43.3074 41.3665L44.6878 42.7799C43.8596 43.0625 42.6632 42.9683 41.651 41.9318Z" fill="#00BCD4"/>
+<path d="M31.8962 25.8186C32.3563 24.4052 31.9882 22.8034 31.068 21.7669C32.0803 20.7305 32.6324 19.2229 32.2643 17.8095C31.8962 16.3019 30.8839 15.1712 29.5036 14.7C29.8717 13.2867 29.5956 11.779 28.5833 10.6483C27.571 9.51764 26.0987 9.14074 24.7183 9.42342C24.3502 8.01004 23.2459 6.78511 21.8655 6.40821C20.3931 6.0313 18.9207 6.40821 17.9085 7.44468C16.8962 6.40821 15.4238 5.93708 13.9514 6.31398C12.479 6.69088 11.4667 7.82159 11.0066 9.23497C9.62623 8.85806 8.15384 9.23497 7.04954 10.3657C6.03727 11.4964 5.66917 13.004 6.03727 14.4174C4.6569 14.7943 3.5526 15.925 3.1845 17.4326C2.81641 18.9402 3.27653 20.4478 4.2888 21.4843C3.27653 22.5207 2.90843 24.1226 3.36855 25.5359C3.82868 26.9493 4.93297 28.08 6.31334 28.3627C6.03727 29.7761 6.49739 31.2837 7.60169 32.3202C8.70599 33.3566 10.1784 33.6393 11.5588 33.2624C12.0189 34.6758 13.1232 35.7123 14.5956 35.995C14.6876 35.995 14.8716 35.995 14.9637 36.0892L14.5956 40.5178H12.571L9.99433 37.9737L9.44218 38.6333L11.3747 40.5178H8.61396V41.46H12.2949H14.5035L14.0434 49.4692H9.25813C8.98206 49.4692 8.79801 49.6576 8.79801 49.9403C8.79801 50.223 8.98206 50.4114 9.25813 50.4114H13.9514H21.6815H27.571C27.8471 50.4114 28.0312 50.223 28.0312 49.9403C28.0312 49.6576 27.8471 49.4692 27.571 49.4692H21.5894L20.4851 36.0892C21.8655 35.8065 22.9698 34.77 23.522 33.4509C24.9023 33.922 26.3747 33.6393 27.479 32.6028C28.5833 31.5664 29.0434 30.0588 28.8594 28.6454C30.2398 28.3627 31.4361 27.3262 31.8962 25.8186ZM14.9637 49.4692L16.068 36.0892C16.6201 35.995 17.0802 35.9007 17.6324 35.6181C18.2766 35.995 18.9207 36.1834 19.6569 36.1834L20.7612 49.4692H14.9637ZM30.6079 25.4417C30.2398 26.5724 29.2275 27.3262 28.0312 27.3262C28.0312 27.3262 28.0312 27.3262 27.9391 27.3262C27.6631 27.3262 27.479 27.4205 27.387 27.6089C27.295 27.7974 27.2029 28.08 27.295 28.2685C27.7551 29.3992 27.479 30.7183 26.5588 31.4721C25.6385 32.3202 24.3502 32.4144 23.3379 31.7548C23.1539 31.6606 22.8778 31.6606 22.6937 31.7548C22.5097 31.849 22.3256 32.0375 22.3256 32.3202C22.1416 33.5451 21.3134 34.4874 20.117 34.6758C19.3809 34.77 18.5526 34.5816 17.9085 34.1105C17.8164 34.0162 17.6324 33.922 17.4483 33.922C17.2643 33.922 17.1723 33.922 17.0802 34.0162C16.4361 34.4874 15.6999 34.6758 14.8716 34.4874C13.6753 34.2047 12.8471 33.2624 12.7551 32.0375C12.7551 31.7548 12.571 31.5664 12.387 31.4721C12.2029 31.3779 11.9269 31.3779 11.7428 31.4721C10.7305 32.1317 9.44218 31.9433 8.52194 31.0952C7.60169 30.2472 7.41764 28.9281 7.87776 27.8916C7.96979 27.7031 7.96979 27.4205 7.87776 27.232C7.78574 27.0436 7.50967 26.9493 7.32562 26.8551C6.1293 26.8551 5.11702 26.0071 4.74892 24.8764C4.38083 23.7457 4.84095 22.4265 5.85322 21.7669C6.03727 21.6727 6.1293 21.39 6.1293 21.2016C6.1293 20.9189 6.03727 20.7305 5.7612 20.6362C4.74892 19.9767 4.2888 18.7517 4.56488 17.621C4.84095 16.3961 5.85322 15.5481 7.04954 15.5481C7.32562 15.5481 7.50967 15.3596 7.60169 15.1712C7.69372 14.9827 7.69372 14.7 7.60169 14.5116C7.04954 13.4751 7.23359 12.156 8.06181 11.2137C8.89004 10.3657 10.1784 10.1772 11.2827 10.6483C11.4667 10.7426 11.7428 10.7426 11.9269 10.6483C12.1109 10.5541 12.2949 10.2714 12.2949 10.083C12.387 8.85806 13.1232 7.82159 14.3195 7.53891C15.5158 7.25623 16.7121 7.72736 17.3563 8.76384C17.4483 8.95229 17.7244 9.04651 17.9085 9.14074C18.0925 9.14074 18.3686 9.04652 18.4606 8.85806C19.1048 7.82159 20.3011 7.35046 21.4974 7.72736C22.6017 8.10426 23.4299 9.14074 23.4299 10.3657C23.4299 10.6483 23.522 10.8368 23.798 10.931C23.9821 11.0252 24.2582 11.0252 24.4422 10.931C25.5465 10.3657 26.7428 10.6483 27.571 11.4964C28.3993 12.3444 28.5833 13.6636 27.9391 14.7943C27.8471 14.9827 27.8471 15.2654 27.9391 15.4538C28.0312 15.6423 28.2152 15.8307 28.4913 15.8307C29.6876 15.925 30.6079 16.773 30.8839 17.9979C31.16 19.2228 30.6079 20.4478 29.5956 21.0131C29.4115 21.1074 29.2275 21.39 29.2275 21.5785C29.2275 21.7669 29.3195 22.0496 29.5036 22.1438C30.5158 22.9919 30.976 24.2168 30.6079 25.4417Z" fill="#00BCD4"/>
+</svg>
diff --git a/src/img/subject_icons/subject_educacao-do-campo.svg b/src/img/subject_icons/subject_educacao-do-campo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3556cdb2cd89aafe9a10a6cedfd85e3076841712
--- /dev/null
+++ b/src/img/subject_icons/subject_educacao-do-campo.svg
@@ -0,0 +1,23 @@
+<svg width="53" height="57" viewBox="0 0 53 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.9067 34.1542C26.7879 33.6639 27.0849 33.1602 27.5602 33.0512C28.0354 32.9286 28.5225 33.235 28.6413 33.7252C28.7482 34.2154 28.4512 34.7192 27.976 34.8405C27.9035 34.8527 27.8334 34.8662 27.7609 34.8662C27.3701 34.865 27.0018 34.5831 26.9067 34.1542ZM23.9485 34.5341C23.4851 34.338 23.2713 33.7988 23.4495 33.3343C23.6396 32.8685 24.1623 32.6357 24.6138 32.8318C25.0771 33.0144 25.291 33.5549 25.1009 34.0206C24.9702 34.3883 24.6376 34.5966 24.2811 34.5966C24.1742 34.5941 24.0554 34.5709 23.9485 34.5341ZM30.162 32.7448C29.7818 32.4139 29.7343 31.8378 30.0551 31.4457C30.3758 31.0645 30.933 31.0155 31.3144 31.3354C31.6946 31.6663 31.7421 32.2411 31.4213 32.6345C31.2443 32.8551 30.9948 32.9654 30.7453 32.9654C30.5422 32.9641 30.3283 32.8918 30.162 32.7448ZM20.8477 31.8366C20.5863 31.4077 20.717 30.8439 21.1328 30.5755C21.5486 30.3046 22.107 30.4407 22.3684 30.8684C22.6179 31.2986 22.4991 31.8734 22.0714 32.1308C21.9288 32.2288 21.7625 32.2778 21.608 32.2778C21.311 32.279 21.014 32.1197 20.8477 31.8366ZM32.0035 29.6196C31.5045 29.5828 31.1374 29.1416 31.1718 28.6391C31.2075 28.1366 31.6471 27.7567 32.1353 27.7935C32.6224 27.8302 32.9907 28.2714 32.9539 28.7739C32.9195 29.2641 32.5274 29.6318 32.0629 29.6318C32.0391 29.6318 32.0142 29.6196 32.0035 29.6196ZM20.7051 28.7739C20.2061 28.7371 19.8378 28.2959 19.8735 27.7935C19.9091 27.291 20.3368 26.8988 20.8239 26.9356C21.311 26.9723 21.6912 27.4135 21.6556 27.916C21.6199 28.4062 21.2279 28.7739 20.7645 28.7739C20.7408 28.7739 20.717 28.7739 20.7051 28.7739ZM30.4816 25.6855C30.2202 25.2443 30.3521 24.6805 30.7786 24.4231C31.1956 24.1535 31.7421 24.2883 32.0023 24.7173C32.2518 25.1462 32.1211 25.7222 31.7053 25.9796C31.5627 26.0777 31.3964 26.1144 31.2419 26.1144C30.9461 26.1144 30.6491 25.9674 30.4816 25.6855ZM21.5011 25.2198C21.1209 24.8889 21.0734 24.3128 21.3942 23.9206C21.7031 23.5285 22.2615 23.4794 22.6416 23.8103C23.0218 24.129 23.0693 24.7173 22.7604 25.0972C22.5822 25.3178 22.3327 25.4281 22.0714 25.4281C21.8694 25.4281 21.6674 25.3546 21.5011 25.2198ZM28.2373 23.7123C27.7859 23.5162 27.5602 22.977 27.7502 22.5112C27.9403 22.0455 28.4643 21.8249 28.9145 22.0088C29.366 22.2049 29.5905 22.7441 29.4016 23.2098C29.2591 23.5652 28.9264 23.7858 28.5819 23.7858C28.4631 23.7858 28.3443 23.7613 28.2373 23.7123ZM24.1742 22.8176C24.0435 22.3274 24.3405 21.8249 24.8158 21.7024C24.8276 21.7024 24.8276 21.7024 24.8395 21.7024C24.8514 21.7024 24.8633 21.6901 24.887 21.6901C25.3623 21.5676 25.8375 21.8739 25.9563 22.3642C26.0751 22.8544 25.7781 23.3569 25.3029 23.4794C25.291 23.4794 25.2791 23.4794 25.2672 23.4917C25.2553 23.4917 25.2553 23.4917 25.2553 23.4917C25.1841 23.504 25.1128 23.5162 25.0415 23.5162C24.6376 23.5162 24.2693 23.2343 24.1742 22.8176Z" fill="#00BCD4"/>
+<path d="M30.4481 17.4393L29.4906 17.1047L29.4656 16.5654C29.5892 15.6904 29.6521 14.7026 29.6521 13.6327C29.6521 12.2563 29.4134 10.6741 28.9405 8.93014L28.8633 8.64213L29.0355 8.40192C31.0731 5.56105 33.3577 3.54498 33.4539 3.46042L34.2166 2.79248L34.421 3.80113C34.4495 3.94329 35.1243 7.32097 35.0305 11.1031L35.0233 11.3788L34.819 11.5565C33.8032 12.4377 32.9644 13.3385 32.33 14.2332C31.6576 15.183 31.1028 16.1022 30.681 16.9638L30.4481 17.4393ZM30.163 8.89337C30.6133 10.6312 30.8402 12.2245 30.8402 13.6327C30.8402 13.8582 30.8378 14.08 30.8319 14.2969C31.003 14.0371 31.1824 13.7736 31.3701 13.5076C32.0164 12.5958 32.8492 11.6852 33.846 10.7979C33.8792 8.50977 33.6238 6.36502 33.4385 5.13087C32.6437 5.91646 31.3606 7.26336 30.163 8.89337Z" fill="#00BCD4"/>
+<path d="M35.8619 21.9519L35.2773 21.1001L35.566 20.6491C36.166 20.0204 36.7814 19.2617 37.398 18.394C38.1869 17.28 38.9009 15.8571 39.5175 14.1621L39.6209 13.879L39.9012 13.7908C43.0805 12.8042 45.9353 12.5799 46.0565 12.5701L47.0533 12.4941L46.6399 13.4342C46.5828 13.5641 45.2106 16.6623 42.9925 19.6417L42.831 19.8586L42.566 19.8794C41.3162 19.9787 40.1887 20.1907 39.2145 20.5094C38.1287 20.8648 37.1545 21.268 36.3193 21.7092L35.8619 21.9519ZM40.5238 14.8791C39.8929 16.5532 39.1635 17.9773 38.3568 19.1171C38.2285 19.2985 38.0978 19.4762 37.9695 19.6502C38.257 19.5436 38.5528 19.4407 38.8557 19.3414C39.8466 19.0179 40.9729 18.796 42.2084 18.6808C43.5272 16.8707 44.5358 15.0102 45.0871 13.9121C44.0404 14.0531 42.3356 14.3398 40.5238 14.8791Z" fill="#00BCD4"/>
+<path d="M44.4709 31.4509L44.2428 31.305C43.1795 30.6248 42.1495 30.1089 41.1812 29.7718C40.0977 29.3968 39.0795 29.1284 38.1564 28.9764L37.6562 28.8943V27.8501L38.1564 27.6614C39.0023 27.5192 39.9337 27.2815 40.9246 26.9579C42.1542 26.5559 43.4955 25.8745 44.9093 24.9333L45.1552 24.769L45.4308 24.8708C48.5222 26.0081 50.9113 27.5401 51.0111 27.6038L51.8606 28.1504L50.9885 28.6566C50.8721 28.724 48.117 30.3135 44.7263 31.37L44.4709 31.4509ZM40.6656 28.3195C40.959 28.409 41.2572 28.5058 41.559 28.61C42.5439 28.9519 43.5775 29.4581 44.6372 30.1174C46.6474 29.4679 48.4283 28.6259 49.4631 28.0965C48.5507 27.5805 47.0442 26.79 45.3049 26.127C43.8935 27.0437 42.5415 27.7153 41.2846 28.1259C41.0755 28.1945 40.8699 28.2595 40.6656 28.3195Z" fill="#00BCD4"/>
+<path d="M46.7715 43.7097L45.7782 43.5859C45.6547 43.5712 42.7071 43.1999 39.4828 42.0723L39.2214 41.9816L39.1204 41.7169C38.6345 40.4435 38.0749 39.3418 37.4595 38.4397C36.8025 37.4813 36.136 36.6455 35.4755 35.9579L35.125 35.5927L35.7083 34.7422L36.2251 34.8954C36.9902 35.2949 37.8777 35.6712 38.8638 36.0143C40.0138 36.4139 41.3908 36.6737 42.9542 36.7889L43.2406 36.811L43.4033 37.0548C45.2816 39.8871 46.3556 42.6361 46.3996 42.7513L46.7715 43.7097ZM40.1231 41C42.0026 41.6372 43.7883 42.011 44.8682 42.2035C44.4203 41.212 43.635 39.6151 42.5812 37.9887C41.0344 37.8564 39.6574 37.5831 38.4848 37.1749C38.2781 37.1026 38.0749 37.0303 37.8765 36.9556C38.0619 37.2056 38.2472 37.4642 38.4302 37.7338C39.0574 38.6505 39.6265 39.7486 40.1231 41Z" fill="#00BCD4"/>
+<path d="M33.7604 53.1654L33.0297 52.462C32.943 52.3798 30.8889 50.3932 28.9749 47.6344L28.8086 47.3967L28.8846 47.1148C29.2684 45.6796 29.4751 44.3524 29.4953 43.1721C29.5155 41.998 29.4549 40.9183 29.3171 39.9624L29.2422 39.4476L30.3091 39.1143L30.5313 39.564C30.9209 40.3558 31.4223 41.1977 32.0187 42.0703H32.0199C32.6757 43.03 33.562 44.0129 34.6562 44.9921L34.8665 45.1808L34.8605 45.4676C34.7869 49.0157 34.0431 52.0404 34.0111 52.169L33.7604 53.1654ZM30.1048 47.1552C31.2108 48.7142 32.3597 50.0157 33.0868 50.7915C33.3018 49.6701 33.6 47.7876 33.6642 45.7238C32.5949 44.7421 31.7146 43.7518 31.0481 42.775C30.9221 42.5924 30.7998 42.4086 30.6821 42.2272C30.6881 42.5422 30.6893 42.8645 30.6833 43.193C30.6631 44.3965 30.4683 45.7262 30.1048 47.1552Z" fill="#00BCD4"/>
+<path d="M17.8503 52.8677L17.6625 51.8542C17.6412 51.7365 17.1339 48.952 17.1529 45.6099L17.1541 45.3109L17.3845 45.1283C18.6225 44.1466 19.624 43.1404 20.363 42.1354C21.0532 41.1966 21.6235 40.2885 22.0571 39.4343L22.2983 38.96L23.2488 39.3166L23.2654 39.8522C23.1276 40.7211 23.048 41.7077 23.0301 42.7837C23.0111 43.9076 23.1501 45.1773 23.4436 46.5597L23.5018 46.8343L23.3402 47.0585C21.2065 50.0158 18.727 52.1275 18.6225 52.2157L17.8503 52.8677ZM18.3409 45.9126C18.348 47.7976 18.5263 49.495 18.6653 50.5392C19.523 49.7254 20.9404 48.2853 22.227 46.5426C21.9538 45.1736 21.8243 43.9027 21.8433 42.7592C21.8469 42.5337 21.854 42.3119 21.8623 42.0937C21.6877 42.3523 21.5035 42.6122 21.311 42.8744C20.5554 43.9015 19.5575 44.9224 18.3409 45.9126Z" fill="#00BCD4"/>
+<path d="M5.17578 42.9332L5.60467 42.0006C5.65457 41.8915 6.86044 39.2921 8.81715 36.5836L8.9918 36.3421L9.28406 36.3372C10.9188 36.3115 12.3659 36.108 13.5824 35.733C14.6742 35.3984 15.6556 35.0112 16.4979 34.5847L16.9589 34.353L17.5315 35.2122L17.2345 35.657C16.6238 36.2759 15.9954 37.0235 15.3645 37.8802C14.7087 38.7712 14.0945 39.8791 13.5385 41.1733L13.4304 41.4258L13.1761 41.5091C9.67493 42.6624 6.31512 42.8658 6.17374 42.8744L5.17578 42.9332ZM9.5977 37.5554C8.50351 39.1033 7.65881 40.6096 7.16577 41.552C8.36926 41.4123 10.4436 41.0949 12.5631 40.4233C13.1274 39.1499 13.7511 38.0469 14.4188 37.1387C14.5507 36.9598 14.6826 36.7846 14.8144 36.6142C14.5257 36.7159 14.2275 36.8127 13.9222 36.9071C12.6759 37.2919 11.223 37.5089 9.5977 37.5554Z" fill="#00BCD4"/>
+<path d="M8.24143 31.0367L7.986 30.9497C4.46462 29.7498 1.59666 27.8404 1.47548 27.7595L0.636719 27.197L1.51706 26.7068C1.62518 26.6467 4.20919 25.2165 7.44543 24.2201L7.72225 24.1343L7.95867 24.3071C9.29285 25.2814 10.5771 25.9996 11.7771 26.4408C12.8511 26.8354 13.8645 27.121 14.7888 27.2913L15.2973 27.3845L15.2616 28.4275L14.7674 28.6052C13.9215 28.7326 12.9853 28.952 11.985 29.2596C10.8979 29.5942 9.7158 30.1469 8.4731 30.8994L8.24143 31.0367ZM3.0342 27.295C4.09751 27.9225 5.98294 28.9459 8.10718 29.6984C9.34631 28.9667 10.5356 28.4238 11.6452 28.0831C11.8543 28.0181 12.061 27.9581 12.2654 27.9017C11.9743 27.8073 11.6785 27.7056 11.3779 27.5953C10.1482 27.1431 8.84971 26.4322 7.51078 25.48C5.6491 26.0744 4.01197 26.8171 3.0342 27.295Z" fill="#00BCD4"/>
+<path d="M17.3199 21.5625L16.8185 21.4044C16.0629 20.9914 15.1826 20.5992 14.1989 20.2376C13.056 19.8173 11.6874 19.5329 10.1322 19.3908L9.85776 19.365L9.69975 19.1334C7.58858 16.0486 6.39341 12.8303 6.34351 12.6955L5.98828 11.731L6.97911 11.8719C7.10861 11.8903 10.1916 12.3352 13.4861 13.5877L13.751 13.6894L13.8425 13.9652C14.3486 15.4873 14.9545 16.7913 15.6448 17.838C16.2887 18.8148 16.9421 19.6629 17.5872 20.3578L17.9424 20.7414L17.3199 21.5625ZM10.5148 18.1971C12.0568 18.3564 13.429 18.6542 14.5981 19.0832C14.8036 19.1591 15.0056 19.2364 15.2028 19.3136C15.0222 19.0599 14.8416 18.7976 14.6622 18.5255C13.9553 17.4531 13.334 16.1467 12.8124 14.6392C10.8605 13.9211 8.98454 13.4897 7.86659 13.2703C8.35725 14.4027 9.2673 16.3281 10.5148 18.1971Z" fill="#00BCD4"/>
+<path d="M22.262 15.8418L21.7773 15.0096C21.6656 14.8184 21.5895 14.6971 21.5385 14.6199C21.4125 14.5807 21.2854 14.4949 21.1702 14.3453C20.3338 13.2583 19.3192 12.0033 18.1252 10.9493L17.9102 10.7593L17.9173 10.4664C18.0171 6.80563 18.8535 3.63876 18.8891 3.50639L19.1552 2.51123L19.8752 3.22819C19.9595 3.31275 21.9792 5.33617 23.848 8.12802L24.0096 8.36946L23.9288 8.65012C23.4334 10.3831 23.1827 11.969 23.1827 13.3612C23.1827 14.3821 22.8239 14.9704 22.7835 15.0341L22.262 15.8418ZM21.9816 13.4286C21.9852 13.4298 21.9887 13.4311 21.9923 13.4323C21.9923 13.409 21.9923 13.3845 21.9923 13.36C21.9923 11.9273 22.2335 10.3218 22.7087 8.58516C21.6299 7.00785 20.5025 5.68546 19.7885 4.89619C19.5449 6.06048 19.1968 8.04959 19.1137 10.2115C20.2328 11.2385 21.1844 12.3979 21.9816 13.4286Z" fill="#00BCD4"/>
+<path d="M30.5465 17.457L29.8776 17.2364C27.7546 16.5379 25.4426 16.5084 23.2934 17.1617L22.8111 17.3087L22.5913 16.8418C22.4701 16.5844 22.3359 16.3185 22.1897 16.0452L22.1185 15.8148C22.0377 15.0537 21.9961 14.2277 21.9961 13.36C21.9961 11.8488 22.2634 10.1465 22.7909 8.30202C23.9302 4.31646 25.8775 1.01845 25.9594 0.87996L26.4822 0L26.9812 0.893441C27.0619 1.03928 28.983 4.50888 30.0903 8.59983C30.5916 10.4517 30.8459 12.1442 30.8459 13.6308C30.8459 14.7596 30.7782 15.8062 30.6475 16.7401L30.5465 17.457ZM26.4667 15.4643C27.511 15.4643 28.547 15.5991 29.5545 15.8662C29.6234 15.1762 29.6578 14.4274 29.6578 13.6333C29.6578 12.2569 29.419 10.6747 28.9462 8.93074C28.2167 6.23571 27.094 3.77231 26.4501 2.47198C25.7967 3.71961 24.6716 6.058 23.9302 8.65008C23.4348 10.383 23.1841 11.9689 23.1841 13.3612C23.1841 14.1382 23.2186 14.8784 23.2863 15.5611C23.3374 15.6591 23.3885 15.7559 23.4372 15.8528C24.4292 15.5942 25.4462 15.4643 26.4667 15.4643Z" fill="#00BCD4"/>
+<path d="M35.9252 22.0267L35.5117 21.4421C34.1205 19.4726 32.203 18.0289 29.9671 17.2703L29.3125 17.0472L29.6226 16.4124C30.0717 15.4908 30.6609 14.5128 31.3738 13.509C32.064 12.5359 32.9669 11.564 34.0552 10.6191C37.4506 7.67407 41.5459 5.92641 41.7181 5.85287L42.6424 5.46191L42.5331 6.48649C42.5153 6.65317 42.0793 10.6203 40.6311 14.5949C39.9764 16.3928 39.2125 17.9149 38.3583 19.1185C37.7085 20.034 37.0538 20.8379 36.4147 21.5095L35.9252 22.0267ZM30.9995 16.3523C32.9693 17.1502 34.6908 18.4444 36.0357 20.1381C36.4859 19.6234 36.9433 19.04 37.3996 18.3966C38.1884 17.2825 38.9024 15.8597 39.519 14.1647C40.4719 11.5456 40.9768 8.87758 41.2013 7.43631C39.7959 8.12508 37.1073 9.57126 34.8191 11.5567C33.8033 12.4379 32.9646 13.3387 32.3301 14.2333C31.8157 14.9613 31.369 15.6721 30.9995 16.3523Z" fill="#00BCD4"/>
+<path d="M37.6154 28.9753L37.6593 28.2179C37.6593 25.8133 36.937 23.4909 35.5695 21.5214L35.168 20.9429L35.781 20.6193C36.6756 20.1463 37.7104 19.7173 38.8592 19.3423C39.9214 18.9955 41.1391 18.7651 42.4804 18.6584C46.9712 18.3006 51.405 19.4183 51.5904 19.4661L52.561 19.7149L51.885 20.476C51.7722 20.6034 49.0717 23.6232 45.5539 25.9628C44.051 26.9629 42.6135 27.6909 41.284 28.126C40.2148 28.4765 39.224 28.7241 38.3412 28.8625L37.6154 28.9753ZM36.9287 21.4086C38.0632 23.2543 38.7131 25.3451 38.8295 27.5279C39.4758 27.3931 40.1792 27.2019 40.9253 26.958C42.1549 26.556 43.4962 25.8746 44.91 24.9334C47.2421 23.3818 49.2404 21.4785 50.2681 20.4318C48.7082 20.1254 45.6145 19.6401 42.5707 19.8828C41.3209 19.9821 40.1934 20.1941 39.2192 20.5127C38.3852 20.7823 37.6177 21.0838 36.9287 21.4086Z" fill="#00BCD4"/>
+<path d="M44.8829 38.0807C44.2259 38.0807 43.5511 38.0587 42.8704 38.0097C41.2059 37.8871 39.7292 37.6064 38.4841 37.1726C37.4433 36.811 36.5036 36.4115 35.6886 35.9862L35.0625 35.6578L35.4795 35.0744C36.8767 33.1184 37.6287 30.7972 37.6536 28.3607L37.6608 27.6499L38.3415 27.7614C39.33 27.9244 40.4111 28.2075 41.5564 28.6046C42.6126 28.9723 43.7258 29.5275 44.8663 30.2579C48.6978 32.7078 51.6358 36.3098 51.7594 36.463L52.4009 37.2547L51.4196 37.4569C51.2723 37.49 48.3544 38.0807 44.8829 38.0807ZM36.841 35.1994C37.454 35.4862 38.13 35.7583 38.8619 36.0132C40.0119 36.4127 41.3889 36.6726 42.9523 36.7878C45.8191 36.9986 48.6585 36.664 50.1377 36.4385C49.0542 35.2399 46.8349 32.964 44.2378 31.3046C43.1745 30.6244 42.1445 30.1084 41.1762 29.7714C40.3458 29.4834 39.5533 29.2591 38.8132 29.101C38.6718 31.2849 37.9994 33.3684 36.841 35.1994Z" fill="#00BCD4"/>
+<path d="M42.228 51.3172L41.3204 50.8833C41.154 50.8049 37.2002 48.893 33.8737 45.9136C32.7082 44.8682 31.7565 43.8118 31.0449 42.7725C30.4164 41.8533 29.8854 40.9599 29.4707 40.1155L29.1523 39.4708L29.8212 39.2539C32.0678 38.5247 34.0043 37.1091 35.4217 35.158L35.8363 34.5894L36.3199 35.0943C37.0256 35.8309 37.7348 36.7169 38.4286 37.7317C39.0999 38.7134 39.7046 39.9022 40.225 41.265C41.8526 45.5276 42.152 50.0965 42.1639 50.2877L42.228 51.3172ZM30.8536 40.1804C31.1839 40.7871 31.5736 41.4182 32.0167 42.0653C32.6737 43.025 33.56 44.0079 34.6542 44.9871C36.8984 46.9995 39.5062 48.5364 40.8736 49.2791C40.6895 47.6834 40.2167 44.5876 39.1201 41.7148C38.6342 40.4415 38.0746 39.3397 37.4592 38.4376C36.9543 37.7011 36.4446 37.038 35.9373 36.4596C34.571 38.1374 32.8341 39.4083 30.8536 40.1804Z" fill="#00BCD4"/>
+<path d="M25.9698 56.4681L25.4863 55.5648C25.4863 55.5648 25.3057 55.2266 25.0229 54.6371C24.2946 53.1112 22.97 50.0681 22.2797 46.8216C21.9661 45.346 21.8176 43.9807 21.8378 42.7613C21.8568 41.6264 21.9411 40.581 22.0896 39.6532L22.2037 38.9399L22.8666 39.1716C25.0776 39.9474 27.5036 39.9829 29.73 39.2831L30.3893 39.076L30.4903 39.7782C30.6388 40.8016 30.7042 41.9499 30.6828 43.1914C30.6602 44.4758 30.4404 45.9049 30.0282 47.4405C29.2405 50.3721 27.9111 53.0585 27.1887 54.4005C26.7812 55.1542 26.508 55.5991 26.508 55.5991L25.9698 56.4681ZM23.1672 40.5491C23.0876 41.2367 23.0401 41.9843 23.027 42.7821C23.008 43.906 23.147 45.1756 23.4404 46.5581C24.0903 49.6147 25.3318 52.4984 26.0434 54.001C26.0779 53.9373 26.1135 53.8723 26.1504 53.8037C26.8466 52.5107 28.1285 49.9223 28.8841 47.112C29.2678 45.6769 29.4745 44.3496 29.4947 43.1694C29.5102 42.2686 29.4769 41.4229 29.3997 40.6459C27.361 41.1582 25.1928 41.1288 23.1672 40.5491Z" fill="#00BCD4"/>
+<path d="M9.90625 50.7179L10.0334 49.6945C10.0583 49.5009 10.644 44.8989 12.4558 40.678C13.0486 39.2956 13.7104 38.1055 14.422 37.1386C15.0861 36.2353 15.7538 35.4424 16.4049 34.783L16.9051 34.2769L17.3078 34.8676C18.6681 36.8628 20.5595 38.3396 22.7811 39.1387L23.431 39.3716L23.1114 40.0015C22.6469 40.9158 22.041 41.8815 21.3115 42.8742C20.5084 43.9662 19.4308 45.0509 18.1097 46.0987C14.7654 48.7496 10.9981 50.2791 10.8389 50.3429L9.90625 50.7179ZM16.7601 36.1618C16.3003 36.6692 15.8334 37.2452 15.3665 37.88C14.7107 38.771 14.0965 39.8789 13.5405 41.1731C12.3121 44.0385 11.6598 47.1662 11.3806 48.7692C12.7077 48.1479 15.1729 46.8806 17.385 45.1268C18.623 44.1452 19.6245 43.139 20.3635 42.134V42.1328C20.8933 41.4146 21.3519 40.7123 21.7321 40.0383C19.7766 39.2049 18.0777 37.8813 16.7601 36.1618Z" fill="#00BCD4"/>
+<path d="M8.9163 37.5657C4.92445 37.5657 1.3508 36.5963 1.19635 36.5546L0.230469 36.2887L0.919538 35.5411C1.04666 35.4026 4.07025 32.1389 7.87438 29.8373C9.19906 29.0358 10.4691 28.4438 11.6476 28.081C12.7038 27.7563 13.6958 27.5234 14.5987 27.3886L15.289 27.2856L15.2724 28.2367C15.2724 30.5898 15.9567 32.8546 17.2505 34.7874L17.6425 35.3732L17.0236 35.6869C16.123 36.1428 15.0799 36.5534 13.9251 36.9088C12.604 37.3157 11.05 37.5363 9.30598 37.5633C9.17411 37.5645 9.04461 37.5657 8.9163 37.5657ZM2.53529 35.6134C3.93124 35.9137 6.57109 36.3904 9.2846 36.3365C10.9194 36.3107 12.3664 36.1073 13.583 35.7323C14.4217 35.4749 15.194 35.1881 15.8878 34.8756C14.7853 33.0127 14.1699 30.9072 14.0915 28.7196C13.4321 28.8482 12.7264 29.0284 11.9862 29.2564C10.8992 29.5909 9.71705 30.1437 8.47435 30.8962C5.90341 32.449 3.65562 34.5128 2.53529 35.6134Z" fill="#00BCD4"/>
+<path d="M15.2598 28.6191L14.5814 28.4941C13.5918 28.3127 12.5154 28.0088 11.3796 27.5921C10.0775 27.1129 8.69581 26.3432 7.27252 25.3039C3.89133 22.8307 1.41543 19.6859 1.31088 19.5523L0.683594 18.7496L1.6673 18.5645C1.84075 18.5327 5.95141 17.774 10.2343 18.1687C11.8893 18.3206 13.3553 18.627 14.5945 19.0817C15.6316 19.4629 16.5655 19.8796 17.3709 20.3196L17.9911 20.6578L17.5658 21.2326C16.1354 23.1641 15.3441 25.4706 15.2788 27.9071L15.2598 28.6191ZM2.9302 19.6099C3.8842 20.7032 5.73756 22.6788 7.95921 24.3051C9.29339 25.2794 10.5777 25.9976 11.7776 26.4376C12.6021 26.7403 13.3898 26.9793 14.1299 27.1509C14.307 24.9681 15.0162 22.8969 16.2043 21.088C15.5972 20.7902 14.9248 20.5046 14.1965 20.2374C13.0536 19.8171 11.6849 19.5327 10.1298 19.3906C7.26183 19.1258 4.41288 19.4114 2.9302 19.6099Z" fill="#00BCD4"/>
+<path d="M17.2 21.7173L16.7248 21.205C16.0345 20.4611 15.3383 19.5603 14.6576 18.5271C13.9079 17.3886 13.2533 15.9877 12.7139 14.3626C11.3465 10.2496 11.1445 6.08145 11.1362 5.90619L11.0898 4.87549L11.9892 5.3265C12.1389 5.40248 15.7173 7.2102 18.8953 10.018C20.2533 11.2178 21.3403 12.4299 22.1245 13.6199C22.5343 14.2438 22.9038 14.859 23.2222 15.4522C23.3802 15.7463 23.524 16.0319 23.6547 16.3088L23.9612 16.9596L23.2887 17.1643C21.0338 17.8518 19.0747 19.2331 17.6217 21.1584L17.2 21.7173ZM12.4098 6.93813C12.5571 8.4321 12.9337 11.2436 13.839 13.9643C14.3451 15.4865 14.951 16.7905 15.6413 17.8371C16.1355 18.586 16.6345 19.26 17.1311 19.8458C18.5258 18.1913 20.2842 16.951 22.2753 16.2157C22.2456 16.1593 22.2159 16.1029 22.185 16.0453C21.8833 15.484 21.5328 14.9007 21.1431 14.3075C20.4184 13.2081 19.4014 12.0769 18.1231 10.9482C16.0155 9.08533 13.6762 7.65508 12.4098 6.93813Z" fill="#00BCD4"/>
+</svg>
diff --git a/src/img/subject_icons/subject_educacao-especial.svg b/src/img/subject_icons/subject_educacao-especial.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0751851245725cec37e928296c7c4460a9097331
--- /dev/null
+++ b/src/img/subject_icons/subject_educacao-especial.svg
@@ -0,0 +1,8 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2161 24.6992C15.2407 24.6992 16.8971 23.0024 16.8971 20.9287C16.8971 18.8549 15.2407 17.1582 13.2161 17.1582C11.1916 17.1582 9.53516 18.8549 9.53516 20.9287C9.53516 23.0024 11.1916 24.6992 13.2161 24.6992ZM13.2161 18.6664C14.5045 18.6664 15.5168 19.7033 15.5168 21.0229C15.5168 22.3426 14.5045 23.3795 13.2161 23.3795C11.9278 23.3795 10.9155 22.3426 10.9155 21.0229C10.9155 19.7033 11.9278 18.6664 13.2161 18.6664Z" fill="#00BCD4"/>
+<path d="M13.767 41.9472C13.2148 43.4554 11.8345 44.4923 10.27 44.4923C8.2455 44.4923 6.49704 42.7956 6.49704 40.6276C6.49704 39.0251 7.50931 37.5169 8.9817 37.0456L9.44183 36.8571V32.3325L8.6136 32.521C4.84059 33.2751 2.17188 36.6686 2.17188 40.6276C2.17188 45.1521 5.76084 48.9226 10.27 48.9226C14.1351 48.9226 17.448 46.0948 18.1842 42.3243L18.3682 41.4759H13.951L13.767 41.9472ZM14.8713 42.8899H16.5277C15.6075 45.6235 13.0308 47.5087 10.178 47.5087C6.49703 47.5087 3.46022 44.398 3.46022 40.6276C3.46022 37.7054 5.30071 35.0661 7.96943 34.1235V35.8202C6.22096 36.6686 5.02464 38.5538 5.02464 40.5333C5.02464 43.4554 7.32526 45.812 10.178 45.812C12.2026 45.9062 14.0431 44.6808 14.8713 42.8899Z" fill="#00BCD4"/>
+<path d="M23.4309 30.8224C21.4984 30.8224 19.3818 29.7855 18.0014 28.2773L16.0689 26.1093C15.7928 25.8265 15.4247 25.5438 15.0566 25.261L14.9646 25.1667H14.8726C14.2284 24.8839 13.5842 24.6954 12.848 24.7897C11.0076 24.9782 9.53516 26.6749 9.53516 28.6544V37.6093C9.53516 39.683 11.1916 41.3798 13.2161 41.3798H19.9339V48.9207H24.2591V39.8716C24.2591 37.7978 22.6027 36.1011 20.5781 36.1011H16.8051V32.9904C18.8296 34.4044 21.4063 35.2527 23.5229 35.2527H24.2591V30.8224H23.4309C23.4309 30.8224 23.5229 30.8224 23.4309 30.8224ZM22.8787 33.8388C20.7622 33.6503 18.3695 32.6134 16.6211 31.1052L15.4247 30.1626V37.6093H20.5781C21.8665 37.6093 22.8787 38.6462 22.8787 39.9658V47.601H21.3143V40.0601H13.2161C11.9278 40.0601 10.9155 39.0232 10.9155 37.7035V28.7487C10.9155 27.5233 11.8358 26.3921 12.9401 26.2978C13.4002 26.2036 13.8603 26.3921 14.3204 26.5806L14.4125 26.6749H14.5045C14.6885 26.7692 14.8726 26.9577 15.0566 27.1462L16.9892 29.3142C18.4616 31.0109 20.6701 32.1421 22.7867 32.3306V33.8388H22.8787Z" fill="#00BCD4"/>
+<path d="M39.3473 28.4677L43.1203 33.0866L46.8013 30.4472L40.3596 22.2464L39.6234 21.3981C39.1632 20.8325 38.7031 20.2669 38.243 19.7014C37.5068 18.853 36.5865 18.6645 35.7583 18.6645C35.6663 18.6645 35.6663 18.6645 35.5743 18.6645C37.5068 18.6645 39.1632 16.9678 39.1632 14.894C39.1632 12.8202 37.5068 11.1235 35.4823 11.1235C33.4577 11.1235 31.8013 12.8202 31.8013 14.894C31.8013 16.9678 33.3657 18.5702 35.3902 18.6645C33.6418 18.6645 32.3534 19.3243 31.7092 20.644L27.6602 28.2792L28.7645 35.8202L32.8135 34.312L32.0773 29.5989L33.2737 27.5251L33.4577 34.689L28.4884 48.2627L33.4577 49.7709L38.9792 35.0661L39.3473 28.4677ZM33.1816 14.894C33.1816 13.5743 34.1939 12.5375 35.4823 12.5375C36.7706 12.5375 37.7829 13.5743 37.7829 14.894C37.7829 16.2137 36.7706 17.2506 35.4823 17.2506C34.1939 17.2506 33.1816 16.2137 33.1816 14.894ZM37.6908 34.5948L32.6295 47.9799L30.3289 47.2258L34.8381 34.8775L34.47 22.6235L30.6049 29.2218L31.2491 33.2751L29.8687 33.7464L29.0405 28.3735L32.9056 21.2096C33.5497 19.9842 35.0221 19.9842 35.6663 19.9842C36.4945 19.9842 36.8626 20.1727 37.2307 20.5497C37.6908 21.1153 38.151 21.6809 38.6111 22.2464L44.7767 30.1644L43.3964 31.2013L37.8749 24.3202L36.7706 25.2628L38.0589 26.8653L37.6908 34.5948Z" fill="#00BCD4"/>
+<path d="M37.2344 40.9087L40.4552 49.8636L44.5963 48.1669L39.535 34.9702L37.2344 40.9087ZM42.7559 47.3185L41.1914 47.9784L38.6147 40.9087L39.3509 38.835L42.7559 47.3185Z" fill="#00BCD4"/>
+<path d="M53.9812 47.7915L45.5149 32.7096C45.3309 32.3325 44.8707 32.2383 44.5947 32.4268C44.2266 32.6153 44.1345 33.0866 44.3186 33.3694L52.8769 48.5456L53.0609 48.7341C53.153 48.8284 53.337 48.9226 53.5211 48.9226C53.7051 48.9226 53.8892 48.8284 53.9812 48.7341C54.2573 48.5456 54.2573 48.0743 53.9812 47.7915Z" fill="#00BCD4"/>
+</svg>
diff --git a/src/img/subject_icons/subject_educacao-fisica.svg b/src/img/subject_icons/subject_educacao-fisica.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5ef2e5bcb9b0bfdc4a88695334eb98d2d9637b84
--- /dev/null
+++ b/src/img/subject_icons/subject_educacao-fisica.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<g>
+		<path class="st1" d="M38.6,47.7h-5.3V36.6l-3.9-5.2l-3,8.5l-11,4.8l-3-4.3l9.3-5.5l4.9-19.2l-2.6,0.8v7.9h-5.3V12.2l12.1-3.8
+			l1.2-0.2c1.5,0,2.9,0.8,3.7,2.1l4,6.7h8v5.3H36l-1.6-2.6l-1,4l5.2,9.5V47.7z M34.8,46.2h2.3V33.6l-5.3-9.7l2.1-8.1l3,5H46v-2.3
+			h-7.3l-4.4-7.4c-0.5-0.9-1.4-1.4-2.4-1.4l-0.9,0.1L20,13.3V23h2.3v-7.5l6.3-2l-5.7,22.4l-8.4,5l1.4,2l9.3-4.1l3.7-10.5l5.9,7.9
+			V46.2z M36.2,9.3c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5s4.5,2,4.5,4.5S38.7,9.3,36.2,9.3z M36.2,1.7c-1.7,0-3,1.3-3,3
+			c0,1.7,1.3,3,3,3c1.7,0,3-1.3,3-3C39.2,3,37.9,1.7,36.2,1.7z"/>
+	</g>
+	<g>
+		<rect x="4.5" y="12.4" class="st1" width="10.6" height="1.5"/>
+	</g>
+	<g>
+		<rect x="6.6" y="20.9" class="st1" width="8.4" height="1.5"/>
+	</g>
+	<g>
+		<rect x="8.7" y="29.3" class="st1" width="10.6" height="1.5"/>
+	</g>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_educacao-indigena.svg b/src/img/subject_icons/subject_educacao-indigena.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d38c4c31fe4fbe96409459aa68c4c87696ed0a14
--- /dev/null
+++ b/src/img/subject_icons/subject_educacao-indigena.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="10 0.1 72 47.7" style="enable-background:new 10 0.1 72 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#29C3CE;}
+</style>
+<rect x="10" y="0.1" class="st0" width="72" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<path class="st1" d="M78.1,26.8c-0.2-0.2-0.4-0.3-0.7-0.3l-4-0.1c-0.3,0-0.5,0.1-0.7,0.3l-8.1,7.9c-0.2,0.2-0.3,0.4-0.3,0.7l-0.1,4
+	c0,0.1,0,0.1,0,0.2l-0.7,0.7c-0.9-3.1-3-5.4-6.2-6.8l0.3-0.7c0.1,0,0.1,0,0.2,0l3.7-1.5c0.2-0.1,0.4-0.3,0.5-0.5l4.5-10.4
+	c0.1-0.2,0.1-0.5,0-0.7L65,15.9c-0.2-0.5-0.8-0.7-1.3-0.5L60,16.9c-0.2,0.1-0.4,0.3-0.5,0.5L55,27.8c-0.1,0.2-0.1,0.5,0,0.7l1.5,3.7
+	c0,0.1,0.1,0.1,0.1,0.2l-0.3,0.7c-2.7-1-6.1-1.6-10.2-1.6v-1.7c0.2-0.1,0.3-0.2,0.5-0.3l3.9-3.8c0.3-0.3,0.4-0.6,0.4-1l0.2-15.5
+	c0-0.4-0.1-0.7-0.4-1l-3.8-3.9c-0.3-0.3-0.6-0.4-1-0.4s-0.7,0.1-1,0.4l-3.7,3.6c-0.3,0.3-0.4,0.6-0.4,1l-0.2,15.5
+	c0,0.4,0.1,0.7,0.4,1l3.8,3.9c0.1,0.1,0.3,0.2,0.5,0.3v1.7c-4,0-7.4,0.6-10,1.6l-0.2-0.5c0-0.1,0.1-0.1,0.1-0.2l1.6-3.7
+	c0.1-0.2,0.1-0.5,0-0.7l-4.2-10.5c-0.1-0.2-0.3-0.4-0.5-0.5l-3.7-1.6c-0.5-0.2-1.1,0-1.3,0.5l-1.6,3.7c-0.1,0.2-0.1,0.5,0,0.7
+	l4.2,10.5c0.1,0.2,0.3,0.4,0.5,0.5l3.7,1.6c0.1,0,0.1,0,0.2,0l0.2,0.5C31,34.7,28.9,36.9,28,40l-0.4-0.4c0-0.1,0-0.1,0-0.2l0.1-4
+	c0-0.3-0.1-0.5-0.3-0.7l-7.9-8.1c-0.2-0.2-0.4-0.3-0.7-0.3l-4-0.1c-0.2,0-0.5,0.1-0.7,0.3c-0.2,0.2-0.3,0.4-0.3,0.7l-0.1,4
+	c0,0.3,0.1,0.5,0.3,0.7l7.9,8.1c0.2,0.2,0.4,0.3,0.7,0.3l4,0.1c0.1,0,0.1,0,0.2,0l0.9,0.9c-0.2,0.8-0.3,1.7-0.3,2.7h2
+	c0-7.1,5.3-10.6,16.3-10.6S62.1,36.9,62.1,44h2c0-0.9-0.1-1.8-0.2-2.7l1.1-1.1c0.1,0,0.1,0,0.2,0l4,0.1c0.3,0,0.5-0.1,0.7-0.3
+	l8.1-7.9c0.2-0.2,0.3-0.4,0.3-0.7l0.1-4C78.3,27.2,78.2,27,78.1,26.8z M14.7,31.4l0.1-4.1l4,0.1l4.9,5.1l-0.1,3.3l-3.1-3.2l-3.1-3.2
+	c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l2.2,2.3l-3.3-0.1L14.7,31.4z M22.6,39.4l-6-6.1l3.3,0.1l3.8,4l2.1,2.2L22.6,39.4z
+	 M26.6,38.8l-2-2.1l0.1-3.3l2,2L26.6,38.8z M26.4,19.7l1.5-3.6l3.7,1.6l0.5,1.3L32,19.1l-1.2,2.8l-1.2-3c-0.1-0.3-0.4-0.4-0.6-0.3
+	c-0.3,0.1-0.4,0.4-0.3,0.6l3.3,8.3l-3-1.3L26.4,19.7z M30.6,30.3l-1-2.6l3,1.3l1,2.6L30.6,30.3z M33.4,28.3l-2-5.1l1.3-3l3.2,7.9
+	l-1.4,3.1L33.4,28.3z M49.7,24.4l-3.4,3.3l0.1-4l3.4-3.3L49.7,24.4z M45.5,23.4l-0.1,4.3l-3.3-3.3l0.2-12l3.3,3.4L45.5,23.4z
+	 M45.6,9.5l-0.1,4.8l-3.3-3.4V8.8l3.9-3.6l3.8,3.9L49.8,19l-3.4,3.2l0.2-12.7c0-0.3-0.2-0.5-0.5-0.5S45.6,9.2,45.6,9.5z M61.2,30.3
+	l-3.1,1.2l1.1-2.6l3-1.2L61.2,30.3z M60.5,17.7l3.7-1.5l1.5,3.7l-2.8,6.5l-3,1.2l3.5-8.2c0.1-0.3,0-0.5-0.3-0.7
+	c-0.3-0.1-0.5,0-0.7,0.3l-1.2,2.9l-1.2-3L60.5,17.7z M56,28l3.4-7.9l1.2,3l-3.4,7.8L56,28z M65.3,35.3l2-2l-0.1,3.3l-2,2L65.3,35.3z
+	 M69.2,39.3h-3.3l6.2-6l3.3,0.1L69.2,39.3z M77.3,31.5l-1,0.9h-0.1h-3.1l2.3-2.2c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0l-6.4,6.2
+	l0.1-3.3l5-4.9h4L77.3,31.5z"/>
+</svg>
diff --git a/src/img/subject_icons/subject_educacao-quilombola.svg b/src/img/subject_icons/subject_educacao-quilombola.svg
new file mode 100644
index 0000000000000000000000000000000000000000..96bf2a8f4404a5fb11edc91dc4816c8605a2544d
--- /dev/null
+++ b/src/img/subject_icons/subject_educacao-quilombola.svg
@@ -0,0 +1,16 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.5148 24.708C21.0731 24.708 16.0117 21.6917 16.0117 17.8269C16.0117 13.9622 21.0731 10.9458 27.5148 10.9458C29.1712 10.9458 30.7357 11.1343 32.2081 11.5114L31.84 12.9253C30.4596 12.5483 28.9872 12.3597 27.4228 12.3597C21.9013 12.3597 17.3001 14.8106 17.3001 17.8269C17.3001 20.8433 21.9933 23.2941 27.4228 23.2941C32.9443 23.2941 37.5455 20.8433 37.5455 17.8269C37.5455 16.6015 36.7173 15.5647 35.9811 14.9991L36.9013 13.8679C38.2817 14.9991 38.9259 16.413 38.9259 17.8269C39.0179 21.7859 33.9565 24.708 27.5148 24.708Z" fill="#00BCD4"/>
+<path d="M27.6068 46.1051C22.8216 46.1051 19.1406 43.9371 19.1406 41.1092L16.0117 18.5806L17.3921 18.3921L20.521 41.1092C20.521 42.8059 23.4657 44.7854 27.6989 44.7854C31.6559 44.7854 34.8768 43.183 34.8768 41.1092L35.797 33.6625L37.8216 18.3921L39.202 18.5806L36.2571 41.2035C36.1651 43.9371 32.4841 46.1051 27.6068 46.1051Z" fill="#00BCD4"/>
+<path d="M27.5164 47.897C21.6269 47.897 16.9336 45.1634 16.9336 41.77C16.9336 40.4503 17.6698 39.2249 19.0502 38.0938L19.6023 38.8478C18.7741 39.5077 17.8538 40.5446 17.8538 41.77C17.8538 44.5978 22.271 46.9544 27.5164 46.9544C32.7618 46.9544 37.179 44.5978 37.179 41.77C37.179 40.4503 36.2588 39.5077 35.4306 38.8478L35.9827 38.0938C37.3631 39.2249 38.0993 40.4503 38.0993 41.77C38.0993 45.1634 33.406 47.897 27.5164 47.897Z" fill="#00BCD4"/>
+<path d="M27.5164 51.856C21.6269 51.856 16.9336 49.1224 16.9336 45.729H17.8538C17.8538 48.5569 22.271 50.9134 27.5164 50.9134C32.7618 50.9134 37.179 48.5569 37.179 45.729H38.0993C38.0993 49.1224 33.406 51.856 27.5164 51.856Z" fill="#00BCD4"/>
+<path d="M38.096 41.8638H37.1758V45.7285H38.096V41.8638Z" fill="#00BCD4"/>
+<path d="M27.8829 21.8798L27.0547 21.5028L34.6007 6.04385C35.4289 4.53566 37.1774 3.97007 38.5578 4.72416C39.2019 5.10121 39.7541 5.76107 40.0302 6.51516C40.3063 7.26926 40.2142 8.11761 39.8461 8.77744L34.0486 20.7487L33.2204 20.3716L39.0179 8.4004C39.294 7.92909 39.294 7.36351 39.1099 6.8922C38.9259 6.42089 38.5578 5.94957 38.0977 5.66678C37.6375 5.384 37.0854 5.38402 36.6253 5.57254C36.1652 5.76107 35.705 6.13809 35.4289 6.6094L27.8829 21.8798Z" fill="#00BCD4"/>
+<path d="M32.9433 17.7331C32.8513 17.7331 32.7592 17.7331 32.7592 17.6388C32.5752 17.5446 32.4831 17.2618 32.5752 16.979L38.3727 5.00774C38.4648 4.81922 38.7408 4.72494 39.0169 4.8192C39.2009 4.91347 39.293 5.19626 39.201 5.47905L33.4034 17.4503C33.3114 17.6388 33.1273 17.7331 32.9433 17.7331Z" fill="#00BCD4"/>
+<path d="M17.8538 41.7686H16.9336V45.7275H17.8538V41.7686Z" fill="#00BCD4"/>
+<path d="M34.7882 27.0641C34.5122 27.0641 34.3281 26.8756 34.3281 26.5928V22.9166C34.3281 22.6338 34.5122 22.4453 34.7882 22.4453C35.0643 22.4453 35.2484 22.6338 35.2484 22.9166V26.5928C35.2484 26.8756 35.0643 27.0641 34.7882 27.0641Z" fill="#00BCD4"/>
+<path d="M20.4289 27.0632C20.1528 27.0632 19.9688 26.8746 19.9688 26.5919V22.9156C19.9688 22.6329 20.1528 22.4443 20.4289 22.4443C20.7049 22.4443 20.889 22.6329 20.889 22.9156V26.5919C20.889 26.8746 20.7049 27.0632 20.4289 27.0632Z" fill="#00BCD4"/>
+<path d="M27.5148 33.2861C27.2387 33.2861 27.0547 33.0976 27.0547 32.8148V24.1427C27.0547 23.8599 27.2387 23.6714 27.5148 23.6714C27.7909 23.6714 27.9749 23.8599 27.9749 24.1427V32.8148C27.9749 33.0976 27.7909 33.2861 27.5148 33.2861Z" fill="#00BCD4"/>
+<path d="M27.5148 45.6339C27.2387 45.6339 27.0547 45.4453 27.0547 45.1626V39.9781C27.0547 39.6954 27.2387 39.5068 27.5148 39.5068C27.7909 39.5068 27.9749 39.6954 27.9749 39.9781V45.1626C27.9749 45.4453 27.7909 45.6339 27.5148 45.6339Z" fill="#00BCD4"/>
+<path d="M31.4718 45.3519C31.1958 45.3519 31.0117 45.1634 31.0117 44.8806V36.6798C31.0117 36.397 31.1958 36.2085 31.4718 36.2085C31.7479 36.2085 31.932 36.397 31.932 36.6798V44.8806C31.932 45.1634 31.7479 45.3519 31.4718 45.3519Z" fill="#00BCD4"/>
+<path d="M27.5145 22.1637C22.3611 22.1637 18.4961 19.9015 18.4961 17.922C18.4961 15.9425 22.3611 13.6802 27.5145 13.6802C28.7108 13.6802 29.9072 13.7745 30.9194 14.0572L30.7354 14.9999C29.7231 14.8113 28.6188 14.6228 27.5145 14.6228C22.5452 14.6228 19.4163 16.7908 19.4163 17.922C19.4163 19.0531 22.5452 21.2211 27.5145 21.2211C32.4838 21.2211 35.6127 19.0531 35.6127 17.922C35.6127 17.6392 35.4286 17.3564 35.1526 17.0736L35.7967 16.4138C36.2569 16.9794 36.5329 17.4507 36.5329 18.0162C36.5329 19.9015 32.6679 22.1637 27.5145 22.1637Z" fill="#00BCD4"/>
+</svg>
diff --git a/src/img/subject_icons/subject_educacao-sexual.svg b/src/img/subject_icons/subject_educacao-sexual.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3bbf3fd29279b0ea0c4cd40f607480cff8db48a6
--- /dev/null
+++ b/src/img/subject_icons/subject_educacao-sexual.svg
@@ -0,0 +1,7 @@
+<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.0224 35.2511C36.7951 35.2511 36.5605 35.2313 36.323 35.1993L36.15 35.1701C35.9209 35.1295 35.7644 35.1003 35.6052 35.0607C35.5086 35.0372 35.4065 35.0079 35.3062 34.9797C35.1644 34.9382 35.0236 34.8939 34.8819 34.8458C34.7724 34.809 34.6629 34.7695 34.5525 34.728C34.419 34.6771 34.2865 34.6215 34.1522 34.564L34.074 34.531C33.9819 34.4923 33.8908 34.4537 33.7979 34.4113C33.7086 34.3707 33.6203 34.3255 33.531 34.2812L33.4399 34.235C33.1298 34.0813 32.8169 33.9154 32.5031 33.7345L32.3871 33.6704C32.2206 33.5723 32.0549 33.4686 31.8884 33.3649L31.7163 33.2603C30.6552 32.5826 29.5279 31.7465 28.3684 30.7756L28.2727 30.6926C28.0187 30.4768 27.8108 30.2986 27.6083 30.1223L25.1172 27.7978L26.9025 25.8438L27.1601 26.0182C27.5862 26.4348 28.0611 26.8854 28.569 27.3482L29.4939 28.1664C29.6512 28.3031 29.8104 28.4379 29.9715 28.5727C31.189 29.5992 32.3319 30.4485 33.369 31.097C33.9166 31.4354 34.4062 31.7059 34.8644 31.9209C35.0513 32.0085 35.1902 32.0688 35.3264 32.1235L35.3181 32.4855L35.4368 32.1669C35.5519 32.2112 35.666 32.2536 35.7782 32.2904L35.9006 32.3271C36.0562 32.3733 36.1371 32.3978 36.2154 32.4167C36.2835 32.4327 36.3497 32.444 36.4151 32.4553L36.5098 32.4742C36.5513 32.4827 36.5936 32.4921 36.6332 32.4959C36.9994 32.5439 37.3307 32.5222 37.6648 32.4902L37.87 32.4647C38.0089 32.4459 38.1506 32.4261 38.2905 32.3988C38.3697 32.3837 38.4451 32.3667 38.5215 32.3479C38.6513 32.3186 38.7783 32.2847 38.9043 32.2479L39.1307 32.1782C39.2595 32.1348 39.3865 32.0858 39.5135 32.0349L39.7086 31.9576C39.8881 31.8775 40.0638 31.7917 40.235 31.6975L40.4347 31.5768C40.5378 31.5146 40.6436 31.4514 40.7457 31.3826C40.8194 31.3327 40.8902 31.2808 40.962 31.228C41.0678 31.1498 41.146 31.0904 41.2243 31.0273C41.3062 30.9613 41.389 30.8906 41.47 30.8189L41.631 30.67C41.7654 30.5409 41.8399 30.4692 41.9108 30.3948L42.0516 30.2355C42.3488 29.8999 42.6157 29.5332 42.843 29.1486L42.924 29.0129C42.993 28.8894 43.0565 28.765 43.1172 28.6396L43.1918 28.4803C43.2497 28.3521 43.3059 28.2211 43.3574 28.0872L43.4089 27.9439C43.4605 27.8007 43.5102 27.6564 43.5516 27.5103C43.7365 26.8637 43.8304 26.2058 43.8304 25.5535C43.8304 21.7085 40.777 18.58 37.0233 18.58C36.1178 18.58 34.8893 19.0607 33.3718 20.008L33.1022 20.1768L32.9236 19.9091C32.5601 19.3652 32.1378 18.8496 31.6638 18.3764L31.3601 18.0728L31.7209 17.8428C33.796 16.5222 35.5795 15.852 37.0243 15.852C39.5678 15.852 42.0249 16.9247 43.8083 18.8053L47.7764 16.4666L45.4869 15.8643C45.1418 15.7728 44.8528 15.5504 44.6715 15.2365C44.4902 14.9226 44.4387 14.555 44.528 14.2024C44.7102 13.4747 45.4408 13.0345 46.1494 13.2202L51.7252 14.7105C51.7988 14.7378 51.8835 14.7793 51.9617 14.8293C52.0243 14.8698 52.0795 14.9094 52.1338 14.9584C52.2148 15.0291 52.2912 15.1168 52.3574 15.2148L52.4154 15.2893C52.5056 15.4476 52.5626 15.6249 52.5856 15.8153L52.5902 15.9171L52.258 15.9482L52.5902 15.9387L52.258 15.9482L52.593 15.9802V16.0632C52.5866 16.1669 52.5691 16.2734 52.5378 16.3771L51.0994 21.8895C50.9135 22.6012 50.1599 23.0423 49.4697 22.8557C49.1255 22.7614 48.8375 22.5361 48.6599 22.2204C48.4813 21.9046 48.4344 21.537 48.5255 21.1854L49.1458 18.8071L45.3902 21.0223C46.1154 22.4202 46.4982 23.9802 46.4982 25.5544C46.4982 26.2482 46.4181 26.9646 46.2617 27.6819C46.0915 28.4511 45.8273 29.2023 45.4758 29.914L45.4316 30.0064C45.3359 30.1959 45.2301 30.3806 45.1224 30.5625L45.0065 30.7577C44.9034 30.9236 44.7948 31.0857 44.6807 31.2459L44.5197 31.4656C44.4083 31.6136 44.2942 31.7597 44.1737 31.902L44.0062 32.0905C43.8525 32.2602 43.7319 32.3922 43.604 32.5185C43.5507 32.5713 43.4945 32.6222 43.4375 32.674L43.3684 32.7381C43.2157 32.8804 43.1025 32.987 42.9838 33.0859C42.9083 33.1472 42.8319 33.2047 42.7556 33.2622L42.6727 33.3235C42.4638 33.4828 42.2494 33.6355 42.0267 33.7769C41.8537 33.8881 41.7387 33.9616 41.6218 34.0304C41.5362 34.0785 41.4525 34.1219 41.3687 34.1652L41.2804 34.2105C41.135 34.2859 40.9914 34.3585 40.8433 34.4263C40.7421 34.4735 40.6381 34.5149 40.5359 34.5564C40.3372 34.6375 40.1807 34.6959 40.0206 34.7515C39.9046 34.7911 39.7868 34.8288 39.6672 34.8647C39.4988 34.9156 39.3295 34.9589 39.1565 35.0004L39.0672 35.0211C38.9825 35.0409 38.8988 35.0607 38.8132 35.0786C38.6191 35.1163 38.423 35.1446 38.2252 35.171L38.1341 35.1842C38.066 35.1946 37.9988 35.204 37.9298 35.2106C37.6307 35.2332 37.3289 35.2511 37.0224 35.2511ZM32.8316 33.1406C33.1325 33.315 33.4325 33.4743 33.7316 33.6223L33.8255 33.6694C33.9083 33.7109 33.9902 33.7524 34.073 33.7901C34.1586 33.8297 34.2442 33.8655 34.3279 33.9004L34.4098 33.9352C34.5359 33.989 34.6592 34.0408 34.7844 34.0889C34.8865 34.1275 34.9896 34.1633 35.0917 34.1982C35.2261 34.2444 35.3577 34.2849 35.4884 34.3236C35.5795 34.349 35.6715 34.3764 35.7626 34.3971C35.908 34.4339 36.0506 34.4593 36.1905 34.4848L36.4132 34.5244C36.9074 34.5885 37.3924 34.5724 37.8663 34.5253C37.9243 34.5197 37.9813 34.5112 38.0384 34.5036L38.1387 34.4886C38.3237 34.464 38.5068 34.4386 38.6871 34.4028C38.7645 34.3877 38.8399 34.3698 38.9163 34.3509L39.0074 34.3302C39.1657 34.2925 39.3249 34.251 39.4813 34.2039C39.5927 34.1718 39.7013 34.136 39.8089 34.0993C39.9571 34.0483 40.1025 33.9937 40.246 33.9352C40.3841 33.8787 40.4789 33.84 40.5718 33.7976C40.7089 33.7354 40.8442 33.6656 40.9776 33.5968L41.0687 33.5497C41.1451 33.5111 41.2215 33.4715 41.296 33.429C41.4019 33.3687 41.5077 33.2999 41.6135 33.232C41.8804 33.0614 42.081 32.92 42.2752 32.7711L42.3635 32.7061C42.4307 32.6552 42.4988 32.6052 42.5641 32.5515C42.6709 32.461 42.7749 32.3648 42.8798 32.2668L42.9957 32.1593C43.0454 32.115 43.0933 32.0707 43.1402 32.0236C43.2608 31.9048 43.3721 31.7832 43.4835 31.6588L43.6703 31.4477C43.7807 31.3166 43.8875 31.1809 43.9915 31.0423L44.1424 30.8359C44.2473 30.6889 44.3494 30.538 44.4451 30.3844L44.5206 30.2571C44.6531 30.0328 44.7507 29.8603 44.8418 29.684L45.1777 29.7547L44.8804 29.6011C45.2071 28.9384 45.4528 28.2409 45.6102 27.5283C45.7565 26.8599 45.8301 26.1944 45.8301 25.5487C45.8301 23.9812 45.4224 22.4287 44.6503 21.0591L44.4838 20.7631L50.2013 17.3913L49.1678 21.356C49.1218 21.5322 49.1458 21.7151 49.2341 21.8735C49.3224 22.0318 49.4669 22.144 49.639 22.1911C49.9832 22.2873 50.3605 22.0648 50.4543 21.7076L51.8945 16.1848C51.9139 16.1216 51.9221 16.0688 51.9249 16.0179L52.2543 15.9416L51.9221 15.9519L51.9212 15.9114C51.9102 15.7936 51.8817 15.705 51.8356 15.6249C51.7731 15.5466 51.7363 15.5042 51.6958 15.4674C51.6663 15.441 51.6378 15.4212 51.6074 15.4024C51.5697 15.3779 51.5264 15.3572 51.4813 15.3402L51.3884 15.2949L45.9819 13.8754C45.6249 13.7801 45.2623 14.0017 45.1712 14.3665C45.1261 14.5437 45.1519 14.7265 45.2421 14.884C45.3332 15.0414 45.4777 15.1526 45.6497 15.1978L49.5231 16.2178L43.6795 19.6621L43.4991 19.4613C41.8289 17.5987 39.4675 16.5298 37.0224 16.5298C35.7847 16.5298 34.2405 17.0897 32.4276 18.1954C32.7396 18.5328 33.0286 18.8882 33.2908 19.2568C34.7954 18.3519 36.0497 17.8937 37.0224 17.8937C41.1442 17.8937 44.4967 21.3286 44.4967 25.5497C44.4967 26.268 44.3936 26.99 44.1911 27.6979C44.1442 27.8591 44.0908 28.0156 44.0347 28.1721L43.9776 28.3304C43.9197 28.4803 43.8589 28.6236 43.7954 28.765L43.7126 28.9403C43.6473 29.0779 43.5773 29.2146 43.5019 29.3494L43.4347 29.4634C43.1632 29.9216 42.8715 30.3231 42.543 30.6926L42.3875 30.868C42.3092 30.9509 42.2283 31.0291 42.1482 31.1064L41.9053 31.3336C41.816 31.4118 41.7267 31.4873 41.6356 31.5608C41.5482 31.6305 41.4617 31.6984 41.3733 31.7625C41.2721 31.837 41.193 31.8963 41.1102 31.951C40.9988 32.0255 40.8847 32.0952 40.7687 32.165L40.5516 32.296C40.362 32.3997 40.1706 32.4949 39.9727 32.5826L39.8365 32.6382C39.6212 32.7249 39.4804 32.7786 39.3378 32.8267L39.1316 32.8899C38.9494 32.9436 38.8086 32.9813 38.6669 33.0134C38.5832 33.0331 38.4985 33.052 38.4138 33.069C38.262 33.0982 38.1065 33.1227 37.9491 33.1425L37.7255 33.1698C37.3464 33.2056 36.9644 33.2273 36.5503 33.1736C36.496 33.1661 36.439 33.1547 36.381 33.1434C36.2255 33.1152 36.1473 33.101 36.0663 33.0822C35.9752 33.0614 35.8822 33.0322 35.7893 33.0049L35.574 32.9408C35.4534 32.9012 35.3264 32.855 35.2013 32.805L35.0825 32.757C34.9362 32.6976 34.7881 32.6325 34.6381 32.5628C34.1098 32.3149 33.5835 32.0245 33.0249 31.6777C31.962 31.0141 30.7924 30.1468 29.5491 29.0996C29.3862 28.962 29.2243 28.8253 29.065 28.6867L28.1301 27.8582C27.7095 27.4764 27.3129 27.1031 26.9466 26.7496L26.0485 27.762L28.0408 29.603C28.2396 29.7773 28.4448 29.9527 28.6546 30.1289L28.7917 30.2468C29.9319 31.2016 31.0353 32.0198 32.0724 32.6797L32.1709 32.7419C32.3973 32.8823 32.5583 32.9832 32.7193 33.0765L32.6678 33.4366L32.8316 33.1406Z" fill="#00BCD4"/>
+<path d="M11.3393 43.2623L11.3264 40.1526L8.13867 40.1687L8.12486 37.4398L11.3144 37.4238L11.3034 34.955C7.8037 34.0633 5.08069 31.1912 4.32792 27.5696C4.26167 27.252 4.22026 26.9645 4.18713 26.6741L4.16872 26.5535C4.13467 26.2226 4.11719 25.888 4.11719 25.5496C4.11719 20.2002 8.36597 15.8481 13.5884 15.8481C13.8101 15.8481 14.0356 15.8679 14.2629 15.8972L14.4267 15.9236C14.6375 15.9594 14.7967 15.9914 14.9559 16.031C15.035 16.0508 15.116 16.0706 15.1979 16.0932C15.3617 16.1394 15.5264 16.1931 15.6911 16.2516L15.8927 16.3213C16.1052 16.4024 16.3206 16.4948 16.535 16.5938C16.616 16.6315 16.6979 16.672 16.7798 16.7125C16.9648 16.8049 17.0853 16.8662 17.204 16.9303C17.32 16.9925 17.4368 17.0575 17.5528 17.1254C17.6577 17.1857 17.7617 17.2479 17.8666 17.312L17.9439 17.3592C18.0387 17.4167 18.1335 17.4742 18.2283 17.5345C20.6577 19.0983 22.9454 21.3936 24.4399 23.045L24.6571 23.2864L24.37 23.5795C24.001 23.9575 23.7295 24.2459 23.608 24.377L22.7991 25.2545L22.5571 24.9878C21.5568 23.884 18.9617 21.1523 16.4687 19.6299C16.3629 19.5649 16.2571 19.5017 16.1513 19.4424L16.0105 19.3651C15.8034 19.2529 15.658 19.1784 15.5126 19.1096C15.4215 19.0662 15.3322 19.0238 15.2439 18.9861L15.0286 18.8966C14.8951 18.8447 14.7617 18.7967 14.6301 18.7561L14.5151 18.7222C14.3835 18.6854 14.2555 18.6553 14.1295 18.6326L14.0062 18.6128C13.8635 18.5921 13.7227 18.5761 13.5884 18.5761C9.83468 18.5761 6.7813 21.7046 6.7813 25.5496C6.7813 25.8135 6.80063 26.0963 6.83928 26.4149L6.8586 26.5469C6.90738 26.8617 6.95339 27.0955 7.0132 27.3245L6.72425 27.5432L7.04449 27.449C7.20554 28.0211 7.43468 28.5688 7.72732 29.0769C8.95124 31.2015 11.1976 32.5212 13.5893 32.5212C14.3697 32.5212 15.3562 32.1573 16.5221 31.44L16.7807 31.2807L16.9611 31.5277C17.354 32.0678 17.8003 32.5683 18.2853 33.0142L18.6138 33.3158L18.2402 33.5571C16.6565 34.5752 15.2218 35.1388 13.9694 35.2341L13.9786 37.4115L17.1286 37.3964L17.1414 40.1253L13.9896 40.1413L14.0025 43.251L11.3393 43.2623ZM11.989 39.4683L12.0019 42.578L13.3335 42.5714L13.3206 39.4617L16.4715 39.4457L16.4651 38.0817L13.3151 38.0968L13.3003 34.5704L13.6316 34.5667C14.7433 34.5563 16.0482 34.1001 17.516 33.2112C17.193 32.8888 16.8902 32.5429 16.6095 32.179C15.4463 32.8605 14.4322 33.2055 13.5902 33.2055C10.9638 33.2055 8.49756 31.7567 7.15492 29.4237C6.83376 28.8676 6.58161 28.2662 6.40584 27.6375L6.38468 27.5526C6.30645 27.2501 6.25492 26.9918 6.21443 26.7307L6.18038 26.5007C6.13713 26.1538 6.11688 25.8427 6.11688 25.5496C6.11688 21.3285 9.46934 17.8936 13.5902 17.8936C13.7559 17.8936 13.927 17.9115 14.1019 17.936L14.2482 17.9606C14.3927 17.986 14.5417 18.0209 14.6927 18.0633L14.8252 18.1019C14.9715 18.1472 15.1197 18.2009 15.2697 18.2594L15.5052 18.3565C15.6019 18.3979 15.6994 18.4441 15.7979 18.4912C15.9516 18.5648 16.1071 18.644 16.2654 18.7297L16.4779 18.8466C16.5884 18.9088 16.7006 18.9758 16.8129 19.0446C19.1375 20.4642 21.4795 22.8188 22.8046 24.2582L23.1267 23.9085C23.2316 23.7954 23.4442 23.5691 23.7341 23.2703C22.2691 21.6726 20.1295 19.5639 17.8859 18.1199L17.5279 17.8993C17.4286 17.839 17.3292 17.7786 17.2289 17.7211C17.1175 17.658 17.0071 17.5958 16.8957 17.5354C16.7816 17.4742 16.6675 17.4167 16.5534 17.3592C16.4126 17.2875 16.3381 17.2508 16.2635 17.2159C16.062 17.1226 15.8614 17.0368 15.6617 16.9604L15.4749 16.8963C15.323 16.8426 15.1721 16.7936 15.0221 16.7502L14.8022 16.6937C14.6577 16.6569 14.5151 16.6286 14.3743 16.6051L14.1801 16.573C13.9822 16.5476 13.7844 16.5297 13.5902 16.5297C8.73499 16.5297 4.78437 20.5754 4.78437 25.5496C4.78437 25.8644 4.80093 26.1755 4.83222 26.4828L4.51842 26.6345L4.84878 26.5949C4.87915 26.8655 4.9178 27.1322 4.97118 27.3952C5.69633 30.8782 8.33652 33.5958 11.7065 34.3518L11.9669 34.4111L11.9825 38.1043L8.79388 38.1204L8.80032 39.4843L11.989 39.4683Z" fill="#00BCD4"/>
+<path d="M21.3502 31.1494L21.1349 30.9957C20.5542 30.5829 20.0417 30.071 19.6137 29.4762L19.4297 29.2208L19.6643 29.0144C21.1404 27.6758 22.3855 26.2695 23.1944 25.325L23.8533 24.6123C23.972 24.4832 24.2417 24.1976 24.607 23.8234C25.4776 22.9326 26.8128 21.6289 28.3708 20.3244L28.5769 20.1519L28.7868 20.3187C29.3536 20.7712 29.8395 21.3075 30.2288 21.9127L30.3953 22.17L30.1616 22.3651C28.4886 23.7564 27.1193 25.1091 26.4521 25.7906L24.8812 27.559L24.8803 27.5571L23.7567 28.7928C23.5414 29.0191 23.3186 29.2519 23.0812 29.4923C22.6073 29.9721 22.092 30.4726 21.5453 30.9694L21.3502 31.1494ZM20.3352 29.316C20.6232 29.677 20.9472 29.9994 21.3033 30.2784C21.7312 29.8825 22.1711 29.4565 22.6119 29.0097C22.8484 28.7712 23.0674 28.5421 23.2782 28.3206L24.8039 26.6229L24.8104 26.6277L25.9708 25.3221C26.6251 24.6529 27.9153 23.3775 29.5018 22.039C29.2358 21.6695 28.9285 21.332 28.5834 21.0304C27.1312 22.2614 25.8981 23.4689 25.1039 24.2805C24.7193 24.6745 24.4542 24.9564 24.3374 25.0827L23.6867 25.7868C22.9101 26.6917 21.7229 28.0359 20.3352 29.316Z" fill="#00BCD4"/>
+<path d="M24.8188 35.2517C19.5964 35.2517 15.3477 30.8996 15.3477 25.5502C15.3477 23.8177 15.8105 22.1059 16.6875 20.6015L16.8697 20.2876L17.1624 20.4959C17.6667 20.8541 18.2105 21.2811 18.7783 21.7637L18.99 21.9438L18.8566 22.1907C18.3035 23.2173 18.0109 24.3786 18.0109 25.5502C18.0109 29.3952 21.0642 32.5219 24.8179 32.5219C26.063 32.5219 27.2879 32.1655 28.3609 31.4916L28.5578 31.3671L28.74 31.5142C29.3096 31.9723 29.8756 32.4012 30.4231 32.7905L30.805 33.062L30.4314 33.3457C28.7879 34.5928 26.8461 35.2517 24.8188 35.2517ZM17.0796 21.2717C16.3811 22.5904 16.013 24.0618 16.013 25.5502C16.013 30.5226 19.9627 34.5683 24.8188 34.5683C26.5489 34.5683 28.2118 34.0527 29.6557 33.0705C29.2784 32.7943 28.8946 32.5011 28.509 32.1948C27.3799 32.8555 26.109 33.2043 24.8179 33.2043C20.6971 33.2043 17.3446 29.7694 17.3446 25.5493C17.3446 24.3578 17.6197 23.1748 18.1434 22.1116C17.7753 21.8052 17.4191 21.5234 17.0796 21.2717Z" fill="#00BCD4"/>
+<path d="M32.9995 30.4492L32.694 30.2371C32.163 29.8695 31.6044 29.4548 31.0357 29.0023L30.8222 28.8317L30.9409 28.5828C31.3983 27.6204 31.6293 26.5996 31.6293 25.5476C31.6293 21.7026 28.5759 18.5741 24.8222 18.5741C23.6958 18.5741 22.5786 18.8635 21.5912 19.4121L21.3915 19.5233L21.2176 19.3725C20.6618 18.8899 20.1041 18.4421 19.5602 18.0406L19.1719 17.7531L19.5703 17.4797C21.1302 16.4108 22.9467 15.8452 24.8231 15.8452C30.0464 15.8452 34.2952 20.1973 34.2952 25.5467C34.2952 27.135 33.9078 28.7139 33.1753 30.1136L32.9995 30.4492ZM31.6541 28.63C32.0286 28.9241 32.3977 29.1993 32.7547 29.4548C33.3262 28.2407 33.6262 26.8984 33.6262 25.5495C33.6262 20.5762 29.6765 16.5296 24.8213 16.5296C23.2375 16.5296 21.6998 16.9632 20.3443 17.787C20.7179 18.0755 21.0961 18.3818 21.4753 18.7061C22.5096 18.1744 23.6608 17.8945 24.8213 17.8945C28.9421 17.8945 32.2955 21.3294 32.2955 25.5504C32.2955 26.6137 32.0793 27.6487 31.6541 28.63Z" fill="#00BCD4"/>
+</svg>
diff --git a/src/img/subject_icons/subject_ensino-religioso.svg b/src/img/subject_icons/subject_ensino-religioso.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cd6f311dd56667ef5af0da4628a890e4f1ac52b7
--- /dev/null
+++ b/src/img/subject_icons/subject_ensino-religioso.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M30.4,22.2h-8.9c-0.8,0-1.5,0.7-1.5,1.5v21.5c0,0.8,0.7,1.5,1.5,1.5h8.9c0.8,0,1.5-0.7,1.5-1.5V23.7
+		C31.9,22.9,31.3,22.2,30.4,22.2z M21.6,45.2V23.7l5.7,0v7.9h1v-7.9l2.2,0l0,21.4L21.6,45.2z"/>
+	<rect x="23.8" y="31.6" class="st1" width="1" height="5.5"/>
+	<path class="st1" d="M26.2,20.2c1,0,2-0.4,2.8-1.2c1.5-1.5,1.5-4,0-5.6c-0.3-0.3-0.4-0.6-0.4-1.1c0-0.3,0.2-0.7,0.4-0.9l1.1-1.1
+		l-1.5-0.2c-1.8-0.3-3.9,0.4-5.2,1.7c-2,2-2,5.1,0,7.1C24.1,19.8,25.1,20.2,26.2,20.2z M24.4,13c0.7-0.7,1.7-1.2,2.7-1.3
+		c-0.1,0.2-0.1,0.4-0.1,0.6c-0.1,0.8,0.2,1.6,0.8,2.2c1,1,1,2.5,0,3.5c-1,1-2.5,1-3.5,0C23.1,16.6,23.1,14.3,24.4,13z"/>
+	<path class="st1" d="M26,7.1c0.3,0,0.5-0.2,0.5-0.5V1.7c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v4.9C25.5,6.9,25.7,7.1,26,7.1z"/>
+	<path class="st1" d="M39.1,6.8c-0.2-0.2-0.5-0.2-0.7,0l-3.5,3.5c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1
+		l3.5-3.5C39.3,7.3,39.3,7,39.1,6.8z"/>
+	<path class="st1" d="M41.9,18.3H37c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h4.9c0.3,0,0.5-0.2,0.5-0.5S42.2,18.3,41.9,18.3z"/>
+	<path class="st1" d="M13.6,6.8c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l3.5,3.5c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1
+		c0.2-0.2,0.2-0.5,0-0.7L13.6,6.8z"/>
+	<path class="st1" d="M15,18.3h-4.9c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H15c0.3,0,0.5-0.2,0.5-0.5S15.3,18.3,15,18.3z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_filosofia.svg b/src/img/subject_icons/subject_filosofia.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b5b68d299ce0684cb34edc168d48327fa7b26186
--- /dev/null
+++ b/src/img/subject_icons/subject_filosofia.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="-0.1" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M29,8.8c-1.9,0-3.5,0.5-4.7,1.6c-1.2,1.1-1.8,2.5-1.9,4.3c0,0.1,0.1,0.3,0.1,0.4s0.2,0.1,0.4,0.1h3.4
+		c0.3,0,0.5-0.2,0.5-0.5c0-0.6,0.2-1.1,0.6-1.5c0.4-0.4,0.9-0.5,1.6-0.5c0.7,0,1.2,0.2,1.5,0.5c0.3,0.4,0.5,0.9,0.5,1.7
+		c0,0.6-0.2,1.1-0.5,1.6c-0.2,0.2-0.6,0.7-1.7,1.8c-1,0.9-1.6,1.8-1.9,2.6c-0.3,0.8-0.5,1.9-0.5,3.2c0,0.2,0.1,0.3,0.2,0.4
+		c-0.3,0.4-0.4,0.9-0.4,1.4c0,0.6,0.2,1.2,0.6,1.6c0.4,0.4,1,0.7,1.8,0.7c0.8,0,1.4-0.2,1.8-0.7c0.4-0.4,0.6-1,0.6-1.6
+		c0-0.6-0.2-1.1-0.5-1.5c0.1-0.1,0.1-0.2,0.1-0.3c0-1.2,0.3-2.1,0.8-2.7l1.7-1.7c1.5-1.6,2.3-3.2,2.3-4.8c0-1.9-0.6-3.3-1.7-4.4
+		C32.6,9.3,31,8.8,29,8.8z M29.7,26.8c-0.2,0.2-0.6,0.4-1.1,0.4c-0.5,0-0.8-0.1-1.1-0.4c-0.2-0.3-0.4-0.6-0.4-0.9
+		c0-0.4,0.1-0.7,0.4-1c0.3-0.2,0.6-0.4,1.1-0.4c0.5,0,0.8,0.1,1.1,0.4c0.3,0.3,0.4,0.6,0.4,1C30.1,26.2,30,26.5,29.7,26.8z
+		 M32.5,18.9l-1.7,1.7c-0.6,0.7-1,1.7-1.1,2.9h-1h-1.2c0-0.9,0.2-1.7,0.4-2.3c0.3-0.7,0.9-1.4,1.7-2.3c0.9-0.9,1.5-1.6,1.8-2
+		c0.4-0.6,0.6-1.4,0.6-2.1c0-1-0.3-1.8-0.8-2.4c-0.5-0.6-1.3-0.8-2.3-0.8c-0.9,0-1.7,0.3-2.3,0.8c-0.5,0.4-0.8,1-0.9,1.7h-2.4
+		c0.1-1.3,0.6-2.3,1.5-3.1c1-0.9,2.4-1.3,4.1-1.3c1.7,0,3.1,0.4,4.1,1.3c1,0.9,1.4,2,1.4,3.6C34.5,16.1,33.8,17.5,32.5,18.9z"/>
+	<path class="st1" d="M43.4,9.7c-1.8-3.9-5.8-7.4-10-8.6c-1.7-0.5-3.5-0.7-5.4-0.7c-9.1,0-16.6,7.4-16.7,16.5l-4,13.7
+		c-0.1,0.2,0,0.5,0.1,0.7s0.4,0.3,0.6,0.3l3.3,0v4.1c0,3.6,2.9,6.6,6.6,6.6h6.9v4.5c0,0.4,0.3,0.8,0.8,0.8h13.9c0.1,0,0.1,0,0.2,0
+		c0.7-0.2,0.7-0.4,0.6-5.1c0-0.3,0-0.6,0-0.7c0.1-3.2,0.3-7,1.1-10.6c0.3-1.4,0.7-2.9,1.1-4.3c0.6-2.1,1.2-4.2,1.6-6.4
+		c0.3-1.8,0.5-3.3,0.5-4.7c0,0,0,0,0,0C44.6,13.4,44.2,11.5,43.4,9.7z M42.6,20.1c-0.4,2.1-1,4.2-1.6,6.3c-0.4,1.4-0.8,2.9-1.2,4.4
+		c-0.9,3.7-1.1,7.6-1.2,10.9c0,0.1,0,0.4,0,0.7c0,0.7,0.1,2.6,0,3.6H26.3v-4.5c0-0.4-0.3-0.8-0.8-0.8h-7.6c-2.8,0-5.1-2.3-5.1-5.1
+		v-4.8c0-0.4-0.3-0.8-0.8-0.8l-3,0l3.8-12.8c0-0.1,0-0.1,0-0.2C12.9,8.7,19.7,1.9,28,1.9c1.8,0,3.4,0.2,5,0.6c3.8,1,7.5,4.2,9.1,7.7
+		c0.7,1.5,1,3.3,1,5.3C43.1,17,42.9,18.4,42.6,20.1z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_fisica.svg b/src/img/subject_icons/subject_fisica.svg
new file mode 100644
index 0000000000000000000000000000000000000000..64108d2c4d32764735b8bb73bbc0729e078e7adc
--- /dev/null
+++ b/src/img/subject_icons/subject_fisica.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M44,24c3.3-4,4.5-8,3-10.9c-1.7-3.2-6.3-4.4-12.1-3.7c-2-5.5-5.2-9-8.9-9c-3.6,0-6.8,3.5-8.9,9
+		C11.3,8.6,6.7,9.8,5.1,13C3.5,16,4.7,20,8,24c-0.1,0.1-0.3,0.3-0.4,0.4c-3.1,4-4,7.7-2.6,10.5c1.4,2.6,4.6,3.9,8.9,3.9
+		c1,0,2.1-0.1,3.2-0.2c2,5.5,5.2,9,8.9,9s6.8-3.5,8.9-9c1.1,0.1,2.2,0.2,3.2,0.2c4.3,0,7.5-1.3,8.9-3.9c1.4-2.8,0.5-6.5-2.6-10.5
+		C44.2,24.3,44.1,24.1,44,24z M38.1,10.7c3.7,0,6.4,1,7.5,3.1c1.2,2.3,0.1,5.6-2.6,9.1c-1.7-1.9-3.8-3.7-6.2-5.4
+		c-0.3-2.4-0.8-4.6-1.4-6.6C36.3,10.7,37.3,10.7,38.1,10.7z M30.5,32.6c-1.5,0.8-3,1.5-4.5,2c-1.5-0.6-3-1.3-4.5-2
+		c-1.7-0.9-3.4-1.9-4.9-2.9c-0.2-1.8-0.3-3.7-0.3-5.7c0-2,0.1-3.9,0.3-5.7c1.5-1,3.2-2,4.9-2.9c1.5-0.8,3-1.5,4.5-2.1
+		c1.5,0.6,3,1.3,4.5,2.1c1.7,0.9,3.4,1.9,4.9,2.9c0.2,1.8,0.3,3.7,0.3,5.7c0,1.9-0.1,3.8-0.3,5.7C33.9,30.7,32.2,31.6,30.5,32.6z
+		 M35.1,31.6c-0.3,1.9-0.7,3.6-1.3,5.2c-1.8-0.3-3.8-0.8-5.7-1.5c1-0.5,2.1-0.9,3.1-1.5C32.5,33.2,33.8,32.4,35.1,31.6z M23.9,35.4
+		c-2,0.7-3.9,1.2-5.7,1.5c-0.5-1.6-0.9-3.3-1.3-5.2c1.2,0.8,2.5,1.5,3.9,2.3C21.9,34.4,22.9,34.9,23.9,35.4z M15,28.4
+		c-1.9-1.5-3.6-3-5-4.5c1.4-1.5,3.1-3.1,5-4.5c-0.1,1.5-0.2,3-0.2,4.5C14.8,25.5,14.9,27,15,28.4z M16.9,16.3
+		c0.3-1.9,0.7-3.6,1.3-5.2c1.8,0.3,3.8,0.8,5.8,1.5c-1,0.5-2.1,0.9-3.1,1.5C19.5,14.7,18.2,15.5,16.9,16.3z M28.1,12.5
+		c2-0.7,3.9-1.2,5.8-1.5c0.5,1.6,0.9,3.3,1.3,5.2c-1.2-0.8-2.5-1.6-3.9-2.3C30.1,13.5,29.1,13,28.1,12.5z M37,19.4
+		c1.9,1.4,3.6,2.9,5,4.5c-1.4,1.5-3.1,3-5,4.5c0.1-1.4,0.2-2.9,0.2-4.5C37.2,22.4,37.1,20.9,37,19.4z M26,1.8c2.9,0,5.5,3,7.3,7.7
+		C31,10,28.5,10.7,26,11.7c-2.5-1-5-1.7-7.3-2.1C20.5,4.9,23.1,1.8,26,1.8z M6.4,13.7c1.1-2.1,3.8-3.1,7.5-3.1
+		c0.9,0,1.8,0.1,2.7,0.2c-0.6,2-1.1,4.2-1.4,6.6c-2.4,1.7-4.5,3.5-6.2,5.4C6.3,19.4,5.2,16,6.4,13.7z M6.4,34.2
+		c-1.1-2.2-0.2-5.4,2.4-8.8C8.9,25.3,9,25.2,9,25.1c1.7,1.8,3.8,3.7,6.2,5.4c0.3,2.4,0.8,4.6,1.4,6.6C11.6,37.7,7.7,36.7,6.4,34.2z
+		 M26,46.1c-2.9,0-5.5-3-7.3-7.8c2.3-0.4,4.8-1.1,7.3-2.1c2.5,1,5,1.7,7.3,2.1C31.5,43,28.9,46.1,26,46.1z M45.6,34.2
+		c-1.3,2.5-5.2,3.5-10.2,2.9c0.6-2,1.1-4.2,1.4-6.6c2.4-1.7,4.5-3.5,6.2-5.4c0.1,0.1,0.1,0.1,0.2,0.2C45.9,28.8,46.7,32,45.6,34.2z"
+		/>
+	<path class="st1" d="M26,20.9c-1.7,0-3.1,1.4-3.1,3.1S24.3,27,26,27c1.7,0,3.1-1.4,3.1-3.1S27.7,20.9,26,20.9z M26,25.5
+		c-0.9,0-1.6-0.7-1.6-1.6s0.7-1.6,1.6-1.6c0.9,0,1.6,0.7,1.6,1.6S26.9,25.5,26,25.5z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_geografia.svg b/src/img/subject_icons/subject_geografia.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c534fb98c5c84b68fee2bd24e115fe9ce032bd25
--- /dev/null
+++ b/src/img/subject_icons/subject_geografia.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M40.4,35.4c8.9-8.9,8.9-23.4,0-32.4c-0.3-0.3-0.8-0.3-1.1,0s-0.3,0.8,0,1.1c8.3,8.3,8.3,21.9,0,30.2
+		c-8.3,8.3-21.9,8.3-30.2,0C8.8,34,8.3,34,8,34.3s-0.3,0.8,0,1.1c4.3,4.3,9.8,6.5,15.4,6.7v4.1h-6.6c-0.4,0-0.8,0.3-0.8,0.8
+		s0.3,0.8,0.8,0.8h13.9c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-6.3v-4.1C30.2,42,36,39.8,40.4,35.4z"/>
+	<path class="st1" d="M24.1,38.6c5.1,0,9.9-2,13.6-5.6c3.6-3.6,5.6-8.4,5.6-13.6s-2-9.9-5.6-13.6C34,2.2,29.2,0.2,24.1,0.2
+		c-5.1,0-9.9,2-13.6,5.6c-3.6,3.6-5.6,8.4-5.6,13.6s2,9.9,5.6,13.6C14.1,36.6,19,38.6,24.1,38.6z M11.8,24.9
+		c0.8-1.8,1.9-3.7,3.3-5.6l9.2,9.2c-1.9,1.4-3.8,2.5-5.6,3.3c-3.2,1.3-5.7,1.4-6.9,0.1C10.5,30.6,10.5,28.1,11.8,24.9z M15.7,18.5
+		c1-1.4,2.2-2.7,3.5-4c1.2-1.2,2.4-2.3,3.6-3.2l9.5,9.5c-1,1.2-2.1,2.4-3.2,3.6c-1.3,1.3-2.6,2.5-4,3.5L15.7,18.5z M24.1,37.1
+		c-3.8,0-7.4-1.2-10.4-3.4c0.2,0,0.4,0,0.6,0c1.3,0,2.9-0.4,4.7-1.1c1.9-0.8,3.9-2,6-3.5l6.3,6.3C29.1,36.5,26.6,37.1,24.1,37.1z
+		 M36.6,31.9c-1.3,1.3-2.7,2.3-4.3,3.2l-6.5-6.5c1.4-1.1,2.7-2.2,4-3.5c1.2-1.2,2.3-2.4,3.2-3.6l6.5,6.5
+		C38.8,29.4,37.8,30.7,36.6,31.9z M38.5,9.2c2.1,3,3.3,6.5,3.3,10.2c0,2.7-0.6,5.2-1.7,7.6l-6.4-6.4C36.9,16.3,38.7,12.2,38.5,9.2z
+		 M36.5,13.9c-0.8,1.9-2,4-3.5,6l-9.3-9.3C27.5,7.7,31.4,6,34,6c1.1,0,2,0.3,2.6,0.9C37.9,8.2,37.8,10.7,36.5,13.9z M24.1,1.7
+		c3.8,0,7.3,1.2,10.3,3.4c-3-0.2-7.2,1.6-11.5,4.8l-6.5-6.5C18.8,2.3,21.4,1.7,24.1,1.7z M11.6,6.9c1.2-1.2,2.5-2.2,4-3l6.6,6.6
+		c-1.2,1-2.4,2-3.6,3.2c-1.3,1.3-2.5,2.6-3.5,4l-6.6-6.6C9.2,9.6,10.3,8.2,11.6,6.9z M6.4,19.4c0-2.5,0.6-5,1.6-7.3l6.4,6.4
+		c-1.5,2-2.7,4-3.5,6c-0.9,2.1-1.2,3.9-1.1,5.4C7.6,26.9,6.4,23.2,6.4,19.4z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_historia.svg b/src/img/subject_icons/subject_historia.svg
new file mode 100644
index 0000000000000000000000000000000000000000..aebb7c1554610e623a6eace3ec2876ab158efb63
--- /dev/null
+++ b/src/img/subject_icons/subject_historia.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.3" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M32.1,22.4c5.2-3.5,8.1-8.4,8.1-13.7V4.2h2.7V0.5H9.2v3.7h2.5v4.5c0,5.3,2.9,10.1,8.1,13.7
+		c0.4,0.3,0.7,1,0.7,1.8s-0.3,1.5-0.7,1.8c-5.2,3.5-8.1,8.4-8.1,13.7v4.5H9.2v3.7h33.7v-3.7h-2.7v-4.5c0-5.3-2.9-10.1-8.1-13.7
+		c-0.4-0.3-0.7-1-0.7-1.8C31.4,23.3,31.6,22.6,32.1,22.4z M10.2,1.5h31.7v1.7H10.2V1.5z M38.8,4.2v4.5c0,0.4,0,0.8-0.1,1.2H13.1
+		c0-0.4-0.1-0.8-0.1-1.2V4.2H38.8z M41.8,46.8H10.2v-1.7h31.7V46.8z M31.3,27.1c4.8,3.2,7.5,7.7,7.5,12.5v4.5H13.1v-4.5
+		c0-4.8,2.7-9.3,7.5-12.5c0.8-0.6,1.3-1.7,1.3-3c0-1.3-0.5-2.4-1.3-3c-4-2.7-6.5-6.1-7.2-9.9h25.2c-0.8,3.8-3.3,7.3-7.2,9.9
+		c-0.8,0.6-1.3,1.7-1.3,3C30,25.4,30.5,26.5,31.3,27.1z"/>
+	<path class="st1" d="M26,25.5c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7c-0.4-0.4-1-0.4-1.4,0
+		C25.1,24,25,24.2,25,24.5c0,0.3,0.1,0.5,0.3,0.7C25.5,25.4,25.7,25.5,26,25.5z"/>
+	<path class="st1" d="M26,26.6c-0.6,0-1,0.5-1,1c0,0.6,0.4,1,1,1c0.5,0,1-0.4,1-1C27,27.1,26.6,26.6,26,26.6z"/>
+	<path class="st1" d="M26,29.8c-0.6,0-1,0.5-1,1s0.4,1,1,1c0.5,0,1-0.5,1-1S26.6,29.8,26,29.8z"/>
+	<path class="st1" d="M25.3,33.2c-0.2,0.2-0.3,0.5-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7c0.2,0.2,0.4,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3
+		c0.2-0.2,0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7C26.3,32.9,25.7,32.9,25.3,33.2z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_informatica.svg b/src/img/subject_icons/subject_informatica.svg
new file mode 100644
index 0000000000000000000000000000000000000000..56f8ecef80052fa44b5663a135bf28f6f0d90fb0
--- /dev/null
+++ b/src/img/subject_icons/subject_informatica.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 72 47.7" style="enable-background:new 0 0.1 72 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0.1" y="0.1" class="st0" width="71.9" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M64.1,40.7h-56c-0.6,0-1,0.4-1,1s0.4,1,1,1h56c0.6,0,1-0.4,1-1S64.6,40.7,64.1,40.7z"/>
+	<path class="st1" d="M20.2,37.1h32c3.2,0,5.8-2.6,5.8-5.8V11c0-3.2-2.6-5.8-5.8-5.8h-32c-3.2,0-5.8,2.6-5.8,5.8v20.3
+		C14.4,34.5,17,37.1,20.2,37.1z M16,11c0-2.3,1.9-4.2,4.2-4.2h32c2.3,0,4.2,1.9,4.2,4.2v20.3c0,2.3-1.9,4.2-4.2,4.2h-32
+		c-2.3,0-4.2-1.9-4.2-4.2V11z"/>
+	<path class="st1" d="M21.6,33.5h29.2c1.9,0,3.5-1.6,3.5-3.5V12.3c0-1.9-1.6-3.5-3.5-3.5H21.6c-1.9,0-3.5,1.6-3.5,3.5V30
+		C18.1,31.9,19.7,33.5,21.6,33.5z M19.1,12.3c0-1.4,1.1-2.5,2.5-2.5h29.2c1.4,0,2.5,1.1,2.5,2.5V30c0,1.4-1.1,2.5-2.5,2.5H21.6
+		c-1.4,0-2.5-1.1-2.5-2.5V12.3z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_lingua-espanhola.svg b/src/img/subject_icons/subject_lingua-espanhola.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f51271ae58130870c6544a98383e8c4bf47b55a0
--- /dev/null
+++ b/src/img/subject_icons/subject_lingua-espanhola.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M47,22.7c-0.3,0-0.5,0.2-0.5,0.5c0,5.6-2.2,11-6.1,15c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.3,0.1
+		c0.1,0,0.3-0.1,0.4-0.2c4.1-4.2,6.4-9.8,6.4-15.7C47.5,22.9,47.3,22.7,47,22.7z"/>
+	<path class="st1" d="M24.3,3.4c-10.9,0-19.8,8.9-19.8,19.8c0,4.1,1.2,8.1,3.6,11.4l0.1,0.1l-2.3,6.8l6.8-2.3l0.1,0.1
+		c3.3,2.4,7.3,3.6,11.4,3.6c10.9,0,19.8-8.9,19.8-19.7S35.2,3.4,24.3,3.4z M24.3,41.4c-3.8,0-7.4-1.2-10.5-3.3L13,37.6l-4.7,1.6
+		l1.6-4.7l-0.5-0.7C7.2,30.6,6,27,6,23.2C6,13.1,14.2,4.9,24.3,4.9c10.1,0,18.3,8.2,18.3,18.3S34.3,41.4,24.3,41.4z"/>
+	<polygon class="st1" points="17.4,23.5 12.7,23.5 12.7,19.5 11.5,19.5 11.5,28.7 12.7,28.7 12.7,24.5 17.4,24.5 17.4,28.7 
+		18.6,28.7 18.6,19.5 17.4,19.5 	"/>
+	<path class="st1" d="M23.4,21.7c-0.6,0-1.1,0.1-1.6,0.4c-0.5,0.3-0.8,0.7-1.1,1.2c-0.3,0.5-0.4,1.1-0.4,1.8v0.1
+		c0,1.1,0.3,1.9,0.9,2.6c0.6,0.6,1.3,1,2.3,1c0.6,0,1.2-0.1,1.6-0.4c0.5-0.3,0.8-0.7,1.1-1.2s0.4-1.1,0.4-1.8v-0.1
+		c0-1.1-0.3-1.9-0.9-2.6C25.1,22.1,24.3,21.7,23.4,21.7z M24.8,27.2c-0.4,0.5-0.8,0.7-1.4,0.7c-0.6,0-1.1-0.2-1.4-0.7
+		c-0.4-0.5-0.5-1.1-0.5-1.8c0-0.9,0.2-1.5,0.5-2s0.8-0.7,1.4-0.7c0.6,0,1.1,0.2,1.4,0.7c0.4,0.5,0.5,1.1,0.5,1.8
+		C25.3,26.1,25.2,26.7,24.8,27.2z"/>
+	<rect x="28.1" y="19" class="st1" width="1.2" height="9.8"/>
+	<path class="st1" d="M36.4,24c0-0.7-0.3-1.2-0.7-1.6c-0.4-0.4-1.1-0.6-1.9-0.6c-0.5,0-1,0.1-1.4,0.3s-0.7,0.4-1,0.8
+		c-0.2,0.3-0.4,0.7-0.4,1h1.2c0-0.3,0.1-0.6,0.4-0.8s0.6-0.3,1.1-0.3c0.5,0,0.8,0.1,1.1,0.4c0.2,0.2,0.4,0.6,0.4,1v0.5H34
+		c-1,0-1.8,0.2-2.3,0.6c-0.5,0.4-0.8,1-0.8,1.7c0,0.6,0.2,1.1,0.7,1.5s1,0.6,1.7,0.6c0.8,0,1.4-0.3,2-0.9c0,0.3,0.1,0.6,0.2,0.7h1.2
+		v-0.1c-0.2-0.4-0.2-0.9-0.2-1.5V24z M35.2,26.8c-0.1,0.3-0.4,0.6-0.7,0.7s-0.7,0.3-1,0.3c-0.4,0-0.7-0.1-0.9-0.3s-0.4-0.5-0.4-0.9
+		c0-0.8,0.7-1.3,2.2-1.3h0.9V26.8z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_lingua-inglesa.svg b/src/img/subject_icons/subject_lingua-inglesa.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4c548a0a704a200f408da9936844832cddfa72c5
--- /dev/null
+++ b/src/img/subject_icons/subject_lingua-inglesa.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M47,23.5c-0.3,0-0.5,0.2-0.5,0.5c0,5.6-2.2,11-6.1,15c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.3,0.1
+		c0.1,0,0.3-0.1,0.4-0.2c4.1-4.2,6.4-9.8,6.4-15.7C47.5,23.7,47.3,23.5,47,23.5z"/>
+	<path class="st1" d="M24.3,4.2c-10.9,0-19.8,8.9-19.8,19.8c0,4.1,1.2,8,3.6,11.4l0.1,0.1l-2.3,6.8l6.8-2.3l0.1,0.1
+		c3.3,2.4,7.3,3.6,11.4,3.6c10.9,0,19.8-8.9,19.8-19.8C44,13.1,35.2,4.2,24.3,4.2z M24.3,42.2c-3.8,0-7.4-1.2-10.5-3.3L13,38.3
+		l-4.7,1.6l1.6-4.7l-0.5-0.7C7.2,31.4,6,27.8,6,23.9C6,13.9,14.2,5.7,24.3,5.7c10.1,0,18.3,8.2,18.3,18.3
+		C42.5,34,34.3,42.2,24.3,42.2z"/>
+	<polygon class="st1" points="25.1,24.3 20.5,24.3 20.5,20.3 19.2,20.3 19.2,29.5 20.5,29.5 20.5,25.3 25.1,25.3 25.1,29.5 
+		26.4,29.5 26.4,20.3 25.1,20.3 	"/>
+	<rect x="28.4" y="22.7" class="st1" width="1.2" height="6.9"/>
+	<path class="st1" d="M29,20.2c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.3,0.2,0.5c0.1,0.1,0.3,0.2,0.5,0.2
+		s0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.4-0.2-0.5C29.4,20.2,29.3,20.2,29,20.2z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_lingua-portuguesa.svg b/src/img/subject_icons/subject_lingua-portuguesa.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7baa394159bdfd0e1bc44ef46c0c7790f2eadd7f
--- /dev/null
+++ b/src/img/subject_icons/subject_lingua-portuguesa.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M24.3,4.2c-10.9,0-19.8,8.9-19.8,19.8c0,4.1,1.2,8,3.6,11.4l0.1,0.1l-2.3,6.8l6.8-2.3l0.1,0.1
+		c3.3,2.4,7.3,3.6,11.4,3.6c10.9,0,19.8-8.9,19.8-19.7C44,13.1,35.2,4.2,24.3,4.2z M24.3,42.2c-3.8,0-7.4-1.2-10.5-3.3L13,38.3
+		l-4.7,1.6l1.6-4.7l-0.5-0.7C7.2,31.4,6,27.8,6,23.9C6,13.9,14.2,5.7,24.3,5.7c10.1,0,18.3,8.2,18.3,18.3
+		C42.5,34,34.3,42.2,24.3,42.2z"/>
+	<path class="st1" d="M47,23.5c-0.3,0-0.5,0.2-0.5,0.5c0,5.6-2.2,11-6.1,15c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.3,0.1
+		c0.1,0,0.3-0.1,0.4-0.2c4.1-4.2,6.4-9.8,6.4-15.7C47.5,23.7,47.3,23.5,47,23.5z"/>
+	<path class="st1" d="M20.7,20.7c-0.6-0.4-1.2-0.5-2-0.5c-0.7,0-1.4,0.2-1.9,0.5c-0.6,0.4-1,0.9-1.3,1.6s-0.5,1.5-0.5,2.4v0.7
+		c0,0.9,0.2,1.6,0.5,2.3c0.3,0.7,0.7,1.2,1.3,1.5s1.2,0.5,1.9,0.5c0.7,0,1.4-0.2,2-0.5s1-0.9,1.3-1.5s0.5-1.5,0.5-2.4v-0.6
+		c0-0.9-0.2-1.7-0.5-2.4C21.7,21.6,21.3,21.1,20.7,20.7z M21.3,25.3c0,1.1-0.2,1.9-0.7,2.5s-1,0.9-1.8,0.9c-0.8,0-1.4-0.3-1.8-0.9
+		c-0.4-0.6-0.7-1.4-0.7-2.5v-0.7c0-1,0.2-1.9,0.7-2.4c0.4-0.6,1-0.9,1.8-0.9c0.8,0,1.4,0.3,1.8,0.9s0.7,1.4,0.7,2.5V25.3z"/>
+	<rect x="24.3" y="19.8" class="st1" width="1.2" height="9.8"/>
+	<polygon class="st1" points="32.1,19.8 30.7,19.8 29.5,21.7 30.4,21.7 	"/>
+	<path class="st1" d="M32.5,24.8c0-0.7-0.2-1.2-0.7-1.6c-0.4-0.4-1.1-0.6-1.9-0.6c-0.5,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.4-1,0.8
+		c-0.2,0.3-0.4,0.7-0.4,1h1.2c0-0.3,0.1-0.6,0.4-0.8c0.3-0.2,0.6-0.3,1.1-0.3c0.5,0,0.8,0.1,1.1,0.4c0.2,0.2,0.4,0.6,0.4,1v0.5h-1.1
+		c-1,0-1.8,0.2-2.3,0.6s-0.8,1-0.8,1.7c0,0.6,0.2,1.1,0.7,1.5s1,0.6,1.7,0.6c0.8,0,1.4-0.3,2-0.9c0,0.3,0.1,0.6,0.2,0.7h1.2v-0.1
+		c-0.2-0.4-0.2-0.9-0.2-1.5V24.8z M31.4,27.6c-0.1,0.3-0.4,0.6-0.7,0.7s-0.7,0.3-1,0.3c-0.4,0-0.7-0.1-0.9-0.3
+		c-0.2-0.2-0.4-0.5-0.4-0.9c0-0.8,0.7-1.3,2.2-1.3h0.9V27.6z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_matematica.svg b/src/img/subject_icons/subject_matematica.svg
new file mode 100644
index 0000000000000000000000000000000000000000..50eab67436599212349d46f8aa331441da6d0c7e
--- /dev/null
+++ b/src/img/subject_icons/subject_matematica.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 72 47.7" style="enable-background:new 0 0.1 72 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M66.4,40.3h-0.7V6.6h-5.4v33.8h-0.7c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h6.8c0.3,0,0.5-0.2,0.5-0.5
+		S66.7,40.3,66.4,40.3z M64.7,39.7h-3.4V7.6h3.4V39.7z"/>
+	<path class="st1" d="M12.4,40.3h-0.7V6.6H6.3v33.8H5.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h6.8c0.3,0,0.5-0.2,0.5-0.5
+		S12.6,40.3,12.4,40.3z M10.6,39.7H7.3V7.6h3.4V39.7z"/>
+	<path class="st1" d="M9,27.5c0.3,0,0.5-0.2,0.5-0.5v-6.8c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5V27C8.5,27.3,8.7,27.5,9,27.5z"/>
+	<path class="st1" d="M63,27.5c0.3,0,0.5-0.2,0.5-0.5v-6.8c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5V27C62.5,27.3,62.7,27.5,63,27.5z
+		"/>
+	<path class="st1" d="M35.2,8.9c0-1.3-1-2.3-2.3-2.3h-0.3c-1.3,0-2.3,1-2.3,2.3v0.3h-1.6V8.9c0-1.3-1-2.3-2.3-2.3H26
+		c-1.3,0-2.3,1-2.3,2.3v0.3h-1.6V8.9c0-1.3-1-2.3-2.3-2.3h-0.3c-1.3,0-2.3,1-2.3,2.3v0.3h-3v1.5h3V11c0,1.3,1,2.3,2.3,2.3h0.3
+		c1.3,0,2.3-1,2.3-2.3v-0.3h1.6V11c0,1.3,1,2.3,2.3,2.3h0.3c1.3,0,2.3-1,2.3-2.3v-0.3h1.6V11c0,1.3,1,2.3,2.3,2.3h0.3
+		c1.3,0,2.3-1,2.3-2.3v-0.3h22.6V9.2H35.2V8.9z M21.1,11c0,0.7-0.6,1.3-1.3,1.3h-0.3c-0.7,0-1.3-0.6-1.3-1.3V8.9
+		c0-0.7,0.6-1.3,1.3-1.3h0.3c0.7,0,1.3,0.6,1.3,1.3V11z M27.7,11c0,0.7-0.6,1.3-1.3,1.3H26c-0.7,0-1.3-0.6-1.3-1.3V8.9
+		c0-0.7,0.6-1.3,1.3-1.3h0.3c0.7,0,1.3,0.6,1.3,1.3V11z M34.2,11c0,0.7-0.6,1.3-1.3,1.3h-0.3c-0.7,0-1.3-0.6-1.3-1.3V8.9
+		c0-0.7,0.6-1.3,1.3-1.3h0.3c0.7,0,1.3,0.6,1.3,1.3V11z"/>
+	<path class="st1" d="M41.7,22.5c0-1.3-1-2.3-2.3-2.3h-0.3c-1.3,0-2.3,1-2.3,2.3v0.3h-1.5v-0.3c0-1.3-1-2.3-2.3-2.3h-0.3
+		c-1.3,0-2.3,1-2.3,2.3v0.3h-16v1.5h16v0.3c0,1.3,1,2.3,2.3,2.3h0.3c1.3,0,2.3-1,2.3-2.3v-0.3h1.5v0.3c0,1.3,1,2.3,2.3,2.3h0.3
+		c1.3,0,2.3-1,2.3-2.3v-0.3h16v-1.5h-16V22.5z M34.2,24.7c0,0.7-0.6,1.3-1.3,1.3h-0.3c-0.7,0-1.3-0.6-1.3-1.3v-2.1
+		c0-0.7,0.6-1.3,1.3-1.3h0.3c0.7,0,1.3,0.6,1.3,1.3V24.7z M40.7,24.7c0,0.7-0.6,1.3-1.3,1.3h-0.3c-0.7,0-1.3-0.6-1.3-1.3v-2.1
+		c0-0.7,0.6-1.3,1.3-1.3h0.3c0.7,0,1.3,0.6,1.3,1.3V24.7z"/>
+	<path class="st1" d="M54.8,35.8c0-1.3-1-2.3-2.3-2.3h-0.3c-1.3,0-2.3,1-2.3,2.3v0.3h-1.5v-0.3c0-1.3-1-2.3-2.3-2.3h-0.3
+		c-1.3,0-2.3,1-2.3,2.3v0.3h-1.6v-0.3c0-1.3-1-2.3-2.3-2.3h-0.3c-1.3,0-2.3,1-2.3,2.3v0.3H14.2v1.5h22.6v0.3c0,1.3,1,2.3,2.3,2.3
+		h0.3c1.3,0,2.3-1,2.3-2.3v-0.3h1.6v0.3c0,1.3,1,2.3,2.3,2.3H46c1.3,0,2.3-1,2.3-2.3v-0.3h1.5v0.3c0,1.3,1,2.3,2.3,2.3h0.3
+		c1.3,0,2.3-1,2.3-2.3v-0.3h3v-1.5h-3V35.8z M40.7,37.9c0,0.7-0.6,1.3-1.3,1.3h-0.3c-0.7,0-1.3-0.6-1.3-1.3v-2.1
+		c0-0.7,0.6-1.3,1.3-1.3h0.3c0.7,0,1.3,0.6,1.3,1.3V37.9z M47.3,37.9c0,0.7-0.6,1.3-1.3,1.3h-0.3c-0.7,0-1.3-0.6-1.3-1.3v-2.1
+		c0-0.7,0.6-1.3,1.3-1.3H46c0.7,0,1.3,0.6,1.3,1.3V37.9z M53.8,37.9c0,0.7-0.6,1.3-1.3,1.3h-0.3c-0.7,0-1.3-0.6-1.3-1.3v-2.1
+		c0-0.7,0.6-1.3,1.3-1.3h0.3c0.7,0,1.3,0.6,1.3,1.3V37.9z"/>
+</g>
+<rect x="0" y="0.1" class="st0" width="72" height="47.7"/>
+</svg>
diff --git a/src/img/subject_icons/subject_outras-linguas.svg b/src/img/subject_icons/subject_outras-linguas.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a4a182af31c99ce417e64399d3f43203fe2a749a
--- /dev/null
+++ b/src/img/subject_icons/subject_outras-linguas.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M47,23.5c-0.3,0-0.5,0.2-0.5,0.5c0,5.6-2.2,11-6.1,15c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.3,0.1
+		c0.1,0,0.3-0.1,0.4-0.2c4.1-4.2,6.4-9.8,6.4-15.7C47.5,23.7,47.3,23.5,47,23.5z"/>
+	<path class="st1" d="M24.3,4.2c-10.9,0-19.8,8.9-19.8,19.8c0,4.1,1.2,8,3.6,11.4l0.1,0.1l-2.3,6.8l6.8-2.3l0.1,0.1
+		c3.3,2.4,7.3,3.6,11.4,3.6c10.9,0,19.8-8.9,19.8-19.8C44,13.1,35.2,4.2,24.3,4.2z M24.3,42.2c-3.8,0-7.4-1.2-10.5-3.3L13,38.3
+		l-4.7,1.6l1.6-4.7l-0.5-0.7C7.2,31.4,6,27.8,6,23.9C6,13.9,14.2,5.7,24.3,5.7c10.1,0,18.3,8.2,18.3,18.3
+		C42.5,34,34.3,42.2,24.3,42.2z"/>
+	<path class="st1" d="M19.6,24.2c-0.3,0-0.6,0.1-0.8,0.3s-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7s0.4,0.3,0.8,0.3s0.6-0.1,0.8-0.3
+		s0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7S19.9,24.2,19.6,24.2z"/>
+	<path class="st1" d="M24.3,24.2c-0.3,0-0.6,0.1-0.8,0.3s-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7s0.4,0.3,0.8,0.3s0.6-0.1,0.8-0.3
+		s0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7S24.7,24.2,24.3,24.2z"/>
+	<path class="st1" d="M29.1,24.2c-0.3,0-0.6,0.1-0.8,0.3s-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7s0.4,0.3,0.8,0.3s0.6-0.1,0.8-0.3
+		s0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7S29.4,24.2,29.1,24.2z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_outros.svg b/src/img/subject_icons/subject_outros.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8d5fbc1f8b3a316296e0729114006e93f3d19dfe
--- /dev/null
+++ b/src/img/subject_icons/subject_outros.svg
@@ -0,0 +1,6 @@
+<svg width="57" height="57" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49.7096 12.0677C48.8692 11.3192 47.9354 11.0386 47.0015 11.0386H18.7064C17.4925 11.1321 16.4653 11.6935 15.7182 12.8161L5.63281 28.1591L15.8116 43.5021C16.5586 44.6247 17.6792 45.1861 18.9866 45.1861H47.0015C48.1221 45.1861 48.9626 44.8119 49.7096 44.0634C50.4567 43.315 50.8302 42.3794 50.8302 41.3503V14.8743C50.9236 13.7517 50.5501 12.9097 49.7096 12.0677ZM49.5229 41.2568C49.5229 42.0052 49.3361 42.5665 48.8692 43.0343C48.4023 43.5021 47.842 43.6892 47.0949 43.6892H18.9866C18.1462 43.6892 17.3991 43.315 16.9322 42.6601L7.31371 28.0655L16.9322 13.5646C17.3991 12.8161 18.0528 12.4419 18.7998 12.4419H47.0015C47.6552 12.4419 48.2155 12.7226 48.7758 13.0968C49.2427 13.5646 49.4295 14.1259 49.4295 14.8743V41.2568H49.5229Z" fill="#00BCD4"/>
+<path d="M25.5239 26.2886C24.9636 26.2886 24.4967 26.4757 24.1232 26.8499C23.843 27.1306 23.6562 27.5983 23.6562 28.0661C23.6562 28.5339 23.843 29.0017 24.1232 29.2823C24.4033 29.6565 24.8702 29.8437 25.5239 29.8437C26.0842 29.8437 26.5511 29.6565 26.9247 29.2823C27.2982 29.0017 27.3916 28.6274 27.3916 28.0661C27.3916 27.5983 27.2048 27.1306 26.9247 26.7563C26.6445 26.4757 26.1776 26.2886 25.5239 26.2886ZM26.271 28.721C26.0842 28.9081 25.8974 28.9081 25.5239 28.9081C25.1504 28.9081 24.9636 28.8146 24.8702 28.721C24.6835 28.5339 24.5901 28.3468 24.5901 28.0661C24.5901 27.7855 24.6835 27.5983 24.7768 27.4112C24.8702 27.2241 25.1504 27.1306 25.4305 27.1306C25.8041 27.1306 25.9908 27.2241 26.1776 27.4112C26.3644 27.5983 26.4577 27.7855 26.4577 28.0661C26.4577 28.3468 26.3644 28.5339 26.271 28.721Z" fill="#00BCD4"/>
+<path d="M32.0591 26.2886C31.4988 26.2886 31.0319 26.4757 30.6583 26.8499C30.3782 27.2241 30.1914 27.5983 30.1914 28.1597C30.1914 28.6274 30.3782 29.0952 30.6583 29.3759C30.9385 29.7501 31.4054 29.9372 32.0591 29.9372C32.6194 29.9372 33.0863 29.7501 33.4598 29.3759C33.74 29.0017 33.9267 28.6274 33.9267 28.1597C33.9267 27.6919 33.74 27.2241 33.4598 26.8499C33.1797 26.4757 32.7127 26.2886 32.0591 26.2886ZM32.8061 28.721C32.6194 28.9081 32.4326 28.9081 32.0591 28.9081C31.6855 28.9081 31.4988 28.8146 31.4054 28.721C31.2186 28.5339 31.2186 28.3468 31.2186 28.0661C31.2186 27.7855 31.312 27.5983 31.4054 27.4112C31.5922 27.2241 31.7789 27.1306 32.0591 27.1306C32.4326 27.1306 32.6194 27.2241 32.8061 27.4112C32.9929 27.5983 33.0863 27.7855 33.0863 28.0661C33.0863 28.3468 32.9929 28.5339 32.8061 28.721Z" fill="#00BCD4"/>
+<path d="M38.6919 26.2886C38.1316 26.2886 37.6647 26.4757 37.2911 26.8499C37.011 27.2241 36.8242 27.5983 36.8242 28.1597C36.8242 28.6274 37.011 29.0952 37.2911 29.3759C37.5713 29.7501 38.0382 29.9372 38.6919 29.9372C39.2522 29.9372 39.7191 29.7501 40.0926 29.3759C40.3728 29.0017 40.5595 28.6274 40.5595 28.1597C40.5595 27.6919 40.3728 27.2241 40.0926 26.8499C39.7191 26.4757 39.2522 26.2886 38.6919 26.2886ZM39.3456 28.721C39.1588 28.9081 38.972 28.9081 38.5985 28.9081C38.3183 28.9081 38.0382 28.8146 37.9448 28.721C37.7581 28.5339 37.758 28.3468 37.758 28.0661C37.758 27.7855 37.8514 27.5983 37.9448 27.4112C38.0382 27.2241 38.3183 27.1306 38.5985 27.1306C38.972 27.1306 39.1588 27.2241 39.3456 27.4112C39.5323 27.5983 39.6257 27.7855 39.6257 28.0661C39.6257 28.3468 39.5323 28.5339 39.3456 28.721Z" fill="#00BCD4"/>
+</svg>
diff --git a/src/img/subject_icons/subject_quimica.svg b/src/img/subject_icons/subject_quimica.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4f897aa786134c3703100c03174392f503a37758
--- /dev/null
+++ b/src/img/subject_icons/subject_quimica.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.1" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M26.5,30.6c0-1.6-1.1-2.8-2.8-2.8s-2.8,1.1-2.8,2.8c0,1.6,1.1,2.8,2.8,2.8S26.5,32.3,26.5,30.6z M23.7,32.4
+		c-1.1,0-1.8-0.7-1.8-1.8s0.7-1.8,1.8-1.8s1.8,0.7,1.8,1.8S24.8,32.4,23.7,32.4z"/>
+	<path class="st1" d="M28.3,24.3c1.6,0,2.8-1.1,2.8-2.8s-1.1-2.8-2.8-2.8s-2.8,1.1-2.8,2.8S26.6,24.3,28.3,24.3z M28.3,19.7
+		c1.1,0,1.8,0.7,1.8,1.8s-0.7,1.8-1.8,1.8s-1.8-0.7-1.8-1.8S27.2,19.7,28.3,19.7z"/>
+	<path class="st1" d="M32.2,36.1c-0.3,0-0.5,0.2-0.5,0.5c0,3.7-3,6.8-6.8,6.8c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5
+		c4.3,0,7.8-3.5,7.8-7.8C32.7,36.3,32.4,36.1,32.2,36.1z"/>
+	<path class="st1" d="M38.2,0.6H13.8v5.5h2.4v31.4c0,5.4,4.4,9.9,9.9,9.9s9.9-4.4,9.9-9.9V6.1h2.4V0.6z M26,45.8
+		c-4.6,0-8.4-3.8-8.4-8.4V12.9h16.7v24.6C34.4,42.1,30.6,45.8,26,45.8z M34.4,11.9H17.6V6.1h16.7V11.9z M37.2,5.1H14.8V1.6h22.4V5.1
+		z"/>
+</g>
+</svg>
diff --git a/src/img/subject_icons/subject_sociologia.svg b/src/img/subject_icons/subject_sociologia.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e2cdacd0addb9ea8255b3b768a7b1806037bbb6a
--- /dev/null
+++ b/src/img/subject_icons/subject_sociologia.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0.1 52 47.7" style="enable-background:new 0 0.1 52 47.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#00BCD4;}
+</style>
+<rect x="0" y="0.2" class="st0" width="52" height="47.7"/>
+<g>
+	<g id="REA_Conteudo">
+		<g id="Image">
+		</g>
+	</g>
+	<g id="Content">
+	</g>
+	<g id="Pesquisa">
+	</g>
+	<g id="Print">
+	</g>
+</g>
+<g>
+	<path class="st1" d="M48,8.3c1.7-1.7,1.7-4.6,0-6.3c-0.8-0.8-2-1.3-3.2-1.3s-2.3,0.5-3.2,1.3s-1.3,2-1.3,3.2c0,0.7,0.2,1.4,0.5,2
+		C37,3.8,32,2.2,26.9,2.8l-0.9,0.1L27.5,8l0.6,0c1.2-0.1,2.4,0,3.5,0.3l-1.2,4.4l0.7,0.2c1.4,0.4,2.8,1.1,3.8,2.2
+		c1.1,1.1,1.8,2.4,2.2,3.8l0.2,0.7l4.3-1.2c0.2,1.2,0.3,2.4,0.2,3.6l0,0.6L47,24l0.1-0.9c0.6-5.1-1-10.2-4.3-14.1
+		c0.6,0.3,1.3,0.5,2,0.5C46,9.6,47.2,9.1,48,8.3z M42.7,3c0.6-0.6,1.3-0.9,2.1-0.9S46.4,2.4,47,3c1.2,1.2,1.2,3.1,0,4.2
+		c-1.1,1.1-3.1,1.1-4.2,0c-0.6-0.6-0.9-1.3-0.9-2.1C41.9,4.3,42.2,3.6,42.7,3z M45.7,22.1l-2.3-0.6c0-1.4-0.1-2.8-0.5-4.2l-0.2-0.7
+		l-4.4,1.2C37.9,16.3,37.1,15,36,14c-1.1-1.1-2.4-1.9-3.8-2.4l1.2-4.4L32.7,7c-1.3-0.4-2.7-0.5-4.1-0.5L28,4.2
+		c4.8-0.2,9.4,1.5,12.8,4.9C44.2,12.5,46,17.3,45.7,22.1z"/>
+	<path class="st1" d="M18.1,28.2c-0.6-0.9-1.1-1.9-1.5-3l4.6-1.3L21,23.2c-0.8-2.8-0.1-5.9,2-8l0.5-0.5l-3.3-3.3
+		c0.9-0.8,1.9-1.5,2.9-2l0.5-0.3l-1.4-5.2l-0.8,0.4c-4.7,2.1-8.2,6.1-9.8,10.9c0-0.7-0.2-1.4-0.6-2c-0.6-1-1.6-1.8-2.7-2.1
+		c-2.4-0.6-4.8,0.8-5.5,3.2c-0.6,2.4,0.8,4.8,3.2,5.5c0.4,0.1,0.8,0.1,1.1,0.1c1.5,0,2.9-0.8,3.8-2.1c-0.9,4.9,0.3,9.9,3.2,14
+		l0.5,0.7l3.8-3.8L18.1,28.2z M10,16.2c-0.4,1.6-2,2.6-3.6,2.1c-1.6-0.4-2.6-2-2.1-3.6c0.2-0.8,0.7-1.4,1.4-1.8
+		c0.5-0.3,1-0.4,1.5-0.4c0.3,0,0.5,0,0.8,0.1c0.8,0.2,1.4,0.7,1.8,1.4C10.1,14.6,10.2,15.4,10,16.2z M14.8,30.2
+		c-2.6-4-3.4-8.8-2.2-13.4C13.9,12.2,17,8.2,21.3,6l0.6,2.3c-1.2,0.7-2.3,1.5-3.3,2.6l-0.5,0.5l3.4,3.3c-1.9,2.3-2.6,5.3-2,8.2
+		l-4.6,1.3l0.2,0.7c0.4,1.3,0.9,2.5,1.5,3.6L14.8,30.2z"/>
+	<path class="st1" d="M40.6,26.9c-0.5,1.1-1.2,2.1-2,2.9l-3.3-3.3l-0.5,0.5c-2.1,2-5.2,2.7-8,1.9L26,28.7l-1.3,4.7
+		c-1.1-0.4-2.1-0.9-3-1.5l-0.5-0.3l-3.8,3.8l0.7,0.5c3.2,2.3,7,3.5,10.8,3.5c1.1,0,2.2-0.1,3.3-0.3c-1.6,1-2.4,3-2,4.9
+		c0.3,1.2,1,2.1,2.1,2.7c0.7,0.4,1.5,0.6,2.3,0.6c0.4,0,0.8,0,1.1-0.1c2.4-0.6,3.8-3.1,3.2-5.5c-0.3-1.2-1-2.1-2.1-2.7
+		c-0.6-0.4-1.3-0.5-2-0.6c4.8-1.6,8.8-5.2,10.9-9.8l0.4-0.8l-5.2-1.4L40.6,26.9z M37.4,42.2c0.4,1.6-0.5,3.2-2.1,3.6
+		c-0.8,0.2-1.6,0.1-2.3-0.3s-1.2-1.1-1.4-1.8c-0.4-1.6,0.5-3.2,2.1-3.6C34,40,34.3,40,34.5,40c0.5,0,1,0.1,1.5,0.4
+		C36.7,40.8,37.2,41.4,37.4,42.2z M43.9,28.8c-2.2,4.2-6.2,7.4-10.8,8.6c-4.6,1.2-9.5,0.4-13.5-2.2l1.7-1.7c1.1,0.7,2.4,1.2,3.6,1.6
+		l0.7,0.2l1.3-4.8c2.9,0.6,5.9-0.1,8.2-1.9l3.3,3.4l0.5-0.5c1-1,1.9-2.1,2.6-3.3L43.9,28.8z"/>
+</g>
+</svg>
diff --git a/src/img/twitter.svg b/src/img/twitter.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a8f67cc32a3ae9a5b6b6aeef9c9546a89137adf8
--- /dev/null
+++ b/src/img/twitter.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 50C38.8071 50 50 38.8071 50 25C50 11.1929 38.8071 0 25 0C11.1929 0 0 11.1929 0 25C0 38.8071 11.1929 50 25 50Z" fill="#55ACEE"/>
+<path d="M40.3132 17.9663C39.2419 18.4414 38.0894 18.7627 36.8808 18.9062C38.1148 18.1668 39.0618 16.997 39.5088 15.6008C38.3542 16.2858 37.0747 16.7827 35.7141 17.0505C34.6241 15.8896 33.071 15.1641 31.3512 15.1641C28.0517 15.1641 25.3755 17.8402 25.3755 21.1398C25.3755 21.6081 25.4286 22.064 25.5311 22.5017C20.5648 22.2526 16.1613 19.8737 13.2138 16.2572C12.6995 17.1396 12.4045 18.1668 12.4045 19.2618C12.4045 21.3345 13.4602 23.1643 15.0628 24.2357C14.0837 24.2049 13.1616 23.9362 12.3564 23.4874C12.3559 23.5128 12.3559 23.5382 12.3559 23.5632C12.3559 26.4586 14.4166 28.8736 17.1497 29.4221C16.6488 29.5594 16.1199 29.632 15.5757 29.632C15.1898 29.632 14.8159 29.5951 14.4513 29.5255C15.2116 31.8991 17.418 33.6268 20.0335 33.6754C17.988 35.2784 15.4117 36.2334 12.6113 36.2334C12.13 36.2334 11.6531 36.2054 11.1865 36.1497C13.8297 37.8458 16.9715 38.8347 20.3459 38.8347C31.3374 38.8347 37.3483 29.7292 37.3483 21.8319C37.3483 21.5729 37.3425 21.3149 37.3309 21.0591C38.4994 20.2168 39.5124 19.1647 40.3132 17.9663Z" fill="#F1F2F2"/>
+</svg>
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6431bc5fc6b2c932dfe5d0418fc667b86c18b9fc
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..0980b23fa1e05a97ba9ea750849ebc32ab890875
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src"
+  ]
+}