From 8f132f67fa83343ed1b4d0e2b6366fa3e2138100 Mon Sep 17 00:00:00 2001
From: Dessalines <dessalines@users.noreply.github.com>
Date: Sat, 18 Sep 2021 16:40:59 -0400
Subject: [PATCH] Fix up post, profile and community forms. Fixes #409 (#423)

---
 src/shared/components/app/navbar.tsx          |   4 +-
 .../components/common/image-upload-form.tsx   |   2 +-
 .../components/community/community-form.tsx   |  72 ++++---
 src/shared/components/person/settings.tsx     | 196 ++++++++++--------
 src/shared/components/post/post-form.tsx      |   8 +-
 src/shared/utils.ts                           |   4 +-
 6 files changed, 154 insertions(+), 132 deletions(-)

diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 6f204691..96812852 100644
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -20,6 +20,7 @@ import { i18n } from "../../i18next";
 import { UserService, WebSocketService } from "../../services";
 import {
   authField,
+  donateLemmyUrl,
   fetchLimit,
   getLanguage,
   isBrowser,
@@ -28,7 +29,6 @@ import {
   numToSI,
   setTheme,
   showAvatars,
-  supportLemmyUrl,
   toast,
   wsClient,
   wsJsonToRes,
@@ -241,7 +241,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 <a
                   className="nav-link"
                   title={i18n.t("support_lemmy")}
-                  href={supportLemmyUrl}
+                  href={donateLemmyUrl}
                 >
                   <Icon icon="heart" classes="small" />
                 </a>
diff --git a/src/shared/components/common/image-upload-form.tsx b/src/shared/components/common/image-upload-form.tsx
index a090bc89..5e5f1e09 100644
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@@ -36,7 +36,7 @@ export class ImageUploadForm extends Component<
       <form class="d-inline">
         <label
           htmlFor={this.id}
-          class="pointer ml-4 text-muted small font-weight-bold"
+          class="pointer text-muted small font-weight-bold"
         >
           {!this.props.imageSrc ? (
             <span class="btn btn-secondary">{this.props.uploadTitle}</span>
diff --git a/src/shared/components/community/community-form.tsx b/src/shared/components/community/community-form.tsx
index 45cd5ec4..9de05bf8 100644
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@@ -121,16 +121,19 @@ export class CommunityForm extends Component<
         <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
           {!this.props.community_view && (
             <div class="form-group row">
-              <label class="col-12 col-form-label" htmlFor="community-name">
+              <label
+                class="col-12 col-sm-2 col-form-label"
+                htmlFor="community-name"
+              >
                 {i18n.t("name")}
                 <span
-                  class="pointer unselectable ml-2 text-muted"
+                  class="position-absolute pointer unselectable ml-2 text-muted"
                   data-tippy-content={i18n.t("name_explain")}
                 >
                   <Icon icon="help-circle" classes="icon-inline" />
                 </span>
               </label>
-              <div class="col-12">
+              <div class="col-12 col-sm-10">
                 <input
                   type="text"
                   id="community-name"
@@ -146,16 +149,19 @@ export class CommunityForm extends Component<
             </div>
           )}
           <div class="form-group row">
-            <label class="col-12 col-form-label" htmlFor="community-title">
+            <label
+              class="col-12 col-sm-2 col-form-label"
+              htmlFor="community-title"
+            >
               {i18n.t("display_name")}
               <span
-                class="pointer unselectable ml-2 text-muted"
+                class="position-absolute pointer unselectable ml-2 text-muted"
                 data-tippy-content={i18n.t("display_name_explain")}
               >
                 <Icon icon="help-circle" classes="icon-inline" />
               </span>
             </label>
-            <div class="col-12">
+            <div class="col-12 col-sm-10">
               <input
                 type="text"
                 id="community-title"
@@ -168,30 +174,34 @@ export class CommunityForm extends Component<
               />
             </div>
           </div>
-          <div class="form-group">
-            <label>{i18n.t("icon")}</label>
-            <ImageUploadForm
-              uploadTitle={i18n.t("upload_icon")}
-              imageSrc={this.state.communityForm.icon}
-              onUpload={this.handleIconUpload}
-              onRemove={this.handleIconRemove}
-              rounded
-            />
-          </div>
-          <div class="form-group">
-            <label>{i18n.t("banner")}</label>
-            <ImageUploadForm
-              uploadTitle={i18n.t("upload_banner")}
-              imageSrc={this.state.communityForm.banner}
-              onUpload={this.handleBannerUpload}
-              onRemove={this.handleBannerRemove}
-            />
+          <div class="form-group row">
+            <label class="col-12 col-sm-2">{i18n.t("icon")}</label>
+            <div class="col-12 col-sm-10">
+              <ImageUploadForm
+                uploadTitle={i18n.t("upload_icon")}
+                imageSrc={this.state.communityForm.icon}
+                onUpload={this.handleIconUpload}
+                onRemove={this.handleIconRemove}
+                rounded
+              />
+            </div>
           </div>
           <div class="form-group row">
-            <label class="col-12 col-form-label" htmlFor={this.id}>
+            <label class="col-12 col-sm-2">{i18n.t("banner")}</label>
+            <div class="col-12 col-sm-10">
+              <ImageUploadForm
+                uploadTitle={i18n.t("upload_banner")}
+                imageSrc={this.state.communityForm.banner}
+                onUpload={this.handleBannerUpload}
+                onRemove={this.handleBannerRemove}
+              />
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
               {i18n.t("sidebar")}
             </label>
-            <div class="col-12">
+            <div class="col-12 col-sm-10">
               <MarkdownTextArea
                 initialContent={this.state.communityForm.description}
                 onContentChange={this.handleCommunityDescriptionChange}
@@ -201,18 +211,18 @@ export class CommunityForm extends Component<
 
           {this.props.enableNsfw && (
             <div class="form-group row">
-              <div class="col-12">
+              <legend class="col-form-label col-sm-2 pt-0">
+                {i18n.t("nsfw")}
+              </legend>
+              <div class="col-10">
                 <div class="form-check">
                   <input
-                    class="form-check-input"
+                    class="form-check-input position-static"
                     id="community-nsfw"
                     type="checkbox"
                     checked={this.state.communityForm.nsfw}
                     onChange={linkEvent(this, this.handleCommunityNsfwChange)}
                   />
-                  <label class="form-check-label" htmlFor="community-nsfw">
-                    {i18n.t("nsfw")}
-                  </label>
                 </div>
               </div>
             </div>
diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 955cc301..0ab7ef62 100644
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -227,10 +227,10 @@ export class Settings extends Component<any, SettingsState> {
         <h5>{i18n.t("change_password")}</h5>
         <form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
           <div class="form-group row">
-            <label class="col-lg-5 col-form-label" htmlFor="user-password">
+            <label class="col-sm-5 col-form-label" htmlFor="user-password">
               {i18n.t("new_password")}
             </label>
-            <div class="col-lg-7">
+            <div class="col-sm-7">
               <input
                 type="password"
                 id="user-password"
@@ -244,12 +244,12 @@ export class Settings extends Component<any, SettingsState> {
           </div>
           <div class="form-group row">
             <label
-              class="col-lg-5 col-form-label"
+              class="col-sm-5 col-form-label"
               htmlFor="user-verify-password"
             >
               {i18n.t("verify_password")}
             </label>
-            <div class="col-lg-7">
+            <div class="col-sm-7">
               <input
                 type="password"
                 id="user-verify-password"
@@ -262,10 +262,10 @@ export class Settings extends Component<any, SettingsState> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-lg-5 col-form-label" htmlFor="user-old-password">
+            <label class="col-sm-5 col-form-label" htmlFor="user-old-password">
               {i18n.t("old_password")}
             </label>
-            <div class="col-lg-7">
+            <div class="col-sm-7">
               <input
                 type="password"
                 id="user-old-password"
@@ -417,10 +417,10 @@ export class Settings extends Component<any, SettingsState> {
         <h5>{i18n.t("settings")}</h5>
         <form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
           <div class="form-group row">
-            <label class="col-lg-5 col-form-label" htmlFor="display-name">
+            <label class="col-sm-5 col-form-label" htmlFor="display-name">
               {i18n.t("display_name")}
             </label>
-            <div class="col-lg-7">
+            <div class="col-sm-7">
               <input
                 id="display-name"
                 type="text"
@@ -434,10 +434,10 @@ export class Settings extends Component<any, SettingsState> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-lg-3 col-form-label" htmlFor="user-bio">
+            <label class="col-sm-3 col-form-label" htmlFor="user-bio">
               {i18n.t("bio")}
             </label>
-            <div class="col-lg-9">
+            <div class="col-sm-9">
               <MarkdownTextArea
                 initialContent={this.state.saveUserSettingsForm.bio}
                 onContentChange={this.handleBioChange}
@@ -447,10 +447,10 @@ export class Settings extends Component<any, SettingsState> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-lg-3 col-form-label" htmlFor="user-email">
+            <label class="col-sm-3 col-form-label" htmlFor="user-email">
               {i18n.t("email")}
             </label>
-            <div class="col-lg-9">
+            <div class="col-sm-9">
               <input
                 type="email"
                 id="user-email"
@@ -463,12 +463,12 @@ export class Settings extends Component<any, SettingsState> {
             </div>
           </div>
           <div class="form-group row">
-            <label class="col-lg-5 col-form-label" htmlFor="matrix-user-id">
+            <label class="col-sm-5 col-form-label" htmlFor="matrix-user-id">
               <a href={elementUrl} rel="noopener">
                 {i18n.t("matrix_user_id")}
               </a>
             </label>
-            <div class="col-lg-7">
+            <div class="col-sm-7">
               <input
                 id="matrix-user-id"
                 type="text"
@@ -480,90 +480,102 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div class="form-group">
-            <label>{i18n.t("avatar")}</label>
-            <ImageUploadForm
-              uploadTitle={i18n.t("upload_avatar")}
-              imageSrc={this.state.saveUserSettingsForm.avatar}
-              onUpload={this.handleAvatarUpload}
-              onRemove={this.handleAvatarRemove}
-              rounded
-            />
+          <div class="form-group row">
+            <label class="col-sm-3">{i18n.t("avatar")}</label>
+            <div class="col-sm-9">
+              <ImageUploadForm
+                uploadTitle={i18n.t("upload_avatar")}
+                imageSrc={this.state.saveUserSettingsForm.avatar}
+                onUpload={this.handleAvatarUpload}
+                onRemove={this.handleAvatarRemove}
+                rounded
+              />
+            </div>
           </div>
-          <div class="form-group">
-            <label>{i18n.t("banner")}</label>
-            <ImageUploadForm
-              uploadTitle={i18n.t("upload_banner")}
-              imageSrc={this.state.saveUserSettingsForm.banner}
-              onUpload={this.handleBannerUpload}
-              onRemove={this.handleBannerRemove}
-            />
+          <div class="form-group row">
+            <label class="col-sm-3">{i18n.t("banner")}</label>
+            <div class="col-sm-9">
+              <ImageUploadForm
+                uploadTitle={i18n.t("upload_banner")}
+                imageSrc={this.state.saveUserSettingsForm.banner}
+                onUpload={this.handleBannerUpload}
+                onRemove={this.handleBannerRemove}
+              />
+            </div>
           </div>
-          <div class="form-group">
-            <label htmlFor="user-language">{i18n.t("language")}</label>
-            <select
-              id="user-language"
-              value={this.state.saveUserSettingsForm.lang}
-              onChange={linkEvent(this, this.handleLangChange)}
-              class="ml-2 custom-select w-auto"
-            >
-              <option disabled aria-hidden="true">
-                {i18n.t("language")}
-              </option>
-              <option value="browser">{i18n.t("browser_default")}</option>
-              <option disabled aria-hidden="true">
-                ──
-              </option>
-              {languages.sort().map(lang => (
-                <option value={lang.code}>
-                  {ISO6391.getNativeName(lang.code) || lang.code}
+          <div class="form-group row">
+            <label class="col-sm-3" htmlFor="user-language">
+              {i18n.t("language")}
+            </label>
+            <div class="col-sm-9">
+              <select
+                id="user-language"
+                value={this.state.saveUserSettingsForm.lang}
+                onChange={linkEvent(this, this.handleLangChange)}
+                class="custom-select w-auto"
+              >
+                <option disabled aria-hidden="true">
+                  {i18n.t("language")}
                 </option>
-              ))}
-            </select>
+                <option value="browser">{i18n.t("browser_default")}</option>
+                <option disabled aria-hidden="true">
+                  ──
+                </option>
+                {languages.sort().map(lang => (
+                  <option value={lang.code}>
+                    {ISO6391.getNativeName(lang.code) || lang.code}
+                  </option>
+                ))}
+              </select>
+            </div>
           </div>
-          <div class="form-group">
-            <label htmlFor="user-theme">{i18n.t("theme")}</label>
-            <select
-              id="user-theme"
-              value={this.state.saveUserSettingsForm.theme}
-              onChange={linkEvent(this, this.handleThemeChange)}
-              class="ml-2 custom-select w-auto"
-            >
-              <option disabled aria-hidden="true">
-                {i18n.t("theme")}
-              </option>
-              <option value="browser">{i18n.t("browser_default")}</option>
-              {themes.map(theme => (
-                <option value={theme}>{theme}</option>
-              ))}
-            </select>
-          </div>
-          <form className="form-group">
-            <label>
-              <div class="mr-2">{i18n.t("type")}</div>
+          <div class="form-group row">
+            <label class="col-sm-3" htmlFor="user-theme">
+              {i18n.t("theme")}
             </label>
-            <ListingTypeSelect
-              type_={
-                Object.values(ListingType)[
-                  this.state.saveUserSettingsForm.default_listing_type
-                ]
-              }
-              showLocal={showLocal(this.isoData)}
-              onChange={this.handleListingTypeChange}
-            />
+            <div class="col-sm-9">
+              <select
+                id="user-theme"
+                value={this.state.saveUserSettingsForm.theme}
+                onChange={linkEvent(this, this.handleThemeChange)}
+                class="custom-select w-auto"
+              >
+                <option disabled aria-hidden="true">
+                  {i18n.t("theme")}
+                </option>
+                <option value="browser">{i18n.t("browser_default")}</option>
+                {themes.map(theme => (
+                  <option value={theme}>{theme}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+          <form className="form-group row">
+            <label class="col-sm-3">{i18n.t("type")}</label>
+            <div class="col-sm-9">
+              <ListingTypeSelect
+                type_={
+                  Object.values(ListingType)[
+                    this.state.saveUserSettingsForm.default_listing_type
+                  ]
+                }
+                showLocal={showLocal(this.isoData)}
+                onChange={this.handleListingTypeChange}
+              />
+            </div>
           </form>
-          <form className="form-group">
-            <label>
-              <div class="mr-2">{i18n.t("sort_type")}</div>
-            </label>
-            <SortSelect
-              sort={
-                Object.values(SortType)[
-                  this.state.saveUserSettingsForm.default_sort_type
-                ]
-              }
-              onChange={this.handleSortTypeChange}
-            />
+          <form className="form-group row">
+            <label class="col-sm-3">{i18n.t("sort_type")}</label>
+            <div class="col-sm-9">
+              <SortSelect
+                sort={
+                  Object.values(SortType)[
+                    this.state.saveUserSettingsForm.default_sort_type
+                  ]
+                }
+                onChange={this.handleSortTypeChange}
+              />
+            </div>
           </form>
           {this.state.siteRes.site_view.site.enable_nsfw && (
             <div class="form-group">
diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index 10309fbb..7793dd72 100644
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@@ -310,18 +310,18 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           )}
           {this.props.enableNsfw && (
             <div class="form-group row">
+              <legend class="col-form-label col-sm-2 pt-0">
+                {i18n.t("nsfw")}
+              </legend>
               <div class="col-sm-10">
                 <div class="form-check">
                   <input
-                    class="form-check-input"
+                    class="form-check-input position-static"
                     id="post-nsfw"
                     type="checkbox"
                     checked={this.state.postForm.nsfw}
                     onChange={linkEvent(this, this.handlePostNsfwChange)}
                   />
-                  <label class="form-check-label" htmlFor="post-nsfw">
-                    {i18n.t("nsfw")}
-                  </label>
                 </div>
               </div>
             </div>
diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index f489d290..ed644c6f 100644
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@@ -92,13 +92,13 @@ export const favIconPngUrl = "/static/assets/icons/apple-touch-icon.png";
 // export const defaultFavIcon = `${window.location.protocol}//${window.location.host}${favIconPngUrl}`;
 export const repoUrl = "https://github.com/LemmyNet";
 export const joinLemmyUrl = "https://join-lemmy.org";
-export const supportLemmyUrl = `${joinLemmyUrl}/support`;
+export const donateLemmyUrl = `${joinLemmyUrl}/donate`;
 export const docsUrl = `${joinLemmyUrl}/docs/en/index.html`;
 export const helpGuideUrl = `${joinLemmyUrl}/docs/en/about/guide.html`; // TODO find a way to redirect to the non-en folder
 export const markdownHelpUrl = `${helpGuideUrl}#markdown-guide`;
 export const sortingHelpUrl = `${helpGuideUrl}#sorting`;
 export const archiveUrl = "https://archive.is";
-export const elementUrl = "https://element.io/";
+export const elementUrl = "https://element.io";
 
 export const postRefetchSeconds: number = 60 * 1000;
 export const fetchLimit = 20;