From 5033b024f62a2edc443d9dd5d6e74d00ed3182a9 Mon Sep 17 00:00:00 2001
From: djvs <djvs@users.noreply.github.com>
Date: Tue, 20 Jun 2023 14:46:16 -0400
Subject: [PATCH] component classes v2

---
 src/assets/css/main.css                             |  2 +-
 src/shared/components/app/error-page.tsx            |  2 +-
 src/shared/components/app/footer.tsx                |  2 +-
 src/shared/components/comment/comment-form.tsx      |  6 +++++-
 src/shared/components/comment/comment-report.tsx    |  2 +-
 src/shared/components/common/badges.tsx             |  2 +-
 src/shared/components/common/banner-icon-header.tsx |  2 +-
 .../components/common/comment-sort-select.tsx       |  4 ++--
 src/shared/components/common/data-type-select.tsx   |  2 +-
 src/shared/components/common/emoji-picker.tsx       |  2 +-
 src/shared/components/common/icon.tsx               |  2 +-
 src/shared/components/common/image-upload-form.tsx  |  2 +-
 src/shared/components/common/language-select.tsx    |  2 +-
 .../components/common/listing-type-select.tsx       |  2 +-
 src/shared/components/common/markdown-textarea.tsx  |  6 +++++-
 src/shared/components/common/moment-time.tsx        |  4 ++--
 src/shared/components/common/paginator.tsx          |  2 +-
 src/shared/components/common/pictrs-image.tsx       |  2 +-
 .../components/common/registration-application.tsx  |  2 +-
 src/shared/components/common/searchable-select.tsx  |  2 +-
 src/shared/components/common/sort-select.tsx        |  4 ++--
 src/shared/components/community/communities.tsx     |  2 +-
 src/shared/components/community/community-form.tsx  |  5 ++++-
 src/shared/components/community/community-link.tsx  |  4 ++--
 src/shared/components/community/community.tsx       |  4 +++-
 .../components/community/create-community.tsx       |  2 +-
 src/shared/components/community/sidebar.tsx         |  2 +-
 src/shared/components/home/admin-settings.tsx       |  2 +-
 src/shared/components/home/emojis-form.tsx          |  2 +-
 src/shared/components/home/home.tsx                 |  2 +-
 src/shared/components/home/instances.tsx            |  2 +-
 src/shared/components/home/legal.tsx                |  2 +-
 src/shared/components/home/login.tsx                |  2 +-
 src/shared/components/home/rate-limit-form.tsx      |  5 ++++-
 src/shared/components/home/setup.tsx                |  2 +-
 src/shared/components/home/signup.tsx               |  2 +-
 src/shared/components/home/site-form.tsx            |  5 ++++-
 src/shared/components/home/site-sidebar.tsx         |  2 +-
 src/shared/components/home/tagline-form.tsx         |  2 +-
 src/shared/components/modlog.tsx                    |  2 +-
 src/shared/components/person/cake-day.tsx           |  2 +-
 src/shared/components/person/inbox.tsx              |  2 +-
 src/shared/components/person/password-change.tsx    |  2 +-
 src/shared/components/person/person-details.tsx     |  2 +-
 src/shared/components/person/person-listing.tsx     | 13 ++++++++-----
 src/shared/components/person/profile.tsx            |  6 +++++-
 .../components/person/registration-applications.tsx |  6 +++++-
 src/shared/components/person/reports.tsx            |  2 +-
 src/shared/components/person/settings.tsx           |  2 +-
 src/shared/components/person/verify-email.tsx       |  2 +-
 src/shared/components/post/create-post.tsx          |  2 +-
 src/shared/components/post/metadata-card.tsx        |  7 +++++--
 src/shared/components/post/post-form.tsx            |  5 ++++-
 src/shared/components/post/post-listings.tsx        |  2 +-
 src/shared/components/post/post-report.tsx          |  2 +-
 src/shared/components/post/post.tsx                 |  2 +-
 .../private_message/create-private-message.tsx      |  2 +-
 .../private_message/private-message-form.tsx        |  5 ++++-
 .../private_message/private-message-report.tsx      |  2 +-
 .../components/private_message/private-message.tsx  |  2 +-
 src/shared/components/search.tsx                    |  2 +-
 61 files changed, 109 insertions(+), 70 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index f6ae1ad4..1876b015 100644
--- 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%;
 }
 
diff --git a/src/shared/components/app/error-page.tsx b/src/shared/components/app/error-page.tsx
index e19323f9..191c322b 100644
--- 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")
diff --git a/src/shared/components/app/footer.tsx b/src/shared/components/app/footer.tsx
index cf3c4de5..8ea647c6 100644
--- 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 && (
diff --git a/src/shared/components/comment/comment-form.tsx b/src/shared/components/comment/comment-form.tsx
index 804f7f4c..2638a40f 100644
--- 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}
diff --git a/src/shared/components/comment/comment-report.tsx b/src/shared/components/comment/comment-report.tsx
index ff00bc59..2f765e03 100644
--- 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}
diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx
index 6bd4eeee..17ae53fb 100644
--- 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", {
diff --git a/src/shared/components/common/banner-icon-header.tsx b/src/shared/components/common/banner-icon-header.tsx
index 7028ef4f..d2cba13e 100644
--- 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
diff --git a/src/shared/components/common/comment-sort-select.tsx b/src/shared/components/common/comment-sort-select.tsx
index d0f7947c..e9885afa 100644
--- 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")}
diff --git a/src/shared/components/common/data-type-select.tsx b/src/shared/components/common/data-type-select.tsx
index e713e0d0..b61d6840 100644
--- 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"}
diff --git a/src/shared/components/common/emoji-picker.tsx b/src/shared/components/common/emoji-picker.tsx
index aea986ad..a7fc7d4f 100644
--- 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")}
diff --git a/src/shared/components/common/icon.tsx b/src/shared/components/common/icon.tsx
index 1f65f469..e3f5ba44 100644
--- 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>
diff --git a/src/shared/components/common/image-upload-form.tsx b/src/shared/components/common/image-upload-form.tsx
index 61fdd610..98b51c7a 100644
--- 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"
diff --git a/src/shared/components/common/language-select.tsx b/src/shared/components/common/language-select.tsx
index 56aeed51..619e1a5a 100644
--- 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")}
diff --git a/src/shared/components/common/listing-type-select.tsx b/src/shared/components/common/listing-type-select.tsx
index 0015a42b..4885b6c6 100644
--- 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")}
diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 2f7a8bfe..7992c72b 100644
--- 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 &&
diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx
index d68706ed..511c4b46 100644
--- 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)}
diff --git a/src/shared/components/common/paginator.tsx b/src/shared/components/common/paginator.tsx
index 25501404..1ce38054 100644
--- 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}
diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index 98d07919..74437490 100644
--- 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" />
diff --git a/src/shared/components/common/registration-application.tsx b/src/shared/components/common/registration-application.tsx
index 9ddd5790..d81af3b6 100644
--- 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>
diff --git a/src/shared/components/common/searchable-select.tsx b/src/shared/components/common/searchable-select.tsx
index 60cc69f8..1d98de3d 100644
--- 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"
diff --git a/src/shared/components/common/sort-select.tsx b/src/shared/components/common/sort-select.tsx
index 49c86500..7b275718 100644
--- 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")}
diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx
index 313491ee..0126ab11 100644
--- 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}
diff --git a/src/shared/components/community/community-form.tsx b/src/shared/components/community/community-form.tsx
index d44ba315..655a0752 100644
--- 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 &&
diff --git a/src/shared/components/community/community-link.tsx b/src/shared/components/community/community-link.tsx
index 23d52ae6..4f45a2b5 100644
--- 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}
       >
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 53b8ab34..b833ca9a 100644
--- 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) {
diff --git a/src/shared/components/community/create-community.tsx b/src/shared/components/community/create-community.tsx
index ff31b839..a061ff0d 100644
--- 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}
diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 03fc4bb1..d5b54f02 100644
--- 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()
         ) : (
diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx
index ad7ac931..1de9f875 100644
--- 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}
diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index eccbe5f4..ac07ba11 100644
--- 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}
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx
index d0916ff6..5f726102 100644
--- 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}
diff --git a/src/shared/components/home/instances.tsx b/src/shared/components/home/instances.tsx
index ec2ff635..2d8d8d5d 100644
--- 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}
diff --git a/src/shared/components/home/legal.tsx b/src/shared/components/home/legal.tsx
index 15bea9b5..be11fd75 100644
--- 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}
diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index 2ca1c7a1..4ea69456 100644
--- 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}
diff --git a/src/shared/components/home/rate-limit-form.tsx b/src/shared/components/home/rate-limit-form.tsx
index acb08a1e..1b2e281b 100644
--- 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 => ({
diff --git a/src/shared/components/home/setup.tsx b/src/shared/components/home/setup.tsx
index b72dd3c5..3b71047d 100644
--- 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">
diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx
index 09d710ad..41813a4f 100644
--- 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}
diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx
index 9986ef9a..6e24dd3e 100644
--- 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 &&
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index cc587bfb..4caeed6b 100644
--- 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"
diff --git a/src/shared/components/home/tagline-form.tsx b/src/shared/components/home/tagline-form.tsx
index b8bef14b..dfd13514 100644
--- 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}
diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx
index e9e90ad8..4527800f 100644
--- 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}
diff --git a/src/shared/components/person/cake-day.tsx b/src/shared/components/person/cake-day.tsx
index 91ee7c0c..d083f26f 100644
--- 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" />
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 4dec6993..415c3e3f 100644
--- 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
diff --git a/src/shared/components/person/password-change.tsx b/src/shared/components/person/password-change.tsx
index b36c15a2..3977feb4 100644
--- 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}
diff --git a/src/shared/components/person/person-details.tsx b/src/shared/components/person/person-details.tsx
index d1f31960..6efebaa1 100644
--- 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} />
diff --git a/src/shared/components/person/person-listing.tsx b/src/shared/components/person/person-listing.tsx
index 045633c7..cf3802c4 100644
--- 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}
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index fd350b48..534bff46 100644
--- 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() {
diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx
index aaf3f8f2..23b27b37 100644
--- 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() {
diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx
index d9ac7a3d..00242141 100644
--- 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
diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 0ea623d8..b97064e6 100644
--- 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}
diff --git a/src/shared/components/person/verify-email.tsx b/src/shared/components/person/verify-email.tsx
index da6eb917..c4687c00 100644
--- 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}
diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx
index 27897797..d765a48a 100644
--- 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}
diff --git a/src/shared/components/post/metadata-card.tsx b/src/shared/components/post/metadata-card.tsx
index dc43bff3..e6a864af 100644
--- 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>
         )}
       </>
     );
diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index 80716459..72f89dde 100644
--- 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={
             !!(
diff --git a/src/shared/components/post/post-listings.tsx b/src/shared/components/post/post-listings.tsx
index e6c7e5f6..1b2e9e86 100644
--- 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) => (
             <>
diff --git a/src/shared/components/post/post-report.tsx b/src/shared/components/post/post-report.tsx
index 7854c0ce..6586f550 100644
--- 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}
diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index 2243f1db..d6c1d3a2 100644
--- 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() {
diff --git a/src/shared/components/private_message/create-private-message.tsx b/src/shared/components/private_message/create-private-message.tsx
index 5b9eb981..ead2b6c7 100644
--- 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}
diff --git a/src/shared/components/private_message/private-message-form.tsx b/src/shared/components/private_message/private-message-form.tsx
index 681a9544..d7b27d74 100644
--- 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
diff --git a/src/shared/components/private_message/private-message-report.tsx b/src/shared/components/private_message/private-message-report.tsx
index 60265481..7fa4ae0a 100644
--- 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} />
diff --git a/src/shared/components/private_message/private-message.tsx b/src/shared/components/private_message/private-message.tsx
index 14c665bb..b7426f30 100644
--- 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 */}
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 252e0de6..e4e16609 100644
--- 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}