Fix BEM

src/shared/components/app/error-page.tsx

@@ -16,7 +16,7 @@ export class ErrorPage extends Component<any, any> {
     const { errorPageData } = this.isoData;
 
     return (
-      <div className="container-lg text-center">
+      <div className="app-err__root container-lg text-center">
         <h1>
           {errorPageData
             ? i18n.t("error_page_title")

src/shared/components/comment/comment-form.tsx

@@ -41,7 +41,11 @@ export class CommentForm extends Component<CommentFormProps, any> {
         : undefined;
 
     return (
-      <div className={["mb-3", this.props.containerClass].join(" ")}>
+      <div
+        className={["comment-form__root", "mb-3", this.props.containerClass].join(
+          " "
+        )}
+      >
         {UserService.Instance.myUserInfo ? (
           <MarkdownTextArea
             initialContent={initialContent}

src/shared/components/comment/comment-report.tsx

@@ -70,7 +70,7 @@ export class CommentReport extends Component<
     };
 
     return (
-      <div>
+      <div className="comment-report__root">
         <CommentNode
           node={node}
           viewType={CommentViewType.Flat}
@@ -101,14 +101,14 @@ export class CommentReport extends Component<
           onCreateComment={() => Promise.resolve({ state: "empty" })}
           onEditComment={() => Promise.resolve({ state: "empty" })}
         />
-        <div>
+        <div className="comment-report__person">
           {i18n.t("reporter")}: <PersonListing person={r.creator} />
         </div>
-        <div>
+        <div className="comment-report__reason">
           {i18n.t("reason")}: {r.comment_report.reason}
         </div>
         {r.resolver && (
-          <div>
+          <div className="comment-report__resolverwrap">
             {r.comment_report.resolved ? (
               <T i18nKey="resolved_by">
                 #

src/shared/components/common/badges.tsx

@@ -26,7 +26,7 @@ const isSiteAggregates = (
 
 export const Badges = ({ counts, communityId }: BadgesProps) => {
   return (
-    <ul className="my-1 list-inline">
+    <ul className="badges__root my-1 list-inline">
       <li
         className="list-inline-item badge badge-secondary pointer"
         data-tippy-content={i18n.t("active_users_in_the_last_day", {

src/shared/components/common/banner-icon-header.tsx

@@ -15,7 +15,7 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
     const banner = this.props.banner;
     const icon = this.props.icon;
     return (
-      <div className="position-relative mb-2">
+      <div className="banner-icon-header__root position-relative mb-2">
         {banner && <PictrsImage src={banner} banner alt="" />}
         {icon && (
           <PictrsImage

src/shared/components/common/comment-sort-select.tsx

@@ -40,7 +40,7 @@ export class CommentSortSelect extends Component<
           name={this.id}
           value={this.state.sort}
           onChange={linkEvent(this, this.handleSortChange)}
-          className="custom-select w-auto mr-2 mb-2"
+          className="comment-sort-select__root custom-select w-auto mr-2 mb-2"
           aria-label={i18n.t("sort_type")}
         >
           <option disabled aria-hidden="true">

src/shared/components/common/data-type-select.tsx

@@ -31,7 +31,7 @@ export class DataTypeSelect extends Component<
 
   render() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="data-type-select__root btn-group btn-group-toggle flex-wrap mb-2">
         <label
           className={`pointer btn btn-outline-secondary 
             ${this.state.type_ == DataType.Post && "active"}

src/shared/components/common/emoji-picker.tsx

@@ -27,7 +27,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     return (
       <span>
         <button
-          className="btn btn-sm text-muted"
+          className="emoji-picker__root btn btn-sm text-muted"
           data-tippy-content={i18n.t("emoji")}
           aria-label={i18n.t("emoji")}
           disabled={this.props.disabled}

src/shared/components/common/image-upload-form.tsx

@@ -32,7 +32,7 @@ export class ImageUploadForm extends Component<
 
   render() {
     return (
-      <form className="d-inline">
+      <form className="img-upload-form__root d-inline">
         <label
           htmlFor={this.id}
           className="pointer text-muted small font-weight-bold"

src/shared/components/common/language-select.tsx

@@ -51,13 +51,14 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
     ) : (
       <div>
         {this.props.multiple && this.props.showLanguageWarning && (
-          <div className="alert alert-warning" role="alert">
+          <div className="lang-select__root alert alert-warning" role="alert">
             {i18n.t("undetermined_language_warning")}
           </div>
         )}
         <div className="form-group row">
           <label
             className={classNames(
+              "lang-select__plural",
               "col-form-label",
               `col-sm-${this.props.multiple ? 3 : 2}`
             )}
@@ -67,6 +68,7 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
           </label>
           <div
             className={classNames(
+              "lang-select__deselect",
               "input-group",
               `col-sm-${this.props.multiple ? 9 : 10}`
             )}

src/shared/components/common/listing-type-select.tsx

@@ -39,11 +39,11 @@ export class ListingTypeSelect extends Component<
 
   render() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="listing-type-select__root btn-group btn-group-toggle flex-wrap mb-2">
         {this.props.showSubscribed && (
           <label
             title={i18n.t("subscribed_description")}
-            className={`btn btn-outline-secondary 
+            className={`listing-type-select__label-subscribed btn btn-outline-secondary
             ${this.state.type_ == "Subscribed" && "active"}
             ${!UserService.Instance.myUserInfo ? "disabled" : "pointer"}
           `}
@@ -62,7 +62,7 @@ export class ListingTypeSelect extends Component<
         {this.props.showLocal && (
           <label
             title={i18n.t("local_description")}
-            className={`pointer btn btn-outline-secondary ${
+            className={`listing-type-select__label-local pointer btn btn-outline-secondary ${
               this.state.type_ == "Local" && "active"
             }`}
           >
@@ -78,7 +78,7 @@ export class ListingTypeSelect extends Component<
         )}
         <label
           title={i18n.t("all_description")}
-          className={`pointer btn btn-outline-secondary ${
+          className={`listing-type-select__label-show-all pointer btn btn-outline-secondary ${
             (this.state.type_ == "All" && "active") ||
             (!this.props.showLocal && this.state.type_ == "Local" && "active")
           }`}

src/shared/components/common/markdown-textarea.tsx

@@ -136,18 +136,22 @@ export class MarkdownTextArea extends Component<
     //   message={i18n.t("block_leaving")}
     // />
     return (
-      <form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
+      <form
+        id={this.formId}
+        className="markdown-textarea__root"
+        onSubmit={linkEvent(this, this.handleSubmit)}
+      >
         <NavigationPrompt
           when={
             !this.props.hideNavigationWarnings &&
             !!this.state.content &&
             !this.state.submitted
           }
         />
-        <div className="form-group row">
-          <div className="col-12">
-            <div className="rounded bg-light border border-light">
-              <div className="d-flex flex-wrap border-bottom border-light">
+        <div className="markdown-textarea__outer form-group row">
+          <div className="markdown-textarea__col1 col-12">
+            <div className="markdown-textarea__inner rounded bg-light border border-light">
+              <div className="markdown-textarea__btns d-flex flex-wrap border-bottom border-light">
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}
                 {this.getFormatButton("link", this.handleInsertLink)}
@@ -210,7 +214,7 @@ export class MarkdownTextArea extends Component<
                 <textarea
                   id={this.id}
                   className={classNames(
-                    "form-control border-0 rounded-top-0 rounded-bottom",
+                    "markdown-textarea__main form-control border-0 rounded-top-0 rounded-bottom",
                     {
                       "d-none": this.state.previewMode,
                     }
@@ -254,7 +258,7 @@ export class MarkdownTextArea extends Component<
             </div>
           </div>
 
-          <div className="col-12 d-flex align-items-center flex-wrap mt-2">
+          <div className="markdown-textarea__lang-select-wrap col-12 d-flex align-items-center flex-wrap mt-2">
             {this.props.showLanguage && (
               <LanguageSelect
                 iconVersion
@@ -274,7 +278,7 @@ export class MarkdownTextArea extends Component<
             {this.props.buttonTitle && (
               <button
                 type="submit"
-                className="btn btn-sm btn-secondary ml-2"
+                className="markdown-textarea__btn-submit btn btn-sm btn-secondary ml-2"
                 disabled={this.isDisabled}
               >
                 {this.state.loading ? (
@@ -287,15 +291,15 @@ export class MarkdownTextArea extends Component<
             {this.props.replyType && (
               <button
                 type="button"
-                className="btn btn-sm btn-secondary ml-2"
+                className="markdown-textarea__btn-cancel btn btn-sm btn-secondary ml-2"
                 onClick={linkEvent(this, this.handleReplyCancel)}
               >
                 {i18n.t("cancel")}
               </button>
             )}
             {this.state.content && (
               <button
-                className={`btn btn-sm btn-secondary ml-2 ${
+                className={`markdown-textarea__btn-switchmode btn btn-sm btn-secondary ml-2 ${
                   this.state.previewMode && "active"
                 }`}
                 onClick={linkEvent(this, this.handlePreviewToggle)}
@@ -331,7 +335,7 @@ export class MarkdownTextArea extends Component<
 
     return (
       <button
-        className="btn btn-sm text-muted"
+        className="markdown-textarea__btn-format btn btn-sm text-muted"
         data-tippy-content={i18n.t(type)}
         aria-label={i18n.t(type)}
         onClick={linkEvent(this, handleClick)}

src/shared/components/common/moment-time.tsx

@@ -36,7 +36,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
       return (
         <span
           data-tippy-content={this.createdAndModifiedTimes()}
-          className="font-italics pointer unselectable"
+          className="moment-time__root font-italics pointer unselectable"
         >
           <Icon icon="edit-2" classes="icon-inline mr-1" />
           {moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
@@ -46,7 +46,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
       const published = this.props.published;
       return (
         <span
-          className="pointer unselectable"
+          className="moment-time__root pointer unselectable"
           data-tippy-content={this.format(published)}
         >
           {moment.utc(published).fromNow(!this.props.showAgo)}

src/shared/components/common/paginator.tsx

@@ -12,7 +12,7 @@ export class Paginator extends Component<PaginatorProps, any> {
   }
   render() {
     return (
-      <div className="my-2">
+      <div className="paginator__root my-2">
         <button
           className="btn btn-secondary mr-2"
           disabled={this.props.page == 1}

src/shared/components/common/pictrs-image.tsx

@@ -22,7 +22,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
 
   render() {
     return (
-      <picture className="d-inline-block overflow-hidden">
+      <picture className="pictrs-image__root d-inline-block overflow-hidden">
         <source srcSet={this.src("webp")} type="image/webp" />
         <source srcSet={this.props.src} />
         <source srcSet={this.src("jpg")} type="image/jpeg" />

src/shared/components/common/registration-application.tsx

@@ -58,7 +58,7 @@ export class RegistrationApplication extends Component<
     const accepted = a.creator_local_user.accepted_application;
 
     return (
-      <div>
+      <div className="app-registration__root">
         <div>
           {i18n.t("applicant")}: <PersonListing person={a.creator} />
         </div>
@@ -96,7 +96,7 @@ export class RegistrationApplication extends Component<
         )}
 
         {this.state.denyExpanded && (
-          <div className="form-group row">
+          <div className="app-registration__approval-wrap form-group row">
             <label className="col-sm-2 col-form-label">
               {i18n.t("deny_reason")}
             </label>
@@ -113,7 +113,7 @@ export class RegistrationApplication extends Component<
         )}
         {(!ra.admin_id || (ra.admin_id && !accepted)) && (
           <button
-            className="btn btn-secondary mr-2 my-2"
+            className="app-registration__btn-approve btn btn-secondary mr-2 my-2"
             onClick={linkEvent(this, this.handleApprove)}
             aria-label={i18n.t("approve")}
           >
@@ -122,7 +122,7 @@ export class RegistrationApplication extends Component<
         )}
         {(!ra.admin_id || (ra.admin_id && accepted)) && (
           <button
-            className="btn btn-secondary mr-2"
+            className="app-registration__btn-deny btn btn-secondary mr-2"
             onClick={linkEvent(this, this.handleDeny)}
             aria-label={i18n.t("deny")}
           >

src/shared/components/common/searchable-select.tsx

@@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
     const { searchText, selectedIndex, loadingEllipses } = this.state;
 
     return (
-      <div className="dropdown">
+      <div className="searchable-select__root dropdown">
         <button
           id={id}
           type="button"

src/shared/components/common/sort-select.tsx

@@ -39,7 +39,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           name={this.id}
           value={this.state.sort}
           onChange={linkEvent(this, this.handleSortChange)}
-          className="custom-select w-auto mr-2 mb-2"
+          className="sort-select__root custom-select w-auto mr-2 mb-2"
           aria-label={i18n.t("sort_type")}
         >
           <option disabled aria-hidden="true">

src/shared/components/common/tabs.tsx

@@ -30,7 +30,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
   render() {
     return (
       <div>
-        <ul className="nav nav-tabs mb-2">
+        <ul className="tabs__root nav nav-tabs mb-2">
           {this.props.tabs.map(({ key, label }) => (
             <li key={key} className="nav-item">
               <button