feat: enable dark mode

CHANGELOG.md

@@ -2,15 +2,6 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [1.0.0](https://github.com/verdaccio/ui/compare/v0.3.13...v1.0.0) (2020-03-13)
-
-
-### Features
-
-* **de-translations:** added de-DE translations to the UI ([#441](https://github.com/verdaccio/ui/issues/441)) ([e27d59b](https://github.com/verdaccio/ui/commit/e27d59bff7039473e566090fa0f825f7e462aa4e))
-* spanish translations to UI ([#440](https://github.com/verdaccio/ui/issues/440)) ([0abe1ef](https://github.com/verdaccio/ui/commit/0abe1ef41ca93b900ddda72e2d873ee52078221c))
-* **i18n:** added i18next for user interface translations  ([#432](https://github.com/verdaccio/ui/issues/432)) ([7428384](https://github.com/verdaccio/ui/commit/7428384b55e6089dbe45e6b216eee0b670dff576))
-
 ### [0.3.13](https://github.com/verdaccio/ui/compare/v0.3.12...v0.3.13) (2020-02-02)
 
 

i18n/config.ts

@@ -1,40 +0,0 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-
-import translationEN from './translations/en-US.json';
-import translationPT from './translations/pt-BR.json';
-import translationES from './translations/es-ES.json';
-import translationDE from './translations/de-DE.json';
-
-i18n
-  // pass the i18n instance to react-i18next.
-  .use(initReactI18next)
-  // init i18next
-  // for all options read: https://www.i18next.com/overview/configuration-options
-  .init({
-    // in case window.VEDACCIO_LANGUAGE is undefined,it will fall back to 'en-US'
-    lng: window?.__VERDACCIO_BASENAME_UI_OPTIONS?.language,
-    fallbackLng: 'en-US',
-    whitelist: ['en-US', 'pt-BR', 'es-ES', 'de-DE'],
-    load: 'currentOnly',
-    resources: {
-      'en-US': {
-        translation: translationEN,
-      },
-      'pt-BR': {
-        translation: translationPT,
-      },
-      'es-ES': {
-        translation: translationES,
-      },
-      'de-DE': {
-        translation: translationDE,
-      },
-    },
-    debug: false,
-    interpolation: {
-      escapeValue: false, // react already safes from xss
-    },
-  });
-
-export default i18n;

i18n/translations/de-DE.json

@@ -1,138 +0,0 @@
-{
-    "copy-to-clipboard": "In die Zwischenablage kopieren",
-    "author-anonymous": "Anonymus",
-    "action-bar-action": {
-        "visit-home-page": "Zur Homepage",
-        "open-an-issue": "Einen Fehler melden",
-        "download-tarball": "Archiv (Tarball) herunterladen"
-    },
-    "dialog": {
-        "registry-info": {
-            "title": "Registrierungsinformationen"
-        }
-    },
-    "header": {
-        "documentation": "Dokumentation",
-        "registry-info": "Registrierungsinformationen",
-        "greetings": "Hallo "
-    },
-    "search": {
-        "packages": "Pakete suchen"
-    },
-    "auto-complete": {
-        "loading": "wird geladen...",
-        "no-results-found": "Kein Ergebnis gefunden"
-    },
-    "tab": {
-        "uplinks": "Uplinks",
-        "versions": "Versionen",
-        "dependencies": "Abhängigkeiten",
-        "readme": "Liesmich"
-    },
-    "uplinks": {
-        "title": "Uplinks",
-        "no-items": "{{name}} hat keine Uplinks."
-    },
-    "versions": {
-        "current-tags": "Aktuelle Tags",
-        "version-history": "Versionsgeschichte",
-        "not-available": "Nicht verfügbar"
-    },
-    "package": {
-        "published-on": "Veröffentlicht am {{time}} •",
-        "version": "v{{version}}",
-        "visit-home-page": "Zur Homepage",
-        "homepage": "Homepage",
-        "open-an-issue": "Einen Fehler melden",
-        "bugs": "Fehler",
-        "download": "{{what}} herunterladen",
-        "the-tar-file": "die tar-Datei",
-        "tarball": "Archiv (Tarball)"
-    },
-    "dependencies": {
-        "has-no-dependencies": "{{package}} hat keine Abhängigkeiten",
-        "dependency-block": "{{package}}@{{version}}"
-    },
-    "form": {
-        "username": "Benutzername",
-        "password": "Passwort"
-    },
-    "form-placeholder": {
-        "username": "Dein Benutzername",
-        "password": "Dein sicheres Passwort"
-    },
-    "form-validation": {
-        "required-field": "Dieses Feld ist erforderlich",
-        "required-min-length": "Dieses Feld erfordert eine Mindestlänge von {{length}}",
-        "unable-to-sign-in": "Anmeldung nicht möglich",
-        "username-or-password-cant-be-empty": "Benutzername und Passwort dürfen nicht leer sein!"
-    },
-    "help": {
-        "title": "Noch kein Paket publiziert.",
-        "sub-title": "Um dein erstes Paket einfach zu publizieren:",
-        "first-step": "1. Einloggen",
-        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
-        "second-step": "2. Publizieren",
-        "second-step-command-line": "npm publish --registry {{registryUrl}}",
-        "third-step": "3. Diese Seite aktualisieren."
-    },
-    "sidebar": {
-        "detail": {
-            "latest-version": "Letzte v{{version}}",
-            "version": "v{{version}}"
-        },
-        "installation": {
-            "title": "Installierung",
-            "install-using-yarn": "Mit yarn installieren",
-            "install-using-yarn-command": "yarn add {{packageName}}",
-            "install-using-npm": "Mit npm installieren",
-            "install-using-npm-command": "npm install {{packageName}}",
-            "install-using-pnpm": "Mit pnpm installieren",
-            "install-using-pnpm-command": "pnpm install {{packageName}}"
-        },
-        "repository": {
-            "title": "Repository"
-        },
-        "author": {
-            "title": "Autor(in)"
-        },
-        "distribution": {
-            "title": "Neueste Distribution",
-            "license": "Lizenz",
-            "size": "Größe",
-            "file-count": "Anzahl der Dateien"
-        },
-        "maintainers": {
-            "title": "Maintainer"
-        },
-        "contributors": {
-            "title": "Contributor"
-        },
-        "engines": {
-            "npm-version": "NPM Version",
-            "node-js": "NODE JS"
-        }
-    },
-    "footer": {
-        "powered-by": "Unterstützt von",
-        "made-with-love-on": "Gemacht mit <0>♥</0> in"
-    },
-    "button": {
-        "close": "Schließen",
-        "cancel": "Abbrechen",
-        "login": "Einloggen",
-        "logout": "Ausloggen",
-        "go-to-the-home-page": "Zur Homepage",
-        "learn-more": "Mehr erfahren",
-        "fund-this-package": "Dieses Paket <0>finanzieren</0>"
-    },
-    "error": {
-        "unspecific": "Etwas ist schief gelaufen.",
-        "404": {
-            "page-not-found": "404 - Seite nicht gefunden",
-            "sorry-we-could-not-find-it": "Entschuldigung, wir konnten es nicht finden..."
-        },
-        "app-context-not-correct-used": "Der App-Kontext wurde nicht korrekt verwendet",
-        "package-meta-is-required-at-detail-context": "packageMeta wird bei DetailContext benötigt"
-    }
-}

i18n/translations/en-US.json

@@ -1,138 +0,0 @@
-{
-    "copy-to-clipboard": "Copy to clipboard",
-    "author-anonymous": "Anonymous",
-    "action-bar-action": {
-        "visit-home-page": "Visit homepage",
-        "open-an-issue": "Open an issue",
-        "download-tarball": "Download tarball"
-    },
-    "dialog": {
-        "registry-info": {
-            "title": "Register Info"
-        }
-    },
-    "header": {
-        "documentation": "Documentation",
-        "registry-info": "Registry Information",
-        "greetings": "Hi "
-    },
-    "search": {
-        "packages": "Search Packages"
-    },
-    "auto-complete": {
-        "loading": "Loading...",
-        "no-results-found": "No results found"
-    },
-    "tab": {
-        "uplinks": "Uplinks",
-        "versions": "Versions",
-        "dependencies": "Dependencies",
-        "readme": "Readme"
-    },
-    "uplinks": {
-        "title": "Uplinks",
-        "no-items": "{{name}} has no uplinks."
-    },
-    "versions": {
-        "current-tags": "Current Tags",
-        "version-history": "Version history",
-        "not-available": "Not available"
-    },
-    "package": {
-        "published-on": "Published on {{time}} •",
-        "version": "v{{version}}",
-        "visit-home-page": "Visit homepage",
-        "homepage": "Homepage",
-        "open-an-issue": "Open an issue",
-        "bugs": "Bugs",
-        "download": "Download {{what}}",
-        "the-tar-file": "the tar file",
-        "tarball": "Tarball"
-    },
-    "dependencies": {
-        "has-no-dependencies": "{{package}} has no dependencies.",
-        "dependency-block": "{{package}}@{{version}}"
-    },
-    "form": {
-        "username": "Username",
-        "password": "Password"
-    },
-    "form-placeholder": {
-        "username": "Your username",
-        "password": "Your strong password"
-    },
-    "form-validation": {
-        "required-field": "This field is required",
-        "required-min-length": "This field required the min length of {{length}}",
-        "unable-to-sign-in": "Unable to sign in",
-        "username-or-password-cant-be-empty": "Username or password can't be empty!"
-    },
-    "help": {
-        "title": "No Package Published Yet.",
-        "sub-title": "To publish your first package just:",
-        "first-step": "1. Login",
-        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
-        "second-step": "2. Publish",
-        "second-step-command-line": "npm publish --registry {{registryUrl}}",
-        "third-step": "3. Refresh this page."
-    },
-    "sidebar": {
-        "detail": {
-            "latest-version": "Latest v{{version}}",
-            "version": "v{{version}}"
-        },
-        "installation": {
-            "title": "Installation",
-            "install-using-yarn": "Install using yarn",
-            "install-using-yarn-command": "yarn add {{packageName}}",
-            "install-using-npm": "Install using npm",
-            "install-using-npm-command": "npm install {{packageName}}",
-            "install-using-pnpm": "Install using pnpm",
-            "install-using-pnpm-command": "pnpm install {{packageName}}"
-        },
-        "repository": {
-            "title": "Repository"
-        },
-        "author": {
-            "title": "Author"
-        },
-        "distribution": {
-            "title": "Latest Distribution",
-            "license": "License",
-            "size": "Size",
-            "file-count": "file count"
-        },
-        "maintainers": {
-            "title": "Maintainers"
-        },
-        "contributors": {
-            "title": "Contributors"
-        },
-        "engines": {
-            "npm-version": "NPM Version",
-            "node-js": "NODE JS"
-        }
-    },
-    "footer": {
-        "powered-by": "Powered by",
-        "made-with-love-on": "Made with <0>♥</0> on"
-    },
-    "button": {
-        "close": "Close",
-        "cancel": "Cancel",
-        "login": "Login",
-        "logout": "Logout",
-        "go-to-the-home-page": "Go to the home page",
-        "learn-more": "Learn More",
-        "fund-this-package": "<0>Fund</0> this package"
-    },
-    "error": {
-        "unspecific": "Something went wrong.",
-        "404": {
-            "page-not-found": "404 - Page not found",
-            "sorry-we-could-not-find-it": "Sorry, we couldn't find it..."
-        },
-        "app-context-not-correct-used": "The app context was not correct used",
-        "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
-    }
-}

i18n/translations/es-ES.json

@@ -1,138 +0,0 @@
-{
-    "copy-to-clipboard": "Copiar al portapapeles",
-    "author-anonymous": "Anónimo",
-    "action-bar-action": {
-        "visit-home-page": "Visitar página principal",
-        "open-an-issue": "Reportar un error",
-        "download-tarball": "Descargar libreria"
-    },
-    "dialog": {
-        "registry-info": {
-            "title": "Información del Registro"
-        }
-    },
-    "header": {
-        "documentation": "Documentación",
-        "registry-info": "Información del Registro",
-        "greetings": "Hola "
-    },
-    "search": {
-        "packages": "Buscar paquetes"
-    },
-    "auto-complete": {
-        "loading": "Cargando...",
-        "no-results-found": "Sin resultados encontrados"
-    },
-    "tab": {
-        "uplinks": "Remoto",
-        "versions": "Versiones",
-        "dependencies": "Dependencias",
-        "readme": "Léeme"
-    },
-    "uplinks": {
-        "title": "Remoto",
-        "no-items": "{{name}} not tiene remotos."
-    },
-    "versions": {
-        "current-tags": "Etiquetas actuales",
-        "version-history": "Historial de versiones",
-        "not-available": "No disponible"
-    },
-    "package": {
-        "published-on": "Publicado en {{time}} •",
-        "version": "v{{version}}",
-        "visit-home-page": "Ir a la página principal",
-        "homepage": "Página pricinpal",
-        "open-an-issue": "Reportar un problema",
-        "bugs": "Errores",
-        "download": "Descargar {{what}}",
-        "the-tar-file": "el archivo tar",
-        "tarball": "Libreria"
-    },
-    "dependencies": {
-        "has-no-dependencies": "{{package}} no tiene dependencias.",
-        "dependency-block": "{{package}}@{{version}}"
-    },
-    "form": {
-        "username": "Usuario",
-        "password": "Contraseña"
-    },
-    "form-placeholder": {
-        "username": "Tu usuario",
-        "password": "Tu fuerte conntraseña"
-    },
-    "form-validation": {
-        "required-field": "Este campo es requerido",
-        "required-min-length": "Este campo es requerido y la mínima longitud es {{length}}",
-        "unable-to-sign-in": "No se ha podido iniciar sesión",
-        "username-or-password-cant-be-empty": "Nombre de usuario o contraseña no puede estar vacio!"
-    },
-    "help": {
-        "title": "Ningún paquete ha sido publicado aun.",
-        "sub-title": "Para publicar tu primer paquete:",
-        "first-step": "1. Inicia sesión",
-        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
-        "second-step": "2. Publica",
-        "second-step-command-line": "npm publish --registry {{registryUrl}}",
-        "third-step": "3. Refresca la página."
-    },
-    "sidebar": {
-        "detail": {
-            "latest-version": "Última v{{version}}",
-            "version": "v{{version}}"
-        },
-        "installation": {
-            "title": "Instalación",
-            "install-using-yarn": "Instala usando yarn",
-            "install-using-yarn-command": "yarn add {{packageName}}",
-            "install-using-npm": "Instala usando npm",
-            "install-using-npm-command": "npm install {{packageName}}",
-            "install-using-pnpm": "Instala usando pnpm",
-            "install-using-pnpm-command": "pnpm install {{packageName}}"
-        },
-        "repository": {
-            "title": "Repositorio"
-        },
-        "author": {
-            "title": "Autor"
-        },
-        "distribution": {
-            "title": "Última distribución",
-            "license": "Licencia",
-            "size": "Tamaño",
-            "file-count": "archivo cuenta"
-        },
-        "maintainers": {
-            "title": "Mantenedores"
-        },
-        "contributors": {
-            "title": "Colaboradores"
-        },
-        "engines": {
-            "npm-version": "Version NPM",
-            "node-js": "NODE JS"
-        }
-    },
-    "footer": {
-        "powered-by": "Hecho con",
-        "made-with-love-on": "Hecho con <0>♥</0> on"
-    },
-    "button": {
-        "close": "Cerrar",
-        "cancel": "Cancelar",
-        "login": "Iniciar sesión",
-        "logout": "Cerrar sesión",
-        "go-to-the-home-page": "Ir a la página principal",
-        "learn-more": "Aprender más",
-        "fund-this-package": "<0>Donar</0> a este paquete"
-    },
-    "error": {
-        "unspecific": "Algo ha salido mal.",
-        "404": {
-            "page-not-found": "404 - Paquete no encontrado",
-            "sorry-we-could-not-find-it": "Lo siento, no hemos podido encontrarlo..."
-        },
-        "app-context-not-correct-used": "El contexto de la aplicación no fue correctamente usado",
-        "package-meta-is-required-at-detail-context": "packageMeta es requerido en DetailContext"
-    }
-}

i18n/translations/pt-BR.json

@@ -1,138 +0,0 @@
-{
-    "copy-to-clipboard": "Copiar para área de transferência",
-    "author-anonymous": "Anônimo(a)",
-    "action-bar-action": {
-        "visit-home-page": "Visitar a página inicial",
-        "open-an-issue": "Criar um incidente",
-        "download-tarball": "Baixar Tarball"
-    },
-    "dialog": {
-        "registry-info": {
-            "title": "Informações do Registro"
-        }
-    },
-    "header": {
-        "documentation": "Documentação",
-        "registry-info": "Informações do Registro",
-        "greetings": "Oi "
-    },
-    "search": {
-        "packages": "Pesquisar Pacotes"
-    },
-    "auto-complete": {
-        "loading": "Carregando...",
-        "no-results-found": "Nenhum resultado encontrado"
-    },
-    "tab": {
-        "uplinks": "Uplinks",
-        "versions": "Versões",
-        "dependencies": "Dependências",
-        "readme": "Leia-me"
-    },
-    "uplinks": {
-        "title": "Uplinks",
-        "no-items": "{{name}} não tem uplinks."
-    },
-    "versions": {
-        "current-tags": "Tags atuais",
-        "version-history": "Histórico de versões",
-        "not-available": "Não disponível"
-    },
-    "package": {
-        "published-on": "Publicado em {{time}} •",
-        "version": "v{{version}}",
-        "visit-home-page": "Visitar a página inicial",
-        "homepage": "Página inicial",
-        "open-an-issue": "Criar um incidente",
-        "bugs": "Erros",
-        "download": "Baixar {{what}}",
-        "the-tar-file": "o arquivo tar",
-        "tarball": "Tarball"
-    },
-    "dependencies": {
-        "has-no-dependencies": "{{package}} não tem dependências.",
-        "dependency-block": "{{package}}@{{version}}"
-    },
-    "form": {
-        "username": "Nome do usuário",
-        "password": "Senha"
-    },
-    "form-placeholder": {
-        "username": "O seu nome",
-        "password": "A sua senha forte"
-    },
-    "form-validation": {
-        "required-field": "Este campo é obrigatório",
-        "required-min-length": "Este campo requer o mínimo de {{length}} caracteres",
-        "unable-to-sign-in": "Não foi possível fazer login",
-        "username-or-password-cant-be-empty": "Nome de usuário ou senha não podem estar vazios!"
-    },
-    "help": {
-        "title": "Nenhum pacote publicado ainda.",
-        "sub-title": "Para publicar seu primeiro pacote apenas:",
-        "first-step": "1. Faça login",
-        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
-        "second-step": "2. Publique",
-        "second-step-command-line": "npm publish --registry {{registryUrl}}",
-        "third-step": "3. Atualize esta página."
-    },
-    "sidebar": {
-        "detail": {
-            "latest-version": "Última versão: v{{version}}",
-            "version": "v{{version}}"
-        },
-        "installation": {
-            "title": "Instalação",
-            "install-using-yarn": "Instale usando yarn",
-            "install-using-yarn-command": "yarn add {{packageName}}",
-            "install-using-npm": "Instale usando npm",
-            "install-using-npm-command": "npm install {{packageName}}",
-            "install-using-pnpm": "Instale usando pnpm",
-            "install-using-pnpm-command": "pnpm install {{packageName}}"
-        },
-        "repository": {
-            "title": "Repositório"
-        },
-        "author": {
-            "title": "Autor(a)"
-        },
-        "distribution": {
-            "title": "Distribuição mais recente",
-            "license": "Licença",
-            "size": "Tamanho",
-            "file-count": "Contagem de arquivos"
-        },
-        "maintainers": {
-            "title": "Mantenedores(as)"
-        },
-        "contributors": {
-            "title": "Contribuidores(as)"
-        },
-        "engines": {
-            "npm-version": "Versão NPM",
-            "node-js": "NODE JS"
-        }
-    },
-    "footer": {
-        "powered-by": "Distribuído por",
-        "made-with-love-on": "Feito com amor <0>♥</0> no(a)"
-    },
-    "button": {
-        "close": "Fechar",
-        "cancel": "Cancelar",
-        "login": "Conectar",
-        "logout": "Desconectar",
-        "go-to-the-home-page": "Ir para a página inicial",
-        "learn-more": "Leia mais",
-        "fund-this-package": "<0>Financie</0> este pacote"
-    },
-    "error": {
-        "unspecific": "Algo deu errado.",
-        "404": {
-            "page-not-found": "404 - Página não encontrada",
-            "sorry-we-could-not-find-it": "Desculpe, não conseguimos encontrar..."
-        },
-        "app-context-not-correct-used": "O contexto do aplicativo não foi usado corretamente",
-        "package-meta-is-required-at-detail-context": "packageMeta é requerido em DetailContext"
-    }
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-theme",
-  "version": "1.0.0",
+  "version": "0.3.13",
   "description": "Verdaccio User Interface",
   "author": {
     "name": "Verdaccio Core Team",
@@ -15,7 +15,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.0",
     "@babel/plugin-proposal-optional-chaining": "7.8.0",
-    "@commitlint/cli": "8.3.5",
+    "@commitlint/cli": "8.3.4",
     "@commitlint/config-conventional": "8.3.4",
     "@emotion/core": "10.0.22",
     "@emotion/styled": "10.0.23",
@@ -71,7 +71,6 @@
     "github-markdown-css": "3.0.1",
     "html-webpack-plugin": "3.2.0",
     "husky": "3.1.0",
-    "i18next": "19.1.0",
     "identity-obj-proxy": "3.0.0",
     "in-publish": "2.0.0",
     "jest": "24.9.0",
@@ -97,10 +96,9 @@
     "puppeteer": "2.0.0",
     "react": "16.12.0",
     "react-autosuggest": "9.4.3",
-    "react-dom": "16.13.0",
+    "react-dom": "16.12.0",
     "react-hook-form": "3.29.4",
     "react-hot-loader": "4.12.18",
-    "react-i18next": "11.3.1",
     "react-router-dom": "5.1.2",
     "request": "2.88.0",
     "resolve-url-loader": "3.1.1",
@@ -140,7 +138,7 @@
   "bundlesize": [
     {
       "path": "./static/vendors.*.js",
-      "maxSize": "200 kB"
+      "maxSize": "185 kB"
     },
     {
       "path": "./static/main.*.js",

partials/storage/jquery/package.json

@@ -4976,12 +4976,8 @@
 	"_attachments": {
 		"jquery-1.5.1.tgz": {
 			"shasum": "2ae2d661e906c1a01e044a71bb5b2743942183e5"
-		},
-		"jquery-3.3.1.tgz": {
-			"shasum": "958ce29e81c9790f31be7792df5d4d95fc57fbca"
 		}
 	},
-	"_rev": "61-e6be890a78963127",
+	"_rev": "60-fed4915c27b9c1e6",
-	"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```",
+	"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```"
-	"_id": "jquery"
+}
-}

src/App/App.tsx

@@ -1,25 +1,21 @@
-/* eslint-disable react/jsx-max-depth */
+import React, { useState, useEffect } from 'react';
-import React, { useState, useEffect, Suspense } from 'react';
 import styled from '@emotion/styled';
 import isNil from 'lodash/isNil';
 import { Router } from 'react-router-dom';
 
-import '../../i18n/config';
 import storage from '../utils/storage';
 import { isTokenExpire } from '../utils/login';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
-import Loading from '../components/Loading';
 import Box from '../muiComponents/Box';
 import StyleBaseline from '../design-tokens/StyleBaseline';
 import { Theme } from '../design-tokens/theme';
 
 import AppContextProvider from './AppContextProvider';
 import AppRoute, { history } from './AppRoute';
-import loadDayJSLocale from './load-dayjs-locale';
 
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme && theme.palette.white,
+  backgroundColor: theme && theme.palette.backgroundBody,
 }));
 
 const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
@@ -35,6 +31,7 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
 /* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {
   const [user, setUser] = useState();
+
   /**
    * Logout user
    * Required by: <Header />
@@ -60,11 +57,10 @@ const App: React.FC = () => {
 
   useEffect(() => {
     checkUserAlreadyLoggedIn();
-    loadDayJSLocale();
   }, []);
 
   return (
-    <Suspense fallback={<Loading />}>
+    <>
       <StyleBaseline />
       <StyledBox display="flex" flexDirection="column" height="100%">
         <>
@@ -72,6 +68,7 @@ const App: React.FC = () => {
             <AppContextProvider user={user}>
               <Header />
               <StyledBoxContent flexGrow={1}>
+                {/* eslint-disable-next-line react/jsx-max-depth */}
                 <AppRoute />
               </StyledBoxContent>
             </AppContextProvider>
@@ -79,7 +76,7 @@ const App: React.FC = () => {
           <Footer />
         </>
       </StyledBox>
-    </Suspense>
+    </>
   );
 };
 

src/App/AppRoute.tsx

@@ -1,7 +1,8 @@
-import React, { lazy, useContext } from 'react';
+import React, { lazy, useContext, Suspense } from 'react';
 import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
-import { useTranslation } from 'react-i18next';
+
+import Loading from '../components/Loading';
 
 import AppContext from './AppContext';
 
@@ -24,10 +25,9 @@ export const history = createBrowserHistory({
 
 const AppRoute: React.FC = () => {
   const appContext = useContext(AppContext);
-  const { t } = useTranslation();
 
   if (!appContext) {
-    throw Error(t('app-context-not-correct-used'));
+    throw Error('The app Context was not correct used');
   }
 
   const { user } = appContext;
@@ -36,34 +36,36 @@ const AppRoute: React.FC = () => {
 
   return (
     <Router history={history}>
-      <Switch>
+      <Suspense fallback={<Loading />}>
-        <ReactRouterDomRoute exact={true} path={Route.ROOT}>
+        <Switch>
-          <HomePage isUserLoggedIn={!!isUserLoggedIn} />
+          <ReactRouterDomRoute exact={true} path={Route.ROOT}>
-        </ReactRouterDomRoute>
+            <HomePage isUserLoggedIn={!!isUserLoggedIn} />
-        <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
+          </ReactRouterDomRoute>
-          <VersionContextProvider>
+          <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
-            <VersionPage />
+            <VersionContextProvider>
-          </VersionContextProvider>
+              <VersionPage />
-        </ReactRouterDomRoute>
+            </VersionContextProvider>
-        <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
+          </ReactRouterDomRoute>
-          <VersionContextProvider>
+          <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
-            <VersionPage />
+            <VersionContextProvider>
-          </VersionContextProvider>
+              <VersionPage />
-        </ReactRouterDomRoute>
+            </VersionContextProvider>
-        <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
+          </ReactRouterDomRoute>
-          <VersionContextProvider>
+          <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
-            <VersionPage />
+            <VersionContextProvider>
-          </VersionContextProvider>
+              <VersionPage />
-        </ReactRouterDomRoute>
+            </VersionContextProvider>
-        <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
+          </ReactRouterDomRoute>
-          <VersionContextProvider>
+          <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
-            <VersionPage />
+            <VersionContextProvider>
-          </VersionContextProvider>
+              <VersionPage />
-        </ReactRouterDomRoute>
+            </VersionContextProvider>
-        <ReactRouterDomRoute>
+          </ReactRouterDomRoute>
-          <NotFound />
+          <ReactRouterDomRoute>
-        </ReactRouterDomRoute>
+            <NotFound />
-      </Switch>
+          </ReactRouterDomRoute>
+        </Switch>
+      </Suspense>
     </Router>
   );
 };

src/App/__snapshots__/App.test.tsx.snap

@@ -152,6 +152,53 @@ exports[`<App /> should display the Header component  1`] = `
   }
 }
 
+.emotion-34 {
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  position: absolute;
+}
+
+.emotion-28 {
+  margin: 0 0 30px 0;
+  border-radius: 25px;
+  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
+  background: #f7f8f6;
+}
+
+.emotion-26 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 90px;
+  height: 90px;
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-30 {
+  color: #4b5e40;
+}
+
 .emotion-76 {
   background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
@@ -309,53 +356,6 @@ exports[`<App /> should display the Header component  1`] = `
   height: auto;
 }
 
-.emotion-34 {
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-  top: 50%;
-  left: 50%;
-  position: absolute;
-}
-
-.emotion-28 {
-  margin: 0 0 30px 0;
-  border-radius: 25px;
-  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
-  background: #f7f8f6;
-}
-
-.emotion-26 {
-  display: inline-block;
-  vertical-align: middle;
-  box-sizing: border-box;
-  background-position: center;
-  background-size: contain;
-  background-image: url([object Object]);
-  background-repeat: no-repeat;
-  width: 90px;
-  height: 90px;
-}
-
-.emotion-32 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.emotion-30 {
-  color: #4b5e40;
-}
-
 <div
   class="MuiBox-root MuiBox-root-219 emotion-78 emotion-79"
 >
@@ -545,7 +545,6 @@ exports[`<App /> should display the Header component  1`] = `
   >
     <div
       class="container content"
-      data-testid="home-page-container"
     >
       <div
         class="emotion-34 emotion-35"
@@ -593,13 +592,13 @@ exports[`<App /> should display the Header component  1`] = `
       <div
         class="emotion-65 emotion-66"
       >
-        Made with 
+         Made with
         <span
           class="emotion-38 emotion-39"
         >
           ♥
         </span>
-         on
+        on
         <span
           class="emotion-63 emotion-64"
         >
@@ -701,7 +700,7 @@ exports[`<App /> should display the Header component  1`] = `
 `;
 
 exports[`<App /> should display the Loading component at the beginning  1`] = `
-.emotion-68 {
+.emotion-78 {
   background-color: #fff;
 }
 
@@ -844,7 +843,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media screen and (min-width:1240px) {
-  .emotion-26 {
+  .emotion-36 {
     max-width: 1240px;
     width: 100%;
     margin-left: auto;
@@ -852,7 +851,54 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   }
 }
 
-.emotion-66 {
+.emotion-34 {
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  position: absolute;
+}
+
+.emotion-28 {
+  margin: 0 0 30px 0;
+  border-radius: 25px;
+  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
+  background: #f7f8f6;
+}
+
+.emotion-26 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 90px;
+  height: 90px;
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-30 {
+  color: #4b5e40;
+}
+
+.emotion-76 {
   background: #f9f9f9;
   border-top: 1px solid #e3e3e3;
   color: #999999;
@@ -860,7 +906,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 20px;
 }
 
-.emotion-64 {
+.emotion-74 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -877,7 +923,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-64 {
+  .emotion-74 {
     min-width: 400px;
     max-width: 800px;
     margin: auto;
@@ -889,12 +935,12 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:1024px) {
-  .emotion-64 {
+  .emotion-74 {
     max-width: 1240px;
   }
 }
 
-.emotion-55 {
+.emotion-65 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -903,7 +949,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-55 {
+  .emotion-65 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -911,21 +957,21 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   }
 }
 
-.emotion-28 {
+.emotion-38 {
   color: #e25555;
   padding: 0 5px;
 }
 
-.emotion-53 {
+.emotion-63 {
   position: relative;
   height: 18px;
 }
 
-.emotion-53:hover .emotion-52 {
+.emotion-63:hover .emotion-62 {
   visibility: visible;
 }
 
-.emotion-31 {
+.emotion-41 {
   box-sizing: initial;
   display: inline-block;
   cursor: default;
@@ -934,7 +980,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 10px;
 }
 
-.emotion-51 {
+.emotion-61 {
   position: absolute;
   background: #d3dddd;
   padding: 1px 4px;
@@ -952,7 +998,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   top: -2px;
 }
 
-.emotion-51:before {
+.emotion-61:before {
   content: '';
   position: absolute;
   top: 29%;
@@ -965,7 +1011,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   transform: rotate(90deg);
 }
 
-.emotion-34 {
+.emotion-44 {
   box-sizing: initial;
   display: inline-block;
   cursor: default;
@@ -974,7 +1020,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 5px;
 }
 
-.emotion-62 {
+.emotion-72 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -987,7 +1033,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }
 
 @media (min-width:768px) {
-  .emotion-62 {
+  .emotion-72 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -995,7 +1041,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   }
 }
 
-.emotion-60 {
+.emotion-70 {
   box-sizing: initial;
   display: inline-block;
   cursor: pointer;
@@ -1004,14 +1050,13 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   padding: 0 5px;
 }
 
-.emotion-57 {
+.emotion-67 {
   width: 100%;
   height: auto;
 }
 
 <div
-  class="MuiBox-root MuiBox-root-2 emotion-68 emotion-69"
+  class="MuiBox-root MuiBox-root-2 emotion-78 emotion-79"
-  style="display: none;"
 >
   <header
     class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
@@ -1195,29 +1240,65 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
     </div>
   </header>
   <div
-    class="MuiBox-root MuiBox-root-195 emotion-26 emotion-27"
+    class="MuiBox-root MuiBox-root-195 emotion-36 emotion-37"
-  />
-  <div
-    class="emotion-66 emotion-67"
   >
     <div
-      class="emotion-64 emotion-65"
+      class="emotion-34 emotion-35"
+      data-testid="loading"
     >
       <div
-        class="emotion-55 emotion-56"
+        class="emotion-28 emotion-29"
       >
-        Made with 
+        <div
+          class="emotion-26 emotion-1"
+        />
+      </div>
+      <div
+        class="emotion-32 emotion-33"
+      >
+        <div
+          class="MuiCircularProgress-root emotion-30 emotion-31 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+          role="progressbar"
+          style="width: 50px; height: 50px;"
+        >
+          <svg
+            class="MuiCircularProgress-svg"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="emotion-76 emotion-77"
+  >
+    <div
+      class="emotion-74 emotion-75"
+    >
+      <div
+        class="emotion-65 emotion-66"
+      >
+         Made with
         <span
-          class="emotion-28 emotion-29"
+          class="emotion-38 emotion-39"
         >
           ♥
         </span>
-         on
+        on
         <span
-          class="emotion-53 emotion-54"
+          class="emotion-63 emotion-64"
         >
           <svg
-            class="emotion-30 emotion-31 emotion-32"
+            class="emotion-40 emotion-41 emotion-42"
           >
             <title>
               Earth
@@ -1227,10 +1308,10 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
             />
           </svg>
           <span
-            class="emotion-51 emotion-52"
+            class="emotion-61 emotion-62"
           >
             <svg
-              class="emotion-33 emotion-34 emotion-32"
+              class="emotion-43 emotion-44 emotion-42"
             >
               <title>
                 Spain
@@ -1240,7 +1321,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
               />
             </svg>
             <svg
-              class="emotion-33 emotion-34 emotion-32"
+              class="emotion-43 emotion-44 emotion-42"
             >
               <title>
                 Nicaragua
@@ -1250,7 +1331,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
               />
             </svg>
             <svg
-              class="emotion-33 emotion-34 emotion-32"
+              class="emotion-43 emotion-44 emotion-42"
             >
               <title>
                 India
@@ -1260,7 +1341,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
               />
             </svg>
             <svg
-              class="emotion-33 emotion-34 emotion-32"
+              class="emotion-43 emotion-44 emotion-42"
             >
               <title>
                 Brazil
@@ -1270,7 +1351,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
               />
             </svg>
             <svg
-              class="emotion-33 emotion-34 emotion-32"
+              class="emotion-43 emotion-44 emotion-42"
             >
               <title>
                 China
@@ -1280,7 +1361,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
               />
             </svg>
             <svg
-              class="emotion-33 emotion-34 emotion-32"
+              class="emotion-43 emotion-44 emotion-42"
             >
               <title>
                 Austria
@@ -1293,16 +1374,16 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
         </span>
       </div>
       <div
-        class="emotion-62 emotion-63"
+        class="emotion-72 emotion-73"
       >
         Powered by
         <span
-          class="emotion-33 emotion-60 emotion-61"
+          class="emotion-43 emotion-70 emotion-71"
           title="Verdaccio"
         >
           <img
             alt="Verdaccio"
-            class="emotion-57 emotion-58"
+            class="emotion-67 emotion-68"
             src="[object Object]"
           />
         </span>

src/App/load-dayjs-locale.ts

@@ -1,52 +0,0 @@
-import dayjs from 'dayjs';
-import i18n from 'i18next';
-
-function getFallFackLanguage(): string | undefined {
-  const fallbackLanguage = i18n.options.fallbackLng;
-
-  if (Array.isArray(fallbackLanguage)) {
-    return fallbackLanguage[0];
-  }
-
-  if (typeof fallbackLanguage === 'string') {
-    return fallbackLanguage;
-  }
-
-  return undefined;
-}
-
-function loadDayJSLocale() {
-  const fallbackLanguage = getFallFackLanguage();
-  const locale = i18n.language || fallbackLanguage;
-
-  // dayjs loades en-US by default
-  if (!locale || locale === 'en-US') {
-    return;
-  }
-
-  switch (locale.toLowerCase()) {
-    // At the moment we only support pt-BR, please see: i18n/translations/*
-    case 'pt-br':
-      {
-        require('dayjs/locale/pt-br');
-        dayjs.locale('pt-br');
-      }
-      break;
-    case 'de':
-      {
-        require('dayjs/locale/de');
-        dayjs.locale('de');
-      }
-      break;
-    case 'es-es':
-      {
-        require('dayjs/locale/es');
-        dayjs.locale('es');
-      }
-      break;
-    default:
-      break;
-  }
-}
-
-export default loadDayJSLocale;

src/components/ActionBar/ActionBarAction.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import BugReportIcon from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
-import { useTranslation } from 'react-i18next';
 
 import Tooltip from '../../muiComponents/Tooltip';
 import Link from '../Link';
@@ -27,11 +26,10 @@ export interface ActionBarActionProps {
 
 /* eslint-disable react/jsx-no-bind */
 const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
-  const { t } = useTranslation();
   switch (type) {
     case 'VISIT_HOMEPAGE':
       return (
-        <Tooltip title={t('action-bar-action.visit-home-page')}>
+        <Tooltip title="Visit homepage">
           <Link external={true} to={link}>
             <Fab size="small">
               <HomeIcon />
@@ -41,7 +39,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
       );
     case 'OPEN_AN_ISSUE':
       return (
-        <Tooltip title={t('action-bar-action.open-an-issue')}>
+        <Tooltip title="Open an issue">
           <Link external={true} to={link}>
             <Fab size="small">
               <BugReportIcon />
@@ -51,7 +49,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
       );
     case 'DOWNLOAD_TARBALL':
       return (
-        <Tooltip title={t('action-bar-action.download-tarball')}>
+        <Tooltip title="Download tarball">
           <Fab data-testid="download-tarball-btn" onClick={downloadTarball(link)} size="small">
             <DownloadIcon />
           </Fab>

src/components/Author/Author.tsx

@@ -1,17 +1,14 @@
 import React, { FC, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { DetailContext } from '../../pages/Version';
 import { isEmail } from '../../utils/url';
 import Avatar from '../../muiComponents/Avatar';
 import List from '../../muiComponents/List';
-import { getAuthorName } from '../../utils/package';
 
 import { StyledText, AuthorListItem, AuthorListItemText } from './styles';
 
 const Author: FC = () => {
   const { packageMeta } = useContext(DetailContext);
-  const { t } = useTranslation();
 
   if (!packageMeta) {
     return null;
@@ -28,7 +25,7 @@ const Author: FC = () => {
   const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;
 
   return (
-    <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
+    <List subheader={<StyledText variant={'subtitle1'}>{'Author'}</StyledText>}>
       <AuthorListItem button={true}>
         {!email || !isEmail(email) ? (
           avatarComponent
@@ -37,7 +34,8 @@ const Author: FC = () => {
             {avatarComponent}
           </a>
         )}
-        {name && <AuthorListItemText primary={getAuthorName(name)} />}
+
+        <AuthorListItemText primary={name} />
       </AuthorListItem>
     </List>
   );

src/components/Author/__snapshots__/Author.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Author/styles.ts

@@ -7,6 +7,7 @@ import { Theme } from '../../design-tokens/theme';
 
 export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
   fontWeight: props.theme && props.theme.fontWeight.bold,
+  textTransform: 'capitalize',
 }));
 
 export const AuthorListItem = styled(ListItem)({

src/components/AutoComplete/AutoComplete.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
-import { useTranslation } from 'react-i18next';
 
 import MenuItem from '../../muiComponents/MenuItem';
 import { Theme } from '../../design-tokens/theme';
@@ -84,6 +83,12 @@ const renderMessage = (message): JSX.Element => {
   );
 };
 
+const SUGGESTIONS_RESPONSE = {
+  LOADING: 'Loading...',
+  FAILURE: 'Something went wrong.',
+  NO_RESULT: 'No results found.',
+};
+
 const AutoComplete = memo(
   ({
     suggestions,
@@ -101,8 +106,6 @@ const AutoComplete = memo(
     suggestionsLoaded = false,
     suggestionsError = false,
   }: Props) => {
-    const { t } = useTranslation();
-
     const autosuggestProps = {
       renderInputComponent,
       suggestions,
@@ -127,9 +130,9 @@ const AutoComplete = memo(
     function renderSuggestionsContainer({ containerProps, children, query }): JSX.Element {
       return (
         <SuggestionContainer {...containerProps} square={true}>
-          {suggestionsLoaded && children === null && query && renderMessage(t('auto-complete.no-results-found'))}
+          {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
-          {suggestionsLoading && query && renderMessage(t('auto-complete.loading'))}
+          {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
-          {suggestionsError && renderMessage(t('error.unspecific'))}
+          {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
           {children}
         </SuggestionContainer>
       );

src/components/CopyToClipBoard/CopyToClipBoard.tsx

@@ -1,8 +1,8 @@
 import FileCopy from '@material-ui/icons/FileCopy';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { copyToClipBoardUtility } from '../../utils/cli-utils';
+import { TEXT } from '../../utils/constants';
 import Tooltip from '../../muiComponents/Tooltip';
 
 import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
@@ -20,16 +20,19 @@ const renderText = (text: string, children: React.ReactNode): JSX.Element => {
   return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
 };
 
+const renderToolTipFileCopy = (text: string): React.ReactElement<HTMLElement> => (
+  <Tooltip disableFocusListener={true} title={TEXT.CLIPBOARD_COPY}>
+    <CopyIcon onClick={copyToClipBoardUtility(text)}>
+      <FileCopy />
+    </CopyIcon>
+  </Tooltip>
+);
+
 const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
-  const { t } = useTranslation();
   return (
     <ClipBoardCopy>
       {renderText(text, children)}
-      <Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
+      {renderToolTipFileCopy(text)}
-        <CopyIcon onClick={copyToClipBoardUtility(text)}>
-          <FileCopy />
-        </CopyIcon>
-      </Tooltip>
     </ClipBoardCopy>
   );
 };

src/components/CopyToClipBoard/__snapshots__/CopyToClipBoard.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root  css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"copy-to-clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`;
+exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root  css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`;

src/components/Dependencies/Dependencies.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 
 import CardContent from '../../muiComponents/CardContent';
 import { PackageDependencies } from '../../../types/packageMeta';
@@ -17,7 +16,6 @@ interface DependencyBlockProps {
 const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
   const { enableLoading } = useContext(DetailContext);
   const history = useHistory();
-  const { t } = useTranslation();
 
   const deps = Object.entries(dependencies);
 
@@ -33,14 +31,8 @@ const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }
         <StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
         <Tags>
           {deps.map(([name, version]) => (
-            <Tag
+            // eslint-disable-next-line
-              className={'dep-tag'}
+            <Tag className={'dep-tag'} clickable={true} key={name} label={`${name}@${version}`} onClick={() => handleClick(name)} />
-              clickable={true}
-              key={name}
-              label={t('dependencies.dependency-block', { package: name, version })}
-              // eslint-disable-next-line
-              onClick={() => handleClick(name)}
-            />
           ))}
         </Tags>
       </CardContent>
@@ -54,10 +46,9 @@ function hasKeys(object?: { [key: string]: any }): boolean {
 
 const Dependencies: React.FC<{}> = () => {
   const { packageMeta } = useContext(DetailContext);
-  const { t } = useTranslation();
 
   if (!packageMeta) {
-    throw new Error(t('error.package-meta-is-required-at-detail-context'));
+    throw new Error('packageMeta is required at DetailContext');
   }
 
   const { latest } = packageMeta;
@@ -81,7 +72,7 @@ const Dependencies: React.FC<{}> = () => {
     );
   }
 
-  return <NoItems className="no-dependencies" text={t('dependencies.has-no-dependencies', { package: name })} />;
+  return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />;
 };
 
 export default Dependencies;

src/components/DetailContainer/DetailContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
 
 import { DetailContext } from '../../pages/Version';
 import Box from '../../muiComponents/Box';
@@ -6,22 +6,30 @@ import Box from '../../muiComponents/Box';
 import DetailContainerTabs from './DetailContainerTabs';
 import DetailContainerContent from './DetailContainerContent';
 import { TabPosition } from './tabs';
+import { DetailTheme } from './styles';
 
 const DetailContainer: React.FC = () => {
-  const tabs = Object.values(TabPosition);
+  const [tabPosition, setTabPosition] = useState(TabPosition.README);
-  const [tabPosition, setTabPosition] = useState(0);
   const detailContext = useContext(DetailContext);
   const { readMe } = detailContext;
 
-  const handleChange = (event, newValue) => {
+  const handleChangeTabPosition = useCallback(
-    setTabPosition(newValue);
+    (event: ChangeEvent<{}>) => {
-  };
+      event.preventDefault();
+      const eventTarget = event.target as HTMLSpanElement;
+      const chosentab = eventTarget.innerText as TabPosition;
+      setTabPosition(TabPosition[chosentab]);
+    },
+    [setTabPosition]
+  );
 
   return (
-    <Box component="div" display="flex" flexDirection="column" padding={2}>
+      <Box component="div" display="flex" flexDirection="column">
-      <DetailContainerTabs onChange={handleChange} tabPosition={tabPosition} />
+        <DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
-      <DetailContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
+        <DetailTheme>
-    </Box>
+          <DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
+        </DetailTheme>
+      </Box>
   );
 };
 

src/components/DetailContainer/DetailContainerContentReadme.tsx

@@ -2,15 +2,18 @@ import React from 'react';
 
 import { preventXSS } from '../../utils/sec-utils';
 import Readme from '../Readme';
+import { ReadmeSpacing } from './styles';
 
 interface Props {
   description?: string;
 }
 
 const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
-  if (!description) return null;
+  if (!description) {
+    return null;
+  }
   const encodedReadme = preventXSS(description);
-  return <Readme description={encodedReadme} />;
+  return <ReadmeSpacing><Readme description={encodedReadme} /></ReadmeSpacing>;
 };
 
 export default DetailContainerContentReadme;

src/components/DetailContainer/DetailContainerTabs.tsx

@@ -1,35 +1,44 @@
-import React from 'react';
+import React, { ChangeEvent, useState, useEffect } from 'react';
 import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
 
 import { default as MuiTabs } from '../../muiComponents/Tabs';
 import Tab from '../../muiComponents/Tab';
 
+import { TabPosition } from './tabs';
+
 interface Props {
-  onChange: (event, newValue) => void;
+  tabPosition: TabPosition;
-  tabPosition: number;
+  onChangeTabPosition: (event: ChangeEvent<{}>) => void;
 }
 
-const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
+const Tabs = styled(MuiTabs)({
-  const { t } = useTranslation();
+  marginBottom: 16,
+});
+
+const getTabIndex = (tabPosition: TabPosition): number =>
+  Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
+
+const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
+  const [tabPositionIndex, setTabPositionIndex] = useState(0);
+
+  useEffect(() => {
+    const tabIndex = getTabIndex(tabPosition);
+    setTabPositionIndex(tabIndex);
+  }, [tabPosition]);
 
   return (
     <Tabs
-      indicatorColor={'primary'}
+      indicatorColor={'secondary'}
-      onChange={onChange}
+      onChange={onChangeTabPosition}
-      textColor={'primary'}
+      textColor={'secondary'}
-      value={tabPosition}
+      value={tabPositionIndex}
       variant={'fullWidth'}>
-      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
+      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />
-      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
+      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} />
-      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
+      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} />
-      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
+      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={TabPosition.UPLINKS} />
     </Tabs>
   );
 };
 
 export default DetailContainerTabs;
-
-const Tabs = styled(MuiTabs)({
-  marginBottom: 16,
-});

src/components/DetailContainer/styles.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+import { Theme } from '../../design-tokens/theme';
+
+export const DetailTheme = styled('div')<{ theme?: Theme }>(props => ({
+  backgroundColor: props?.theme?.palette.readmeBackgroundColor,
+}));
+
+export const ReadmeSpacing = styled('div')<{ theme?: Theme }>(props => ({
+  padding: '20px',
+}));

src/components/DetailContainer/tabs.ts

@@ -1,6 +1,6 @@
 export enum TabPosition {
-  README = 'readme',
+  README = 'Readme',
-  DEPENDENCIES = 'dependencies',
+  DEPENDENCIES = 'Dependencies',
-  VERSIONS = 'versions',
+  VERSIONS = 'Versions',
-  UPLINKS = 'uplinks',
+  UPLINKS = 'Uplinks',
 }

src/components/DetailSidebar/DetailSidebarFundButton.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 import Favorite from '@material-ui/icons/Favorite';
-import { Trans } from 'react-i18next';
 
 import Button from '../../muiComponents/Button';
 import Link from '../Link';
@@ -39,7 +38,8 @@ const DetailSidebarFundButton: React.FC = () => {
   return (
     <StyledLink external={true} to={fundingUrl}>
       <Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
-        <Trans components={[<StyledFundStrong key="fund" />]} i18nKey="button.fund-this-package" />
+        <StyledFundStrong>{'Fund'}</StyledFundStrong>
+        {'this package'}
       </Button>
     </StyledLink>
   );

src/components/DetailSidebar/DetailSidebarTitle.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
 
 import Box from '../../muiComponents/Box';
 import Heading from '../../muiComponents/Heading';
@@ -22,17 +21,12 @@ const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   color: theme && theme.palette.text.secondary,
 }));
 
-const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
+const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => (
-  const { t } = useTranslation();
+  <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
-  return (
+    <StyledHeading>{packageName}</StyledHeading>
-    <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
+    {description && <div>{description}</div>}
-      <StyledHeading>{packageName}</StyledHeading>
+    <StyledBoxVersion>{`${isLatest ? 'Latest v' : 'v'}${version}`}</StyledBoxVersion>
-      {description && <div>{description}</div>}
+  </Box>
-      <StyledBoxVersion>
+);
-        {isLatest ? t('sidebar.detail.latest-version', { version }) : t('sidebar.detail.version', { version })}
-      </StyledBoxVersion>
-    </Box>
-  );
-};
 
 export default DetailSidebarTitle;

src/components/Developers/Developers.test.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContextProvider } from '../../pages/Version';
 
-import Developers, { Fab } from './Developers';
+import Developers, { DeveloperType, Fab } from './Developers';
-import { DeveloperType } from './types';
 
 describe('test Developers', () => {
   const packageMeta = {

src/components/Developers/Developers.tsx

@@ -1,29 +1,38 @@
 import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
 import Add from '@material-ui/icons/Add';
 import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
 
 import { DetailContext } from '../../pages/Version';
 import Tooltip from '../../muiComponents/Tooltip';
 import Avatar from '../../muiComponents/Avatar';
 import Box from '../../muiComponents/Box';
+import Text from '../../muiComponents/Text';
 import FloatingActionButton from '../../muiComponents/FloatingActionButton';
 import { Theme } from '../../design-tokens/theme';
 
 import getUniqueDeveloperValues from './get-unique-developer-values';
-import DevelopersTitle from './DevelopersTitle';
-import { DeveloperType } from './types';
 
 export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
   backgroundColor: props.theme && props.theme.palette.primary.main,
   color: props.theme && props.theme.palette.white,
 }));
 
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
+
 interface Props {
   type: DeveloperType;
   visibleMax?: number;
 }
 
+export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme && theme.fontWeight.bold,
+  marginBottom: '10px',
+  textTransform: 'capitalize',
+}));
+
 const StyledBox = styled(Box)({
   '> *': {
     margin: 5,
@@ -34,10 +43,9 @@ export const VISIBLE_MAX = 6;
 
 const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
   const detailContext = useContext(DetailContext);
-  const { t } = useTranslation();
 
   if (!detailContext) {
-    throw Error(t('app-context-not-correct-used'));
+    throw Error("The app's detail Context was not correct used");
   }
 
   const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
@@ -61,7 +69,7 @@ const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
 
   return (
     <>
-      <DevelopersTitle type={type} />
+      <StyledText variant={'subtitle1'}>{type}</StyledText>
       <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
         {visibleDevelopers.map(visibleDeveloper => (
           <Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>

src/components/Developers/DevelopersTitle.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
-
-import Text from '../../muiComponents/Text';
-import { Theme } from '../../design-tokens/theme';
-
-import { DeveloperType } from './types';
-
-interface Props {
-  type: DeveloperType;
-}
-
-const DevelopersTitle: React.FC<Props> = ({ type }) => {
-  const { t } = useTranslation();
-  switch (type) {
-    case DeveloperType.CONTRIBUTORS:
-      return <StyledText variant={'subtitle1'}>{t('sidebar.contributors.title')}</StyledText>;
-    case DeveloperType.MAINTAINERS:
-      return <StyledText variant={'subtitle1'}>{t('sidebar.maintainers.title')}</StyledText>;
-      return null;
-  }
-};
-
-export default DevelopersTitle;
-
-const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
-  fontWeight: theme && theme.fontWeight.bold,
-  marginBottom: '10px',
-}));

src/components/Developers/__snapshots__/Developers.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`test Developers should render the component for contributors with items
 .emotion-0 {
   font-weight: 700;
   margin-bottom: 10px;
+  text-transform: capitalize;
 }
 
 .emotion-8 > * {
@@ -13,68 +14,64 @@ exports[`test Developers should render the component for contributors with items
 <Developers
   type="contributors"
 >
-  <DevelopersTitle
+  <StyledText
-    type="contributors"
+    variant="subtitle1"
   >
-    <StyledText
+    <ForwardRef(Text)
+      className="emotion-0 emotion-1"
       variant="subtitle1"
     >
-      <ForwardRef(Text)
+      <WithStyles(ForwardRef(Typography))
         className="emotion-0 emotion-1"
         variant="subtitle1"
       >
-        <WithStyles(ForwardRef(Typography))
+        <ForwardRef(Typography)
           className="emotion-0 emotion-1"
+          classes={
+            Object {
+              "alignCenter": "MuiTypography-alignCenter",
+              "alignJustify": "MuiTypography-alignJustify",
+              "alignLeft": "MuiTypography-alignLeft",
+              "alignRight": "MuiTypography-alignRight",
+              "body1": "MuiTypography-body1",
+              "body2": "MuiTypography-body2",
+              "button": "MuiTypography-button",
+              "caption": "MuiTypography-caption",
+              "colorError": "MuiTypography-colorError",
+              "colorInherit": "MuiTypography-colorInherit",
+              "colorPrimary": "MuiTypography-colorPrimary",
+              "colorSecondary": "MuiTypography-colorSecondary",
+              "colorTextPrimary": "MuiTypography-colorTextPrimary",
+              "colorTextSecondary": "MuiTypography-colorTextSecondary",
+              "displayBlock": "MuiTypography-displayBlock",
+              "displayInline": "MuiTypography-displayInline",
+              "gutterBottom": "MuiTypography-gutterBottom",
+              "h1": "MuiTypography-h1",
+              "h2": "MuiTypography-h2",
+              "h3": "MuiTypography-h3",
+              "h4": "MuiTypography-h4",
+              "h5": "MuiTypography-h5",
+              "h6": "MuiTypography-h6",
+              "noWrap": "MuiTypography-noWrap",
+              "overline": "MuiTypography-overline",
+              "paragraph": "MuiTypography-paragraph",
+              "root": "MuiTypography-root",
+              "srOnly": "MuiTypography-srOnly",
+              "subtitle1": "MuiTypography-subtitle1",
+              "subtitle2": "MuiTypography-subtitle2",
+            }
+          }
           variant="subtitle1"
         >
-          <ForwardRef(Typography)
+          <h6
-            className="emotion-0 emotion-1"
+            className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
-            classes={
-              Object {
-                "alignCenter": "MuiTypography-alignCenter",
-                "alignJustify": "MuiTypography-alignJustify",
-                "alignLeft": "MuiTypography-alignLeft",
-                "alignRight": "MuiTypography-alignRight",
-                "body1": "MuiTypography-body1",
-                "body2": "MuiTypography-body2",
-                "button": "MuiTypography-button",
-                "caption": "MuiTypography-caption",
-                "colorError": "MuiTypography-colorError",
-                "colorInherit": "MuiTypography-colorInherit",
-                "colorPrimary": "MuiTypography-colorPrimary",
-                "colorSecondary": "MuiTypography-colorSecondary",
-                "colorTextPrimary": "MuiTypography-colorTextPrimary",
-                "colorTextSecondary": "MuiTypography-colorTextSecondary",
-                "displayBlock": "MuiTypography-displayBlock",
-                "displayInline": "MuiTypography-displayInline",
-                "gutterBottom": "MuiTypography-gutterBottom",
-                "h1": "MuiTypography-h1",
-                "h2": "MuiTypography-h2",
-                "h3": "MuiTypography-h3",
-                "h4": "MuiTypography-h4",
-                "h5": "MuiTypography-h5",
-                "h6": "MuiTypography-h6",
-                "noWrap": "MuiTypography-noWrap",
-                "overline": "MuiTypography-overline",
-                "paragraph": "MuiTypography-paragraph",
-                "root": "MuiTypography-root",
-                "srOnly": "MuiTypography-srOnly",
-                "subtitle1": "MuiTypography-subtitle1",
-                "subtitle2": "MuiTypography-subtitle2",
-              }
-            }
-            variant="subtitle1"
           >
-            <h6
+            contributors
-              className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+          </h6>
-            >
+        </ForwardRef(Typography)>
-              sidebar.contributors.title
+      </WithStyles(ForwardRef(Typography))>
-            </h6>
+    </ForwardRef(Text)>
-          </ForwardRef(Typography)>
+  </StyledText>
-        </WithStyles(ForwardRef(Typography))>
-      </ForwardRef(Text)>
-    </StyledText>
-  </DevelopersTitle>
   <StyledBox
     display="flex"
     flexWrap="wrap"
@@ -430,6 +427,7 @@ exports[`test Developers should render the component for maintainers with items
 .emotion-0 {
   font-weight: 700;
   margin-bottom: 10px;
+  text-transform: capitalize;
 }
 
 .emotion-8 > * {
@@ -439,68 +437,64 @@ exports[`test Developers should render the component for maintainers with items
 <Developers
   type="maintainers"
 >
-  <DevelopersTitle
+  <StyledText
-    type="maintainers"
+    variant="subtitle1"
   >
-    <StyledText
+    <ForwardRef(Text)
+      className="emotion-0 emotion-1"
       variant="subtitle1"
     >
-      <ForwardRef(Text)
+      <WithStyles(ForwardRef(Typography))
         className="emotion-0 emotion-1"
         variant="subtitle1"
       >
-        <WithStyles(ForwardRef(Typography))
+        <ForwardRef(Typography)
           className="emotion-0 emotion-1"
+          classes={
+            Object {
+              "alignCenter": "MuiTypography-alignCenter",
+              "alignJustify": "MuiTypography-alignJustify",
+              "alignLeft": "MuiTypography-alignLeft",
+              "alignRight": "MuiTypography-alignRight",
+              "body1": "MuiTypography-body1",
+              "body2": "MuiTypography-body2",
+              "button": "MuiTypography-button",
+              "caption": "MuiTypography-caption",
+              "colorError": "MuiTypography-colorError",
+              "colorInherit": "MuiTypography-colorInherit",
+              "colorPrimary": "MuiTypography-colorPrimary",
+              "colorSecondary": "MuiTypography-colorSecondary",
+              "colorTextPrimary": "MuiTypography-colorTextPrimary",
+              "colorTextSecondary": "MuiTypography-colorTextSecondary",
+              "displayBlock": "MuiTypography-displayBlock",
+              "displayInline": "MuiTypography-displayInline",
+              "gutterBottom": "MuiTypography-gutterBottom",
+              "h1": "MuiTypography-h1",
+              "h2": "MuiTypography-h2",
+              "h3": "MuiTypography-h3",
+              "h4": "MuiTypography-h4",
+              "h5": "MuiTypography-h5",
+              "h6": "MuiTypography-h6",
+              "noWrap": "MuiTypography-noWrap",
+              "overline": "MuiTypography-overline",
+              "paragraph": "MuiTypography-paragraph",
+              "root": "MuiTypography-root",
+              "srOnly": "MuiTypography-srOnly",
+              "subtitle1": "MuiTypography-subtitle1",
+              "subtitle2": "MuiTypography-subtitle2",
+            }
+          }
           variant="subtitle1"
         >
-          <ForwardRef(Typography)
+          <h6
-            className="emotion-0 emotion-1"
+            className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
-            classes={
-              Object {
-                "alignCenter": "MuiTypography-alignCenter",
-                "alignJustify": "MuiTypography-alignJustify",
-                "alignLeft": "MuiTypography-alignLeft",
-                "alignRight": "MuiTypography-alignRight",
-                "body1": "MuiTypography-body1",
-                "body2": "MuiTypography-body2",
-                "button": "MuiTypography-button",
-                "caption": "MuiTypography-caption",
-                "colorError": "MuiTypography-colorError",
-                "colorInherit": "MuiTypography-colorInherit",
-                "colorPrimary": "MuiTypography-colorPrimary",
-                "colorSecondary": "MuiTypography-colorSecondary",
-                "colorTextPrimary": "MuiTypography-colorTextPrimary",
-                "colorTextSecondary": "MuiTypography-colorTextSecondary",
-                "displayBlock": "MuiTypography-displayBlock",
-                "displayInline": "MuiTypography-displayInline",
-                "gutterBottom": "MuiTypography-gutterBottom",
-                "h1": "MuiTypography-h1",
-                "h2": "MuiTypography-h2",
-                "h3": "MuiTypography-h3",
-                "h4": "MuiTypography-h4",
-                "h5": "MuiTypography-h5",
-                "h6": "MuiTypography-h6",
-                "noWrap": "MuiTypography-noWrap",
-                "overline": "MuiTypography-overline",
-                "paragraph": "MuiTypography-paragraph",
-                "root": "MuiTypography-root",
-                "srOnly": "MuiTypography-srOnly",
-                "subtitle1": "MuiTypography-subtitle1",
-                "subtitle2": "MuiTypography-subtitle2",
-              }
-            }
-            variant="subtitle1"
           >
-            <h6
+            maintainers
-              className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+          </h6>
-            >
+        </ForwardRef(Typography)>
-              sidebar.maintainers.title
+      </WithStyles(ForwardRef(Typography))>
-            </h6>
+    </ForwardRef(Text)>
-          </ForwardRef(Typography)>
+  </StyledText>
-        </WithStyles(ForwardRef(Typography))>
-      </ForwardRef(Text)>
-    </StyledText>
-  </DevelopersTitle>
   <StyledBox
     display="flex"
     flexWrap="wrap"

src/components/Developers/index.ts

@@ -1,2 +1 @@
-export { default } from './Developers';
+export { default, DeveloperType } from './Developers';
-export { DeveloperType } from './types';

src/components/Developers/types.ts

@@ -1,4 +0,0 @@
-export enum DeveloperType {
-  CONTRIBUTORS = 'contributors',
-  MAINTAINERS = 'maintainers',
-}

src/components/Dist/Dist.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { DetailContext } from '../../pages/Version';
 import fileSizeSI from '../../utils/file-size';
@@ -23,7 +22,6 @@ const DistChip: FC<{ name: string }> = ({ name, children }) =>
 
 const Dist: FC = () => {
   const { packageMeta } = useContext(DetailContext);
-  const { t } = useTranslation();
 
   if (!packageMeta) {
     return null;
@@ -32,11 +30,11 @@ const Dist: FC = () => {
   const { dist, license } = packageMeta && packageMeta.latest;
 
   return (
-    <List subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}>
+    <List subheader={<StyledText variant="subtitle1">{'Latest Distribution'}</StyledText>}>
       <DistListItem button={true}>
-        <DistChip name={t('sidebar.distribution.file-count')}>{dist.fileCount}</DistChip>
+        <DistChip name="file count">{dist.fileCount}</DistChip>
-        <DistChip name={t('sidebar.distribution.size')}>{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
+        <DistChip name="size">{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
-        <DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
+        <DistChip name="license">{formatLicense(license)}</DistChip>
       </DistListItem>
     </List>
   );

src/components/Dist/__snapshots__/Dist.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Engines/Engines.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { DetailContext } from '../../pages/Version';
 import Avatar from '../../muiComponents/Avatar';
@@ -13,7 +12,6 @@ import node from './img/node.png';
 
 const Engine: React.FC = () => {
   const { packageMeta } = useContext(DetailContext);
-  const { t } = useTranslation();
 
   const engines = packageMeta?.latest?.engines;
 
@@ -25,7 +23,7 @@ const Engine: React.FC = () => {
     <Grid container={true}>
       {engines.node && (
         <Grid item={true} xs={6}>
-          <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.node-js')}</StyledText>}>
+          <List subheader={<StyledText variant={'subtitle1'}>{'node JS'}</StyledText>}>
             <EngineListItem button={true}>
               <Avatar src={node} />
               <ListItemText primary={engines.node} />
@@ -36,7 +34,7 @@ const Engine: React.FC = () => {
 
       {engines.npm && (
         <Grid item={true} xs={6}>
-          <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.npm-version')}</StyledText>}>
+          <List subheader={<StyledText variant={'subtitle1'}>{'NPM version'}</StyledText>}>
             <EngineListItem button={true}>
               <Avatar src={npm} />
               <ListItemText primary={engines.npm} />

src/components/Engines/__snapshots__/Engines.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">sidebar.engines.node-js</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">sidebar.engines.npm-version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;
+exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;

src/components/Footer/Footer.tsx

@@ -1,38 +1,53 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
 
 import { goToVerdaccioWebsite } from '../../utils/windows';
 
 import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
 
-/* eslint-disable react/jsx-key */
+const renderTooltip = (): JSX.Element => (
-const Footer: React.FC = () => {
+  <ToolTip>
-  const { t } = useTranslation();
+    <Earth name="earth" size="md" />
+    <Flags>
+      <Flag name="spain" size="md" />
+      <Flag name="nicaragua" size="md" />
+      <Flag name="india" size="md" />
+      <Flag name="brazil" size="md" />
+      <Flag name="china" size="md" />
+      <Flag name="austria" size="md" />
+    </Flags>
+  </ToolTip>
+);
+const POWERED_LABEL = 'Powered by';
+const MADEWITH_LABEL = ' Made with';
+const ON_LABEL = 'on';
+const HEARTH_EMOJI = '♥';
+
+const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
   return (
-    <Wrapper>
+    <Right>
-      <Inner>
+      {POWERED_LABEL}
-        <Left>
+      <Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
-          <Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
+      {`/ ${version}`}
-          <ToolTip>
+    </Right>
-            <Earth name="earth" size="md" />
-            <Flags>
-              <Flag name="spain" size="md" />
-              <Flag name="nicaragua" size="md" />
-              <Flag name="india" size="md" />
-              <Flag name="brazil" size="md" />
-              <Flag name="china" size="md" />
-              <Flag name="austria" size="md" />
-            </Flags>
-          </ToolTip>
-        </Left>
-        <Right>
-          {t('footer.powered-by')}
-          <Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
-          {`/ ${window.VERDACCIO_VERSION}`}
-        </Right>
-      </Inner>
-    </Wrapper>
   );
 };
 
+const renderLeft = (): JSX.Element => (
+  <Left>
+    {MADEWITH_LABEL}
+    <Love>{HEARTH_EMOJI}</Love>
+    {ON_LABEL}
+    {renderTooltip()}
+  </Left>
+);
+
+const Footer: React.FC = () => (
+  <Wrapper>
+    <Inner>
+      {renderLeft()}
+      {renderRight()}
+    </Inner>
+  </Wrapper>
+);
+
 export default Footer;

src/components/Footer/__snapshots__/Footer.test.tsx.snap

@@ -167,13 +167,13 @@ exports[`<Footer /> component should load the initial state of Footer component
     <div
       class="emotion-27 emotion-28"
     >
-      Made with 
+       Made with
       <span
         class="emotion-0 emotion-1"
       >
         ♥
       </span>
-       on
+      on
       <span
         class="emotion-25 emotion-26"
       >

src/components/Header/Header.test.tsx

@@ -3,7 +3,6 @@ import { BrowserRouter as Router } from 'react-router-dom';
 
 import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
 import { AppContextProvider } from '../../App';
-import translationEN from '../../../i18n/translations/en-US.json';
 
 import Header from './Header';
 
@@ -45,7 +44,7 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test('should open login dialog', async () => {
-    const { getByTestId } = render(
+    const { getByText } = render(
       <Router>
         <AppContextProvider>
           <Header />
@@ -53,9 +52,9 @@ describe('<Header /> component with logged in state', () => {
       </Router>
     );
 
-    const loginBtn = getByTestId('header--button-login');
+    const loginBtn = getByText('Login');
     fireEvent.click(loginBtn);
-    const loginDialog = await waitForElement(() => getByTestId('login--dialog'));
+    const loginDialog = await waitForElement(() => getByText('Sign in'));
     expect(loginDialog).toBeTruthy();
   });
 
@@ -120,7 +119,7 @@ describe('<Header /> component with logged in state', () => {
     fireEvent.click(infoBtn);
 
     // wait for Close's button of registrationInfo modal appearance and return the element
-    const closeBtn = await waitForElement(() => getByText(translationEN.button.close));
+    const closeBtn = await waitForElement(() => getByText('CLOSE'));
     fireEvent.click(closeBtn);
 
     const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>

src/components/Header/Header.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import storage from '../../utils/storage';
 import { getRegistryURL } from '../../utils/url';
@@ -19,14 +18,13 @@ interface Props {
 
 /* eslint-disable react/jsx-no-bind*/
 const Header: React.FC<Props> = ({ withoutSearch }) => {
-  const { t } = useTranslation();
   const appContext = useContext(AppContext);
   const [isInfoDialogOpen, setOpenInfoDialog] = useState();
   const [showMobileNavBar, setShowMobileNavBar] = useState();
   const [showLoginModal, setShowLoginModal] = useState(false);
 
   if (!appContext) {
-    throw Error(t('app-context-not-correct-used'));
+    throw Error('The app Context was not correct used');
   }
 
   const { user, scope, setUser } = appContext;
@@ -69,7 +67,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
             <Search />
           </InnerMobileNavBar>
           <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
-            {t('button.cancel')}
+            {'Cancel'}
           </Button>
         </MobileNavBar>
       )}

src/components/Header/HeaderGreetings.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Label from '../Label';
 
@@ -9,14 +8,11 @@ interface Props {
   username: string;
 }
 
-const HeaderGreetings: React.FC<Props> = ({ username }) => {
+const HeaderGreetings: React.FC<Props> = ({ username }) => (
-  const { t } = useTranslation();
+  <>
-  return (
+    <Greetings>{'Hi,'}</Greetings>
-    <>
+    <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
-      <Greetings>{t('header.greetings')}</Greetings>
+  </>
-      <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
+);
-    </>
-  );
-};
 
 export default HeaderGreetings;

src/components/Header/HeaderMenu.tsx

@@ -1,5 +1,4 @@
 import React, { MouseEvent } from 'react';
-import { useTranslation } from 'react-i18next';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 
 import IconButton from '../../muiComponents/IconButton';
@@ -24,38 +23,35 @@ const HeaderMenu: React.FC<Props> = ({
   anchorEl,
   onLoggedInMenu,
   onLoggedInMenuClose,
-}) => {
+}) => (
-  const { t } = useTranslation();
+  <>
-  return (
+    <IconButton
-    <>
+      color="inherit"
-      <IconButton
+      data-testid="header--menu-accountcircle"
-        color="inherit"
+      id="header--button-account"
-        data-testid="header--menu-accountcircle"
+      onClick={onLoggedInMenu}>
-        id="header--button-account"
+      <AccountCircle />
-        onClick={onLoggedInMenu}>
+    </IconButton>
-        <AccountCircle />
+    <Menu
-      </IconButton>
+      anchorEl={anchorEl}
-      <Menu
+      anchorOrigin={{
-        anchorEl={anchorEl}
+        vertical: 'top',
-        anchorOrigin={{
+        horizontal: 'right',
-          vertical: 'top',
+      }}
-          horizontal: 'right',
+      onClose={onLoggedInMenuClose}
-        }}
+      open={isMenuOpen}
-        onClose={onLoggedInMenuClose}
+      transformOrigin={{
-        open={isMenuOpen}
+        vertical: 'top',
-        transformOrigin={{
+        horizontal: 'right',
-          vertical: 'top',
+      }}>
-          horizontal: 'right',
+      <MenuItem disabled={true}>
-        }}>
+        <HeaderGreetings username={username} />
-        <MenuItem disabled={true}>
+      </MenuItem>
-          <HeaderGreetings username={username} />
+      <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
-        </MenuItem>
+        {'Logout'}
-        <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
+      </MenuItem>
-          {t('button.logout')}
+    </Menu>
-        </MenuItem>
+  </>
-      </Menu>
+);
-    </>
-  );
-};
 
 export default HeaderMenu;

src/components/Header/HeaderRight.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, MouseEvent } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Button from '../../muiComponents/Button';
 
@@ -26,7 +25,6 @@ const HeaderRight: React.FC<Props> = ({
 }) => {
   const [anchorEl, setAnchorEl] = useState();
   const [isMenuOpen, setIsMenuOpen] = useState();
-  const { t } = useTranslation();
 
   useEffect(() => {
     setIsMenuOpen(Boolean(anchorEl));
@@ -57,10 +55,10 @@ const HeaderRight: React.FC<Props> = ({
   return (
     <RightSide data-testid="header-right">
       {!withoutSearch && (
-        <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
+        <HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />
       )}
-      <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
+      <HeaderToolTip title={'Documentation'} tooltipIconType={'help'} />
-      <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
+      <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={'Registry Information'} tooltipIconType={'info'} />
       {username ? (
         <HeaderMenu
           anchorEl={anchorEl}
@@ -72,7 +70,7 @@ const HeaderRight: React.FC<Props> = ({
         />
       ) : (
         <Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
-          {t('button.login')}
+          {'Login'}
         </Button>
       )}
     </RightSide>

src/components/Help/Help.tsx

@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { getRegistryURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
@@ -25,24 +24,23 @@ function renderHeadingClipboardSegments(title: string, text: string): React.Reac
 
 const Help: React.FC = () => {
   const registryUrl = getRegistryURL();
-  const { t } = useTranslation();
 
   return (
     <Card id="help-card">
       <CardContent>
         <Typography component="h2" gutterBottom={true} id={COMPONENT_HELP_ID} variant="h5">
-          {t('help.title')}
+          {HELP_TITLE}
         </Typography>
         <HelpTitle color="textSecondary" gutterBottom={true}>
-          {t('help.sub-title')}
+          {'To publish your first package just:'}
         </HelpTitle>
-        {renderHeadingClipboardSegments(t('help.first-step'), t('help.first-step-command-line', { registryUrl }))}
+        {renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)}
-        {renderHeadingClipboardSegments(t('help.second-step'), t('help.second-step-command-line', { registryUrl }))}
+        {renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)}
-        <Text variant="body2">{t('help.third-step')}</Text>
+        <Text variant="body2">{'3. Refresh this page.'}</Text>
       </CardContent>
       <CardActions>
         <Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">
-          {t('button.learn-more')}
+          {'Learn More'}
         </Button>
       </CardActions>
     </Card>

src/components/Help/__snapshots__/Help.test.tsx.snap

@@ -68,7 +68,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
       <button
         class="MuiButtonBase-root MuiIconButton-root  emotion-4 emotion-5"
         tabindex="0"
-        title="Copy to clipboard"
+        title="Copy to Clipboard"
         type="button"
       >
         <span
@@ -107,7 +107,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
       <button
         class="MuiButtonBase-root MuiIconButton-root  emotion-4 emotion-5"
         tabindex="0"
-        title="Copy to clipboard"
+        title="Copy to Clipboard"
         type="button"
       >
         <span

src/components/Install/Install.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
 
 import { DetailContext } from '../../pages/Version';
 import Text from '../../muiComponents/Text';
@@ -15,7 +14,6 @@ const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
 }));
 
 const Install: React.FC = () => {
-  const { t } = useTranslation();
   const detailContext = useContext(DetailContext);
 
   const { packageMeta, packageName } = detailContext;
@@ -25,9 +23,7 @@ const Install: React.FC = () => {
   }
 
   return (
-    <List
+    <List data-testid={'installList'} subheader={<StyledText variant={'subtitle1'}>{'Installation'}</StyledText>}>
-      data-testid={'installList'}
-      subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}>
       <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
       <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
       <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />

src/components/Install/InstallListItem.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
 
 import CopyToClipBoard from '../CopyToClipBoard';
 import Avatar from '../../muiComponents/Avatar';
@@ -44,16 +43,14 @@ interface Interface {
 }
 
 const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
-  const { t } = useTranslation();
-
   switch (dependencyManager) {
     case DependencyManager.NPM:
       return (
         <InstallItem button={true} data-testid={'installListItem-npm'}>
           <PackageMangerAvatar alt="npm" src={npmLogo} />
           <InstallListItemText
-            primary={<CopyToClipBoard text={t('sidebar.installation.install-using-npm-command', { packageName })} />}
+            primary={<CopyToClipBoard text={`npm install ${packageName}`} />}
-            secondary={t('sidebar.installation.install-using-npm')}
+            secondary={'Install using npm'}
           />
         </InstallItem>
       );
@@ -62,8 +59,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
         <InstallItem button={true} data-testid={'installListItem-yarn'}>
           <PackageMangerAvatar alt="yarn" src={yarnLogo} />
           <InstallListItemText
-            primary={<CopyToClipBoard text={t('sidebar.installation.install-using-yarn-command', { packageName })} />}
+            primary={<CopyToClipBoard text={`yarn add ${packageName}`} />}
-            secondary={t('sidebar.installation.install-using-yarn')}
+            secondary={'Install using yarn'}
           />
         </InstallItem>
       );
@@ -72,8 +69,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
         <InstallItem button={true} data-testid={'installListItem-pnpm'}>
           <PackageMangerAvatar alt={'pnpm'} src={pnpmLogo} />
           <InstallListItemText
-            primary={<CopyToClipBoard text={t('sidebar.installation.install-using-pnpm-command', { packageName })} />}
+            primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />}
-            secondary={t('sidebar.installation.install-using-pnpm')}
+            secondary={'Install using pnpm'}
           />
         </InstallItem>
       );

src/components/Install/__snapshots__/Install.test.tsx.snap

@@ -94,7 +94,7 @@ exports[`<Install /> renders correctly 1`] = `
           <button
             class="MuiButtonBase-root MuiIconButton-root  emotion-6 emotion-7"
             tabindex="0"
-            title="Copy to clipboard"
+            title="Copy to Clipboard"
             type="button"
           >
             <span
@@ -161,7 +161,7 @@ exports[`<Install /> renders correctly 1`] = `
           <button
             class="MuiButtonBase-root MuiIconButton-root  emotion-6 emotion-7"
             tabindex="0"
-            title="Copy to clipboard"
+            title="Copy to Clipboard"
             type="button"
           >
             <span
@@ -228,7 +228,7 @@ exports[`<Install /> renders correctly 1`] = `
           <button
             class="MuiButtonBase-root MuiIconButton-root  emotion-6 emotion-7"
             tabindex="0"
-            title="Copy to clipboard"
+            title="Copy to Clipboard"
             type="button"
           >
             <span

src/components/Link/Link.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
 import Text, { TextProps } from '../../muiComponents/Text';
@@ -8,7 +8,6 @@ interface Props extends Pick<TextProps, 'variant'> {
   className?: string;
   to: string;
   children?: React.ReactNode;
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
 
 type LinkRef = HTMLAnchorElement;

src/components/LoginDialog/LoginDialog.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { render, waitForElement, fireEvent } from '../../utils/test-react-testing-library';
+import { render, waitForElement, fireEvent, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
 import AppContext, { AppContextProps } from '../../App/AppContext';
 import api from '../../utils/api';
-import translationEN from '../../../i18n/translations/en-US.json';
 
 import LoginDialog from './LoginDialog';
 
@@ -36,13 +35,13 @@ describe('<LoginDialog /> component', () => {
       onClose: jest.fn(),
     };
 
-    const { getByTestId } = render(
+    const { getByText } = render(
       <AppContext.Provider value={appContextValue}>
         <LoginDialog onClose={props.onClose} open={props.open} />
       </AppContext.Provider>
     );
 
-    const loginDialogHeading = await waitForElement(() => getByTestId('login-dialog-form-login-button'));
+    const loginDialogHeading = await waitForElement(() => getByText('Sign in'));
     expect(loginDialogHeading).toBeTruthy();
   });
 

src/components/LoginDialog/LoginDialog.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useContext, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { makeLogin } from '../../utils/login';
 import storage from '../../utils/storage';
@@ -17,11 +16,10 @@ interface Props {
 }
 
 const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
-  const { t } = useTranslation();
   const appContext = useContext(AppContext);
 
   if (!appContext) {
-    throw Error(t('app-context-not-correct-used'));
+    throw Error('The app Context was not correct used');
   }
 
   const [error, setError] = useState();
@@ -45,7 +43,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
   );
 
   return (
-    <Dialog data-testid="login--dialog" fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
+    <Dialog fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
       <LoginDialogCloseButton onClose={onClose} />
       <DialogContent>
         <LoginDialogHeader />

src/components/LoginDialog/LoginDialogCloseButton.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import CloseIcon from '@material-ui/icons/Close';
-import { useTranslation } from 'react-i18next';
 
 import DialogTitle from '../../muiComponents/DialogTitle';
 import IconButton from '../../muiComponents/IconButton';
@@ -18,15 +17,12 @@ interface Props {
   onClose: () => void;
 }
 
-const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => {
+const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => (
-  const { t } = useTranslation();
+  <DialogTitle>
-  return (
+    <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
-    <DialogTitle>
+      <CloseIcon titleAccess="Close Dialog" />
-      <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
+    </StyledIconButton>
-        <CloseIcon titleAccess={t('button.close')} />
+  </DialogTitle>
-      </StyledIconButton>
+);
-    </DialogTitle>
-  );
-};
 
 export default LoginDialogCloseButton;

src/components/LoginDialog/LoginDialogForm.tsx

@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
 import useForm from 'react-hook-form/dist/react-hook-form.ie11';
 
 import TextField from '../../muiComponents/TextField';
@@ -29,7 +28,6 @@ interface Props {
 }
 
 const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
-  const { t } = useTranslation();
   const {
     register,
     errors,
@@ -50,13 +48,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
         helperText={errors.username?.message}
         id="login--dialog-username"
         inputRef={register({
-          required: { value: true, message: t('form-validation.required-field') },
+          required: { value: true, message: 'This field is required' },
-          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
+          minLength: { value: 2, message: 'This field required the min length of 2' },
         })}
-        label={t('form.username')}
+        label="Username"
         margin="normal"
         name="username"
-        placeholder={t('form-placeholder.username')}
+        placeholder="Your username"
         required={true}
         variant="outlined"
       />
@@ -67,13 +65,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
         helperText={errors.password?.message}
         id="login--dialog-password"
         inputRef={register({
-          required: { value: true, message: t('form-validation.required-field') },
+          required: { value: true, message: 'This field is required' },
-          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
+          minLength: { value: 2, message: 'This field required the min length of 2' },
         })}
-        label={t('form.password')}
+        label="Password"
         margin="normal"
         name="password"
-        placeholder={t('form-placeholder.password')}
+        placeholder="Your strong password"
         required={true}
         type="password"
         variant="outlined"
@@ -81,14 +79,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
       {error && <LoginDialogFormError error={error} />}
       <StyledButton
         color="primary"
-        data-testid="login-dialog-form-login-button"
         disabled={!isValid}
         fullWidth={true}
         id="login--dialog-button-submit"
         size="large"
         type="submit"
         variant="contained">
-        {t('button.login')}
+        {'Sign In'}
       </StyledButton>
     </StyledForm>
   );

src/components/LoginDialog/LoginDialogHeader.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from '@emotion/styled';
 import LockOutlined from '@material-ui/icons/LockOutlined';
 import CloseIcon from '@material-ui/icons/Close';
-import { useTranslation } from 'react-i18next';
 
 import Heading from '../../muiComponents/Heading';
 import Avatar from '../../muiComponents/Avatar';
@@ -27,19 +26,17 @@ interface Props {
 }
 
 const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
-  const { t } = useTranslation();
-
   return (
     <Box alignItems="center" display="flex" flexDirection="column" position="relative">
       {onClose && (
-        <StyledIconButton aria-label={t('button.close')} onClick={onClose}>
+        <StyledIconButton aria-label="Close" onClick={onClose}>
           <CloseIcon />
         </StyledIconButton>
       )}
       <StyledAvatar>
         <LockOutlined />
       </StyledAvatar>
-      <Heading>{t('button.login')}</Heading>
+      <Heading>{'Sign in'}</Heading>
     </Box>
   );
 };

src/components/Logo/Logo.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import logo from './img/logo.svg';
+import logo from './img/verdaccio-blackwhite.svg';
 
 export enum Size {
+  Tiny = '20px',
   Small = '40px',
   Big = '90px',
 }

src/components/Logo/img/logo.svg

@@ -1 +0,0 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio"><Title>Verdaccio</Title><defs><path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z"/><filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z"/><filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><rect fill="#F7F8F6" width="100" height="100" rx="37"/><g transform="translate(22 29)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236"/></g><g transform="translate(22 29)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000"/></g><path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F"/><path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square"/></g></svg>

src/components/Logo/img/verdaccio-blackwhite.svg

@@ -0,0 +1,31 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" id="verdaccio">
+    <Title>Verdaccio</Title>
+    <rect width="100" height="100" rx="37" fill="black" />
+    <g filter="url(#filter0_d)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M70 46.7288L54.6723 77H45.7983L22 30L37.3277 30L50.2353 55.4915L54.6723 46.7288H70Z" fill="white" fill-opacity="0.6" />
+    </g>
+    <g filter="url(#filter1_d)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M67.621 41H72.4L78 30H75.621H62.8H58V32.3571H61.6L60.8 33.9286H54V36.2857H59.6L58.4 38.6429H50V41H57.2H67.621Z" fill="white" />
+    </g>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M54.785 77H45.8804L22 30H37.3806L58 70.7175L54.785 77Z" fill="white" />
+    <defs>
+        <filter id="filter0_d" x="17" y="29" width="58" height="57" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2.5" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <filter id="filter1_d" x="45" y="29" width="38" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2.5" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+    </defs>
+</svg>

src/components/Logo/img/verdaccio.svg

@@ -0,0 +1,32 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio">
+    <Title>Verdaccio</Title>
+    <defs>
+        <path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z" />
+        <filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a">
+            <feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1" />
+        </filter>
+        <path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z" />
+        <filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c">
+            <feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1" />
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <rect fill="#F7F8F6" width="100" height="100" rx="37" />
+        <g transform="translate(22 29)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b" />
+            <path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236" />
+        </g>
+        <g transform="translate(22 29)">
+            <use fill="#000" filter="url(#c)" xlink:href="#d" />
+            <path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000" />
+        </g>
+        <path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F" />
+        <path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square" />
+    </g>
+</svg>

src/components/NotFound/NotFound.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 
 import Box from '../../muiComponents/Box';
 import Button from '../../muiComponents/Button';
@@ -10,6 +9,10 @@ import { Theme } from '../../design-tokens/theme';
 
 import PackageImg from './img/package.svg';
 
+export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
+export const LABEL_NOT_FOUND = "The page you're looking for doesn't exist.";
+export const GO_TO_HOME_PAGE = 'Go to the home page';
+
 const EmptyPackage = styled('img')({
   width: '150px',
   margin: '0 auto',
@@ -22,7 +25,6 @@ const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
 
 const NotFound: React.FC = () => {
   const history = useHistory();
-  const { t } = useTranslation();
 
   const handleGoHome = useCallback(() => {
     history.push('/');
@@ -37,12 +39,12 @@ const NotFound: React.FC = () => {
       flexGrow={1}
       justifyContent="center"
       p={2}>
-      <EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
+      <EmptyPackage alt="404 - Page not found" src={PackageImg} />
       <StyledHeading className="not-found-text" variant="h4">
-        {t('error.404.sorry-we-could-not-find-it')}
+        {NOT_FOUND_TEXT}
       </StyledHeading>
-      <Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
+      <Button onClick={handleGoHome} variant="contained">
-        {t('button.go-to-the-home-page')}
+        {GO_TO_HOME_PAGE}
       </Button>
     </Box>
   );

src/components/NotFound/Notfound.test.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 
 import { render, fireEvent } from '../../utils/test-react-testing-library';
 
-import NotFound from './NotFound';
+import NotFound, { GO_TO_HOME_PAGE } from './NotFound';
 
 describe('<NotFound /> component', () => {
   test('should load the component in default state', () => {
@@ -14,17 +14,17 @@ describe('<NotFound /> component', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
-
+  test('go to Home Page button click', () => {
-  test('go to Home Page button click', async () => {
     const spy = jest.spyOn(React, 'useCallback');
-    const { getByTestId } = render(
+    const { getByText } = render(
       <Router>
         <NotFound />
       </Router>
     );
 
-    const node = getByTestId('not-found-go-to-home-button');
+    const node = getByText(GO_TO_HOME_PAGE);
     fireEvent.click(node);
+
     expect(spy).toHaveBeenCalled();
   });
 });

src/components/NotFound/__snapshots__/Notfound.test.tsx.snap

@@ -27,7 +27,6 @@ exports[`<NotFound /> component should load the component in default state 1`] =
   </h4>
   <button
     class="MuiButtonBase-root MuiButton-root MuiButton-contained"
-    data-testid="not-found-go-to-home-button"
     tabindex="0"
     type="button"
   >

src/components/NotFound/index.ts

@@ -1 +1 @@
-export { default } from './NotFound';
+export { default, NOT_FOUND_TEXT } from './NotFound';

src/components/Package/Package.tsx

@@ -2,14 +2,12 @@ import React from 'react';
 import BugReport from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
-import { useTranslation } from 'react-i18next';
 
 import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
 import Tag from '../Tag';
 import fileSizeSI from '../../utils/file-size';
-import { formatDate, formatDateDistance, getAuthorName } from '../../utils/package';
+import { formatDate, formatDateDistance } from '../../utils/package';
 import Tooltip from '../../muiComponents/Tooltip';
-import Link from '../Link';
 import { isURL } from '../../utils/url';
 import { downloadTarball } from '../ActionBar';
 import ListItem from '../../muiComponents/ListItem';
@@ -66,13 +64,11 @@ const Package: React.FC<PackageInterface> = ({
   time,
   version,
 }) => {
-  const { t } = useTranslation();
-
   const renderVersionInfo = (): React.ReactNode =>
     version && (
       <OverviewItem>
         <Icon name={'version'} />
-        {t('package.version', { version })}
+        {`v${version}`}
       </OverviewItem>
     );
 
@@ -81,7 +77,7 @@ const Package: React.FC<PackageInterface> = ({
       <Author>
         <Avatar alt={authorName} src={authorAvatar} />
         <Details>
-          <Text text={getAuthorName(authorName)} />
+          <Text text={authorName} />
         </Details>
       </Author>
     );
@@ -107,7 +103,7 @@ const Package: React.FC<PackageInterface> = ({
     time && (
       <OverviewItem>
         <Icon name="time" />
-        <Published>{t('package.published-on', { time: formatDate(time) })}</Published>
+        <Published>{`Published on ${formatDate(time)} •`}</Published>
         {formatDateDistance(time)}
       </OverviewItem>
     );
@@ -115,26 +111,26 @@ const Package: React.FC<PackageInterface> = ({
   const renderHomePageLink = (): React.ReactNode =>
     homepage &&
     isURL(homepage) && (
-      <Link external={true} to={homepage}>
+      <a href={homepage} target={'_blank'}>
-        <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
+        <Tooltip aria-label={'Homepage'} title={'Visit homepage'}>
-          <IconButton aria-label={t('package.homepage')}>
+          <IconButton aria-label={'Homepage'}>
             <HomeIcon />
           </IconButton>
         </Tooltip>
-      </Link>
+      </a>
     );
 
   const renderBugsLink = (): React.ReactNode =>
     bugs &&
     bugs.url &&
     isURL(bugs.url) && (
-      <Link external={true} to={bugs.url}>
+      <a href={bugs.url} target={'_blank'}>
-        <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
+        <Tooltip aria-label={'Bugs'} title={'Open an issue'}>
-          <IconButton aria-label={t('package.bugs')}>
+          <IconButton aria-label={'Bugs'}>
             <BugReport />
           </IconButton>
         </Tooltip>
-      </Link>
+      </a>
     );
 
   const renderDownloadLink = (): React.ReactNode =>
@@ -142,13 +138,13 @@ const Package: React.FC<PackageInterface> = ({
     dist.tarball &&
     isURL(dist.tarball) && (
       // eslint-disable-next-line
-      <Link to="#" external={true} onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))}>
+      <a onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))} target={'_blank'}>
-        <Tooltip aria-label={t('package.download', { what: t('package.the-tar-file') })} title={t('package.tarball')}>
+        <Tooltip aria-label={'Download the tar file'} title={'Download tarball'}>
-          <IconButton aria-label={t('package.download')}>
+          <IconButton aria-label={'Download'}>
             <DownloadIcon />
           </IconButton>
         </Tooltip>
-      </Link>
+      </a>
     );
 
   const renderPrimaryComponent = (): React.ReactNode => {
@@ -159,7 +155,7 @@ const Package: React.FC<PackageInterface> = ({
             <PackageTitle className="package-title">{packageName}</PackageTitle>
           </WrapperLink>
         </Grid>
-        <GridRightAligned alignItems="center" container={true} item={true} justify="flex-end" xs={true}>
+        <GridRightAligned item={true} xs={true}>
           {renderHomePageLink()}
           {renderBugsLink()}
           {renderDownloadLink()}

src/components/Package/styles.ts

@@ -71,7 +71,7 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   fontSize: 20,
   display: 'block',
   marginBottom: 12,
-  color: theme && theme.palette.eclipse,
+  color: theme?.palette?.eclipse,
   cursor: 'pointer',
   ':hover': {
     color: theme && theme.palette.black,
@@ -117,7 +117,7 @@ export const PackageListItemText = styled(ListItemText)({
 });
 
 export const Description = styled(Typography)<{ theme?: Theme }>(props => ({
-  color: props.theme && props.theme.palette.greyDark2,
+  color: props?.theme?.palette.greyDark2,
   fontSize: '14px',
   paddingRight: 0,
 }));

src/components/RegistryInfoDialog/RegistryInfoDialog.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Button from '../../muiComponents/Button';
 import Dialog from '../../muiComponents/Dialog';
@@ -8,19 +7,18 @@ import DialogActions from '../../muiComponents/DialogActions';
 import { Title, Content } from './styles';
 import { Props } from './types';
 
-const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => {
+const LABEL = 'CLOSE';
-  const { t } = useTranslation();
+
-  return (
+const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => (
-    <Dialog data-testid={'registryInfo--dialog'} id="registryInfo--dialog-container" onClose={onClose} open={open}>
+  <Dialog data-testid={'registryInfo--dialog'} id="registryInfo--dialog-container" onClose={onClose} open={open}>
-      <Title disableTypography={true}>{t('dialog.registry-info.title')}</Title>
+    <Title disableTypography={true}>{'Register Info'}</Title>
-      <Content>{children}</Content>
+    <Content>{children}</Content>
-      <DialogActions>
+    <DialogActions>
-        <Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
+      <Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
-          {t('button.close')}
+        {LABEL}
-        </Button>
+      </Button>
-      </DialogActions>
+    </DialogActions>
-    </Dialog>
+  </Dialog>
-  );
+);
-};
 
 export default RegistryInfoDialog;

src/components/Repository/Repository.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
 
 import Avatar from '../../muiComponents/Avatar';
 import Text from '../../muiComponents/Text';
@@ -45,7 +44,6 @@ const RepositoryAvatar = styled(Avatar)({
 
 const Repository: React.FC = () => {
   const detailContext = React.useContext(DetailContext);
-  const { t } = useTranslation();
 
   const { packageMeta } = detailContext;
 
@@ -66,7 +64,7 @@ const Repository: React.FC = () => {
   const repositoryURL = getCorrectRepositoryURL();
 
   return (
-    <List dense={true} subheader={<StyledText variant="subtitle1">{t('sidebar.repository.title')}</StyledText>}>
+    <List dense={true} subheader={<StyledText variant="subtitle1">{'Repository'}</StyledText>}>
       <RepositoryListItem button={true}>
         <RepositoryAvatar src={git} />
         <RepositoryListItemText

src/components/Search/Search.tsx

@@ -2,7 +2,6 @@ import React, { useState, FormEvent, useCallback } from 'react';
 import debounce from 'lodash/debounce';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { SuggestionSelectedEventData } from 'react-autosuggest';
-import { useTranslation } from 'react-i18next';
 
 import AutoComplete from '../AutoComplete';
 import { callSearch } from '../../utils/calls';
@@ -11,11 +10,11 @@ import SearchAdornment from './SearchAdornment';
 
 const CONSTANTS = {
   API_DELAY: 300,
+  PLACEHOLDER_TEXT: 'Search Packages',
   ABORT_ERROR: 'AbortError',
 };
 
 const Search: React.FC<RouteComponentProps> = ({ history }) => {
-  const { t } = useTranslation();
   const [suggestions, setSuggestions] = useState([]);
   const [loaded, setLoaded] = useState(false);
   const [search, setSearch] = useState('');
@@ -142,7 +141,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
       onCleanSuggestions={handlePackagesClearRequested}
       onClick={handleClickSearch}
       onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}
-      placeholder={t('search.packages')}
+      placeholder={CONSTANTS.PLACEHOLDER_TEXT}
       startAdornment={<SearchAdornment />}
       suggestions={suggestions}
       suggestionsError={error}

src/components/UpLinks/UpLinks.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { DetailContext } from '../../pages/Version';
 import NoItems from '../NoItems';
@@ -11,7 +10,6 @@ import { StyledText, Spacer, ListItemText } from './styles';
 
 const UpLinks: React.FC = () => {
   const { packageMeta } = useContext(DetailContext);
-  const { t } = useTranslation();
 
   if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
     return null;
@@ -20,12 +18,12 @@ const UpLinks: React.FC = () => {
   const { _uplinks: uplinks, latest } = packageMeta;
 
   if (Object.keys(uplinks).length === 0) {
-    return <NoItems text={t('uplinks.no-items', { name: latest.name })} />;
+    return <NoItems text={`${latest.name} has no uplinks.`} />;
   }
 
   return (
     <>
-      <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
+      <StyledText variant="subtitle1">{'Uplinks'}</StyledText>
       <List>
         {Object.keys(uplinks)
           .reverse()

src/components/UpLinks/__snapshots__/UpLinks.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">uplinks.no-items</h6>"`;
+exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">verdaccio has no uplinks.</h6>"`;
 
-exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;

src/components/Versions/Versions.test.tsx

@@ -4,9 +4,8 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, cleanup } from '../../utils/test-react-testing-library';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContext, DetailContextProps } from '../../pages/Version';
-import translationEN from '../../../i18n/translations/en-US.json';
 
-import Versions from './Versions';
+import Versions, { LABEL_CURRENT_TAGS, LABEL_VERSION_HISTORY } from './Versions';
 import data from './__partials__/data.json';
 
 const detailContextValue: Partial<DetailContextProps> = {
@@ -36,8 +35,8 @@ describe('<Version /> component', () => {
   test('should render versions', () => {
     const { getByText } = render(<ComponentToBeRendered contextValue={detailContextValue} />);
 
-    expect(getByText(translationEN.versions['version-history'])).toBeTruthy();
+    expect(getByText(LABEL_VERSION_HISTORY)).toBeTruthy();
-    expect(getByText(translationEN.versions['current-tags'])).toBeTruthy();
+    expect(getByText(LABEL_CURRENT_TAGS)).toBeTruthy();
 
     // pick some versions
     expect(getByText('2.3.0')).toBeTruthy();
@@ -49,8 +48,8 @@ describe('<Version /> component', () => {
       <ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />
     );
 
-    expect(queryByText(translationEN.versions['version-history'])).toBeFalsy();
+    expect(queryByText(LABEL_VERSION_HISTORY)).toBeFalsy();
-    expect(queryByText(translationEN.versions['current-tags'])).toBeFalsy();
+    expect(queryByText(LABEL_CURRENT_TAGS)).toBeFalsy();
   });
 
   test.todo('should click on version link');

src/components/Versions/Versions.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { DetailContext } from '../../pages/Version';
 import { DIST_TAGS } from '../../../lib/constants';
@@ -7,9 +6,13 @@ import { DIST_TAGS } from '../../../lib/constants';
 import { StyledText } from './styles';
 import VersionsTagList from './VersionsTagList';
 import VersionsHistoryList from './VersionsHistoryList';
+
+export const NOT_AVAILABLE = 'Not available';
+export const LABEL_CURRENT_TAGS = 'Current Tags';
+export const LABEL_VERSION_HISTORY = 'Version History';
+
 const Versions: React.FC = () => {
   const detailContext = useContext(DetailContext);
-  const { t } = useTranslation();
 
   const { packageMeta, packageName } = detailContext;
 
@@ -23,13 +26,13 @@ const Versions: React.FC = () => {
     <>
       {distTags && Object.keys(distTags).length > 0 && (
         <>
-          <StyledText variant="subtitle1">{t('versions.current-tags')}</StyledText>
+          <StyledText variant="subtitle1">{LABEL_CURRENT_TAGS}</StyledText>
           <VersionsTagList tags={distTags} />
         </>
       )}
       {versions && Object.keys(versions).length > 0 && packageName && (
         <>
-          <StyledText variant="subtitle1">{t('versions.version-history')}</StyledText>
+          <StyledText variant="subtitle1">{LABEL_VERSION_HISTORY}</StyledText>
           <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
         </>
       )}

src/components/Versions/VersionsHistoryList.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { Versions, Time } from '../../../types/packageMeta';
 import { formatDateDistance } from '../../utils/package';
@@ -8,32 +7,28 @@ import ListItem from '../../muiComponents/ListItem';
 
 import { Spacer, ListItemText, StyledLink } from './styles';
 
+export const NOT_AVAILABLE = 'Not available';
+
 interface Props {
   versions: Versions;
   packageName: string;
   time: Time;
 }
 
-const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
+const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => (
-  const { t } = useTranslation();
+  <List dense={true}>
-
+    {Object.keys(versions)
-  return (
+      .reverse()
-    <List dense={true}>
+      .map(version => (
-      {Object.keys(versions)
+        <ListItem className="version-item" key={version}>
-        .reverse()
+          <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
-        .map(version => (
+            <ListItemText>{version}</ListItemText>
-          <ListItem className="version-item" key={version}>
+          </StyledLink>
-            <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
+          <Spacer />
-              <ListItemText>{version}</ListItemText>
+          <ListItemText>{time[version] ? formatDateDistance(time[version]) : NOT_AVAILABLE}</ListItemText>
-            </StyledLink>
+        </ListItem>
-            <Spacer />
+      ))}
-            <ListItemText>
+  </List>
-              {time[version] ? formatDateDistance(time[version]) : t('versions.not-available')}
+);
-            </ListItemText>
-          </ListItem>
-        ))}
-    </List>
-  );
-};
 
 export default VersionsHistoryList;

src/design-tokens/theme.ts

@@ -1,33 +1,24 @@
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 
-// Main colors
+import defaultTheme from './themes/default';
-// -------------------------
+import darkTheme from './themes/dark';
-const colors = {
+import { ColorsTheme } from './types';
-  black: '#000',
-  white: '#fff',
-  red: '#d32f2f',
-  orange: '#CD4000',
-  greySuperLight: '#f5f5f5',
-  greyLight: '#d3d3d3',
-  greyLight2: '#908ba1',
-  greyLight3: '#f3f4f240',
-  greyDark: '#a9a9a9',
-  greyDark2: '#586069',
-  greyChateau: '#95989a',
-  greyGainsboro: '#e3e3e3',
-  greyAthens: '#d3dddd',
-  eclipse: '#3c3c3c',
-  paleNavy: '#e4e8f1',
-  saltpan: '#f7f8f6',
-  snow: '#f9f9f9',
-  love: '#e25555',
-  nobel01: '#999999',
-  nobel02: '#9f9f9f',
-  primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
-  secondary: '#20232a',
-};
 
-export type Colors = keyof typeof colors;
+function getThemeColors() {
+  // eslint-disable-next-line no-constant-condition
+  if (false) {
+    return defaultTheme;
+  } else {
+    return darkTheme;
+  }
+}
+
+export type Colors = ColorsTheme;
+
+const padding = {
+  light: '16px',
+  regular: '24px',
+};
 
 const fontSize = {
   xxl: 26,
@@ -72,10 +63,10 @@ export const theme = createMuiTheme({
     fontFamily: 'inherit',
   },
   palette: {
-    ...colors,
+    ...getThemeColors(),
-    primary: { main: colors.primary },
+    primary: { main: getThemeColors().primary },
-    secondary: { main: colors.secondary },
+    secondary: { main: getThemeColors().secondary },
-    error: { main: colors.red },
+    error: { main: getThemeColors().red },
   },
   ...customizedTheme,
 });

src/design-tokens/themes/dark.ts

@@ -0,0 +1,30 @@
+const colors = {
+  black: '#000',
+  white: '#fff',
+  red: '#d32f2f',
+  orange: '#CD4000',
+  greySuperLight: '#f5f5f5',
+  greyLight: '#d3d3d3',
+  greyLight2: '#908ba1',
+  greyLight3: '#f3f4f240',
+  greyDark: '#a9a9a9',
+  greyDark2: '#fff',
+  greyChateau: '#95989a',
+  greyGainsboro: '#e3e3e3',
+  greyAthens: '#d3dddd',
+  eclipse: '#fff',
+  paleNavy: '#e4e8f1',
+  saltpan: '#f7f8f6',
+  snow: '#f9f9f9',
+  love: '#e25555',
+  nobel01: '#999999',
+  nobel02: '#9f9f9f',
+  primary: '#000000',
+  secondary: '#ffffff',
+  // colors based on features
+  backgroundBody: '#000',
+  lightBackgroundColor: '#fff',
+  readmeBackgroundColor: '#fff',
+};
+
+export default colors;

src/design-tokens/themes/default.ts

@@ -0,0 +1,28 @@
+const colors = {
+  black: '#000',
+  white: '#fff',
+  red: '#d32f2f',
+  orange: '#CD4000',
+  greySuperLight: '#f5f5f5',
+  greyLight: '#d3d3d3',
+  greyLight2: '#908ba1',
+  greyLight3: '#f3f4f240',
+  greyDark: '#a9a9a9',
+  greyDark2: '#586069',
+  greyChateau: '#95989a',
+  greyGainsboro: '#e3e3e3',
+  greyAthens: '#d3dddd',
+  eclipse: '#3c3c3c',
+  paleNavy: '#e4e8f1',
+  saltpan: '#f7f8f6',
+  snow: '#f9f9f9',
+  love: '#e25555',
+  nobel01: '#999999',
+  nobel02: '#9f9f9f',
+  primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
+  secondary: '#20232a',
+  // colors based on features
+  backgroundBody: '#fff',
+};
+
+export default colors;

src/design-tokens/types.ts

@@ -0,0 +1,3 @@
+export interface ColorsTheme {
+  [key: string]: string;
+}

src/icons/GitHub.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+/* eslint-disable react/jsx-curly-brace-presence */
+
+import React from 'react';
+
+import SvgIcon from '../muiComponents/SvgIcon';
+
+const GitHub: React.FC = props => (
+  <SvgIcon {...props}>
+    <path d="M12.007 0C6.12 0 1.1 4.27.157 10.08c-.944 5.813 2.468 11.45 8.054 13.312.19.064.397.033.555-.084.16-.117.25-.304.244-.5v-2.042c-3.33.735-4.037-1.56-4.037-1.56-.22-.726-.694-1.35-1.334-1.756-1.096-.75.074-.735.074-.735.773.103 1.454.557 1.846 1.23.694 1.21 2.23 1.638 3.45.96.056-.61.327-1.178.766-1.605-2.67-.3-5.462-1.335-5.462-6.002-.02-1.193.42-2.35 1.23-3.226-.327-1.015-.27-2.116.166-3.09 0 0 1.006-.33 3.3 1.23 1.966-.538 4.04-.538 6.003 0 2.295-1.5 3.3-1.23 3.3-1.23.445 1.006.49 2.144.12 3.18.81.877 1.25 2.033 1.23 3.226 0 4.607-2.805 5.627-5.476 5.927.578.583.88 1.386.825 2.206v3.29c-.005.2.092.393.26.507.164.115.377.14.565.063 5.568-1.88 8.956-7.514 8.007-13.313C22.892 4.267 17.884.007 12.008 0z" />
+  </SvgIcon>
+);
+
+export default GitHub;

src/icons/index.ts

@@ -0,0 +1 @@
+export { default } from './GitHub';

src/pages/Version/Version.test.tsx

@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router';
 import { waitForElement } from '@testing-library/dom';
 
 import { render } from '../../utils/test-react-testing-library';
-import translationEN from '../../../i18n/translations/en-US.json';
+import { NOT_FOUND_TEXT } from '../../components/NotFound';
 
 import Version from './Version';
 import { DetailContext } from './context';
@@ -51,9 +51,7 @@ describe('test Version page', () => {
       </MemoryRouter>
     );
     // we wait fetch response (mocked above)
-    const notFoundElement = await waitForElement(() =>
+    const notFoundElement = await waitForElement(() => getByText(NOT_FOUND_TEXT));
-      getByText(translationEN.error['404']['sorry-we-could-not-find-it'])
-    );
     expect(notFoundElement).toBeTruthy();
   });
 

src/pages/home/Home.tsx

@@ -29,11 +29,7 @@ const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
     loadPackages().then();
   }, [isUserLoggedIn]);
 
-  return (
+  return <div className="container content">{isLoading ? <Loading /> : <PackageList packages={packages} />}</div>;
-    <div className="container content" data-testid="home-page-container">
-      {isLoading ? <Loading /> : <PackageList packages={packages} />}
-    </div>
-  );
 };
 
 export default Home;

src/utils/constants.ts

@@ -1,3 +1,7 @@
+export const TEXT = {
+  CLIPBOARD_COPY: 'Copy to Clipboard',
+};
+
 export const NODE_MANAGER = {
   npm: 'npm',
   yarn: 'yarn',

src/utils/login.test.ts

@@ -16,22 +16,6 @@ jest.mock('./api', () => ({
   request: require('../../jest/unit/components/__mocks__/api').default.request,
 }));
 
-jest.mock('i18next', () => {
-  const translationEN = require('../../i18n/translations/en-US.json');
-  return {
-    t: (key: string) => {
-      const splittedKey = key.split('.');
-      let result = translationEN;
-
-      for (const element of splittedKey) {
-        result = result[element];
-      }
-
-      return result;
-    },
-  };
-});
-
 describe('isTokenExpire', (): void => {
   test('isTokenExpire - null is not a valid payload', (): void => {
     expect(isTokenExpire(null)).toBeTruthy();

src/utils/login.ts

@@ -2,7 +2,6 @@ import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
 import isEmpty from 'lodash/isEmpty';
 import { Base64 } from 'js-base64';
-import i18next from 'i18next';
 
 import { HEADERS } from '../../lib/constants';
 
@@ -57,7 +56,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
   if (isEmpty(username) || isEmpty(password)) {
     const error = {
       type: 'error',
-      description: i18next.t('form-validation.username-or-password-cant-be-empty'),
+      description: "Username or password can't be empty!",
     };
     return { error };
   }
@@ -79,7 +78,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
     console.error('login error', e.message);
     const error = {
       type: 'error',
-      description: i18next.t('form-validation.unable-to-sign-in'),
+      description: 'Unable to sign in',
     };
     return { error };
   }

src/utils/package.ts

@@ -1,6 +1,5 @@
 import { isObject } from 'util';
 
-import i18n from 'i18next';
 import { UpLinks } from '@verdaccio/types';
 import isString from 'lodash/isString';
 import dayjs from 'dayjs';
@@ -91,7 +90,3 @@ export function getRecentReleases(time: Time = {}): Time[] {
 
   return recent.slice(recent.length - 3, recent.length).reverse();
 }
-
-export function getAuthorName(authorName: string): string {
-  return authorName.toLowerCase() === 'anonymous' ? i18n.t('author-anonymous') : authorName;
-}

src/utils/test-enzyme.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { mount, shallow } from 'enzyme';
 
 import ThemeProvider from '../design-tokens/ThemeProvider';

src/utils/test-react-testing-library.tsx

@@ -1,17 +1,10 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { I18nextProvider } from 'react-i18next';
 
-import i18nConfig from '../../i18n/config';
 import ThemeProvider from '../design-tokens/ThemeProvider';
 
 const customRender = (node: React.ReactElement<any>, ...options: Array<any>) => {
-  return render(
+  return render(<ThemeProvider>{node}</ThemeProvider>, ...options);
-    <ThemeProvider>
-      <I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
-    </ThemeProvider>,
-    ...options
-  );
 };
 
 export * from '@testing-library/react';

src/utils/url.ts

@@ -2,6 +2,8 @@ import isURLValidator from 'validator/lib/isURL';
 import isEmailValidator from 'validator/lib/isEmail';
 import '../../types';
 
+const OCTET_STREAM_TYPE = 'application/octet-stream';
+
 export function isURL(url: string): boolean {
   return isURLValidator(url || '', {
     protocols: ['http', 'https', 'git+https'],
@@ -37,9 +39,9 @@ export function downloadFile(fileStream: Blob, fileName: string): void {
   // @ts-ignore. Please see: https://github.com/microsoft/TypeScript/issues/33792
   if (navigator.msSaveBlob) {
     // Detect if Edge
-    file = blobToFile(new Blob([fileStream], { type: 'application/octet-stream' }), fileName);
+    file = blobToFile(new Blob([fileStream], { type: OCTET_STREAM_TYPE }), fileName);
   } else {
-    file = new File([fileStream], fileName, { type: 'application/octet-stream', lastModified: Date.now() });
+    file = new File([fileStream], fileName, { type: OCTET_STREAM_TYPE, lastModified: Date.now() });
   }
 
   const objectURL = URL.createObjectURL(file);

tools/dev.server.js

@@ -17,7 +17,7 @@ compiler.hooks.done.tap('Verdaccio Dev Server', () => {
 });
 
 new WebpackDevServer(compiler, {
-  contentBase: env.DIST_PATH,
+  contentBase: `${env.DIST_PATH}`,
   publicPath: config.output.publicPath,
   hot: true,
   historyApiFallback: {

types/index.ts

@@ -2,7 +2,6 @@
 export interface VerdaccioOptions {
   url_prefix: string;
   base: string;
-  language?: string;
 }
 
 declare global {

yarn.lock

@@ -1411,14 +1411,14 @@
     lodash.mergewith "^4.6.2"
     webdriverio "^5.15.2"
 
-"@commitlint/cli@8.3.5":
+"@commitlint/cli@8.3.4":
-  version "8.3.5"
+  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2fcli/-/cli-8.3.5.tgz#6d93a3a8b2437fa978999d3f6a336bcc70be3fd3"
+  resolved "https://registry.verdaccio.org/@commitlint%2fcli/-/cli-8.3.4.tgz#aabcd997124bd0656ebd2a805ec9e92cfb663d78"
-  integrity sha512-6+L0vbw55UEdht71pgWOE55SRgb+8OHcEwGDB234VlIBFGK9P2QOBU7MHiYJ5cjdjCQ0rReNrGjOHmJ99jwf0w==
+  integrity sha512-lYL61eO5CG5Du3YTOt8eXg959awIpl/u2KL+msctbooUGTDtiknvBb1r7dbdpUYwVMWcgdKQsk9heB+FRdygfA==
   dependencies:
     "@commitlint/format" "^8.3.4"
-    "@commitlint/lint" "^8.3.5"
+    "@commitlint/lint" "^8.3.4"
-    "@commitlint/load" "^8.3.5"
+    "@commitlint/load" "^8.3.4"
     "@commitlint/read" "^8.3.4"
     babel-polyfill "6.26.0"
     chalk "2.4.2"
@@ -1454,31 +1454,32 @@
   dependencies:
     chalk "^2.0.1"
 
-"@commitlint/is-ignored@^8.3.5":
+"@commitlint/is-ignored@^8.3.4":
-  version "8.3.5"
+  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2fis-ignored/-/is-ignored-8.3.5.tgz#e6f59496e1b1ce58020d519cd578ad0f43169199"
+  resolved "https://registry.verdaccio.org/@commitlint%2fis-ignored/-/is-ignored-8.3.4.tgz#a78dee0dda732219fa513669480df77e92643402"
-  integrity sha512-Zo+8a6gJLFDTqyNRx53wQi/XTiz8mncvmWf/4oRG+6WRcBfjSSHY7KPVj5Y6UaLy2EgZ0WQ2Tt6RdTDeQiQplA==
+  integrity sha512-9RTWJvOW2ZvOh09xRnw7wQhcSp24ekeChDPAoZV13d5cTay0qcGFFthvwHs6URstKuu6Iasoxswtq0HmTWvoAg==
   dependencies:
+    "@types/semver" "^6.0.1"
     semver "6.3.0"
 
-"@commitlint/lint@^8.3.5":
+"@commitlint/lint@^8.3.4":
-  version "8.3.5"
+  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2flint/-/lint-8.3.5.tgz#627e75adb1cc803cc723e33cc2ba4aa27cbb9f0c"
+  resolved "https://registry.verdaccio.org/@commitlint%2flint/-/lint-8.3.4.tgz#fed31a63656a2d7def88e8963691ce788899216e"
-  integrity sha512-02AkI0a6PU6rzqUvuDkSi6rDQ2hUgkq9GpmdJqfai5bDbxx2939mK4ZO+7apbIh4H6Pae7EpYi7ffxuJgm+3hQ==
+  integrity sha512-ws1JLs7rNAcwlfYLKh0xhs3RNMcT4dYjyG0US/JenmSCrttzfAct+7IvdkAjkj6/3jsOn6fYaV4MhE6hfdPC9A==
   dependencies:
-    "@commitlint/is-ignored" "^8.3.5"
+    "@commitlint/is-ignored" "^8.3.4"
     "@commitlint/parse" "^8.3.4"
     "@commitlint/rules" "^8.3.4"
     babel-runtime "^6.23.0"
     lodash "4.17.15"
 
-"@commitlint/load@^8.3.5":
+"@commitlint/load@^8.3.4":
-  version "8.3.5"
+  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2fload/-/load-8.3.5.tgz#3f059225ede92166ba94cf4c48e3d67c8b08b18a"
+  resolved "https://registry.verdaccio.org/@commitlint%2fload/-/load-8.3.4.tgz#6a0832362451b959f6aa47da8e44c2e05572b114"
-  integrity sha512-poF7R1CtQvIXRmVIe63FjSQmN9KDqjRtU5A6hxqXBga87yB2VUJzic85TV6PcQc+wStk52cjrMI+g0zFx+Zxrw==
+  integrity sha512-B4MylKvT02UE3VHC5098OHxsrgkADUy5AD4Cdkiy7oX/edWypEmvK7Wuns3B9dwluWP/iFM6daoWtpkCVZoRwQ==
   dependencies:
     "@commitlint/execute-rule" "^8.3.4"
-    "@commitlint/resolve-extends" "^8.3.5"
+    "@commitlint/resolve-extends" "^8.3.4"
     babel-runtime "^6.23.0"
     chalk "2.4.2"
     cosmiconfig "^5.2.0"
@@ -1509,11 +1510,12 @@
     babel-runtime "^6.23.0"
     git-raw-commits "^2.0.0"
 
-"@commitlint/resolve-extends@^8.3.5":
+"@commitlint/resolve-extends@^8.3.4":
-  version "8.3.5"
+  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2fresolve-extends/-/resolve-extends-8.3.5.tgz#8fff800f292ac217ae30b1862f5f9a84b278310a"
+  resolved "https://registry.verdaccio.org/@commitlint%2fresolve-extends/-/resolve-extends-8.3.4.tgz#815b646efbf9bc77c44925f619336da0027d7a68"
-  integrity sha512-nHhFAK29qiXNe6oH6uG5wqBnCR+BQnxlBW/q5fjtxIaQALgfoNLHwLS9exzbIRFqwJckpR6yMCfgMbmbAOtklQ==
+  integrity sha512-M34RLaAW1eGWgtkVtotHfPaJa+cZIARe8twKItd7RhWs7n/1W2py9GTFIiIEq95LBN1uah5vm1WQHsfLqPZYHA==
   dependencies:
+    "@types/node" "^12.0.2"
     import-fresh "^3.0.0"
     lodash "4.17.15"
     resolve-from "^5.0.0"
@@ -1582,12 +1584,12 @@
     "@emotion/utils" "0.11.2"
     babel-plugin-emotion "^10.0.22"
 
-"@emotion/hash@0.7.3":
+"@emotion/hash@0.7.3", "@emotion/hash@^0.7.1":
   version "0.7.3"
   resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
   integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
 
-"@emotion/hash@0.7.4", "@emotion/hash@^0.7.4":
+"@emotion/hash@0.7.4":
   version "0.7.4"
   resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
   integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
@@ -2013,31 +2015,31 @@
     "@babel/runtime" "^7.4.4"
 
 "@material-ui/styles@^4.7.1":
-  version "4.9.0"
+  version "4.7.1"
-  resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.9.0.tgz#10c31859f6868cfa9d3adf6b6c3e32c9d676bc76"
+  resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.7.1.tgz#48fa70f06441c35e301a9c4b6c825526a97b7a29"
-  integrity sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==
+  integrity sha512-BBfxVThaPrglqHmKtSdrZJxnbFGJqKdZ5ZvDarj3HsmkteGCXsP1ohrDi5TWoa5JEJFo9S6q6NywqsENZn9rZA==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@emotion/hash" "^0.7.4"
+    "@emotion/hash" "^0.7.1"
-    "@material-ui/types" "^5.0.0"
+    "@material-ui/types" "^4.1.1"
     "@material-ui/utils" "^4.7.1"
     clsx "^1.0.2"
     csstype "^2.5.2"
     hoist-non-react-statics "^3.2.1"
-    jss "^10.0.3"
+    jss "^10.0.0"
-    jss-plugin-camel-case "^10.0.3"
+    jss-plugin-camel-case "^10.0.0"
-    jss-plugin-default-unit "^10.0.3"
+    jss-plugin-default-unit "^10.0.0"
-    jss-plugin-global "^10.0.3"
+    jss-plugin-global "^10.0.0"
-    jss-plugin-nested "^10.0.3"
+    jss-plugin-nested "^10.0.0"
-    jss-plugin-props-sort "^10.0.3"
+    jss-plugin-props-sort "^10.0.0"
-    jss-plugin-rule-value-function "^10.0.3"
+    jss-plugin-rule-value-function "^10.0.0"
-    jss-plugin-vendor-prefixer "^10.0.3"
+    jss-plugin-vendor-prefixer "^10.0.0"
     prop-types "^15.7.2"
 
 "@material-ui/system@^4.7.1":
-  version "4.9.3"
+  version "4.7.1"
-  resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.9.3.tgz#ee48990d7941237fdaf21b7b399981d614bb0875"
+  resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.7.1.tgz#d928dacc0eeae6bea569ff3ee079f409efb3517d"
-  integrity sha512-DBGsTKYrLlFpHG8BUp0X6ZpvaOzef+GhSwn/8DwVTXUdHitphaPQoL9xucrI8X9MTBo//El+7nylko7lo7eJIw==
+  integrity sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ==
   dependencies:
     "@babel/runtime" "^7.4.4"
     "@material-ui/utils" "^4.7.1"
@@ -2050,11 +2052,6 @@
   dependencies:
     "@types/react" "*"
 
-"@material-ui/types@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.verdaccio.org/@material-ui%2ftypes/-/types-5.0.0.tgz#26d6259dc6b39f4c2e1e9aceff7a11e031941741"
-  integrity sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg==
-
 "@material-ui/utils@^4.7.1":
   version "4.7.1"
   resolved "https://registry.verdaccio.org/@material-ui%2futils/-/utils-4.7.1.tgz#dc16c7f0d2cd02fbcdd5cfe601fd6863ae3cc652"
@@ -2358,7 +2355,7 @@
   resolved "https://registry.verdaccio.org/@types%2fmocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
   integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==
 
-"@types/node@*", "@types/node@^12.11.1":
+"@types/node@*", "@types/node@^12.0.2", "@types/node@^12.11.1":
   version "12.12.21"
   resolved "https://registry.verdaccio.org/@types%2fnode/-/node-12.12.21.tgz#aa44a6363291c7037111c47e4661ad210aded23f"
   integrity sha512-8sRGhbpU+ck1n0PGAUgVrWrWdjSW2aqNeyC15W88GRsMpSwzv6RJGlLhE7s2RhVSOdyDmxbqlWSeThq4/7xqlA==
@@ -2444,6 +2441,11 @@
     "@types/tough-cookie" "*"
     form-data "^2.5.0"
 
+"@types/semver@^6.0.1":
+  version "6.0.2"
+  resolved "https://registry.verdaccio.org/@types%2fsemver/-/semver-6.0.2.tgz#5e8b09f0e4af53034b1d0fb9977a277847836205"
+  integrity sha512-G1Ggy7/9Nsa1Jt2yiBR2riEuyK2DFNnqow6R7cromXPMNynackRY1vqFTLz/gwnef1LHokbXThcPhqMRjUbkpQ==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.verdaccio.org/@types%2fstack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -5217,7 +5219,7 @@ css-value@^0.0.1:
   resolved "https://registry.verdaccio.org/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea"
   integrity sha1-Xv1sLupeof1rasV+wEJ7GEUkJOo=
 
-css-vendor@^2.0.7:
+css-vendor@^2.0.6:
   version "2.0.7"
   resolved "https://registry.verdaccio.org/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda"
   integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==
@@ -7804,13 +7806,6 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
-html-parse-stringify2@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.verdaccio.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
-  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
-  dependencies:
-    void-elements "^2.0.1"
-
 html-tags@^3.1.0:
   version "3.1.0"
   resolved "https://registry.verdaccio.org/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
@@ -7973,13 +7968,6 @@ hyphenate-style-name@^1.0.3:
   resolved "https://registry.verdaccio.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
   integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
 
-i18next@19.1.0:
-  version "19.1.0"
-  resolved "https://registry.verdaccio.org/i18next/-/i18next-19.1.0.tgz#fe1a1da3d208872946307c7d2d115da45d46159f"
-  integrity sha512-ISbmukX4L6Dz0QoH9+EW1AnBw7j+NRLoMu9uLPMaNSSTP9Eie9/oUL0dOyWX15baB3gYOpkHJpGZRHOqcnl0ew==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-
 iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.verdaccio.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -9395,69 +9383,69 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jss-plugin-camel-case@^10.0.3:
+jss-plugin-camel-case@^10.0.0:
-  version "10.0.4"
+  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz#3dedecec1e5bba0bf6141c2c05e2ab11ea4b468d"
+  resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz#d601bae2e8e2041cc526add289dcd7062db0a248"
-  integrity sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==
+  integrity sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==
   dependencies:
     "@babel/runtime" "^7.3.1"
     hyphenate-style-name "^1.0.3"
-    jss "10.0.4"
+    jss "10.0.0"
 
-jss-plugin-default-unit@^10.0.3:
+jss-plugin-default-unit@^10.0.0:
-  version "10.0.4"
+  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz#df03885de20f20a1fc1c21bdb7c62e865ee400d9"
+  resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz#601caf5f576fc0c66986fbe8a9aa37307a3a3ea3"
-  integrity sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==
+  integrity sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.4"
+    jss "10.0.0"
 
-jss-plugin-global@^10.0.3:
+jss-plugin-global@^10.0.0:
-  version "10.0.4"
+  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz#412245b56133cc88bec654a70d82d5922619f4c5"
+  resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz#0fed1b6461e0d57d6e394f877529009bc1cb3cb6"
-  integrity sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==
+  integrity sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.4"
+    jss "10.0.0"
 
-jss-plugin-nested@^10.0.3:
+jss-plugin-nested@^10.0.0:
-  version "10.0.4"
+  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz#4d15ad13995fb6e4125618006473a096d2475d75"
+  resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz#d37ecc013c3b0d0e4acc2b48f6b62da6ae53948b"
-  integrity sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==
+  integrity sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.4"
+    jss "10.0.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-props-sort@^10.0.3:
+jss-plugin-props-sort@^10.0.0:
-  version "10.0.4"
+  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz#43c880ff8dfcf858f809f663ece5e65a1d945b5a"
+  resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz#38a13407384c2a4a7c026659488350669b953b18"
-  integrity sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==
+  integrity sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.4"
+    jss "10.0.0"
 
-jss-plugin-rule-value-function@^10.0.3:
+jss-plugin-rule-value-function@^10.0.0:
-  version "10.0.4"
+  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz#2f4cf4a86ad3eba875bb48cb9f4a7ed35cb354e7"
+  resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz#3ec1b781b7c86080136dbef6c36e91f20244b72e"
-  integrity sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==
+  integrity sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.0.4"
+    jss "10.0.0"
 
-jss-plugin-vendor-prefixer@^10.0.3:
+jss-plugin-vendor-prefixer@^10.0.0:
-  version "10.0.4"
+  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz#1626ef612a4541cff17cf96815e1740155214ed2"
+  resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz#400280535b0f483a9c78105afe4eee61b70018eb"
-  integrity sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==
+  integrity sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    css-vendor "^2.0.7"
+    css-vendor "^2.0.6"
-    jss "10.0.4"
+    jss "10.0.0"
 
-jss@10.0.4, jss@^10.0.3:
+jss@10.0.0, jss@^10.0.0:
-  version "10.0.4"
+  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss/-/jss-10.0.4.tgz#46ebdde1c40c9a079d64f3334cb88ae28fd90bfd"
+  resolved "https://registry.verdaccio.org/jss/-/jss-10.0.0.tgz#998d5026c02accae15708de83bd6ba57bac977d2"
-  integrity sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==
+  integrity sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==
   dependencies:
     "@babel/runtime" "^7.3.1"
     csstype "^2.6.5"
@@ -12515,15 +12503,15 @@ react-autowhatever@^10.1.2:
     react-themeable "^1.1.0"
     section-iterator "^2.0.0"
 
-react-dom@16.13.0:
+react-dom@16.12.0:
-  version "16.13.0"
+  version "16.12.0"
-  resolved "https://registry.verdaccio.org/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
+  resolved "https://registry.verdaccio.org/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
-  integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==
+  integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.19.0"
+    scheduler "^0.18.0"
 
 react-hook-form@3.29.4:
   version "3.29.4"
@@ -12544,14 +12532,6 @@ react-hot-loader@4.12.18:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
-react-i18next@11.3.1:
-  version "11.3.1"
-  resolved "https://registry.verdaccio.org/react-i18next/-/react-i18next-11.3.1.tgz#9269282c3f566015f0bdf8fdbf46782bbe50f5a7"
-  integrity sha512-S/CWHcnew1lXo8HeniGhBU5kTmPhZ4w4rtA4m/gDN07soCtKKYSAcLNm7zhwjI2OSR4Skd0vOtzNp/FzEEjxIw==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    html-parse-stringify2 "2.0.1"
-
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.verdaccio.org/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -13368,10 +13348,10 @@ scheduler@^0.16.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.19.0:
+scheduler@^0.18.0:
-  version "0.19.0"
+  version "0.18.0"
-  resolved "https://registry.verdaccio.org/scheduler/-/scheduler-0.19.0.tgz#a715d56302de403df742f4a9be11975b32f5698d"
+  resolved "https://registry.verdaccio.org/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
-  integrity sha512-xowbVaTPe9r7y7RUejcK73/j8tt2jfiyTednOvHbA8JoClvMYCp+r8QegLwK/n8zWQAtZb1fFnER4XLBZXrCxA==
+  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -15222,11 +15202,6 @@ vm-browserify@^1.0.1:
   resolved "https://registry.verdaccio.org/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
   integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
 
-void-elements@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.verdaccio.org/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
-  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
-
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.verdaccio.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"