From 58298518019e10603f61bc281de5bb605730e541 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Wed, 19 Aug 2020 18:42:56 +0100
Subject: [PATCH 01/10] AddRemoveButton Translation

---
 client/components/AddRemoveButton.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx
index 7350c177e7..80e673bdda 100644
--- a/client/components/AddRemoveButton.jsx
+++ b/client/components/AddRemoveButton.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
 
 import AddIcon from '../images/plus.svg';
 import RemoveIcon from '../images/minus.svg';
 
-const AddRemoveButton = ({ type, onClick }) => {
-  const alt = type === 'add' ? 'Add to collection' : 'Remove from collection';
+const AddRemoveButton = ({ type, onClick, t }) => {
+  const alt = type === 'add' ? t('AddRemoveButton.altAdd') : t('AddRemoveButton.altRemove');
   const Icon = type === 'add' ? AddIcon : RemoveIcon;
 
   return (
@@ -22,6 +24,7 @@ const AddRemoveButton = ({ type, onClick }) => {
 AddRemoveButton.propTypes = {
   type: PropTypes.oneOf(['add', 'remove']).isRequired,
   onClick: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default AddRemoveButton;
+export default withTranslation()(AddRemoveButton);

From 62dca7d7f6179752def55b4bbf28a9ef892a22df Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Thu, 20 Aug 2020 12:09:36 +0100
Subject: [PATCH 02/10] CopyableInput EditableInput translations.json

---
 client/modules/IDE/components/CopyableInput.jsx | 10 ++++++----
 client/modules/IDE/components/EditableInput.jsx |  6 ++++--
 translations/locales/en-US/translations.json    |  7 +++++++
 translations/locales/es-419/translations.json   | 11 +++++++++++
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/client/modules/IDE/components/CopyableInput.jsx b/client/modules/IDE/components/CopyableInput.jsx
index cbce2f3e93..e471a5e983 100644
--- a/client/modules/IDE/components/CopyableInput.jsx
+++ b/client/modules/IDE/components/CopyableInput.jsx
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Clipboard from 'clipboard';
 import classNames from 'classnames';
+import { withTranslation } from 'react-i18next';
 
 import ShareIcon from '../../../images/share.svg';
 
@@ -45,7 +46,7 @@ class CopyableInput extends React.Component {
       <div className={copyableInputClass}>
         <div
           className="copyable-input__value-container tooltipped-no-delay"
-          aria-label="Copied to Clipboard!"
+          aria-label={this.props.t('CopyableInput.CopiedARIA')}
           ref={(element) => { this.tooltip = element; }}
           onMouseLeave={this.onMouseLeaveHandler}
         >
@@ -69,7 +70,7 @@ class CopyableInput extends React.Component {
             rel="noopener noreferrer"
             href={value}
             className="copyable-input__preview"
-            aria-label={`Open ${label} view in new tab`}
+            aria-label={this.props.t('CopyableInput.CopiedARIA', { label })}
           >
             <ShareIcon focusable="false" aria-hidden="true" />
           </a>
@@ -82,11 +83,12 @@ class CopyableInput extends React.Component {
 CopyableInput.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
-  hasPreviewLink: PropTypes.bool
+  hasPreviewLink: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 CopyableInput.defaultProps = {
   hasPreviewLink: false
 };
 
-export default CopyableInput;
+export default withTranslation()(CopyableInput);
diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index 64f382221f..8136565bfa 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 import EditIcon from '../../../images/pencil.svg';
 
@@ -58,7 +59,7 @@ function EditableInput({
       <button
         className="editable-input__label"
         onClick={beginEditing}
-        aria-label={`Edit ${displayValue} value`}
+        aria-label={this.props.t('EditableInput.EditValue', { display: displayValue })}
       >
         <span>{displayValue}</span>
         <EditIcon
@@ -99,6 +100,7 @@ EditableInput.propTypes = {
   onChange: PropTypes.func.isRequired,
   validate: PropTypes.func,
   value: PropTypes.string,
+  t: PropTypes.func.isRequired
 };
 
-export default EditableInput;
+export default withTranslation()(EditableInput);
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 39c5dcfb1f..3b7a22273a 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -334,5 +334,12 @@
     "Checking": "Validating token, please wait...",
     "Verified": "All done, your email address has been verified.",
     "InvalidState": "Something went wrong."
+  },
+  "CopyableInput": {
+    "CopiedARIA": "Copied to Clipboard!",
+    "OpenViewTabARIA": "Open {{label}} view in new tab"
+  },
+  "EditableInput": {
+    "EditValue":"Edit {{displayValue}} value"
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 0217d46cb9..f98d6a7781 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -315,5 +315,16 @@
     "Checking": "Validando token, por favor espera...",
     "Verified": "Concluido, tu correo electrónico ha sido verificado.",
     "InvalidState": "Algo salió mal."
+  },
+  "AddRemoveButton": {
+    "altAdd" : "Add to collection",
+    "altRemove": "Remove from collection"
+  },
+  "CopyableInput": {
+    "CopiedARIA": "¡Copiado en el portapapeles!",
+    "OpenViewTabARIA": "Abrir la vista {{label}} en nueva pestaña"
+  },
+  "EditableInput": {
+    "EditValue":"Editar valor de {{display}}"
   }
 }

From c7c2821499381ae8bfdc895e45da25633cffe507 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Thu, 20 Aug 2020 18:12:32 +0100
Subject: [PATCH 03/10] Translation in PreviewNav.jsx

---
 client/components/PreviewNav.jsx              | 12 +++++++-----
 translations/locales/en-US/translations.json  |  6 +++++-
 translations/locales/es-419/translations.json |  4 ++++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx
index 6a983e19f0..b864da7f3d 100644
--- a/client/components/PreviewNav.jsx
+++ b/client/components/PreviewNav.jsx
@@ -1,22 +1,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import CodeIcon from '../images/code.svg';
 
-const PreviewNav = ({ owner, project }) => (
+const PreviewNav = ({ owner, project, t }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+        <LogoIcon role="img" aria-label={t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
       </div>
       <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
-      <p className="toolbar__project-owner">by</p>
+      <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
       <Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
     </div>
     <div className="nav__items-right">
-      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label="Edit Sketch" >
+      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label={t('PreviewNav.EditSketch')} >
         <CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
       </Link>
     </div>
@@ -31,6 +32,7 @@ PreviewNav.propTypes = {
     name: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
   }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default PreviewNav;
+export default withTranslation()(PreviewNav);
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 39c5dcfb1f..e183e981ea 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -334,5 +334,9 @@
     "Checking": "Validating token, please wait...",
     "Verified": "All done, your email address has been verified.",
     "InvalidState": "Something went wrong."
-  }
+  },
+    "PreviewNav": {
+      "EditSketch": "Edit Sketch",
+      "ByUser": "by"
+}
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 0217d46cb9..ecf0187726 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -315,5 +315,9 @@
     "Checking": "Validando token, por favor espera...",
     "Verified": "Concluido, tu correo electrónico ha sido verificado.",
     "InvalidState": "Algo salió mal."
+  },
+  "PreviewNav": {
+    "EditSketch": "Editar Bosquejo",
+    "ByUser": "por"
   }
 }

From 881099713a0965d9d8ae710ff6c906dc36b5272b Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Thu, 20 Aug 2020 22:32:41 +0100
Subject: [PATCH 04/10] Translation in Feedback.jsx

---
 client/modules/IDE/components/Feedback.jsx    |  5 +++--
 translations/locales/en-US/translations.json  | 20 +++++++++++++++++++
 translations/locales/es-419/translations.json | 19 ++++++++++++++++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/Feedback.jsx b/client/modules/IDE/components/Feedback.jsx
index 409c1dcd39..37ed571282 100644
--- a/client/modules/IDE/components/Feedback.jsx
+++ b/client/modules/IDE/components/Feedback.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import GitHubLogo from '../../../images/github.svg';
 
 function Feedback(props) {
   return (
     <div className="feedback__content">
       <Helmet>
-        <title>p5.js Web Editor | Feedback</title>
+        <title>{this.props.t('Feedback.Title')}</title>
       </Helmet>
       <div className="feedback__content-pane">
         <h2 className="feedback__content-pane-header">
@@ -47,4 +48,4 @@ function Feedback(props) {
   );
 }
 
-export default Feedback;
+export default withTranslation()(Feedback);
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 39c5dcfb1f..cf91b9c16c 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -334,5 +334,25 @@
     "Checking": "Validating token, please wait...",
     "Verified": "All done, your email address has been verified.",
     "InvalidState": "Something went wrong."
+  },
+
+  "AssetList": {
+    "Title": "p5.js Web Editor | My assets",
+    "ToggleOpenCloseARIA": "Toggle Open/Close Asset Options",
+    "Delete": "Delete",
+    "OpenNewTab": "Open in New Tab",
+    "NoUploadedAssets": "No uploaded assets.",
+    "HeaderName": "Name",
+    "HeaderSize": "Size",
+    "HeaderSketch": "Sketch"
+  },
+  "Feedback": {
+    "Title": "p5.js Web Editor | Feedback",
+    "ViaGithubHeader": "Via Github Issues",
+    "ViaGithubDescription": "If you're familiar with Github, this is our preferred method for receiving bug reports and feedback.",
+    "GoToGithub": "Go to Github",
+    "ViaGoogleHeader": "Via Google Form",
+    "ViaGoogleDescription": "You can also submit this quick form.",
+    "GoToForm": "Go to Form"
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 0217d46cb9..e1cce7db06 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -315,5 +315,24 @@
     "Checking": "Validando token, por favor espera...",
     "Verified": "Concluido, tu correo electrónico ha sido verificado.",
     "InvalidState": "Algo salió mal."
+  },
+  "AssetList": {
+    "Title": "Editor Web p5.js | Mis assets",
+    "ToggleOpenCloseARIA": "Alternar Abrir/Cerrar Opciones de Asset",
+    "Delete": "Borrar",
+    "OpenNewTab": "Abrir en Nueva Pestaña",
+    "NoUploadedAssets": "No has subido archivos.",
+    "HeaderName": "Nombre",
+    "HeaderSize": "Tamaño",
+    "HeaderSketch": "Bosquejo"
+  },
+  "Feedback": {
+    "Title": "Editor Web p5.js | Retroalimentación",
+    "ViaGithubHeader": "Vía Github Issues",
+    "ViaGithubDescription": " Si estas familiarizado con Github, este es nuestro método favorito para recibir reporte de errores y retroalimentación.",
+    "GoToGithub": "Ir a Github",
+    "ViaGoogleHeader": "Vía Google Form",
+    "ViaGoogleDescription": "También puedes enviar tu retroalimetnación usando esta vía rapida.",
+    "GoToForm": "Ir a Forma"
   }
 }

From 9fb7912a4e6cc3d3d85ebfac9761cb3bd9aaeae3 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Thu, 20 Aug 2020 22:35:41 +0100
Subject: [PATCH 05/10] Translation in AssetList.jsx

---
 client/modules/IDE/components/AssetList.jsx   | 27 ++++++++++---------
 translations/locales/en-US/translations.json  | 10 +++++++
 translations/locales/es-419/translations.json | 12 ++++++++-
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/client/modules/IDE/components/AssetList.jsx b/client/modules/IDE/components/AssetList.jsx
index 4c2e03710b..3a7636e6b4 100644
--- a/client/modules/IDE/components/AssetList.jsx
+++ b/client/modules/IDE/components/AssetList.jsx
@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import { Link } from 'react-router';
 import { Helmet } from 'react-helmet';
 import prettyBytes from 'pretty-bytes';
+import { withTranslation } from 'react-i18next';
 
 import Loader from '../../App/components/loader';
 import * as AssetActions from '../actions/assets';
@@ -85,7 +86,7 @@ class AssetListRowBase extends React.Component {
             onClick={this.toggleOptions}
             onBlur={this.onBlurComponent}
             onFocus={this.onFocusComponent}
-            aria-label="Toggle Open/Close Asset Options"
+            aria-label={this.props.t('AssetList.ToggleOpenCloseARIA')}
           >
             <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
           </button>
@@ -100,7 +101,7 @@ class AssetListRowBase extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Delete
+                  {this.props.t('AssetList.Delete')}
                 </button>
               </li>
               <li>
@@ -111,7 +112,7 @@ class AssetListRowBase extends React.Component {
                   onFocus={this.onFocusComponent}
                   className="asset-table__action-option"
                 >
-                  Open in New Tab
+                  {this.props.t('AssetList.OpenNewTab')}
                 </Link>
               </li>
             </ul>}
@@ -131,7 +132,8 @@ AssetListRowBase.propTypes = {
     size: PropTypes.number.isRequired
   }).isRequired,
   deleteAssetRequest: PropTypes.func.isRequired,
-  username: PropTypes.string.isRequired
+  username: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function mapStateToPropsAssetListRow(state) {
@@ -153,7 +155,7 @@ class AssetList extends React.Component {
   }
 
   getAssetsTitle() {
-    return 'p5.js Web Editor | My assets';
+    return this.props.t('AssetList.Title');
   }
 
   hasAssets() {
@@ -167,13 +169,13 @@ class AssetList extends React.Component {
 
   renderEmptyTable() {
     if (!this.props.loading && this.props.assetList.length === 0) {
-      return (<p className="asset-table__empty">No uploaded assets.</p>);
+      return (<p className="asset-table__empty">{this.props.t('AssetList.NoUploadedAssets')}</p>);
     }
     return null;
   }
 
   render() {
-    const { assetList } = this.props;
+    const { assetList, t } = this.props;
     return (
       <article className="asset-table-container">
         <Helmet>
@@ -185,9 +187,9 @@ class AssetList extends React.Component {
           <table className="asset-table">
             <thead>
               <tr>
-                <th>Name</th>
-                <th>Size</th>
-                <th>Sketch</th>
+                <th>{t('AssetList.HeaderName')}</th>
+                <th>{t('AssetList.HeaderSize')}</th>
+                <th>{t('AssetList.HeaderSketch')}</th>
                 <th scope="col"></th>
               </tr>
             </thead>
@@ -212,7 +214,8 @@ AssetList.propTypes = {
     sketchId: PropTypes.string
   })).isRequired,
   getAssets: PropTypes.func.isRequired,
-  loading: PropTypes.bool.isRequired
+  loading: PropTypes.bool.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
@@ -227,4 +230,4 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(Object.assign({}, AssetActions), dispatch);
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(AssetList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(AssetList));
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 39c5dcfb1f..72cef55074 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -334,5 +334,15 @@
     "Checking": "Validating token, please wait...",
     "Verified": "All done, your email address has been verified.",
     "InvalidState": "Something went wrong."
+  },
+  "AssetList": {
+    "Title": "p5.js Web Editor | My assets",
+    "ToggleOpenCloseARIA": "Toggle Open/Close Asset Options",
+    "Delete": "Delete",
+    "OpenNewTab": "Open in New Tab",
+    "NoUploadedAssets": "No uploaded assets.",
+    "HeaderName": "Name",
+    "HeaderSize": "Size",
+    "HeaderSketch": "Sketch"
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 0217d46cb9..a231529cfd 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -315,5 +315,15 @@
     "Checking": "Validando token, por favor espera...",
     "Verified": "Concluido, tu correo electrónico ha sido verificado.",
     "InvalidState": "Algo salió mal."
-  }
+  },
+  "AssetList": {
+  "Title": "Editor Web p5.js | Mis assets",
+  "ToggleOpenCloseARIA": "Alternar Abrir/Cerrar Opciones de Asset",
+  "Delete": "Borrar",
+  "OpenNewTab": "Abrir en Nueva Pestaña",
+  "NoUploadedAssets": "No has subido archivos.",
+  "HeaderName": "Nombre",
+  "HeaderSize": "Tamaño",
+  "HeaderSketch": "Bosquejo"
+}
 }

From 663f443ac0cb24ad1d0047a6147c978e54c829bb Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Thu, 20 Aug 2020 23:10:04 +0100
Subject: [PATCH 06/10] Translation in SearchBarComponent

---
 .../modules/IDE/components/Searchbar/Collection.jsx   |  4 +++-
 client/modules/IDE/components/Searchbar/Searchbar.jsx | 11 +++++++----
 client/modules/IDE/components/Searchbar/Sketch.jsx    |  2 ++
 translations/locales/en-US/translations.json          |  5 +++++
 translations/locales/es-419/translations.json         |  5 +++++
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/client/modules/IDE/components/Searchbar/Collection.jsx b/client/modules/IDE/components/Searchbar/Collection.jsx
index c566ced2a6..a0a2b57968 100644
--- a/client/modules/IDE/components/Searchbar/Collection.jsx
+++ b/client/modules/IDE/components/Searchbar/Collection.jsx
@@ -1,14 +1,16 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import i18next from 'i18next';
 import * as SortingActions from '../../actions/sorting';
 
 import Searchbar from './Searchbar';
 
+
 const scope = 'collection';
 
 function mapStateToProps(state) {
   return {
-    searchLabel: 'Search collections...',
+    searchLabel: i18next.t('Searchbar.SearchCollection'),
     searchTerm: state.search[`${scope}SearchTerm`],
   };
 }
diff --git a/client/modules/IDE/components/Searchbar/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
index 765a240d51..05a99e9815 100644
--- a/client/modules/IDE/components/Searchbar/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { throttle } from 'lodash';
-
+import { withTranslation } from 'react-i18next';
+import i18next from 'i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
+
 class Searchbar extends React.Component {
   constructor(props) {
     super(props);
@@ -50,7 +52,7 @@ class Searchbar extends React.Component {
         <button
           className="searchbar__clear-button"
           onClick={this.handleResetSearch}
-        >clear
+        >{this.props.t('Searchbar.ClearTerm')}
         </button>
       </div>
     );
@@ -62,10 +64,11 @@ Searchbar.propTypes = {
   setSearchTerm: PropTypes.func.isRequired,
   resetSearchTerm: PropTypes.func.isRequired,
   searchLabel: PropTypes.string,
+  t: PropTypes.func.isRequired
 };
 
 Searchbar.defaultProps = {
-  searchLabel: 'Search sketches...',
+  searchLabel: i18next.t('Searchbar.SearchSketch')
 };
 
-export default Searchbar;
+export default withTranslation()(Searchbar);
diff --git a/client/modules/IDE/components/Searchbar/Sketch.jsx b/client/modules/IDE/components/Searchbar/Sketch.jsx
index bc12854e35..cc995103e8 100644
--- a/client/modules/IDE/components/Searchbar/Sketch.jsx
+++ b/client/modules/IDE/components/Searchbar/Sketch.jsx
@@ -1,5 +1,6 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import i18next from 'i18next';
 import * as SortingActions from '../../actions/sorting';
 
 import Searchbar from './Searchbar';
@@ -8,6 +9,7 @@ const scope = 'sketch';
 
 function mapStateToProps(state) {
   return {
+    searchLabel: i18next.t('Searchbar.SearchSketch'),
     searchTerm: state.search[`${scope}SearchTerm`],
   };
 }
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index cf91b9c16c..ae04f3f020 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -354,5 +354,10 @@
     "ViaGoogleHeader": "Via Google Form",
     "ViaGoogleDescription": "You can also submit this quick form.",
     "GoToForm": "Go to Form"
+  },
+  "Searchbar": {
+    "SearchSketch": "Search sketches...",
+    "SearchCollection": "Search collections...",
+    "ClearTerm": "clear"
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index e1cce7db06..00183b9061 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -334,5 +334,10 @@
     "ViaGoogleHeader": "Vía Google Form",
     "ViaGoogleDescription": "También puedes enviar tu retroalimetnación usando esta vía rapida.",
     "GoToForm": "Ir a Forma"
+  },
+  "Searchbar": {
+    "SearchSketch": "Buscar en bosquejos...",
+    "SearchCollection": "Buscar en colecciones...",
+    "ClearTerm": "limpiar"
   }
 }

From f5bc3052a712da7685f842546ec7694a88dff3d6 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Fri, 21 Aug 2020 14:58:03 +0100
Subject: [PATCH 07/10] Translations.json merged

---
 translations/locales/en-US/translations.json  | 1 -
 translations/locales/es-419/translations.json | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 2aa9e54dd0..7950bde1a1 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -334,7 +334,6 @@
     "Verified": "All done, your email address has been verified.",
     "InvalidState": "Something went wrong."
   },
-
   "AssetList": {
     "Title": "p5.js Web Editor | My assets",
     "ToggleOpenCloseARIA": "Toggle Open/Close Asset Options",
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index c5c29f24cd..7fb5aa54a5 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -349,9 +349,9 @@
     "ViaGithubHeader": "Vía Github Issues",
     "ViaGithubDescription": " Si estas familiarizado con Github, este es nuestro método favorito para recibir reporte de errores y retroalimentación.",
     "GoToGithub": "Ir a Github",
-    "ViaGoogleHeader": "Vía Google Form",
+    "ViaGoogleHeader": "Vía Formulario de Google",
     "ViaGoogleDescription": "También puedes enviar tu retroalimetnación usando esta vía rapida.",
-    "GoToForm": "Ir a Forma"
+    "GoToForm": "Ir a Formulario"
   },
   "Searchbar": {
     "SearchSketch": "Buscar en bosquejos...",

From fc3ab151435a78a1e3c07f5b8d6c9762f9388015 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Fri, 21 Aug 2020 15:08:35 +0100
Subject: [PATCH 08/10] Translations.json AddRemoved, feedback and Preview Nav

---
 translations/locales/en-US/translations.json  | 15 +++++++++------
 translations/locales/es-419/translations.json |  6 +++---
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 5cc22f4a62..84f2577f77 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -381,16 +381,19 @@
     "Fullscreen": "Fullscreen",
     "Edit": "Edit"
   },
+  "AddRemoveButton": {
+    "altAdd": "Add to collection",
+    "altRemove": "Remove from collection"
+  },
   "CopyableInput": {
     "CopiedARIA": "Copied to Clipboard!",
     "OpenViewTabARIA": "Open {{label}} view in new tab"
   },
   "EditableInput": {
-    "EditValue":"Edit {{displayValue}} value"
-  }
-  ,
+    "EditValue": "Edit {{displayValue}} value"
+  },
   "PreviewNav": {
-      "EditSketch": "Edit Sketch",
-      "ByUser": "by"
-}
+    "EditSketch": "Edit Sketch",
+    "ByUser": "by"
+  }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 6c2295a52c..6a125cc2da 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -382,15 +382,15 @@
     "Edit": "Editar"
   },
   "AddRemoveButton": {
-    "altAdd" : "Add to collection",
-    "altRemove": "Remove from collection"
+    "altAdd": "Agregar a colección",
+    "altRemove": "Remover de colección"
   },
   "CopyableInput": {
     "CopiedARIA": "¡Copiado en el portapapeles!",
     "OpenViewTabARIA": "Abrir la vista {{label}} en nueva pestaña"
   },
   "EditableInput": {
-    "EditValue":"Editar valor de {{display}}"
+    "EditValue": "Editar valor de {{display}}"
   },
   "PreviewNav": {
     "EditSketch": "Editar Bosquejo",

From e0e528b38b512aae9a602dac66c2adb5943382e1 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Tue, 25 Aug 2020 11:54:10 +0100
Subject: [PATCH 09/10] Requested Changes

---
 client/components/AddRemoveButton.jsx           | 2 +-
 client/components/PreviewNav.jsx                | 2 +-
 client/modules/IDE/components/EditableInput.jsx | 2 +-
 translations/locales/en-US/translations.json    | 9 +++++----
 translations/locales/es-419/translations.json   | 9 +++++----
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx
index 80e673bdda..08434eb9eb 100644
--- a/client/components/AddRemoveButton.jsx
+++ b/client/components/AddRemoveButton.jsx
@@ -7,7 +7,7 @@ import AddIcon from '../images/plus.svg';
 import RemoveIcon from '../images/minus.svg';
 
 const AddRemoveButton = ({ type, onClick, t }) => {
-  const alt = type === 'add' ? t('AddRemoveButton.altAdd') : t('AddRemoveButton.altRemove');
+  const alt = type === 'add' ? t('AddRemoveButton.altAddARIA') : t('AddRemoveButton.altRemoveARIA');
   const Icon = type === 'add' ? AddIcon : RemoveIcon;
 
   return (
diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx
index b864da7f3d..8c43005094 100644
--- a/client/components/PreviewNav.jsx
+++ b/client/components/PreviewNav.jsx
@@ -17,7 +17,7 @@ const PreviewNav = ({ owner, project, t }) => (
       <Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
     </div>
     <div className="nav__items-right">
-      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label={t('PreviewNav.EditSketch')} >
+      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label={t('PreviewNav.EditSketchARIA')} >
         <CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
       </Link>
     </div>
diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index 8136565bfa..652fa1b65a 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -85,7 +85,7 @@ function EditableInput({
 }
 
 EditableInput.defaultProps = {
-  emptyPlaceholder: 'No value',
+  emptyPlaceholder: this.props.t('EditableInput.EmptyPlaceholder'),
   InputComponent: 'input',
   inputProps: {},
   validate: () => true,
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index aa1459bce7..8d4c6d0934 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -500,18 +500,19 @@
     "NoCollections": "No collections."
   },
   "AddRemoveButton": {
-    "altAdd": "Add to collection",
-    "altRemove": "Remove from collection"
+    "altAddARIA": "Add to collection",
+    "altRemoveARIA": "Remove from collection"
   },
   "CopyableInput": {
     "CopiedARIA": "Copied to Clipboard!",
     "OpenViewTabARIA": "Open {{label}} view in new tab"
   },
   "EditableInput": {
-    "EditValue": "Edit {{displayValue}} value"
+    "EditValue": "Edit {{display}} value",
+    "EmptyPlaceholder": "No value"
   },
   "PreviewNav": {
-    "EditSketch": "Edit Sketch",
+    "EditSketchARIA": "Edit Sketch",
     "ByUser": "by"
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 1946b41c9e..3328369511 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -500,18 +500,19 @@
     "NoCollections": "No hay colecciones."
   },
   "AddRemoveButton": {
-    "altAdd": "Agregar a colección",
-    "altRemove": "Remover de colección"
+    "altAddARIA": "Agregar a colección",
+    "altRemoveARIA": "Remover de colección"
   },
   "CopyableInput": {
     "CopiedARIA": "¡Copiado en el portapapeles!",
     "OpenViewTabARIA": "Abrir la vista {{label}} en nueva pestaña"
   },
   "EditableInput": {
-    "EditValue": "Editar valor de {{display}}"
+    "EditValue": "Editar valor de {{display}}",
+    "EmptyPlaceholder": "Sin valor"
   },
   "PreviewNav": {
-    "EditSketch": "Editar Bosquejo",
+    "EditSketchARIA": "Editar Bosquejo",
     "ByUser": "por"
   }
 }

From 46b17db8fdea586b062a8d1109be599552a4f1ab Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Tue, 25 Aug 2020 12:13:17 +0100
Subject: [PATCH 10/10] CamelCase for Keys, Missing Key entry for placeholder.

---
 client/components/AddRemoveButton.jsx           | 2 +-
 client/modules/IDE/components/EditableInput.jsx | 5 +++--
 translations/locales/en-US/translations.json    | 4 ++--
 translations/locales/es-419/translations.json   | 8 ++++----
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx
index 08434eb9eb..ea600cf91d 100644
--- a/client/components/AddRemoveButton.jsx
+++ b/client/components/AddRemoveButton.jsx
@@ -7,7 +7,7 @@ import AddIcon from '../images/plus.svg';
 import RemoveIcon from '../images/minus.svg';
 
 const AddRemoveButton = ({ type, onClick, t }) => {
-  const alt = type === 'add' ? t('AddRemoveButton.altAddARIA') : t('AddRemoveButton.altRemoveARIA');
+  const alt = type === 'add' ? t('AddRemoveButton.AltAddARIA') : t('AddRemoveButton.AltRemoveARIA');
   const Icon = type === 'add' ? AddIcon : RemoveIcon;
 
   return (
diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx
index 652fa1b65a..17e777f49c 100644
--- a/client/modules/IDE/components/EditableInput.jsx
+++ b/client/modules/IDE/components/EditableInput.jsx
@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withTranslation } from 'react-i18next';
-
+import i18next from 'i18next';
 import EditIcon from '../../../images/pencil.svg';
 
+
 // TODO I think this needs a description prop so that it's accessible
 function EditableInput({
   validate,
@@ -85,7 +86,7 @@ function EditableInput({
 }
 
 EditableInput.defaultProps = {
-  emptyPlaceholder: this.props.t('EditableInput.EmptyPlaceholder'),
+  emptyPlaceholder: i18next.t('EditableInput.EmptyPlaceholder'),
   InputComponent: 'input',
   inputProps: {},
   validate: () => true,
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index ac38a13c6f..79175e3264 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -517,8 +517,8 @@
     "SavedAgo": "Saved: {{timeAgo}} ago"
   },
   "AddRemoveButton": {
-    "altAddARIA": "Add to collection",
-    "altRemoveARIA": "Remove from collection"
+    "AltAddARIA": "Add to collection",
+    "AltRemoveARIA": "Remove from collection"
   },
   "CopyableInput": {
     "CopiedARIA": "Copied to Clipboard!",
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 8de3f94825..3cb582fba1 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -468,8 +468,8 @@
     "AriaLabel": "Cerrar la capa {{title}}"
   },
   "QuickAddList":{
-    "ButtonLabelRemove": "Remove from collection",
-    "ButtonLabelAddToCollection": "Add to collection",
+    "ButtonLabelRemove": "Remover de colección",
+    "ButtonLabelAddToCollection": "Agregar a colección",
     "View": "Ver"
   },
   "SketchList": {
@@ -517,8 +517,8 @@
     "SavedAgo": "Guardado: hace {{timeAgo}}"
   },
   "AddRemoveButton": {
-    "altAddARIA": "Agregar a colección",
-    "altRemoveARIA": "Remover de colección"
+    "AltAddARIA": "Agregar a colección",
+    "AltRemoveARIA": "Remover de colección"
   },
   "CopyableInput": {
     "CopiedARIA": "¡Copiado en el portapapeles!",