From: djvs <djvs@users.noreply.github.com>
Date: Tue, 20 Jun 2023 18:46:16 +0000 (-0400)
Subject: component classes v2
X-Git-Url: http://these/git/%22%7Burl%7D/%22https:/image.com/%7B%60%24%7BghostArchiveUrl%7D/%7Brss%7D?a=commitdiff_plain;h=5033b024f62a2edc443d9dd5d6e74d00ed3182a9;p=lemmy-ui.git

component classes v2
---

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index f6ae1ad..1876b01 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 e19323f..191c322 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 cf3c4de..8ea647c 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 804f7f4..2638a40 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 ff00bc5..2f765e0 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 6bd4eee..17ae53f 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 7028ef4..d2cba13 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 d0f7947..e9885af 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 e713e0d..b61d684 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 aea986a..a7fc7d4 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 1f65f46..e3f5ba4 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 61fdd61..98b51c7 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 56aeed5..619e1a5 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 0015a42..4885b6c 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 2f7a8bf..7992c72 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 d68706e..511c4b4 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 2550140..1ce3805 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 98d0791..7443749 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 9ddd579..d81af3b 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 60cc69f..1d98de3 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 49c8650..7b27571 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 313491e..0126ab1 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 d44ba31..655a075 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 23d52ae..4f45a2b 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 53b8ab3..b833ca9 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 ff31b83..a061ff0 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 03fc4bb..d5b54f0 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 ad7ac93..1de9f87 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 eccbe5f..ac07ba1 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 d0916ff..5f72610 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 ec2ff63..2d8d8d5 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 15bea9b..be11fd7 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 2ca1c7a..4ea6945 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 acb08a1..1b2e281 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 b72dd3c..3b71047 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 09d710a..41813a4 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 9986ef9..6e24dd3 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 cc587bf..4caeed6 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 b8bef14..dfd1351 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 e9e90ad..4527800 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 91ee7c0..d083f26 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 4dec699..415c3e3 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 b36c15a..3977feb 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 d1f3196..6efebaa 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 045633c..cf3802c 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 fd350b4..534bff4 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 aaf3f8f..23b27b3 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 d9ac7a3..0024214 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 0ea623d..b97064e 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 da6eb91..c4687c0 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 2789779..d765a48 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 dc43bff..e6a864a 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 8071645..72f89dd 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 e6c7e5f..1b2e9e8 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 7854c0c..6586f55 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 2243f1d..d6c1d3a 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 5b9eb98..ead2b6c 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 681a954..d7b27d7 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 6026548..7fa4ae0 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 14c665b..b7426f3 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 252e0de..e4e1660 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}