Merge pull request #1421 from djvs/feat/component-classes-v2

Component classes v2

src/assets/css/main.css

@@ -415,7 +415,7 @@ br.big {
   -webkit-box-orient: vertical;
 }
 
-.emoji-picker {
+#emoji-picker {
   width: 100%;
 }
 

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")

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 && (

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}

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}

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", {

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

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")}

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"}

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")}

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>

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"

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")}

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")}

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 &&

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)}

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}

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" />

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>

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"

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")}

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}

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 &&

src/shared/components/community/community-link.tsx

@@ -37,15 +37,15 @@ 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)}
       </Link>
     ) : (
       <a
         title={apubName}
-        className={`${this.props.muted ? "text-muted" : ""}`}
+        className={`community-link ${this.props.muted ? "text-muted" : ""}`}
         href={link}
         rel={relTags}
       >

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) {

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}

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()
         ) : (

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}

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}

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}

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}

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}

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}

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 => ({

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">

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}

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 &&

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"