Enhance Readme To Explain How To Contribute Translations

README.md

@@ -138,7 +138,19 @@ Before checking in commits, run `make ci`, which is similar to the `.gitlab-ci.y
 
 ### Translating
 
-Help translate Focalboard! The plugin is already translated into several languages. We welcome corrections and new language translations submitted against the [appropriate language JSON file](https://github.com/mattermost/focalboard/tree/main/webapp/i18n) in this repository. 
+Help translate Focalboard! The plugin is already translated into several languages. We welcome corrections and new language translations submitted against the [appropriate language JSON file](https://github.com/mattermost/focalboard/tree/main/webapp/i18n) in this repository. To add a new language, follow the steps below:
+
+- Create a new file with the language code (I.E. `en.json`) inside `webapp/i18n` directory
+- Copy the contents of the en.json file into your newly created file
+- Leave the keys in this file as they are and replace all the values with the translated strings
+- Go to `webapp/src/constants.ts` and add an entry for the language you are translating into under the **languages** array
+- This array needs to consist of three keys: the language code, the name of the language and the display name of the language
+- Go to `webapp/src/i18n.tsx`:
+    - import the json of the language translation you have just added
+    - Add the language code to the `supportedLanguages` array
+    - Add another case to the switch case matching the language you added inside `getMessages`
+- Once you are done, you need to update the snapshot by using this command `npm run updatesnapshot`
+
 
 ### Staying informed
 

webapp/src/components/cardDetail/__snapshots__/comment.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`components/cardDetail/comment return comment 1`] = `
       </div>
       <div
         class="octo-tooltip tooltip-top"
-        data-tooltip="October 01, 2020, 12:00 AM"
+        data-tooltip="October 01, 2020 at 12:00 AM"
       >
         <div
           class="comment-date"
@@ -147,7 +147,7 @@ exports[`components/cardDetail/comment return comment and delete comment 1`] = `
       </div>
       <div
         class="octo-tooltip tooltip-top"
-        data-tooltip="October 01, 2020, 12:00 AM"
+        data-tooltip="October 01, 2020 at 12:00 AM"
       >
         <div
           class="comment-date"
@@ -275,7 +275,7 @@ exports[`components/cardDetail/comment return comment readonly 1`] = `
       </div>
       <div
         class="octo-tooltip tooltip-top"
-        data-tooltip="October 01, 2020, 12:00 AM"
+        data-tooltip="October 01, 2020 at 12:00 AM"
       >
         <div
           class="comment-date"
@@ -323,7 +323,7 @@ exports[`components/cardDetail/comment return guest comment 1`] = `
       </div>
       <div
         class="octo-tooltip tooltip-top"
-        data-tooltip="October 01, 2020, 12:00 AM"
+        data-tooltip="October 01, 2020 at 12:00 AM"
       >
         <div
           class="comment-date"
@@ -460,7 +460,7 @@ exports[`components/cardDetail/comment return guest comment and delete comment 1
       </div>
       <div
         class="octo-tooltip tooltip-top"
-        data-tooltip="October 01, 2020, 12:00 AM"
+        data-tooltip="October 01, 2020 at 12:00 AM"
       >
         <div
           class="comment-date"
@@ -597,7 +597,7 @@ exports[`components/cardDetail/comment return guest comment readonly 1`] = `
       </div>
       <div
         class="octo-tooltip tooltip-top"
-        data-tooltip="October 01, 2020, 12:00 AM"
+        data-tooltip="October 01, 2020 at 12:00 AM"
       >
         <div
           class="comment-date"

webapp/src/properties/updatedTime/__snapshots__/updatedTime.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`properties/updatedTime should match snapshot 1`] = `
   <div
     class="UpdatedTime octo-propertyvalue octo-propertyvalue--readonly"
   >
-    June 15, 2021, 4:22 PM
+    June 15, 2021 at 4:22 PM
   </div>
 </div>
 `;