]> Untitled Git - lemmy-ui.git/commitdiff
component classes v2
authordjvs <djvs@users.noreply.github.com>
Tue, 20 Jun 2023 18:46:16 +0000 (14:46 -0400)
committerdjvs <djvs@users.noreply.github.com>
Tue, 20 Jun 2023 18:46:16 +0000 (14:46 -0400)
61 files changed:
src/assets/css/main.css
src/shared/components/app/error-page.tsx
src/shared/components/app/footer.tsx
src/shared/components/comment/comment-form.tsx
src/shared/components/comment/comment-report.tsx
src/shared/components/common/badges.tsx
src/shared/components/common/banner-icon-header.tsx
src/shared/components/common/comment-sort-select.tsx
src/shared/components/common/data-type-select.tsx
src/shared/components/common/emoji-picker.tsx
src/shared/components/common/icon.tsx
src/shared/components/common/image-upload-form.tsx
src/shared/components/common/language-select.tsx
src/shared/components/common/listing-type-select.tsx
src/shared/components/common/markdown-textarea.tsx
src/shared/components/common/moment-time.tsx
src/shared/components/common/paginator.tsx
src/shared/components/common/pictrs-image.tsx
src/shared/components/common/registration-application.tsx
src/shared/components/common/searchable-select.tsx
src/shared/components/common/sort-select.tsx
src/shared/components/community/communities.tsx
src/shared/components/community/community-form.tsx
src/shared/components/community/community-link.tsx
src/shared/components/community/community.tsx
src/shared/components/community/create-community.tsx
src/shared/components/community/sidebar.tsx
src/shared/components/home/admin-settings.tsx
src/shared/components/home/emojis-form.tsx
src/shared/components/home/home.tsx
src/shared/components/home/instances.tsx
src/shared/components/home/legal.tsx
src/shared/components/home/login.tsx
src/shared/components/home/rate-limit-form.tsx
src/shared/components/home/setup.tsx
src/shared/components/home/signup.tsx
src/shared/components/home/site-form.tsx
src/shared/components/home/site-sidebar.tsx
src/shared/components/home/tagline-form.tsx
src/shared/components/modlog.tsx
src/shared/components/person/cake-day.tsx
src/shared/components/person/inbox.tsx
src/shared/components/person/password-change.tsx
src/shared/components/person/person-details.tsx
src/shared/components/person/person-listing.tsx
src/shared/components/person/profile.tsx
src/shared/components/person/registration-applications.tsx
src/shared/components/person/reports.tsx
src/shared/components/person/settings.tsx
src/shared/components/person/verify-email.tsx
src/shared/components/post/create-post.tsx
src/shared/components/post/metadata-card.tsx
src/shared/components/post/post-form.tsx
src/shared/components/post/post-listings.tsx
src/shared/components/post/post-report.tsx
src/shared/components/post/post.tsx
src/shared/components/private_message/create-private-message.tsx
src/shared/components/private_message/private-message-form.tsx
src/shared/components/private_message/private-message-report.tsx
src/shared/components/private_message/private-message.tsx
src/shared/components/search.tsx

index f6ae1ad4fd142c801a2a38fb5109120ada4d8f6c..1876b0156d120d6b034cb96ea12885434adf7fd8 100644 (file)
@@ -415,7 +415,7 @@ br.big {
   -webkit-box-orient: vertical;
 }
 
-.emoji-picker {
+#emoji-picker {
   width: 100%;
 }
 
index e19323f94d3540d121608bad49951db462a30955..191c322b229d1c673aac4aa272eceb610eb5bd0e 100644 (file)
@@ -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")
index cf3c4de52766dcc4bc0c38f052d6bcfef9aef225..8ea647c67138ca94e1245f5aab6534a1fad5a8e0 100644 (file)
@@ -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 && (
index 804f7f4c91256b9ffb72f5ca15c78a5dc9b18087..2638a40f85be635e8782761314070f9434fe0709 100644 (file)
@@ -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}
index ff00bc593e8fe8e60e70814c0b32f895a8837d7f..2f765e03915ade04e20c7d83d92c5eae4ff94fb5 100644 (file)
@@ -70,7 +70,7 @@ export class CommentReport extends Component<
     };
 
     return (
-      <div>
+      <div className="comment-report">
         <CommentNode
           node={node}
           viewType={CommentViewType.Flat}
index 6bd4eeeedba1c35dfaef221ff8715ea9d10b9d0e..17ae53fb03da34f32ec12a1f969bc77a85152ba1 100644 (file)
@@ -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", {
index 7028ef4f38d4871c0a4300f958fa1a3543f1af61..d2cba13efd53841a62e20fd084c2600662f8c9aa 100644 (file)
@@ -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
index d0f7947c20c07158ef773a34ece1790bd21e072c..e9885afa052aff42086e1f548dbb35398494eef9 100644 (file)
@@ -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")}
index e713e0d0c7f8f7e60f957c49fe230a616d7d4922..b61d6840ff7b4e769d806af1a34634337e4138b5 100644 (file)
@@ -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"}
index aea986ad9274f006dd8a3d0c29a52a23f73411d9..a7fc7d4fe65622a20bf7f02b594d078089655866 100644 (file)
@@ -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")}
index 1f65f4692184492e0e1d778442aff705d57a44ff..e3f5ba44509808e72c01b8da305edd4234d871c0 100644 (file)
@@ -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>
index 61fdd6101b553bf09556044e9a797525dadd129f..98b51c7a0d514f5bbbea0758a5e43e65c1979d70 100644 (file)
@@ -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"
index 56aeed5141757a0640dfb73aaa1595b92ab0a4f1..619e1a5a6203adb04e9cf7bdbeef7cb4b68ffd01 100644 (file)
@@ -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")}
index 0015a42bde500cbaca7b25bc1be4033013489e89..4885b6c6487f330dd051d4895c1ff796c44e33c5 100644 (file)
@@ -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")}
index 2f7a8bfea5952a6cf5757ec6bf363e6dbaf0600a..7992c72b967060fa7de9ce66600747bc475a1902 100644 (file)
@@ -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 &&
index d68706ed013e56cb95089f35c43e140e9559aef8..511c4b467703ec41e57c984fe5d7f4a9ad34c71c 100644 (file)
@@ -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)}
index 25501404ab30372cc90d0a4fd351c886b58a1ef1..1ce38054e4991adca7b22569b761e7acfe2776f8 100644 (file)
@@ -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}
index 98d0791966a03afca5be631476c46d4f38f52f2a..7443749094970cd427bf9ea8cc30a07349d413cc 100644 (file)
@@ -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" />
index 9ddd5790322198618eb74151e9cc1fa46e545dfd..d81af3b6b0908c4c5047389538ab81fcb8a88742 100644 (file)
@@ -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>
index 60cc69f82a670b6c06594adff52d8fada93d2587..1d98de3d625d75687b5b09bc1e9d707bb60632c1 100644 (file)
@@ -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"
index 49c86500d00097bd8290cbc03d1d96ee3cc61ad8..7b275718c262bd181b440539d50bb6d07eda673a 100644 (file)
@@ -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")}
index 313491ee0b26742fb47fb8caf9e50711f26506da..0126ab11101dfab58c6605057a12c7e9145541d7 100644 (file)
@@ -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}
index d44ba315959ddb35010d0d9e94c877b732928879..655a07522b8e31fa9baf952da19bf0a8b64e18c3 100644 (file)
@@ -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 &&
index 23d52ae654c2426d01e4b41ab1e36fb755a936f3..4f45a2b59c9ed0dfc55074b93416ccb68739dcc1 100644 (file)
@@ -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}
       >
index 53b8ab343a04e1697b6012bd02621fef30c87d32..b833ca9a3cfb7a5ca5dadcf7381424b31a6b2a07 100644 (file)
@@ -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) {
index ff31b839edc9cb1c968ca68bd7dba73cc6b32742..a061ff0d4ebcf44bdd314e4ca7cc75356f001b30 100644 (file)
@@ -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}
index 03fc4bb1062a5072d9fdae35a8371cdc890a2362..d5b54f02268d8cf8bf6505f5d1883c31c54a91d5 100644 (file)
@@ -109,7 +109,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   render() {
     return (
-      <div>
+      <div className="community-sidebar">
         {!this.state.showEdit ? (
           this.sidebar()
         ) : (
index ad7ac931aead7fbcfb5298535f5eba9f7798d737..1de9f8751a2178beb6e59cd061423a8e00750e3f 100644 (file)
@@ -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}
index eccbe5f41198b5f5e1d0c402cd8e072c47e5c906..ac07ba112588b11cc4a8e750b665e0f094d6759c 100644 (file)
@@ -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}
index d0916ff66468c1286372ab3fc507ebe53ac9d453..5f726102a1fac11333f8de1b02fc3a16f6933f17 100644 (file)
@@ -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}
index ec2ff63572af0bfa00b4c299ec457d25f95a669e..2d8d8d5d2999658f639a5a6101c9259fd85f498f 100644 (file)
@@ -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}
index 15bea9b5b312522ab35d1bcaa977147efe366806..be11fd7574fd542bf5d44b65d36ea1eb6ef6660f 100644 (file)
@@ -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}
index 2ca1c7a1ba04899e0c1b89c4bcf7fb1cdb5e64b2..4ea69456d2a43bf176112886439411abeb28a56d 100644 (file)
@@ -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}
index acb08a1eeae862bca64c0b5d09db328ea87cfcd8..1b2e281b243402bd7802269e7c07a22a379493ce 100644 (file)
@@ -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 => ({
index b72dd3c54190d2188c44a3048f63db7fde75f166..3b71047d9c90b23802ae6abdd5f6548bb3d48919 100644 (file)
@@ -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">
index 09d710ad14107048ccf8ecbcbe3faf6cb0bc9b16..41813a4f1ecff6045970df00e014fb06952e1a31 100644 (file)
@@ -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}
index 9986ef9ac12bc09ec895f2cd671db0f06a5a3ddd..6e24dd3e850735ebb8bdbd1ae812e6a2615aea81 100644 (file)
@@ -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 &&
index cc587bfbdba259624b6d52bbf6211a2a82b81e33..4caeed6b11121834e71672036f6747bb444b16a3 100644 (file)
@@ -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"
index b8bef14b29b3da39080735a120b0d94d731eb5e1..dfd13514dff5fc0911046182527286bab3798001 100644 (file)
@@ -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}
index e9e90ad8669b219c74c5e7616481aaa8cd9220fd..4527800f3f943cbf32d2840b03b76e16b967eac5 100644 (file)
@@ -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}
index 91ee7c0c776261b460ffc7ca7189a8fb7e407989..d083f26fe352d9160a8acebde800ccc7383d17e7 100644 (file)
@@ -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" />
index 4dec69933de51bab2f4ac1cdaa4a951f2af978dc..415c3e3fd6c9ee216ba5b37b9d5b9b266449276c 100644 (file)
@@ -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
index b36c15a297f12526682bcd2c06760435ad5800cc..3977feb41a47b6b285b06fb89324f031db97d28f 100644 (file)
@@ -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}
index d1f319606f260a1917a585b65af1acd44352af77..6efebaa18de65c508eff52461d526e96ea9d38c6 100644 (file)
@@ -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} />
index 045633c7957f098cc7f54a51c99190d92c569d2d..cf3802c44708da8dcee6bb2e2ed8da380b0429df 100644 (file)
@@ -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}
index fd350b4887babb6e264fa69ec8998327808d0dba..534bff46f6b8287c89aecd8105ae0fa7c991ec83 100644 (file)
@@ -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() {
index aaf3f8f2bd3a0e2fe9d4e02c18ab1cebe2b8bcd0..23b27b37c94214d6692684e4163a400eb7d7f223 100644 (file)
@@ -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() {
index d9ac7a3d59b85ccf7091eab8587e4daeccd6c174..00242141af51573e306b80dca30498873274be30 100644 (file)
@@ -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
index 0ea623d82c992166705c1bcc8bfc1511f080ce77..b97064e6042262ad0446d32dc0c03fc4701f6554 100644 (file)
@@ -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}
index da6eb91736174fc50bee5a3f164909fef8336b84..c4687c00be2069e5f37eaf5c9a95a66a8e9fd30c 100644 (file)
@@ -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}
index 278977977bb9a2df8511cb71d942c71dd82461ed..d765a48aa5db0b4f7873033225fde64e04b43e2e 100644 (file)
@@ -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}
index dc43bff34c52dae4c5301bac9ef9d1fff69dbf76..e6a864af6afb62620b39ac2b5757cbb50424301e 100644 (file)
@@ -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>
         )}
       </>
     );
index 807164599545a79d305e87e87a59103a408bb1cf..72f89ddea778932df342d882de2d798243c9dbaf 100644 (file)
@@ -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={
             !!(
index e6c7e5f68957cb37ca5a5bafb1e6fb8927c7c584..1b2e9e8666d6d281be12caf50c2f0efcbfbd7d16 100644 (file)
@@ -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) => (
             <>
index 7854c0ce1bdc90e034d7bb5c257daba7c6407a75..6586f550e78bb2f2d3d899719f8160a4fabeb722 100644 (file)
@@ -60,7 +60,7 @@ export class PostReport extends Component<PostReportProps, PostReportState> {
     };
 
     return (
-      <div>
+      <div className="post-report">
         <PostListing
           post_view={pv}
           showCommunity={true}
index 2243f1dbee80c57f818dbdd9bd0a062303529d68..d6c1d3a26421dfd6af3c7fa5660893a4874d942b 100644 (file)
@@ -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() {
index 5b9eb9819840a20d54850d4d08d123b774484988..ead2b6c78cb1a5a20fb07749ad63f55a0207c6ba 100644 (file)
@@ -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}
index 681a954495c6c4322165c3c7a3921c8269d430f4..d7b27d74b1cff0029ee05249ce5d25d650904c47 100644 (file)
@@ -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
index 602654816b90ed5fa7c675f8aebd04dadfbda734..7fa4ae0a75c1b91584a26b397210a31bc5ecff0f 100644 (file)
@@ -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} />
index 14c665bb5ef68cf3d5075e7b4ed40fa3afb84fdd..b7426f30947673712c14262c505e146fa7e1f7d2 100644 (file)
@@ -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 */}
index 252e0de63f6176935170ad9efbf48cd47fbeabe4..e4e16609b707d18b725dec93b541e58b427031a4 100644 (file)
@@ -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}