component classes v2

2024-11-22 22:49:33 +00:00 · 2023-06-20 14:46:16 -04:00 · 2023-06-20 14:46:16 -04:00 · 5033b024f6
parent 54b5d62df5
commit 5033b024f6
61 changed files with 109 additions and 70 deletions
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -415,7 +415,7 @@ br.big {
  -webkit-box-orient: vertical;
 }

-.emoji-picker {
+#emoji-picker {
  width: 100%;
 }

--- a/src/shared/components/app/error-page.tsx
+++ b/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="error-page container-lg text-center">
        <h1>
          {errorPageData
            ? i18n.t("error_page_title")
--- a/src/shared/components/app/footer.tsx
+++ b/src/shared/components/app/footer.tsx
@ -16,7 +16,7 @@ export class Footer extends Component<FooterProps, any> {

  render() {
    return (
-      <footer className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
+      <footer className="app-footer container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
        <div className="navbar-collapse">
          <ul className="navbar-nav ms-auto">
            {this.props.site?.version !== VERSION && (
--- a/src/shared/components/comment/comment-form.tsx
+++ b/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", "mb-3", this.props.containerClass].join(
+          " "
+        )}
+      >
        {UserService.Instance.myUserInfo ? (
          <MarkdownTextArea
            initialContent={initialContent}
--- a/src/shared/components/comment/comment-report.tsx
+++ b/src/shared/components/comment/comment-report.tsx
@ -70,7 +70,7 @@ export class CommentReport extends Component<
    };

    return (
-      <div>
+      <div className="comment-report">
        <CommentNode
          node={node}
          viewType={CommentViewType.Flat}
--- a/src/shared/components/common/badges.tsx
+++ b/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 my-1 list-inline">
      <li
        className="list-inline-item badge text-bg-secondary pointer"
        data-tippy-content={i18n.t("active_users_in_the_last_day", {
--- a/src/shared/components/common/banner-icon-header.tsx
+++ b/src/shared/components/common/banner-icon-header.tsx
@ -16,7 +16,7 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
    const icon = this.props.icon;
    return (
      (banner || icon) && (
-        <div className="position-relative mb-2">
+        <div className="banner-icon-header position-relative mb-2">
          {banner && <PictrsImage src={banner} banner alt="" />}
          {icon && (
            <PictrsImage
--- a/src/shared/components/common/comment-sort-select.tsx
+++ b/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="form-select d-inline-block w-auto me-2 mb-2"
+          className="sort-select form-select d-inline-block w-auto me-2 mb-2"
          aria-label={i18n.t("sort_type")}
        >
          <option disabled aria-hidden="true">
@ -52,7 +52,7 @@ export class CommentSortSelect extends Component<
          <option value={"Old"}>{i18n.t("old")}</option>
        </select>
        <a
-          className="text-muted"
+          className="sort-select-help text-muted"
          href={sortingHelpUrl}
          rel={relTags}
          title={i18n.t("sorting_help")}
--- a/src/shared/components/common/data-type-select.tsx
+++ b/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">
+      <div className="data-type-select btn-group btn-group-toggle flex-wrap">
        <label
          className={`pointer btn btn-outline-secondary 
            ${this.state.type_ == DataType.Post && "active"}
--- a/src/shared/components/common/emoji-picker.tsx
+++ b/src/shared/components/common/emoji-picker.tsx
@ -25,7 +25,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
  }
  render() {
    return (
-      <span>
+      <span className="emoji-picker">
        <button
          className="btn btn-sm text-muted"
          data-tippy-content={i18n.t("emoji")}
--- a/src/shared/components/common/icon.tsx
+++ b/src/shared/components/common/icon.tsx
@ -59,7 +59,7 @@ export class PurgeWarning extends Component<any, any> {

  render() {
    return (
-      <div className="mt-2 alert alert-danger" role="alert">
+      <div className="purge-warning mt-2 alert alert-danger" role="alert">
        <Icon icon="alert-triangle" classes="icon-inline me-2" />
        {i18n.t("purge_warning")}
      </div>
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/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="image-upload-form d-inline">
        <label
          htmlFor={this.id}
          className="pointer text-muted small font-weight-bold"
--- a/src/shared/components/common/language-select.tsx
+++ b/src/shared/components/common/language-select.tsx
@ -49,7 +49,7 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
    return this.props.iconVersion ? (
      this.selectBtn
    ) : (
-      <div>
+      <div className="language-select">
        {this.props.multiple && this.props.showLanguageWarning && (
          <div className="alert alert-warning" role="alert">
            {i18n.t("undetermined_language_warning")}
--- a/src/shared/components/common/listing-type-select.tsx
+++ b/src/shared/components/common/listing-type-select.tsx
@ -39,7 +39,7 @@ export class ListingTypeSelect extends Component<

  render() {
    return (
-      <div className="btn-group btn-group-toggle flex-wrap">
+      <div className="listing-type-select btn-group btn-group-toggle flex-wrap">
        {this.props.showSubscribed && (
          <label
            title={i18n.t("subscribed_description")}
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@ -136,7 +136,11 @@ export class MarkdownTextArea extends Component<
    //   message={i18n.t("block_leaving")}
    // />
    return (
-      <form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
+      <form
+        className="markdown-textarea"
+        id={this.formId}
+        onSubmit={linkEvent(this, this.handleSubmit)}
+      >
        <NavigationPrompt
          when={
            !this.props.hideNavigationWarnings &&
--- a/src/shared/components/common/moment-time.tsx
+++ b/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 font-italics pointer unselectable"
        >
          <Icon icon="edit-2" classes="icon-inline me-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 pointer unselectable"
          data-tippy-content={this.format(published)}
        >
          {moment.utc(published).fromNow(!this.props.showAgo)}
--- a/src/shared/components/common/paginator.tsx
+++ b/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 my-2">
        <button
          className="btn btn-secondary me-2"
          disabled={this.props.page == 1}
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/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 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" />
--- a/src/shared/components/common/registration-application.tsx
+++ b/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="registration-application">
        <div>
          {i18n.t("applicant")}: <PersonListing person={a.creator} />
        </div>
--- a/src/shared/components/common/searchable-select.tsx
+++ b/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 dropdown">
        <button
          id={id}
          type="button"
--- a/src/shared/components/common/sort-select.tsx
+++ b/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="form-select d-inline-block w-auto me-2"
+          className="sort-select form-select d-inline-block w-auto me-2"
          aria-label={i18n.t("sort_type")}
        >
          <option disabled aria-hidden="true">
@ -73,7 +73,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
          <option value={"TopAll"}>{i18n.t("top_all")}</option>
        </select>
        <a
-          className="text-muted"
+          className="sort-select-icon text-muted"
          href={sortingHelpUrl}
          rel={relTags}
          title={i18n.t("sorting_help")}
--- a/src/shared/components/community/communities.tsx
+++ b/src/shared/components/community/communities.tsx
@ -208,7 +208,7 @@ export class Communities extends Component<any, CommunitiesState> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="communities container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/community/community-form.tsx
+++ b/src/shared/components/community/community-form.tsx
@ -85,7 +85,10 @@ 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.loading &&
--- a/src/shared/components/community/community-link.tsx
+++ b/src/shared/components/community/community-link.tsx
@ -37,7 +37,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
    return !this.props.realLink ? (
      <Link
        title={apubName}
-        className={`${this.props.muted ? "text-muted" : ""}`}
+        className={`community-link ${this.props.muted ? "text-muted" : ""}`}
        to={link}
      >
        {this.avatarAndName(displayName)}
@ -45,7 +45,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
    ) : (
      <a
        title={apubName}
-        className={`${this.props.muted ? "text-muted" : ""}`}
+        className={`community-link ${this.props.muted ? "text-muted" : ""}`}
        href={link}
        rel={relTags}
      >
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@ -358,7 +358,9 @@ export class Community extends Component<
  }

  render() {
-    return <div className="container-lg">{this.renderCommunity()}</div>;
+    return (
+      <div className="community container-lg">{this.renderCommunity()}</div>
+    );
  }

  sidebar(res: GetCommunityResponse) {
--- a/src/shared/components/community/create-community.tsx
+++ b/src/shared/components/community/create-community.tsx
@ -33,7 +33,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="create-community container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@ -109,7 +109,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {

  render() {
    return (
-      <div>
+      <div className="community-sidebar">
        {!this.state.showEdit ? (
          this.sidebar()
        ) : (
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@ -120,7 +120,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
        : undefined;

    return (
-      <div className="container-lg">
+      <div className="admin-settings container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@ -75,7 +75,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {

  render() {
    return (
-      <div className="col-12">
+      <div className="home-emojis-form col-12">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@ -375,7 +375,7 @@ export class Home extends Component<any, HomeState> {
    } = this.state;

    return (
-      <div className="container-lg">
+      <div className="home container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/home/instances.tsx
+++ b/src/shared/components/home/instances.tsx
@ -109,7 +109,7 @@ export class Instances extends Component<any, InstancesState> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="home-instances container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/home/legal.tsx
+++ b/src/shared/components/home/legal.tsx
@ -25,7 +25,7 @@ export class Legal extends Component<any, LegalState> {
  render() {
    const legal = this.state.siteRes.site_view.local_site.legal_information;
    return (
-      <div className="container-lg">
+      <div className="legal container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@ -49,7 +49,7 @@ export class Login extends Component<any, State> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="login container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/home/rate-limit-form.tsx
+++ b/src/shared/components/home/rate-limit-form.tsx
@ -133,7 +133,10 @@ export default class RateLimitsForm extends Component<

  render() {
    return (
-      <form onSubmit={linkEvent(this, submitRateLimitForm)}>
+      <form
+        className="rate-limit-form"
+        onSubmit={linkEvent(this, submitRateLimitForm)}
+      >
        <h5>{i18n.t("rate_limit_header")}</h5>
        <Tabs
          tabs={rateLimitTypes.map(rateLimitType => ({
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@ -60,7 +60,7 @@ export class Setup extends Component<any, State> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="home-setup container-lg">
        <Helmet title={this.documentTitle} />
        <div className="row">
          <div className="col-12 offset-lg-3 col-lg-6">
--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@ -127,7 +127,7 @@ export class Signup extends Component<any, State> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="home-signup container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@ -120,7 +120,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
  render() {
    const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
    return (
-      <form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
+      <form
+        className="site-form"
+        onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}
+      >
        <NavigationPrompt
          when={
            !this.props.loading &&
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@ -30,7 +30,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {

  render() {
    return (
-      <div className="accordion">
+      <div className="site-sidebar accordion">
        <section id="sidebarInfo" className="card border-secondary mb-3">
          <header
            className="card-header d-flex align-items-center"
--- a/src/shared/components/home/tagline-form.tsx
+++ b/src/shared/components/home/tagline-form.tsx
@ -31,7 +31,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {

  render() {
    return (
-      <div className="col-12">
+      <div className="tagline-form col-12">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@ -742,7 +742,7 @@ export class Modlog extends Component<
    const { actionType, modId, userId } = getModlogQueryParams();

    return (
-      <div className="container-lg">
+      <div className="modlog container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/person/cake-day.tsx
+++ b/src/shared/components/person/cake-day.tsx
@ -10,7 +10,7 @@ export class CakeDay extends Component<CakeDayProps, any> {
  render() {
    return (
      <div
-        className={`mx-2 d-inline-block unselectable pointer`}
+        className={`cake-day mx-2 d-inline-block unselectable pointer`}
        data-tippy-content={this.cakeDayTippy()}
      >
        <Icon icon="cake" classes="icon-inline" />
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@ -216,7 +216,7 @@ export class Inbox extends Component<any, InboxState> {
    const auth = myAuth();
    const inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined;
    return (
-      <div className="container-lg">
+      <div className="inbox container-lg">
        <div className="row">
          <div className="col-12">
            <HtmlTags
--- a/src/shared/components/person/password-change.tsx
+++ b/src/shared/components/person/password-change.tsx
@ -40,7 +40,7 @@ export class PasswordChange extends Component<any, State> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="password-change container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/person/person-details.tsx
+++ b/src/shared/components/person/person-details.tsx
@ -109,7 +109,7 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {

  render() {
    return (
-      <div>
+      <div className="person-details">
        {this.viewSelector(this.props.view)}

        <Paginator page={this.props.page} onChange={this.handlePageChange} />
--- a/src/shared/components/person/person-listing.tsx
+++ b/src/shared/components/person/person-listing.tsx
@ -49,10 +49,13 @@ export class PersonListing extends Component<PersonListingProps, any> {
        {!this.props.realLink ? (
          <Link
            title={apubName}
-            className={classNames("d-inline-flex align-items-baseline", {
-              "text-muted": this.props.muted,
-              "text-info": !this.props.muted,
-            })}
+            className={classNames(
+              "person-listing d-inline-flex align-items-baseline",
+              {
+                "text-muted": this.props.muted,
+                "text-info": !this.props.muted,
+              }
+            )}
            to={link}
          >
            {this.avatarAndName(displayName)}
@ -60,7 +63,7 @@ export class PersonListing extends Component<PersonListingProps, any> {
        ) : (
          <a
            title={apubName}
-            className={`d-inline-flex align-items-baseline ${
+            className={`person-listing d-inline-flex align-items-baseline ${
              this.props.muted ? "text-muted" : "text-info"
            }`}
            href={link}
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@ -389,7 +389,11 @@ export class Profile extends Component<
  }

  render() {
-    return <div className="container-lg">{this.renderPersonRes()}</div>;
+    return (
+      <div className="person-profile container-lg">
+        {this.renderPersonRes()}
+      </div>
+    );
  }

  get viewRadios() {
--- a/src/shared/components/person/registration-applications.tsx
+++ b/src/shared/components/person/registration-applications.tsx
@ -117,7 +117,11 @@ export class RegistrationApplications extends Component<
  }

  render() {
-    return <div className="container-lg">{this.renderApps()}</div>;
+    return (
+      <div className="registration-applications container-lg">
+        {this.renderApps()}
+      </div>
+    );
  }

  unreadOrAllRadios() {
--- a/src/shared/components/person/reports.tsx
+++ b/src/shared/components/person/reports.tsx
@ -142,7 +142,7 @@ export class Reports extends Component<any, ReportsState> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="person-reports container-lg">
        <div className="row">
          <div className="col-12">
            <HtmlTags
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@ -240,7 +240,7 @@ export class Settings extends Component<any, SettingsState> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="person-settings container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/person/verify-email.tsx
+++ b/src/shared/components/person/verify-email.tsx
@ -52,7 +52,7 @@ export class VerifyEmail extends Component<any, State> {

  render() {
    return (
-      <div className="container-lg">
+      <div className="verfy-email container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/post/create-post.tsx
+++ b/src/shared/components/post/create-post.tsx
@ -163,7 +163,7 @@ export class CreatePost extends Component<
      | undefined;

    return (
-      <div className="container-lg">
+      <div className="create-post container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/post/metadata-card.tsx
+++ b/src/shared/components/post/metadata-card.tsx
@ -30,7 +30,7 @@ export class MetadataCard extends Component<
    return (
      <>
        {!this.state.expanded && post.embed_title && post.url && (
-          <div className="card border-secondary mt-3 mb-2">
+          <div className="post-metadata-card card border-secondary mt-3 mb-2">
            <div className="row">
              <div className="col-12">
                <div className="card-body">
@ -75,7 +75,10 @@ export class MetadataCard extends Component<
          </div>
        )}
        {this.state.expanded && post.embed_video_url && (
-          <iframe src={post.embed_video_url}></iframe>
+          <iframe
+            className="post-metadata-iframe"
+            src={post.embed_video_url}
+          ></iframe>
        )}
      </>
    );
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@ -193,7 +193,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
    // !!this.state.form.name || !!this.state.form.url || !!this.state.form.body;
    // <Prompt when={promptCheck} message={i18n.t("block_leaving")} />
    return (
-      <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
+      <form
+        className="post-form"
+        onSubmit={linkEvent(this, this.handlePostSubmit)}
+      >
        <NavigationPrompt
          when={
            !!(
--- a/src/shared/components/post/post-listings.tsx
+++ b/src/shared/components/post/post-listings.tsx
@ -66,7 +66,7 @@ export class PostListings extends Component<PostListingsProps, any> {

  render() {
    return (
-      <div>
+      <div className="post-listings">
        {this.posts.length > 0 ? (
          this.posts.map((post_view, idx) => (
            <>
--- a/src/shared/components/post/post-report.tsx
+++ b/src/shared/components/post/post-report.tsx
@ -60,7 +60,7 @@ export class PostReport extends Component<PostReportProps, PostReportState> {
    };

    return (
-      <div>
+      <div className="post-report">
        <PostListing
          post_view={pv}
          showCommunity={true}
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@ -424,7 +424,7 @@ export class Post extends Component<any, PostState> {
  }

  render() {
-    return <div className="container-lg">{this.renderPostRes()}</div>;
+    return <div className="post container-lg">{this.renderPostRes()}</div>;
  }

  sortRadios() {
--- a/src/shared/components/private_message/create-private-message.tsx
+++ b/src/shared/components/private_message/create-private-message.tsx
@ -134,7 +134,7 @@ export class CreatePrivateMessage extends Component<

  render() {
    return (
-      <div className="container-lg">
+      <div className="create-private-message container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}
--- a/src/shared/components/private_message/private-message-form.tsx
+++ b/src/shared/components/private_message/private-message-form.tsx
@ -73,7 +73,10 @@ export class PrivateMessageForm extends Component<

  render() {
    return (
-      <form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
+      <form
+        className="private-message-form"
+        onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
+      >
        <NavigationPrompt
          when={
            !this.state.loading && !!this.state.content && !this.state.submitted
--- a/src/shared/components/private_message/private-message-report.tsx
+++ b/src/shared/components/private_message/private-message-report.tsx
@ -43,7 +43,7 @@ export class PrivateMessageReport extends Component<Props, State> {
    );

    return (
-      <div>
+      <div className="private-message-report">
        <div>
          {i18n.t("creator")}:{" "}
          <PersonListing person={r.private_message_creator} />
--- a/src/shared/components/private_message/private-message.tsx
+++ b/src/shared/components/private_message/private-message.tsx
@ -88,7 +88,7 @@ export class PrivateMessage extends Component<
      : message_view.creator;

    return (
-      <div className="border-top border-light">
+      <div className="private-message border-top border-light">
        <div>
          <ul className="list-inline mb-0 text-muted small">
            {/* TODO refactor this */}
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@ -455,7 +455,7 @@ export class Search extends Component<any, SearchState> {
    const { type, page } = getSearchQueryParams();

    return (
-      <div className="container-lg">
+      <div className="search container-lg">
        <HtmlTags
          title={this.documentTitle}
          path={this.context.router.route.match.url}