From d4e0ab43b4b232011b3478f51b387bc22503a679 Mon Sep 17 00:00:00 2001
From: Richard <richard@tripaneer.com>
Date: Sat, 18 Jan 2020 13:24:28 +0100
Subject: [PATCH] updated community form with transpolation translation and
 label attributes

---
 ui/src/components/community-form.tsx   | 28 ++++++++++++++++----------
 ui/src/components/create-community.tsx |  4 ++--
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx
index 2085da289..f66755597 100644
--- a/ui/src/components/community-form.tsx
+++ b/ui/src/components/community-form.tsx
@@ -97,12 +97,13 @@ export class CommunityForm extends Component<
     return (
       <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="name">#</T>
+          <label class="col-12 col-form-label" for="community-name">
+            { i18n.t('name') }
           </label>
           <div class="col-12">
             <input
               type="text"
+              id="community-name"
               class="form-control"
               value={this.state.communityForm.name}
               onInput={linkEvent(this, this.handleCommunityNameChange)}
@@ -114,13 +115,15 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="title">#</T>
+          <label class="col-12 col-form-label" for="community-title">
+            { i18n.t('title') }
           </label>
           <div class="col-12">
             <input
               type="text"
+              id="community-title"
               value={this.state.communityForm.title}
               onInput={linkEvent(this, this.handleCommunityTitleChange)}
               class="form-control"
@@ -131,12 +134,13 @@ export class CommunityForm extends Component<
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="sidebar">#</T>
+          <label class="col-12 col-form-label" for="community-sidebar">
+            { i18n.t('sidebar') }
           </label>
           <div class="col-12">
             <textarea
               value={this.state.communityForm.description}
+              id="community-sidebar"
               onInput={linkEvent(this, this.handleCommunityDescriptionChange)}
               class="form-control"
               rows={3}
@@ -145,12 +149,13 @@ export class CommunityForm extends Component<
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="category">#</T>
+          <label class="col-12 col-form-label" for="community-category">
+            { i18n.t('category') }
           </label>
           <div class="col-12">
             <select
               class="form-control"
+              id="community-category"
               value={this.state.communityForm.category_id}
               onInput={linkEvent(this, this.handleCommunityCategoryChange)}
             >
@@ -167,12 +172,13 @@ export class CommunityForm extends Component<
               <div class="form-check">
                 <input
                   class="form-check-input"
+                  id="community-nsfw"
                   type="checkbox"
                   checked={this.state.communityForm.nsfw}
                   onChange={linkEvent(this, this.handleCommunityNsfwChange)}
                 />
-                <label class="form-check-label">
-                  <T i18nKey="nsfw">#</T>
+                <label class="form-check-label" for="community-nsfw">
+                  { i18n.t('nsfw') }
                 </label>
               </div>
             </div>
@@ -197,7 +203,7 @@ export class CommunityForm extends Component<
                 class="btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
-                <T i18nKey="cancel">#</T>
+                { i18n.t('cancel') }
               </button>
             )}
           </div>
diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx
index f16b64259..bb2d963fe 100644
--- a/ui/src/components/create-community.tsx
+++ b/ui/src/components/create-community.tsx
@@ -22,9 +22,9 @@ export class CreateCommunity extends Component<any, any> {
       <div class="container">
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>
+            <h2>
               <T i18nKey="create_community">#</T>
-            </h5>
+            </h2>
             <CommunityForm onCreate={this.handleCommunityCreate} />
           </div>
         </div>