feat(i18n): enhanced i18n support (#3730)

extensions/default/src/ViewerLayout/ViewerHeader.tsx

@@ -53,7 +53,7 @@ function ViewerHeader({ hotkeysManager, extensionManager, servicesManager }) {
       onClick: () =>
         show({
           content: AboutModal,
-          title: 'About OHIF Viewer',
+          title: t('AboutModal:About OHIF Viewer'),
           contentProps: { versionNumber, commitHash },
         }),
     },
@@ -62,7 +62,7 @@ function ViewerHeader({ hotkeysManager, extensionManager, servicesManager }) {
       icon: 'settings',
       onClick: () =>
         show({
-          title: t('UserPreferencesModal:User Preferences'),
+          title: t('UserPreferencesModal:User preferences'),
           content: UserPreferences,
           contentProps: {
             hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),

platform/app/src/routes/WorkList/WorkList.tsx

@@ -254,11 +254,11 @@ function WorkList({
     const studyDate =
       date &&
       moment(date, ['YYYYMMDD', 'YYYY.MM.DD'], true).isValid() &&
-      moment(date, ['YYYYMMDD', 'YYYY.MM.DD']).format('MMM-DD-YYYY');
+      moment(date, ['YYYYMMDD', 'YYYY.MM.DD']).format(t('Common:localDateFormat','MMM-DD-YYYY'));
     const studyTime =
       time &&
       moment(time, ['HH', 'HHmm', 'HHmmss', 'HHmmss.SSS']).isValid() &&
-      moment(time, ['HH', 'HHmm', 'HHmmss', 'HHmmss.SSS']).format('hh:mm A');
+      moment(time, ['HH', 'HHmm', 'HHmmss', 'HHmmss.SSS']).format(t('Common:localTimeFormat', 'hh:mm A'));
 
     return {
       dataCY: `studyRow-${studyInstanceUid}`,
@@ -327,10 +327,10 @@ function WorkList({
       expandedContent: (
         <StudyListExpandedRow
           seriesTableColumns={{
-            description: 'Description',
+            description: t('StudyList:Description'),
-            seriesNumber: 'Series',
+            seriesNumber: t('StudyList:Series'),
-            modality: 'Modality',
+            modality: t('StudyList:Modality'),
-            instances: 'Instances',
+            instances: t('StudyList:Instances'),
           }}
           seriesTableDataSource={
             seriesInStudiesMap.has(studyInstanceUid)
@@ -416,7 +416,7 @@ function WorkList({
       onClick: () =>
         show({
           content: AboutModal,
-          title: 'About OHIF Viewer',
+          title: t('AboutModal:About OHIF Viewer'),
           contentProps: { versionNumber, commitHash },
         }),
     },
@@ -425,7 +425,7 @@ function WorkList({
       icon: 'settings',
       onClick: () =>
         show({
-          title: t('UserPreferencesModal:User Preferences'),
+          title: t('UserPreferencesModal:User preferences'),
           content: UserPreferences,
           contentProps: {
             hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),

platform/app/src/routes/WorkList/filtersMeta.js

@@ -1,35 +1,37 @@
+import i18n from 'i18next';
+
 const filtersMeta = [
   {
     name: 'patientName',
-    displayName: 'PatientName',
+    displayName: i18n.t('StudyList:PatientName'),
     inputType: 'Text',
     isSortable: true,
     gridCol: 4,
   },
   {
     name: 'mrn',
-    displayName: 'MRN',
+    displayName: i18n.t('StudyList:MRN'),
     inputType: 'Text',
     isSortable: true,
     gridCol: 3,
   },
   {
     name: 'studyDate',
-    displayName: 'StudyDate',
+    displayName: i18n.t('StudyList:StudyDate'),
     inputType: 'DateRange',
     isSortable: true,
     gridCol: 5,
   },
   {
     name: 'description',
-    displayName: 'StudyDescription',
+    displayName: i18n.t('StudyList:Description'),
     inputType: 'Text',
     isSortable: true,
     gridCol: 4,
   },
   {
     name: 'modalities',
-    displayName: 'Modality',
+    displayName: i18n.t('StudyList:Modality'),
     inputType: 'MultiSelect',
     inputProps: {
       options: [
@@ -110,14 +112,14 @@ const filtersMeta = [
   },
   {
     name: 'accession',
-    displayName: 'AccessionNumber',
+    displayName: i18n.t('StudyList:AccessionNumber'),
     inputType: 'Text',
     isSortable: true,
     gridCol: 3,
   },
   {
     name: 'instances',
-    displayName: 'Instances',
+    displayName: i18n.t('StudyList:Instances'),
     inputType: 'None',
     isSortable: false,
     gridCol: 2,

platform/i18n/src/locales/de/AboutModal.json

@@ -1,14 +1,14 @@
 {
+  "About OHIF Viewer": "Über OHIF Viewer",
   "Browser": "Browser",
-  "Build Number": "Build-Nummer",
+  "Build number": "Build-Nummer",
-  "Latest Master Commits": "Letzter Master Commit",
+  "Last master commits": "Letzter Master Commit",
   "More details": "Mehr Details",
   "Name": "Name",
-  "About OHIF Viewer": "Über OHIF Viewer",
   "OS": "OS",
   "Report an issue": "Ein Problem melden",
   "Repository URL": "Repository URL",
   "Value": "Wert",
-  "Version Information": "Informationen zur Version",
+  "Version information": "Informationen zur Version",
   "Visit the forum": "Besuchen Sie das Forum"
 }

platform/i18n/src/locales/de/Buttons.json

@@ -36,7 +36,7 @@
   "Rectangle": "Rechteck",
   "Reset": "$t(Common:Reset)",
   "Reset View": "$t(Common:Reset)",
-  "Reset to Defaults": "Auf Default zurücksetzen",
+  "Reset to defaults": "Auf Default zurücksetzen",
   "Rotate Right": "Nach rechts drehen",
   "Rotate +90": "Drehen +90",
   "Sagittal": "Sagittal",

platform/i18n/src/locales/de/StudyList.json

@@ -9,5 +9,5 @@
   "Description": "Beschreibung",
   "Study list": "Studienliste",
   "Instances": "Instanzen",
-  "Studies": "Studien"
+  "Number of studies": "Studien"
 }

platform/i18n/src/locales/de/UserPreferencesModal.json

@@ -1,11 +1,11 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
   "No hotkeys found": "Keine Hotkeys gefunden.",
-  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Reset to defaults": "$t(Buttons:Reset to defaults)",
   "ResetDefaultMessage": "Einstellungen zurückgesetzt. Bitte speichern.",
   "Save": "$t(Buttons:Save)",
   "SaveMessage": "Gespeichert",
-  "User Preferences": "Benutzereinstellungen",
+  "User preferences": "Benutzereinstellungen",
   "Language": "Sprache",
   "General": "Allgemein"
 }

platform/i18n/src/locales/en-US/AboutModal.json

@@ -1,14 +1,18 @@
 {
+  "About OHIF Viewer": "About OHIF Viewer",
   "Browser": "Browser",
-  "Build Number": "Build Number",
+  "Build number": "Build Number",
-  "Latest Master Commits": "Latest Master Commits",
+  "Commit hash": "Commit hash",
+  "Data citation": "Data citation",
+  "Important links": "Important links",
+  "Last master commits": "Latest Master Commits",
   "More details": "More details",
   "Name": "Name",
-  "OHIF Viewer - About": "OHIF Viewer - About",
   "OS": "OS",
   "Report an issue": "Report an issue",
   "Repository URL": "Repository URL",
   "Value": "Value",
-  "Version Information": "Version Information",
+  "Version information": "Version Information",
+  "Version number": "Version number",
   "Visit the forum": "Visit the forum"
 }

platform/i18n/src/locales/en-US/Buttons.json

@@ -39,7 +39,7 @@
   "Rectangle": "Rectangle",
   "Reference Lines": "Reference Lines",
   "Reset": "$t(Common:Reset)",
-  "Reset to Defaults": "$t(Common:Reset) to Defaults",
+  "Reset to defaults": "$t(Common:Reset) to Defaults",
   "Rotate Right": "Rotate Right",
   "Sagittal": "Sagittal",
   "Save": "Save",

platform/i18n/src/locales/en-US/DatePicker.json

@@ -1,5 +1,9 @@
 {
   "Clear dates": "Clear dates",
+  "Close": "$t(Common:Close)",
   "End Date": "End Date",
-  "Start Date": "Start Date"
+  "Last 7 days": "Last 7 days",
+  "Last 30 days": "Last 30 days",
+  "Start Date": "Start Date",
+  "Today": "Today"
 }

platform/i18n/src/locales/en-US/StudyList.json

@@ -11,9 +11,8 @@
   "Previous": "< Back",
   "Page": "Page",
   "Next": "Next >",
-  "ResultsPerPage": "Results per page",
+  "Results per page": "Results per page",
-  "Studies": "Studies",
+  "Number of studies": "Studies",
   "StudyDate": "Study Date",
-  "StudyDescription": "Description",
   "StudyList": "Study List"
 }

platform/i18n/src/locales/en-US/UserPreferencesModal.json

@@ -1,9 +1,9 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
   "No hotkeys found": "No hotkeys are configured for this application. Hotkeys can be configured in the application's app-config.js file.",
-  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Reset to defaults": "$t(Buttons:Reset to defaults)",
   "ResetDefaultMessage": "Preferences successfully reset to default. <br /> You must <strong>Save</strong> to perform this action.",
   "Save": "$t(Buttons:Save)",
   "SaveMessage": "Preferences saved",
-  "User Preferences": "User Preferences"
+  "User preferences": "User Preferences"
 }

platform/i18n/src/locales/es/AboutModal.json

@@ -1,14 +1,14 @@
 {
+  "About OHIF Viewer": "Sobre OHIF Viewer",
   "Browser": "Navegador",
-  "Build Number": "Número de compilación",
+  "Build number": "Número de compilación",
-  "Latest Master Commits": "Últimos Master Commits",
+  "Last master commits": "Últimos Master Commits",
   "More details": "Más detalles",
   "Name": "Nombre",
-  "OHIF Viewer - About": "Sobre OHIF Viewer",
   "OS": "SO",
   "Report an issue": "Informar un problema",
   "Repository URL": "URL del repositorio",
   "Value": "Valor",
-  "Version Information": "Información de la versión",
+  "Version information": "Información de la versión",
   "Visit the forum": "Visita el foro"
 }

platform/i18n/src/locales/es/Buttons.json

@@ -32,7 +32,7 @@
   "ROI Window": "Ventana ROI",
   "Rectangle": "Rectángulo",
   "Reset": "$t(Common:Reset)",
-  "Reset to Defaults": "$t(Common:Reset) por defecto",
+  "Reset to defaults": "$t(Common:Reset) por defecto",
   "Rotate Right": "Girar ->",
   "Sagittal": "Sagital",
   "Save": "Guardar",

platform/i18n/src/locales/es/StudyList.json

@@ -11,9 +11,8 @@
   "Previous": "< Anterior",
   "Page": "Página",
   "Next": "Siguiente >",
-  "ResultsPerPage": "Resultados por página",
+  "Results per page": "Resultados por página",
-  "Studies": "Estudios",
+  "Number of studies": "Estudios",
   "StudyDate": "Fecha del estudio",
-  "StudyDescription": "Descripción",
   "StudyList": "Lista de Estudios"
 }

platform/i18n/src/locales/es/UserPreferencesModal.json

@@ -1,6 +1,6 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
-  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Reset to defaults": "$t(Buttons:Reset to defaults)",
   "Save": "$t(Buttons:Save)",
-  "User Preferences": "Preferencias de Usuario"
+  "User preferences": "Preferencias de Usuario"
 }

platform/i18n/src/locales/fr/Buttons.json

@@ -31,7 +31,7 @@
   "ROI Window": "ROI fenêtrage",
   "Rectangle": "Rectangle",
   "Reset": "$t(Common:Reset)",
-  "Reset to Defaults": "Valeurs d'usine",
+  "Reset to defaults": "Valeurs d'usine",
   "Rotate Right": "Tourner à droite",
   "Sagittal": "Sagittal",
   "Save": "Sauvegarder",

platform/i18n/src/locales/fr/UserPreferencesModal.json

@@ -1,6 +1,6 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
-  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Reset to defaults": "$t(Buttons:Reset to defaults)",
   "Save": "$t(Buttons:Save)",
-  "User Preferences": "Préférences utilisateur"
+  "User preferences": "Préférences utilisateur"
 }

platform/i18n/src/locales/ja-JP/Buttons.json

@@ -31,7 +31,7 @@
   "ROI Window": "ROIウィンドウ",
   "Rectangle": "長方形",
   "Reset": "$t(Common:Reset)",
-  "Reset to Defaults": "デフォルトへ$t(Common:Reset)",
+  "Reset to defaults": "デフォルトへ$t(Common:Reset)",
   "Rotate Right": "右に回転",
   "Sagittal": "サジタル",
   "Save": "保存",

platform/i18n/src/locales/ja-JP/UserPreferencesModal.json

@@ -1,6 +1,6 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
-  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Reset to defaults": "$t(Buttons:Reset to defaults)",
   "Save": "$t(Buttons:Save)",
-  "User Preferences": "ユーザプレファレンス"
+  "User preferences": "ユーザプレファレンス"
 }

platform/i18n/src/locales/pt-BR/AboutModal.json

@@ -1,14 +1,14 @@
 {
+  "About OHIF Viewer": "OHIF Viewer - Sobre",
   "Browser": "Navegador",
-  "Build Number": "Número da compilação",
+  "Build number": "Número da compilação",
-  "Latest Master Commits": "Últimos Commits na Master",
+  "Last master commits": "Últimos Commits na Master",
   "More details": "Mais detalhes",
   "Name": "Nome",
-  "OHIF Viewer - About": "OHIF Viewer - Sobre",
   "OS": "SO",
   "Report an issue": "Informar um problema",
   "Repository URL": "URL do Repositório",
   "Value": "Valor",
-  "Version Information": "Informação da Versão",
+  "Version information": "Informação da Versão",
   "Visit the forum": "Visite o fórum"
 }

platform/i18n/src/locales/pt-BR/Buttons.json

@@ -32,7 +32,7 @@
   "ROI Window": "Janela ROI",
   "Rectangle": "Retângulo",
   "Reset": "$t(Common:Reset)",
-  "Reset to Defaults": "$t(Common:Reset) para o Padrão",
+  "Reset to defaults": "$t(Common:Reset) para o Padrão",
   "Rotate Right": "Girar à direita",
   "Sagittal": "Sagital",
   "Save": "Salvar",

platform/i18n/src/locales/pt-BR/UserPreferencesModal.json

@@ -1,8 +1,8 @@
 {
   "Cancel": "Cancelar",
-  "Reset to Defaults": "$t(Common:Reset) para Padrão",
+  "Reset to defaults": "$t(Common:Reset) para Padrão",
   "ResetDefaultMessage": "Preferências resetadas com sucesso. <br /> Você deve <strong>Salvar</strong> para que essa ação seja realizada.",
   "Save": "Salvar",
   "SaveMessage": "Preferências salvas",
-  "User Preferences": "Preferências do Usuário"
+  "User preferences": "Preferências do Usuário"
 }

platform/i18n/src/locales/test-LNG/AboutModal.json

@@ -1,14 +1,18 @@
 {
+  "About OHIF Viewer": "About OHIF Viewer",
   "Browser": "Browser",
   "Build Number": "Build Number",
-  "Latest Master Commits": "Latest Master Commits",
+  "Commit hash": "Commit hash",
+  "Data citation": "Data citation",
+  "Important links": "Important links",
+  "Last master commits": "Latest Master Commits",
   "More details": "More details",
   "Name": "Name",
-  "OHIF Viewer - About": "OHIF Viewer - About",
   "OS": "OS",
   "Report an issue": "Report an issue",
   "Repository URL": "Repository URL",
   "Value": "Value",
-  "Version Information": "Version Information",
+  "Version information": "Version Information",
+  "Version number": "Version number",
   "Visit the forum": "Visit the forum"
 }

platform/i18n/src/locales/test-LNG/Buttons.json

@@ -32,7 +32,7 @@
   "ROI Window": "Test ROI Window",
   "Rectangle": "Test Rectangle",
   "Reset": "Test $t(Common:Reset)",
-  "Reset to Defaults": "Test $t(Common:Reset) to Defaults",
+  "Reset to defaults": "Test $t(Common:Reset) to Defaults",
   "Rotate Right": "Test Rotate Right",
   "Sagittal": "Test Sagittal",
   "Save": "Test Save",

platform/i18n/src/locales/test-LNG/DatePicker.json

@@ -1,5 +1,9 @@
 {
   "Clear dates": "Clear dates",
+  "Close": "$t(Common:Close)",
   "End Date": "End Date",
-  "Start Date": "Start Date"
+  "Last 7 days": "Last 7 days",
+  "Last 30 days": "Last 30 days",
+  "Start Date": "Start Date",
+  "Today": "Today"
 }

platform/i18n/src/locales/test-LNG/StudyList.json

@@ -12,7 +12,7 @@
   "Description": "Test Description",
   "StudyDate": "Test Study Date",
   "Study date": "Test Study Date",
-  "Studies": "Test Studies",
+  "Number of studies": "Test Studies",
   "Series": "Test Series",
   "Instances": "Test Instances",
   "Study List": "Test Study List",

platform/i18n/src/locales/test-LNG/UserPreferencesModal.json

@@ -1,11 +1,11 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
   "No hotkeys found": "No hotkeys are configured for this application. Hotkeys can be configured in the application's app-config.js file.",
-  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Reset to defaults": "$t(Buttons:Reset to defaults)",
   "ResetDefaultMessage": "Preferences successfully reset to default. <br /> You must <strong>Save</strong> to perform this action.",
   "Save": "$t(Buttons:Save)",
   "SaveMessage": "Test Preferences saved",
-  "User Preferences": "Test User Preferences",
+  "User preferences": "Test User Preferences",
   "Function": "Test function",
   "Shortcut": "Test shortcut",
   "Language": "Test language",

platform/i18n/src/locales/tr-TR/AboutModal.json

@@ -1,14 +1,14 @@
 {
+  "About OHIF Viewer": "OHIF Viewer - Hakkında",
   "Browser": "Tarayıcı",
-  "Build Number": "Derleme Numarası",
+  "Build number": "Derleme Numarası",
-  "Latest Master Commits": "Son Kaynak Kod Güncellemesi",
+  "Last master commits": "Son Kaynak Kod Güncellemesi",
   "More details": "Daha Fazla Detay",
   "Name": "İsim",
-  "OHIF Viewer - About": "OHIF Viewer - Hakkında",
   "OS": "İşletim Sistemi",
   "Report an issue": "Sorun Bildir",
   "Repository URL": "Kaynak Kod URL",
   "Value": "Değer",
-  "Version Information": "Sürüm Bilgisi",
+  "Version information": "Sürüm Bilgisi",
   "Visit the forum": "Forumu ziyaret et"
 }

platform/i18n/src/locales/tr-TR/Buttons.json

@@ -32,7 +32,7 @@
   "ROI Window": "ROI Penceresi",
   "Rectangle": "Diktörtgen",
   "Reset": "$t(Common:Reset)",
-  "Reset to Defaults": "Varsayılana $t(Common:Reset)",
+  "Reset to defaults": "Varsayılana $t(Common:Reset)",
   "Rotate Right": "Sağa Döndür",
   "Sagittal": "Sagital",
   "Save": "Kaydet",

platform/i18n/src/locales/tr-TR/StudyList.json

@@ -5,6 +5,6 @@
   "Modality": "Modalite",
   "PatientName": "Hasta Adı",
   "StudyDate": "Çalışma Zamanı",
-  "StudyDescription": "Açıklama",
+  "Description": "Açıklama",
   "StudyList": "Çalışma Listesi"
 }

platform/i18n/src/locales/tr-TR/UserPreferencesModal.json

@@ -1,9 +1,9 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
   "No hotkeys found": "Bu uygulama için hiçbir kısayol tuşu yapılandırılmamış. Kısayol tuşları, uygulamanın app-config.js dosyasında yapılandırılabilir.",
-  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Reset to defaults": "$t(Buttons:Reset to defaults)",
   "ResetDefaultMessage": "Tercihler başarıyla varsayılana sıfırlandı. <br /> Bu eylemi gerçekleştirmek için <strong>Kaydetmelisiniz</strong>.",
   "Save": "$t(Buttons:Save)",
   "SaveMessage": "Tercihler kaydedildi",
-  "User Preferences": "Kullanıcı tercihleri"
+  "User preferences": "Kullanıcı tercihleri"
 }

platform/i18n/src/locales/vi/Buttons.json

@@ -31,7 +31,7 @@
   "ROI Window": "ROI Window",
   "Rectangle": "Đo chữ nhật",
   "Reset": "$t(Common:Reset)",
-  "Reset to Defaults": "$t(Common:Reset) đến mặc định",
+  "Reset to defaults": "$t(Common:Reset) đến mặc định",
   "Rotate Right": "Xoay phải",
   "Sagittal": "Mặt phẳng đứng dọc",
   "Save": "Lưu",

platform/i18n/src/locales/vi/StudyList.json

@@ -5,6 +5,6 @@
   "Modality": "Thiết bị",
   "PatientName": "Tên Bệnh nhân",
   "StudyDate": "Ngày chụp",
-  "StudyDescription": "Diễn giải",
+  "Description": "Diễn giải",
   "StudyList": "Danh sách"
 }

platform/i18n/src/locales/vi/UserPreferencesModal.json

@@ -1,6 +1,6 @@
 {
   "Cancel": "$t(Buttons:Cancel)",
-  "Reset to Defaults": "$t(Buttons:Reset to Defaults)",
+  "Reset to defaults": "$t(Buttons:Reset to defaults)",
   "Save": "$t(Buttons:Save)",
-  "User Preferences": "Thiết lập theo người dùng"
+  "User preferences": "Thiết lập theo người dùng"
 }

platform/i18n/src/locales/zh/Buttons.json

@@ -49,7 +49,7 @@
   "Probe": "探针",
   "Rectangle": "矩形",
   "Reference Lines": "参考线",
-  "Reset to Defaults": "返回默认",
+  "Reset to defaults": "返回默认",
   "Reset View": "复原",
   "Reset": "复原",
   "ROI Window": "选择对比度",

platform/i18n/src/locales/zh/StudyList.json

@@ -3,7 +3,6 @@
   "Modality": "成像设备",
   "PatientName": "患者姓名",
   "StudyDate": "检查日期",
-  "StudyDescription": "描述",
   "StudyList": "检查列表",
   "Patient Name": "患者姓名",
   "MRN": "病例号",
@@ -11,7 +10,7 @@
   "Description": "描述",
   "Study list": "检查列表",
   "Clear filters": "清空条件",
-  "Studies": "",
+  "Number of studies": "",
   "Instances": "图像数",
   "Accession": "检查号",
   "Results per page": "每页条数",

platform/i18n/src/locales/zh/UserPreferencesModal.json

@@ -1,6 +1,6 @@
 {
   "Cancel": "取消",
-  "Reset to Defaults": "返回默认",
+  "Reset to defaults": "返回默认",
   "Save": "保存",
-  "User Preferences": "用户偏好"
+  "User preferences": "用户偏好"
 }

platform/ui/src/components/AboutModal/AboutModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import detect from 'browser-detect';
+import { useTranslation } from 'react-i18next';
 
 import Typography from '../Typography';
 import Icon from '../Icon';
@@ -59,6 +60,7 @@ const Row = ({ title, value, link }) => {
 const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
   const { os, version, name } = detect();
   const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
+  const { t } = useTranslation('AboutModal');
 
   const renderRowTitle = title => (
     <div className="mb-3 border-b-2 border-black pb-3">
@@ -73,20 +75,20 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
   );
   return (
     <div>
-      {renderRowTitle('Important Links')}
+      {renderRowTitle(t('Important links'))}
       <div className="mb-8 flex">
         <Link
           href="https://community.ohif.org/"
           showIcon={true}
         >
-          Visit the forum
+            {t('Visit the forum')}
         </Link>
         <span className="ml-4">
           <Link
             href="https://github.com/OHIF/Viewers/issues/new/choose"
             showIcon={true}
           >
-            Report an issue
+            {t('Report an issue')}
           </Link>
         </span>
         <span className="ml-4">
@@ -94,50 +96,50 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
             href="https://ohif.org/"
             showIcon={true}
           >
-            More details
+          {t('More details')}
           </Link>
         </span>
       </div>
 
-      {renderRowTitle('Version Information')}
+      {renderRowTitle(t('Version information'))}
       <div className="flex flex-col">
         <Row
-          title="Repository URL"
+          title={t('Repository URL')}
           value="https://github.com/OHIF/Viewers/"
           link="https://github.com/OHIF/Viewers/"
         />
         <Row
-          title="Data Citation"
+          title={t('Data citation')}
           value="https://github.com/OHIF/Viewers/blob/master/DATACITATION.md"
           link="https://github.com/OHIF/Viewers/blob/master/DATACITATION.md"
         />
         {/* <Row
-          title="Last Master Commits"
+          title={t('Last master commits')}
           value="https://github.com/OHIF/Viewers/"
           link="https://github.com/OHIF/Viewers/"
         /> */}
         <Row
-          title="Version number"
+          title={t('Version number')}
           value={versionNumber}
         />
         {buildNumber && (
           <Row
-            title="Build number"
+            title={t('Build number')}
             value={buildNumber}
           />
         )}
         {commitHash && (
           <Row
-            title="Commit Hash"
+            title={t('Commit hash')}
             value={commitHash}
           />
         )}
         <Row
-          title="Browser"
+          title={t('Browser')}
           value={browser}
         />
         <Row
-          title="OS"
+          title={t('OS')}
           value={os}
         />
       </div>

platform/ui/src/components/DateRange/DateRange.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 
 /** REACT DATES */
 import { DateRangePicker, isInclusivelyBeforeDay } from 'react-dates';
@@ -8,27 +9,6 @@ import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
 import './DateRange.css';
 
-const today = moment();
-const lastWeek = moment().subtract(7, 'day');
-const lastMonth = moment().subtract(1, 'month');
-const studyDatePresets = [
-  {
-    text: 'Today',
-    start: today,
-    end: today,
-  },
-  {
-    text: 'Last 7 days',
-    start: lastWeek,
-    end: today,
-  },
-  {
-    text: 'Last 30 days',
-    start: lastMonth,
-    end: today,
-  },
-];
-
 const renderYearsOptions = () => {
   const currentYear = moment().year();
   const options = [];
@@ -52,6 +32,27 @@ const DateRange = props => {
   const { id, onChange, startDate, endDate } = props;
   const [focusedInput, setFocusedInput] = useState(null);
   const renderYearsOptionsCallback = useCallback(renderYearsOptions, []);
+  const { t } = useTranslation('DatePicker');
+  const today = moment();
+  const lastWeek = moment().subtract(7, 'day');
+  const lastMonth = moment().subtract(1, 'month');
+  const studyDatePresets = [
+    {
+      text: t('Today'),
+      start: today,
+      end: today,
+    },
+    {
+      text: t('Last 7 days'),
+      start: lastWeek,
+      end: today,
+    },
+    {
+      text: t('Last 30 days'),
+      start: lastMonth,
+      end: today,
+    },
+  ];
 
   const renderDatePresets = () => {
     return (
@@ -149,11 +150,11 @@ const DateRange = props => {
       /** OPTIONAL */
       renderCalendarInfo={renderDatePresets}
       renderMonthElement={renderMonthElement}
-      startDatePlaceholderText={'Start Date'}
+      startDatePlaceholderText={t('Start Date')}
-      endDatePlaceholderText={'End Date'}
+      endDatePlaceholderText={t('End Date')}
       phrases={{
-        closeDatePicker: 'Close',
+        closeDatePicker: t('Close'),
-        clearDates: 'Clear dates',
+        clearDates: t('Clear dates'),
       }}
       isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
       hideKeyboardShortcutsPanel={true}

platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx

@@ -30,7 +30,7 @@ const HotkeysPreferences = ({
   const splitedHotkeys = splitHotkeyDefinitionsAndCreateTuples(visibleHotkeys);
 
   if (!Object.keys(hotkeyDefinitions).length) {
-    return 'No hotkey definitions';
+    return t('No hotkeys found');
   }
 
   const onHotkeyChangeHandler = (id, definition) => {

platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useTranslation } from 'react-i18next';
 
 import Icon from '../Icon';
 
@@ -21,8 +20,6 @@ const InputLabelWrapper = ({
   className,
   children,
 }) => {
-  const { t } = useTranslation('StudyList');
-
   const onClickHandler = e => {
     if (!isSortable) {
       return;
@@ -40,7 +37,7 @@ const InputLabelWrapper = ({
         onKeyDown={onClickHandler}
         tabIndex="0"
       >
-        {t(label)}
+        {label}
         {isSortable && (
           <Icon
             name={sortIconMap[sortDirection]}

platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
 
 import Table from '../Table';
 import TableHead from '../TableHead';
@@ -9,8 +8,6 @@ import TableRow from '../TableRow';
 import TableCell from '../TableCell';
 
 const StudyListExpandedRow = ({ seriesTableColumns, seriesTableDataSource, children }) => {
-  const { t } = useTranslation('StudyList');
-
   return (
     <div className="w-full bg-black py-4 pl-12 pr-2">
       <div className="block">{children}</div>
@@ -19,7 +16,7 @@ const StudyListExpandedRow = ({ seriesTableColumns, seriesTableDataSource, child
           <TableHead>
             <TableRow>
               {Object.keys(seriesTableColumns).map(columnKey => {
-                return <TableCell key={columnKey}>{t(seriesTableColumns[columnKey])}</TableCell>;
+                return <TableCell key={columnKey}>{seriesTableColumns[columnKey]}</TableCell>;
               })}
             </TableRow>
           </TableHead>

platform/ui/src/components/StudyListFilter/StudyListFilter.tsx

@@ -78,7 +78,7 @@ const StudyListFilter = ({
                   variant="h6"
                   className="text-primary-light"
                 >
-                  {t('Studies')}
+                  {t('Number of studies')}
                 </Typography>
               </div>
             </div>

platform/ui/src/components/StudyListPagination/StudyListPagination.tsx

@@ -43,7 +43,7 @@ const StudyListPagination = ({ onChangePage, currentPage, perPage, onChangePerPa
               hideSelectedOptions={true}
               onChange={onSelectedRange}
             />
-            <Typography className="text-base opacity-60">{t('ResultsPerPage')}</Typography>
+            <Typography className="text-base opacity-60">{t('Results per page')}</Typography>
           </div>
           <div className="">
             <div className="flex items-center">

platform/ui/src/components/UserPreferences/UserPreferences.tsx

@@ -112,7 +112,7 @@ const UserPreferences = ({
           onClick={onResetHandler}
           disabled={disabled}
         >
-          {t('Reset to Defaults')}
+          {t('Reset to defaults')}
         </Button>
         <div className="flex flex-row">
           <Button