Merge branch 'feature/frontend-usability-features' of https://github.com/richardj/lemmy into richardj-feature/frontend-usability-features

ui/src/components/communities.tsx

@@ -80,37 +80,37 @@ export class Communities extends Component<any, CommunitiesState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5 class="">
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div>
             <h5>
-              <T i18nKey="list_of_communities">#</T>
+              { i18n.t('list_of_communities') }
             </h5>
             <div class="table-responsive">
               <table id="community_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
                     <th>
-                      <T i18nKey="name">#</T>
+                      { i18n.t('name') }
                     </th>
                     <th class="d-none d-lg-table-cell">
-                      <T i18nKey="title">#</T>
+                      { i18n.t('title') }
                     </th>
                     <th>
-                      <T i18nKey="category">#</T>
+                      { i18n.t('category') }
                     </th>
                     <th class="text-right">
-                      <T i18nKey="subscribers">#</T>
+                      { i18n.t('subscribers') }
                     </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      <T i18nKey="posts">#</T>
+                      { i18n.t('posts') }
                     </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      <T i18nKey="comments">#</T>
+                      { i18n.t('comments') }
                     </th>
                     <th></th>
                   </tr>
@@ -153,7 +153,7 @@ export class Communities extends Component<any, CommunitiesState> {
                               this.handleSubscribe
                             )}
                           >
-                            <T i18nKey="subscribe">#</T>
+                            { i18n.t('subscribe') }
                           </span>
                         )}
                       </td>
@@ -177,14 +177,14 @@ export class Communities extends Component<any, CommunitiesState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          <T i18nKey="next">#</T>
+          { i18n.t('next') }
         </button>
       </div>
     );

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>

ui/src/components/community.tsx

@@ -125,11 +125,11 @@ export class Community extends Component<any, State> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8">
@@ -137,12 +137,12 @@ export class Community extends Component<any, State> {
                 {this.state.community.title}
                 {this.state.community.removed && (
                   <small className="ml-2 text-muted font-italic">
-                    <T i18nKey="removed">#</T>
+                    { i18n.t('removed') }
                   </small>
                 )}
                 {this.state.community.nsfw && (
                   <small className="ml-2 text-muted font-italic">
-                    <T i18nKey="nsfw">#</T>
+                    { i18n.t('nsfw') }
                   </small>
                 )}
               </h5>
@@ -189,14 +189,14 @@ export class Community extends Component<any, State> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          <T i18nKey="next">#</T>
+          { i18n.t('next') }
         </button>
       </div>
     );

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>
-              <T i18nKey="create_community">#</T>
-            </h5>
+            <h2>
+              { i18n.t('create_community') }
+            </h2>
             <CommunityForm onCreate={this.handleCommunityCreate} />
           </div>
         </div>

ui/src/components/create-post.tsx

@@ -22,9 +22,9 @@ export class CreatePost extends Component<any, any> {
       <div class="container">
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
-            <h5>
-              <T i18nKey="create_post">#</T>
-            </h5>
+            <h2>
+              { i18n.t('create_post') }
+            </h2>
             <PostForm onCreate={this.handlePostCreate} params={this.params} />
           </div>
         </div>

ui/src/components/footer.tsx

@@ -2,7 +2,7 @@ import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { repoUrl } from '../utils';
 import { version } from '../version';
-import { T } from 'inferno-i18next';
+import { i18n } from '../i18next';
 
 export class Footer extends Component<any, any> {
   constructor(props: any, context: any) {
@@ -19,22 +19,22 @@ export class Footer extends Component<any, any> {
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/modlog">
-                <T i18nKey="modlog">#</T>
+                { i18n.t('modlog') }
               </Link>
             </li>
             <li class="nav-item">
               <a class="nav-link" href={'/docs/index.html'}>
-                <T i18nKey="docs">#</T>
+                { i18n.t('docs') }
               </a>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/sponsors">
-                <T i18nKey="sponsors">#</T>
+                { i18n.t('sponsors') }
               </Link>
             </li>
             <li class="nav-item">
               <a class="nav-link" href={repoUrl}>
-                <T i18nKey="code">#</T>
+                { i18n.t('code') }
               </a>
             </li>
           </ul>

ui/src/components/inbox.tsx

@@ -108,7 +108,7 @@ export class Inbox extends Component<any, InboxState> {
                 <ul class="list-inline mb-1 text-muted small font-weight-bold">
                   <li className="list-inline-item">
                     <span class="pointer" onClick={this.markAllAsRead}>
-                      <T i18nKey="mark_all_as_read">#</T>
+                      { i18n.t('mark_all_as_read') }
                     </span>
                   </li>
                 </ul>
@@ -133,13 +133,14 @@ export class Inbox extends Component<any, InboxState> {
           class="custom-select custom-select-sm w-auto mr-2"
         >
           <option disabled>
-            <T i18nKey="type">#</T>
+            { i18n.t('type') }
+            
           </option>
           <option value={UnreadOrAll.Unread}>
-            <T i18nKey="unread">#</T>
+            { i18n.t('unread') }
           </option>
           <option value={UnreadOrAll.All}>
-            <T i18nKey="all">#</T>
+            { i18n.t('all') }
           </option>
         </select>
         <select
@@ -148,16 +149,16 @@ export class Inbox extends Component<any, InboxState> {
           class="custom-select custom-select-sm w-auto mr-2"
         >
           <option disabled>
-            <T i18nKey="type">#</T>
+            { i18n.t('type') }
           </option>
           <option value={UnreadType.Both}>
-            <T i18nKey="both">#</T>
+            { i18n.t('both') }
           </option>
           <option value={UnreadType.Replies}>
-            <T i18nKey="replies">#</T>
+            { i18n.t('replies') }
           </option>
           <option value={UnreadType.Mentions}>
-            <T i18nKey="mentions">#</T>
+            { i18n.t('mentions') }
           </option>
         </select>
         <SortSelect
@@ -228,14 +229,14 @@ export class Inbox extends Component<any, InboxState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          <T i18nKey="next">#</T>
+          { i18n.t('next') }
         </button>
       </div>
     );

ui/src/components/login.tsx

@@ -84,15 +84,16 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h5>Login</h5>
+          <h2>{ i18n.t('login') }</h2>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="email_or_username">#</T>
+            <label class="col-sm-2 col-form-label" for="login-email-or-username">
+                { i18n.t('email_or_username') }
             </label>
             <div class="col-sm-10">
               <input
                 type="text"
                 class="form-control"
+                id="login-email-or-username"
                 value={this.state.loginForm.username_or_email}
                 onInput={linkEvent(this, this.handleLoginUsernameChange)}
                 required
@@ -101,12 +102,13 @@ export class Login extends Component<any, State> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="password">#</T>
+            <label class="col-sm-2 col-form-label" for="login-password">
+                { i18n.t('password') }
             </label>
             <div class="col-sm-10">
               <input
                 type="password"
+                id="login-password"
                 value={this.state.loginForm.password}
                 onInput={linkEvent(this, this.handleLoginPasswordChange)}
                 class="form-control"
@@ -117,7 +119,7 @@ export class Login extends Component<any, State> {
                 onClick={linkEvent(this, this.handlePasswordReset)}
                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold"
               >
-                <T i18nKey="forgot_password">#</T>
+                { i18n.t('forgot_password') }
               </button>
             </div>
           </div>
@@ -141,16 +143,19 @@ export class Login extends Component<any, State> {
   registerForm() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>
-          <T i18nKey="sign_up">#</T>
-        </h5>
+        <h2>
+          { i18n.t('sign_up') }
+        </h2>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="username">#</T>
+          <label class="col-sm-2 col-form-label" for="register-username">
+            { i18n.t('username') }
           </label>
+
           <div class="col-sm-10">
             <input
               type="text"
+              id="register-username"
               class="form-control"
               value={this.state.registerForm.username}
               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
@@ -161,13 +166,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="email">#</T>
+          <label class="col-sm-2 col-form-label" for="register-email">
+            { i18n.t('email') }
           </label>
           <div class="col-sm-10">
             <input
               type="email"
+              id="register-email"
               class="form-control"
               placeholder={i18n.t('optional')}
               value={this.state.registerForm.email}
@@ -176,13 +183,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="password">#</T>
+          <label class="col-sm-2 col-form-label" for="register-password">
+            { i18n.t('password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="register-password"
               value={this.state.registerForm.password}
               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
               class="form-control"
@@ -190,13 +199,15 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="verify_password">#</T>
+          <label class="col-sm-2 col-form-label" for="register-verify-password">
+            { i18n.t('verify_password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="register-verify-password"
               value={this.state.registerForm.password_verify}
               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
               class="form-control"
@@ -204,18 +215,20 @@ export class Login extends Component<any, State> {
             />
           </div>
         </div>
+
         { this.state.enable_nsfw && (
           <div class="form-group row">
             <div class="col-sm-10">
               <div class="form-check">
                 <input
                   class="form-check-input"
+                  id="register-show-nsfw"
                   type="checkbox"
                   checked={this.state.registerForm.show_nsfw}
                   onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
                 />
-                <label class="form-check-label">
-                  <T i18nKey="show_nsfw">#</T>
+                <label class="form-check-label" for="register-show-nsfw">
+                    { i18n.t('show_nsfw') }
                 </label>
               </div>
             </div>

ui/src/components/main.tsx

@@ -158,8 +158,8 @@ export class Main extends Component<any, MainState> {
     return (
       <div class="container">
         <div class="row">
-          <div class="col-12 col-md-8">{this.posts()}</div>
-          <div class="col-12 col-md-4">{this.my_sidebar()}</div>
+          <main role="main" class="col-12 col-md-8">{this.posts()}</main>
+          <aside class="col-12 col-md-4">{this.my_sidebar()}</aside>
         </div>
       </div>
     );
@@ -412,13 +412,13 @@ export class Main extends Component<any, MainState> {
 
   posts() {
     return (
-      <div>
+      <div class="main-content-wrapper">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div>
             {this.selects()}

ui/src/components/modlog.tsx

@@ -350,7 +350,7 @@ export class Modlog extends Component<any, ModlogState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5 class="">
+          <h5 class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
@@ -366,15 +366,15 @@ export class Modlog extends Component<any, ModlogState> {
                   /c/{this.state.communityName}{' '}
                 </Link>
               )}
-              <span>Modlog</span>
+              <span>{ i18n.t('modlog') }</span>
             </h5>
             <div class="table-responsive">
               <table id="modlog_table" class="table table-sm table-hover">
                 <thead class="pointer">
                   <tr>
-                    <th>Time</th>
-                    <th>Mod</th>
-                    <th>Action</th>
+                    <th> { i18n.t('time')}</th>
+                    <th>{ i18n.t('mod')}</th>
+                    <th>{ i18n.t('action')}</th>
                   </tr>
                 </thead>
                 {this.combined()}
@@ -395,14 +395,14 @@ export class Modlog extends Component<any, ModlogState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            Prev
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          Next
+          { i18n.t('next') }
         </button>
       </div>
     );

ui/src/components/navbar.tsx

@@ -94,6 +94,7 @@ export class Navbar extends Component<any, NavbarState> {
         <button
           class="navbar-toggler"
           type="button"
+          aria-label="menu"
           onClick={linkEvent(this, this.expandNavbar)}
         >
           <span class="navbar-toggler-icon"></span>
@@ -104,12 +105,12 @@ export class Navbar extends Component<any, NavbarState> {
           <ul class="navbar-nav mr-auto">
             <li class="nav-item">
               <Link class="nav-link" to="/communities">
-                <T i18nKey="communities">#</T>
+                { i18n.t('communities') }
               </Link>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/search">
-                <T i18nKey="search">#</T>
+                { i18n.t('search') }
               </Link>
             </li>
             <li class="nav-item">
@@ -120,12 +121,12 @@ export class Navbar extends Component<any, NavbarState> {
                   state: { prevPath: this.currentLocation },
                 }}
               >
-                <T i18nKey="create_post">#</T>
+                { i18n.t('create_post') }
               </Link>
             </li>
             <li class="nav-item">
               <Link class="nav-link" to="/create_community">
-                <T i18nKey="create_community">#</T>
+                { i18n.t('create_community') }
               </Link>
             </li>
           </ul>
@@ -167,7 +168,7 @@ export class Navbar extends Component<any, NavbarState> {
               </>
             ) : (
               <Link class="nav-link" to="/login">
-                <T i18nKey="login_sign_up">#</T>
+                { i18n.t('login_sign_up') }
               </Link>
             )}
           </ul>

ui/src/components/password_change.tsx

@@ -65,7 +65,7 @@ export class PasswordChange extends Component<any, State> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>
-              <T i18nKey="password_change">#</T>
+              { i18n.t('password_change') }
             </h5>
             {this.passwordChangeForm()}
           </div>

ui/src/components/post-form.tsx

@@ -136,12 +136,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       <div>
         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="url">#</T>
+            <label class="col-sm-2 col-form-label" for="post-url">
+              { i18n.t('url') }
             </label>
             <div class="col-sm-10">
               <input
                 type="url"
+                id="post-url"
                 class="form-control"
                 value={this.state.postForm.url}
                 onInput={linkEvent(this, this.handlePostUrlChange)}
@@ -165,7 +166,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   className={`${UserService.Instance.user &&
                     'pointer'} d-inline-block mr-2 float-right text-muted small font-weight-bold`}
                 >
-                  <T i18nKey="upload_image">#</T>
+                  { i18n.t('upload_image') }
                 </label>
                 <input
                   id="file-upload"
@@ -185,7 +186,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   target="_blank"
                   class="mr-2 d-inline-block float-right text-muted small font-weight-bold"
                 >
-                  <T i18nKey="archive_link">#</T>
+                  { i18n.t('archive_link') }
                 </a>
               )}
               {this.state.imageLoading && (
@@ -199,7 +200,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.crossPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    <T i18nKey="cross_posts">#</T>
+                    { i18n.t('cross_posts') }
                   </div>
                   <PostListings showCommunity posts={this.state.crossPosts} />
                 </>
@@ -207,12 +208,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="title">#</T>
+            <label class="col-sm-2 col-form-label" for="post-title">
+              { i18n.t('title') }
             </label>
             <div class="col-sm-10">
               <textarea
                 value={this.state.postForm.name}
+                id="post-title"
                 onInput={linkEvent(this, this.handlePostNameChange)}
                 class="form-control"
                 required
@@ -223,20 +225,22 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.suggestedPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    <T i18nKey="related_posts">#</T>
+                    { i18n.t('related_posts') }
                   </div>
                   <PostListings posts={this.state.suggestedPosts} />
                 </>
               )}
             </div>
           </div>
+
           <div class="form-group row">
-            <label class="col-sm-2 col-form-label">
-              <T i18nKey="body">#</T>
+            <label class="col-sm-2 col-form-label" for="post-body">
+              { i18n.t('body') }
             </label>
             <div class="col-sm-10">
               <textarea
                 value={this.state.postForm.body}
+                id="post-body"
                 onInput={linkEvent(this, this.handlePostBodyChange)}
                 className={`form-control ${this.state.previewMode && 'd-none'}`}
                 rows={4}
@@ -254,7 +258,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                     .previewMode && 'active'}`}
                   onClick={linkEvent(this, this.handlePreviewToggle)}
                 >
-                  <T i18nKey="preview">#</T>
+                  { i18n.t('preview') }
                 </button>
               )}
               <a
@@ -262,18 +266,19 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 target="_blank"
                 class="d-inline-block float-right text-muted small font-weight-bold"
               >
-                <T i18nKey="formatting_help">#</T>
+                { i18n.t('formatting_help') }
               </a>
             </div>
           </div>
           {!this.props.post && (
             <div class="form-group row">
-              <label class="col-sm-2 col-form-label">
-                <T i18nKey="community">#</T>
+              <label class="col-sm-2 col-form-label" for="post-community">
+                { i18n.t('community') }
               </label>
               <div class="col-sm-10">
                 <select
                   class="form-control"
+                  id="post-community"
                   value={this.state.postForm.community_id}
                   onInput={linkEvent(this, this.handlePostCommunityChange)}
                 >
@@ -290,12 +295,13 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 <div class="form-check">
                   <input
                     class="form-check-input"
+                    id="post-nsfw"
                     type="checkbox"
                     checked={this.state.postForm.nsfw}
                     onChange={linkEvent(this, this.handlePostNsfwChange)}
                   />
-                  <label class="form-check-label">
-                    <T i18nKey="nsfw">#</T>
+                  <label class="form-check-label" for="post-nsfw">
+                    { i18n.t('nsfw') }
                   </label>
                 </div>
               </div>
@@ -320,7 +326,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   class="btn btn-secondary"
                   onClick={linkEvent(this, this.handleCancel)}
                 >
-                  <T i18nKey="cancel">#</T>
+                  { i18n.t('cancel') }
                 </button>
               )}
             </div>

ui/src/components/post-listing.tsx

@@ -231,27 +231,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             )}
             {post.removed && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="removed">#</T>
+                { i18n.t('removed') }
               </small>
             )}
             {post.deleted && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="deleted">#</T>
+                { i18n.t('deleted') }
               </small>
             )}
             {post.locked && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="locked">#</T>
+                { i18n.t('locked') }
               </small>
             )}
             {post.stickied && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="stickied">#</T>
+                { i18n.t('stickied') }
               </small>
             )}
             {post.nsfw && (
               <small className="ml-2 text-muted font-italic">
-                <T i18nKey="nsfw">#</T>
+                { i18n.t('nsfw') }
               </small>
             )}
           </div>
@@ -273,17 +273,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               </Link>
               {this.isMod && (
                 <span className="mx-1 badge badge-light">
-                  <T i18nKey="mod">#</T>
+                  { i18n.t('mod') }
                 </span>
               )}
               {this.isAdmin && (
                 <span className="mx-1 badge badge-light">
-                  <T i18nKey="admin">#</T>
+                  { i18n.t('admin') }
                 </span>
               )}
               {(post.banned_from_community || post.banned) && (
                 <span className="mx-1 badge badge-danger">
-                  <T i18nKey="banned">#</T>
+                  { i18n.t('banned') }
                 </span>
               )}
               {this.props.showCommunity && (
@@ -390,14 +390,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         class="pointer"
                         onClick={linkEvent(this, this.handleModRemoveShow)}
                       >
-                        <T i18nKey="remove">#</T>
+                        { i18n.t('remove') }
                       </span>
                     ) : (
                       <span
                         class="pointer"
                         onClick={linkEvent(this, this.handleModRemoveSubmit)}
                       >
-                        <T i18nKey="restore">#</T>
+                        { i18n.t('restore') }
                       </span>
                     )}
                   </li>
@@ -414,7 +414,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                               this.handleModBanFromCommunityShow
                             )}
                           >
-                            <T i18nKey="ban">#</T>
+                            { i18n.t('ban') }
                           </span>
                         ) : (
                           <span
@@ -424,7 +424,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                               this.handleModBanFromCommunitySubmit
                             )}
                           >
-                            <T i18nKey="unban">#</T>
+                            { i18n.t('unban') }
                           </span>
                         )}
                       </li>
@@ -471,7 +471,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             this.handleTransferCommunity
                           )}
                         >
-                          <T i18nKey="yes">#</T>
+                          { i18n.t('yes') }
                         </span>
                         <span
                           class="pointer d-inline-block"
@@ -480,7 +480,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             this.handleCancelShowConfirmTransferCommunity
                           )}
                         >
-                          <T i18nKey="no">#</T>
+                          { i18n.t('no') }
                         </span>
                       </>
                     )}
@@ -496,14 +496,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             class="pointer"
                             onClick={linkEvent(this, this.handleModBanShow)}
                           >
-                            <T i18nKey="ban_from_site">#</T>
+                            { i18n.t('ban_from_site') }
                           </span>
                         ) : (
                           <span
                             class="pointer"
                             onClick={linkEvent(this, this.handleModBanSubmit)}
                           >
-                            <T i18nKey="unban_from_site">#</T>
+                            { i18n.t('unban_from_site') }
                           </span>
                         )}
                       </li>
@@ -533,18 +533,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                           this.handleShowConfirmTransferSite
                         )}
                       >
-                        <T i18nKey="transfer_site">#</T>
+                        { i18n.t('transfer_site') }
                       </span>
                     ) : (
                       <>
                         <span class="d-inline-block mr-1">
-                          <T i18nKey="are_you_sure">#</T>
+                          { i18n.t('are_you_sure') }
                         </span>
                         <span
                           class="pointer d-inline-block mr-1"
                           onClick={linkEvent(this, this.handleTransferSite)}
                         >
-                          <T i18nKey="yes">#</T>
+                          { i18n.t('yes') }
                         </span>
                         <span
                           class="pointer d-inline-block"
@@ -553,7 +553,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             this.handleCancelShowConfirmTransferSite
                           )}
                         >
-                          <T i18nKey="no">#</T>
+                          { i18n.t('no') }
                         </span>
                       </>
                     )}
@@ -567,7 +567,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   className="pointer"
                   onClick={linkEvent(this, this.handleViewSource)}
                 >
-                  <T i18nKey="view_source">#</T>
+                  { i18n.t('view_source') }
                 </span>
               </li>
             )}
@@ -585,18 +585,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
               />
               <button type="submit" class="btn btn-secondary">
-                <T i18nKey="remove_post">#</T>
+                { i18n.t('remove_post') }
               </button>
             </form>
           )}
           {this.state.showBanDialog && (
             <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
               <div class="form-group row">
-                <label class="col-form-label">
-                  <T i18nKey="reason">#</T>
+                <label class="col-form-label" for="post-listing-reason">
+                  { i18n.t('reason') }
                 </label>
                 <input
                   type="text"
+                  id="post-listing-reason"
                   class="form-control mr-2"
                   placeholder={i18n.t('reason')}
                   value={this.state.banReason}

ui/src/components/post-listings.tsx

@@ -2,6 +2,7 @@ import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { Post } from '../interfaces';
 import { PostListing } from './post-listing';
+import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
 interface PostListingsProps {
@@ -30,14 +31,12 @@ export class PostListings extends Component<PostListingsProps, any> {
           ))
         ) : (
           <>
-            <div>
-              <T i18nKey="no_posts">#</T>
-            </div>
+            <h2>
+              { i18n.t('no_posts') }
+            </h2>
             {this.props.showCommunity !== undefined && (
               <div>
-                <T i18nKey="subscribe_to_communities">
-                  #<Link to="/communities">#</Link>
-                </T>
+                <Link to="/communities">{ i18n.t('subscribe_to_communities') }</Link>
               </div>
             )}
           </>

ui/src/components/post.tsx

@@ -150,11 +150,11 @@ export class Post extends Component<any, PostState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8 mb-3">
@@ -168,7 +168,7 @@ export class Post extends Component<any, PostState> {
               {this.state.crossPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
-                    <T i18nKey="cross_posts">#</T>
+                    { i18n.t('cross_posts') }
                   </div>
                   <PostListings showCommunity posts={this.state.crossPosts} />
                 </>
@@ -239,7 +239,7 @@ export class Post extends Component<any, PostState> {
       <div class="d-none d-md-block new-comments mb-3 card border-secondary">
         <div class="card-body small">
           <h6>
-            <T i18nKey="recent_comments">#</T>
+            { i18n.t('recent_comments') }
           </h6>
           {this.state.comments.map(comment => (
             <CommentNodes

ui/src/components/search.tsx

@@ -126,7 +126,7 @@ export class Search extends Component<any, SearchState> {
         <div class="row">
           <div class="col-12">
             <h5>
-              <T i18nKey="search">#</T>
+              { i18n.t('search') }
             </h5>
             {this.selects()}
             {this.searchForm()}
@@ -165,7 +165,7 @@ export class Search extends Component<any, SearchState> {
             </svg>
           ) : (
             <span>
-              <T i18nKey="search">#</T>
+              { i18n.t('search') }
             </span>
           )}
         </button>
@@ -182,22 +182,22 @@ export class Search extends Component<any, SearchState> {
           class="custom-select custom-select-sm w-auto"
         >
           <option disabled>
-            <T i18nKey="type">#</T>
+            { i18n.t('type') }
           </option>
           <option value={SearchType.All}>
-            <T i18nKey="all">#</T>
+            { i18n.t('all') }
           </option>
           <option value={SearchType.Comments}>
-            <T i18nKey="comments">#</T>
+            { i18n.t('comments') }
           </option>
           <option value={SearchType.Posts}>
-            <T i18nKey="posts">#</T>
+            { i18n.t('posts') }
           </option>
           <option value={SearchType.Communities}>
-            <T i18nKey="communities">#</T>
+            { i18n.t('communities') }
           </option>
           <option value={SearchType.Users}>
-            <T i18nKey="users">#</T>
+            { i18n.t('users') }
           </option>
         </select>
         <span class="ml-2">
@@ -368,14 +368,14 @@ export class Search extends Component<any, SearchState> {
             class="btn btn-sm btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
-            <T i18nKey="prev">#</T>
+            { i18n.t('prev') }
           </button>
         )}
         <button
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          <T i18nKey="next">#</T>
+          { i18n.t('next') }
         </button>
       </div>
     );
@@ -392,7 +392,7 @@ export class Search extends Component<any, SearchState> {
           res.communities.length == 0 &&
           res.users.length == 0 && (
             <span>
-              <T i18nKey="no_results">#</T>
+              { i18n.t('no_results') }
             </span>
           )}
       </div>

ui/src/components/setup.tsx

@@ -64,7 +64,7 @@ export class Setup extends Component<any, State> {
         <div class="row">
           <div class="col-12 offset-lg-3 col-lg-6">
             <h3>
-              <T i18nKey="lemmy_instance_setup">#</T>
+                { i18n.t('lemmy_instance_setup') }
             </h3>
             {!this.state.doneRegisteringUser ? (
               this.registerUser()
@@ -80,17 +80,16 @@ export class Setup extends Component<any, State> {
   registerUser() {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
-        <h5>
-          <T i18nKey="setup_admin">#</T>
-        </h5>
+        <h4>{ i18n.t('setup_admin')}</h4>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="username">#</T>
+          <label class="col-sm-2 col-form-label" for="username">
+            { i18n.t('username') } 
           </label>
           <div class="col-sm-10">
             <input
               type="text"
               class="form-control"
+              id="username"
               value={this.state.userForm.username}
               onInput={linkEvent(this, this.handleRegisterUsernameChange)}
               required
@@ -101,12 +100,14 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="email">#</T>
+          <label class="col-sm-2 col-form-label" for="email">
+            { i18n.t('email') }
           </label>
+
           <div class="col-sm-10">
             <input
               type="email"
+              id="email"
               class="form-control"
               placeholder={i18n.t('optional')}
               value={this.state.userForm.email}
@@ -116,12 +117,13 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="password">#</T>
+          <label class="col-sm-2 col-form-label" for="password">
+            { i18n.t('password')}
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="password"
               value={this.state.userForm.password}
               onInput={linkEvent(this, this.handleRegisterPasswordChange)}
               class="form-control"
@@ -130,12 +132,13 @@ export class Setup extends Component<any, State> {
           </div>
         </div>
         <div class="form-group row">
-          <label class="col-sm-2 col-form-label">
-            <T i18nKey="verify_password">#</T>
+          <label class="col-sm-2 col-form-label" for="verify-password">
+            { i18n.t('verify_password') }
           </label>
           <div class="col-sm-10">
             <input
               type="password"
+              id="verify-password"
               value={this.state.userForm.password_verify}
               onInput={linkEvent(this, this.handleRegisterPasswordVerifyChange)}
               class="form-control"

ui/src/components/sidebar.tsx

@@ -72,7 +72,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
               <span>{community.title}</span>
               {community.removed && (
                 <small className="ml-2 text-muted font-italic">
-                  <T i18nKey="removed">#</T>
+                  { i18n.t('removed') }
                 </small>
               )}
               {community.deleted && (
@@ -92,7 +92,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                       class="pointer"
                       onClick={linkEvent(this, this.handleEditClick)}
                     >
-                      <T i18nKey="edit">#</T>
+                      { i18n.t('edit') }
                     </span>
                   </li>
                   {this.amCreator && (
@@ -116,14 +116,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                       class="pointer"
                       onClick={linkEvent(this, this.handleModRemoveShow)}
                     >
-                      <T i18nKey="remove">#</T>
+                      { i18n.t('remove') }
                     </span>
                   ) : (
                     <span
                       class="pointer"
                       onClick={linkEvent(this, this.handleModRemoveSubmit)}
                     >
-                      <T i18nKey="restore">#</T>
+                      { i18n.t('restore') }
                     </span>
                   )}
                 </li>
@@ -132,11 +132,12 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             {this.state.showRemoveDialog && (
               <form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
                 <div class="form-group row">
-                  <label class="col-form-label">
-                    <T i18nKey="reason">#</T>
+                  <label class="col-form-label" for="remove-reason">
+                    { i18n.t('reason') }
                   </label>
                   <input
                     type="text"
+                    id="remove-reason"
                     class="form-control mr-2"
                     placeholder={i18n.t('optional')}
                     value={this.state.removeReason}
@@ -150,7 +151,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 {/* </div> */}
                 <div class="form-group row">
                   <button type="submit" class="btn btn-secondary">
-                    <T i18nKey="remove_community">#</T>
+                    { i18n.t('remove_community') }
                   </button>
                 </div>
               </form>
@@ -218,7 +219,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 'no-click'}`}
               to={`/create_post?community=${community.name}`}
             >
-              <T i18nKey="create_a_post">#</T>
+              { i18n.t('create_a_post') }
             </Link>
             <div>
               {community.subscribed ? (
@@ -226,14 +227,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                   class="btn btn-sm btn-secondary btn-block"
                   onClick={linkEvent(community.id, this.handleUnsubscribe)}
                 >
-                  <T i18nKey="unsubscribe">#</T>
+                  { i18n.t('unsubscribe') }
                 </button>
               ) : (
                 <button
                   class="btn btn-sm btn-secondary btn-block"
                   onClick={linkEvent(community.id, this.handleSubscribe)}
                 >
-                  <T i18nKey="subscribe">#</T>
+                  { i18n.t('subscribe') }
                 </button>
               )}
             </div>

ui/src/components/site-form.tsx

@@ -54,12 +54,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             : capitalizeFirstLetter(i18n.t('name'))
         } ${i18n.t('your_site')}`}</h5>
         <div class="form-group row">
-          <label class="col-12 col-form-label">
-            <T i18nKey="name">#</T>
+          <label class="col-12 col-form-label" for="create-site-name">
+            { i18n.t('name') }
           </label>
           <div class="col-12">
             <input
               type="text"
+              id="create-site-name"
               class="form-control"
               value={this.state.siteForm.name}
               onInput={linkEvent(this, this.handleSiteNameChange)}
@@ -70,12 +71,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </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="create-site-sidebar">
+            { i18n.t('sidebar') }
           </label>
           <div class="col-12">
             <textarea
               value={this.state.siteForm.description}
+              id="create-site-sidebar"
               onInput={linkEvent(this, this.handleSiteDescriptionChange)}
               class="form-control"
               rows={3}
@@ -88,12 +90,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <div class="form-check">
               <input
                 class="form-check-input"
+                id="create-site-downvotes"
                 type="checkbox"
                 checked={this.state.siteForm.enable_downvotes}
                 onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
               />
-              <label class="form-check-label">
-                <T i18nKey="enable_downvotes">#</T>
+              <label class="form-check-label" for="create-site-downvotes">
+                { i18n.t('enable_downvotes') }
               </label>
             </div>
           </div>
@@ -103,12 +106,13 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <div class="form-check">
               <input
                 class="form-check-input"
+                id="create-site-enable-nsfw"
                 type="checkbox"
                 checked={this.state.siteForm.enable_nsfw}
                 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
               />
-              <label class="form-check-label">
-                <T i18nKey="enable_nsfw">#</T>
+              <label class="form-check-label" for="create-site-enable-nsfw">
+                { i18n.t('enable_nsfw') }
               </label>
             </div>
           </div>
@@ -118,6 +122,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             <div class="form-check">
               <input
                 class="form-check-input"
+                id="create-site-open-registration"
                 type="checkbox"
                 checked={this.state.siteForm.open_registration}
                 onChange={linkEvent(
@@ -125,8 +130,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                   this.handleSiteOpenRegistrationChange
                 )}
               />
-              <label class="form-check-label">
-                <T i18nKey="open_registration">#</T>
+              <label class="form-check-label" for="create-site-open-registration">
+                { i18n.t('open_registration') }
               </label>
             </div>
           </div>
@@ -150,7 +155,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 class="btn btn-secondary"
                 onClick={linkEvent(this, this.handleCancel)}
               >
-                <T i18nKey="cancel">#</T>
+                { i18n.t('cancel') }
               </button>
             )}
           </div>

ui/src/components/sort-select.tsx

@@ -1,6 +1,6 @@
 import { Component, linkEvent } from 'inferno';
 import { SortType } from '../interfaces';
-
+import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
 
 interface SortSelectProps {
@@ -31,31 +31,31 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
         class="custom-select custom-select-sm w-auto"
       >
         <option disabled>
-          <T i18nKey="sort_type">#</T>
+          { i18n.t('sort_type') }
         </option>
         {!this.props.hideHot && (
           <option value={SortType.Hot}>
-            <T i18nKey="hot">#</T>
+            { i18n.t('hot') }
           </option>
         )}
         <option value={SortType.New}>
-          <T i18nKey="new">#</T>
+          { i18n.t('new') }
         </option>
         <option disabled>─────</option>
         <option value={SortType.TopDay}>
-          <T i18nKey="top_day">#</T>
+          { i18n.t('top_day') }
         </option>
         <option value={SortType.TopWeek}>
-          <T i18nKey="week">#</T>
+          { i18n.t('week') }
         </option>
         <option value={SortType.TopMonth}>
-          <T i18nKey="month">#</T>
+          { i18n.t('month') }
         </option>
         <option value={SortType.TopYear}>
-          <T i18nKey="year">#</T>
+          { i18n.t('year') }
         </option>
         <option value={SortType.TopAll}>
-          <T i18nKey="all">#</T>
+          { i18n.t('all') }
         </option>
       </select>
     );

ui/src/components/sponsors.tsx

@@ -36,7 +36,7 @@ export class Sponsors extends Component<any, any> {
     return (
       <div>
         <h5>
-          <T i18nKey="sponsors_of_lemmy">#</T>
+          { i18n.t('sponsors_of_lemmy') }
         </h5>
         <p>
           <T i18nKey="sponsor_message">
@@ -44,7 +44,7 @@ export class Sponsors extends Component<any, any> {
           </T>
         </p>
         <a class="btn btn-secondary" href="https://www.patreon.com/dessalines">
-          <T i18nKey="support_on_patreon">#</T>
+          { i18n.t('support_on_patreon') }
         </a>
       </div>
     );
@@ -53,10 +53,10 @@ export class Sponsors extends Component<any, any> {
     return (
       <div class="container">
         <h5>
-          <T i18nKey="sponsors">#</T>
+          { i18n.t('sponsors') }
         </h5>
         <p>
-          <T i18nKey="general_sponsors">#</T>
+          { i18n.t('general_sponsors') }
         </p>
         <div class="row card-columns">
           {highlighted.map(s => (
@@ -78,14 +78,14 @@ export class Sponsors extends Component<any, any> {
     return (
       <div>
         <h5>
-          <T i18nKey="crypto">#</T>
+          { i18n.t('crypto') }
         </h5>
         <div class="table-responsive">
           <table class="table table-hover text-center">
             <tbody>
               <tr>
                 <td>
-                  <T i18nKey="bitcoin">#</T>
+                  { i18n.t('bitcoin') }
                 </td>
                 <td>
                   <code>1Hefs7miXS5ff5Ck5xvmjKjXf5242KzRtK</code>
@@ -93,7 +93,7 @@ export class Sponsors extends Component<any, any> {
               </tr>
               <tr>
                 <td>
-                  <T i18nKey="ethereum">#</T>
+                  { i18n.t('ethereum') }
                 </td>
                 <td>
                   <code>0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01</code>
@@ -101,7 +101,7 @@ export class Sponsors extends Component<any, any> {
               </tr>
               <tr>
                 <td>
-                  <T i18nKey="monero">#</T>
+                  { i18n.t('monero') }
                 </td>
                 <td>
                   <code>

ui/src/components/user.tsx

@@ -196,11 +196,11 @@ export class User extends Component<any, UserState> {
     return (
       <div class="container">
         {this.state.loading ? (
-          <h5>
+          <p class="text-center">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </h5>
+          </p>
         ) : (
           <div class="row">
             <div class="col-12 col-md-8">
@@ -243,19 +243,19 @@ export class User extends Component<any, UserState> {
           class="custom-select custom-select-sm w-auto"
         >
           <option disabled>
-            <T i18nKey="view">#</T>
+            { i18n.t('view') }
           </option>
           <option value={View.Overview}>
-            <T i18nKey="overview">#</T>
+            { i18n.t('overview') }
           </option>
           <option value={View.Comments}>
-            <T i18nKey="comments">#</T>
+            { i18n.t('comments') }
           </option>
           <option value={View.Posts}>
-            <T i18nKey="posts">#</T>
+            { i18n.t('posts') }
           </option>
           <option value={View.Saved}>
-            <T i18nKey="saved">#</T>
+            { i18n.t('saved') }
           </option>
         </select>
         <span class="ml-2">
@@ -362,7 +362,7 @@ export class User extends Component<any, UserState> {
                 <li className="list-inline-item">{user.name}</li>
                 {user.banned && (
                   <li className="list-inline-item badge badge-danger">
-                    <T i18nKey="banned">#</T>
+                    { i18n.t('banned') }
                   </li>
                 )}
               </ul>
@@ -415,7 +415,7 @@ export class User extends Component<any, UserState> {
                 class="btn btn-block btn-secondary mt-3"
                 onClick={linkEvent(this, this.handleLogoutClick)}
               >
-                <T i18nKey="logout">#</T>
+                { i18n.t('logout') }
               </button>
             )}
           </div>
@@ -430,12 +430,12 @@ export class User extends Component<any, UserState> {
         <div class="card border-secondary mb-3">
           <div class="card-body">
             <h5>
-              <T i18nKey="settings">#</T>
+              { i18n.t('settings') }
             </h5>
             <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
               <div class="form-group">
                 <label>
-                  <T i18nKey="avatar">#</T>
+                  { i18n.t('avatar') }
                 </label>
                 <form class="d-inline">
                   <label
@@ -444,7 +444,7 @@ export class User extends Component<any, UserState> {
                   >
                     {!this.state.userSettingsForm.avatar ? (
                       <span class="btn btn-sm btn-secondary">
-                        <T i18nKey="upload_avatar">#</T>
+                        { i18n.t('upload_avatar') }
                       </span>
                     ) : (
                       <img
@@ -468,7 +468,7 @@ export class User extends Component<any, UserState> {
               </div>
               <div class="form-group">
                 <label>
-                  <T i18nKey="language">#</T>
+                  { i18n.t('language') }
                 </label>
                 <select
                   value={this.state.userSettingsForm.lang}
@@ -476,10 +476,10 @@ export class User extends Component<any, UserState> {
                   class="ml-2 custom-select custom-select-sm w-auto"
                 >
                   <option disabled>
-                    <T i18nKey="language">#</T>
+                    { i18n.t('language') }
                   </option>
                   <option value="browser">
-                    <T i18nKey="browser_default">#</T>
+                    { i18n.t('browser_default') }
                   </option>
                   <option disabled>──</option>
                   {languages.map(lang => (
@@ -489,7 +489,7 @@ export class User extends Component<any, UserState> {
               </div>
               <div class="form-group">
                 <label>
-                  <T i18nKey="theme">#</T>
+                  { i18n.t('theme') }
                 </label>
                 <select
                   value={this.state.userSettingsForm.theme}
@@ -497,7 +497,7 @@ export class User extends Component<any, UserState> {
                   class="ml-2 custom-select custom-select-sm w-auto"
                 >
                   <option disabled>
-                    <T i18nKey="theme">#</T>
+                    { i18n.t('theme') }
                   </option>
                   {themes.map(theme => (
                     <option value={theme}>{theme}</option>
@@ -527,12 +527,13 @@ export class User extends Component<any, UserState> {
                 />
               </form>
               <div class="form-group row">
-                <label class="col-lg-3 col-form-label">
-                  <T i18nKey="email">#</T>
+                <label class="col-lg-3 col-form-label" for="user-email">
+                  { i18n.t('email') }
                 </label>
                 <div class="col-lg-9">
                   <input
                     type="email"
+                    id="user-email"
                     class="form-control"
                     placeholder={i18n.t('optional')}
                     value={this.state.userSettingsForm.email}
@@ -545,12 +546,13 @@ export class User extends Component<any, UserState> {
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-lg-5 col-form-label">
-                  <T i18nKey="new_password">#</T>
+                <label class="col-lg-5 col-form-label" for="user-password">
+                  { i18n.t('new_password') }
                 </label>
                 <div class="col-lg-7">
                   <input
                     type="password"
+                    id="user-password"
                     class="form-control"
                     value={this.state.userSettingsForm.new_password}
                     onInput={linkEvent(
@@ -561,12 +563,13 @@ export class User extends Component<any, UserState> {
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-lg-5 col-form-label">
-                  <T i18nKey="verify_password">#</T>
+                <label class="col-lg-5 col-form-label" for="user-verify-password">
+                  { i18n.t('verify_password') }
                 </label>
                 <div class="col-lg-7">
                   <input
                     type="password"
+                    id="user-verify-password"
                     class="form-control"
                     value={this.state.userSettingsForm.new_password_verify}
                     onInput={linkEvent(
@@ -577,12 +580,13 @@ export class User extends Component<any, UserState> {
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-lg-5 col-form-label">
-                  <T i18nKey="old_password">#</T>
+                <label class="col-lg-5 col-form-label" for="user-old-password">
+                  { i18n.t('old_password') }
                 </label>
                 <div class="col-lg-7">
                   <input
                     type="password"
+                    id="user-old-password"
                     class="form-control"
                     value={this.state.userSettingsForm.old_password}
                     onInput={linkEvent(
@@ -597,6 +601,7 @@ export class User extends Component<any, UserState> {
                   <div class="form-check">
                     <input
                       class="form-check-input"
+                      id="user-show-nsfw"
                       type="checkbox"
                       checked={this.state.userSettingsForm.show_nsfw}
                       onChange={linkEvent(
@@ -604,8 +609,8 @@ export class User extends Component<any, UserState> {
                         this.handleUserSettingsShowNsfwChange
                       )}
                     />
-                    <label class="form-check-label">
-                      <T i18nKey="show_nsfw">#</T>
+                    <label class="form-check-label" for="user-show-nsfw">
+                      { i18n.t('show_nsfw') }
                     </label>
                   </div>
                 </div>
@@ -614,6 +619,7 @@ export class User extends Component<any, UserState> {
                 <div class="form-check">
                   <input
                     class="form-check-input"
+                    id="user-show-avatars"
                     type="checkbox"
                     checked={this.state.userSettingsForm.show_avatars}
                     onChange={linkEvent(
@@ -621,8 +627,8 @@ export class User extends Component<any, UserState> {
                       this.handleUserSettingsShowAvatarsChange
                     )}
                   />
-                  <label class="form-check-label">
-                    <T i18nKey="show_avatars">#</T>
+                  <label class="form-check-label" for="user-show-avatars">
+                    { i18n.t('show_avatars') }
                   </label>
                 </div>
               </div>
@@ -630,6 +636,7 @@ export class User extends Component<any, UserState> {
                 <div class="form-check">
                   <input
                     class="form-check-input"
+                    id="user-send-notifications-to-email"
                     type="checkbox"
                     disabled={!this.state.user.email}
                     checked={
@@ -640,8 +647,8 @@ export class User extends Component<any, UserState> {
                       this.handleUserSettingsSendNotificationsToEmailChange
                     )}
                   />
-                  <label class="form-check-label">
-                    <T i18nKey="send_notifications_to_email">#</T>
+                  <label class="form-check-label" for="user-send-notifications-to-email">
+                    { i18n.t('send_notifications_to_email') }
                   </label>
                 </div>
               </div>
@@ -665,12 +672,12 @@ export class User extends Component<any, UserState> {
                     this.handleDeleteAccountShowConfirmToggle
                   )}
                 >
-                  <T i18nKey="delete_account">#</T>
+                  { i18n.t('delete_account') }
                 </button>
                 {this.state.deleteAccountShowConfirm && (
                   <>
                     <div class="my-2 alert alert-danger" role="alert">
-                      <T i18nKey="delete_account_confirm">#</T>
+                      { i18n.t('delete_account_confirm') }
                     </div>
                     <input
                       type="password"
@@ -701,7 +708,7 @@ export class User extends Component<any, UserState> {
                         this.handleDeleteAccountShowConfirmToggle
                       )}
                     >
-                      <T i18nKey="cancel">#</T>
+                      { i18n.t('cancel') }
                     </button>
                   </>
                 )}
@@ -720,7 +727,7 @@ export class User extends Component<any, UserState> {
           <div class="card border-secondary mb-3">
             <div class="card-body">
               <h5>
-                <T i18nKey="moderates">#</T>
+                { i18n.t('moderates') }
               </h5>
               <ul class="list-unstyled mb-0">
                 {this.state.moderates.map(community => (
@@ -745,7 +752,7 @@ export class User extends Component<any, UserState> {
           <div class="card border-secondary mb-3">
             <div class="card-body">
               <h5>
-                <T i18nKey="subscribed">#</T>
+                { i18n.t('subscribed') }
               </h5>
               <ul class="list-unstyled mb-0">
                 {this.state.follows.map(community => (
@@ -778,7 +785,7 @@ export class User extends Component<any, UserState> {
           class="btn btn-sm btn-secondary"
           onClick={linkEvent(this, this.nextPage)}
         >
-          <T i18nKey="next">#</T>
+          { i18n.t('next') }
         </button>
       </div>
     );

ui/src/translations/en.ts

@@ -213,5 +213,7 @@ export const en = {
     email_already_exists: 'Email already exists.',
     couldnt_update_user: "Couldn't update user.",
     system_err_login: 'System error. Try logging out and back in.',
+    time: 'Time',
+    action: 'Action'
   },
 };