component classes v2

[lemmy-ui.git] / src / shared / components / community / community-form.tsx

diff --git a/src/shared/components/community/community-form.tsx b/src/shared/components/community/community-form.tsx
index 1d32f6f7660fbd0bf2c77c4bbaba133af6350b25..655a07522b8e31fa9baf952da19bf0a8b64e18c3 100644 (file)
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@@ -21,7 +21,7 @@ interface CommunityFormProps {
   onCancel?(): any;
   onUpsertCommunity(form: CreateCommunity | EditCommunity): void;
   enableNsfw?: boolean;
-  isLoading?: boolean;
+  loading?: boolean;
 }
 
 interface CommunityFormState {
@@ -85,10 +85,13 @@ export class CommunityForm extends Component<
 
   render() {
     return (
-      <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
+      <form
+        className="community-form"
+        onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
+      >
         <NavigationPrompt
           when={
-            !this.props.isLoading &&
+            !this.props.loading &&
             !!(
               this.state.form.name ||
               this.state.form.title ||
@@ -98,14 +101,14 @@ export class CommunityForm extends Component<
           }
         />
         {!this.props.community_view && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label
               className="col-12 col-sm-2 col-form-label"
               htmlFor="community-name"
             >
               {i18n.t("name")}
               <span
-                className="position-absolute pointer unselectable ml-2 text-muted"
+                className="position-absolute pointer unselectable ms-2 text-muted"
                 data-tippy-content={i18n.t("name_explain")}
               >
                 <Icon icon="help-circle" classes="icon-inline" />
@@ -126,14 +129,14 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label
             className="col-12 col-sm-2 col-form-label"
             htmlFor="community-title"
           >
             {i18n.t("display_name")}
             <span
-              className="position-absolute pointer unselectable ml-2 text-muted"
+              className="position-absolute pointer unselectable ms-2 text-muted"
               data-tippy-content={i18n.t("display_name_explain")}
             >
               <Icon icon="help-circle" classes="icon-inline" />
@@ -152,8 +155,10 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
-          <label className="col-12 col-sm-2">{i18n.t("icon")}</label>
+        <div className="mb-3 row">
+          <label className="col-12 col-sm-2 col-form-label">
+            {i18n.t("icon")}
+          </label>
           <div className="col-12 col-sm-10">
             <ImageUploadForm
               uploadTitle={i18n.t("upload_icon")}
@@ -164,8 +169,10 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
-          <label className="col-12 col-sm-2">{i18n.t("banner")}</label>
+        <div className="mb-3 row">
+          <label className="col-12 col-sm-2 col-form-label">
+            {i18n.t("banner")}
+          </label>
           <div className="col-12 col-sm-10">
             <ImageUploadForm
               uploadTitle={i18n.t("upload_banner")}
@@ -175,7 +182,7 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
             {i18n.t("sidebar")}
           </label>
@@ -192,7 +199,7 @@ export class CommunityForm extends Component<
         </div>
 
         {this.props.enableNsfw && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <legend className="col-form-label col-sm-2 pt-0">
               {i18n.t("nsfw")}
             </legend>
@@ -209,7 +216,7 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <legend className="col-form-label col-6 pt-0">
             {i18n.t("only_mods_can_post_in_community")}
           </legend>
@@ -236,14 +243,14 @@ export class CommunityForm extends Component<
           multiple={true}
           onChange={this.handleDiscussionLanguageChange}
         />
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <button
               type="submit"
-              className="btn btn-secondary mr-2"
-              disabled={this.props.isLoading}
+              className="btn btn-secondary me-2"
+              disabled={this.props.loading}
             >
-              {this.props.isLoading ? (
+              {this.props.loading ? (
                 <Spinner />
               ) : this.props.community_view ? (
                 capitalizeFirstLetter(i18n.t("save"))