Refactored className usage for InlineTextButton

They are changed to use rootClassName for consistency
and protection against future bundling order changes.

src/components/ManageListingCard/ManageListingCard.css

@@ -164,6 +164,7 @@
 }
 
 .menuItem {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH5FontStyles;
   color: var(--matterColorLight);
   font-weight: var(--fontWeightMedium);
@@ -269,6 +270,7 @@
 }
 
 .title {
+  @apply --marketplaceLinkStyles;
   /* Font */
   @apply --marketplaceH3FontStyles;
   color: var(--matterColor);

src/components/ManageListingCard/ManageListingCard.js

@@ -219,7 +219,7 @@ export const ManageListingCardComponent = props => {
               <MenuContent rootClassName={css.menuContent}>
                 <MenuItem key="close-listing">
                   <InlineTextButton
-                    className={menuItemClasses}
+                    rootClassName={menuItemClasses}
                     onClick={event => {
                       event.preventDefault();
                       event.stopPropagation();
@@ -315,7 +315,7 @@ export const ManageListingCardComponent = props => {
         <div className={css.mainInfo}>
           <div className={css.titleWrapper}>
             <InlineTextButton
-              className={titleClasses}
+              rootClassName={titleClasses}
               onClick={event => {
                 event.preventDefault();
                 event.stopPropagation();

src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap

@@ -78,8 +78,8 @@ exports[`ManageListingCard matches snapshot 1`] = `
               rootClassName=""
             >
               <InlineTextButton
-                className=""
                 onClick={[Function]}
+                rootClassName=""
               >
                 <FormattedMessage
                   id="ManageListingCard.closeListing"
@@ -109,8 +109,8 @@ exports[`ManageListingCard matches snapshot 1`] = `
     <div>
       <div>
         <InlineTextButton
-          className=""
           onClick={[Function]}
+          rootClassName=""
         >
           <span
             key="1"

src/components/ModalMissingInformation/EmailReminder.js

@@ -17,7 +17,7 @@ const EmailReminder = props => {
   const email = user.id ? <span className={css.email}>{user.attributes.email}</span> : '';
 
   const resendEmailLink = (
-    <InlineTextButton className={css.helperLink} onClick={onResendVerificationEmail}>
+    <InlineTextButton rootClassName={css.helperLink} onClick={onResendVerificationEmail}>
       <FormattedMessage id="ModalMissingInformation.resendEmailLinkText" />
     </InlineTextButton>
   );

src/components/ModalMissingInformation/ModalMissingInformation.css

@@ -20,6 +20,7 @@
 }
 
 .helperLink {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceModalHelperLink;
 }
 

src/components/SearchFiltersPanel/SearchFiltersPanel.css

@@ -16,6 +16,7 @@
 }
 
 .resetAllButton {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH5FontStyles;
   font-weight: var(--fontWeightMedium);
   color: var(--matterColorAnti);
@@ -33,6 +34,7 @@
 }
 
 .cancelButton {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH5FontStyles;
   font-weight: var(--fontWeightMedium);
   color: var(--matterColorAnti);
@@ -50,6 +52,7 @@
 }
 
 .applyButton {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH5FontStyles;
   font-weight: var(--fontWeightMedium);
 

src/components/SearchFiltersPanel/SearchFiltersPanel.js

@@ -158,13 +158,13 @@ class SearchFiltersPanelComponent extends Component {
       <div className={classes}>
         <div className={css.filtersWrapper}>{/* Add filters here */}</div>
         <div className={css.footer}>
-          <InlineTextButton className={css.resetAllButton} onClick={this.resetAll}>
+          <InlineTextButton rootClassName={css.resetAllButton} onClick={this.resetAll}>
             <FormattedMessage id={'SearchFiltersPanel.resetAll'} />
           </InlineTextButton>
-          <InlineTextButton className={css.cancelButton} onClick={this.cancelFilters}>
+          <InlineTextButton rootClassName={css.cancelButton} onClick={this.cancelFilters}>
             <FormattedMessage id={'SearchFiltersPanel.cancel'} />
           </InlineTextButton>
-          <InlineTextButton className={css.applyButton} onClick={this.applyFilters}>
+          <InlineTextButton rootClassName={css.applyButton} onClick={this.applyFilters}>
             <FormattedMessage id={'SearchFiltersPanel.apply'} />
           </InlineTextButton>
         </div>

src/components/TabNavHorizontal/TabNavHorizontal.css

@@ -23,6 +23,7 @@
 }
 
 .tabContent {
+  @apply --marketplaceLinkStyles;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;

src/components/TabNavHorizontal/TabNavHorizontal.js

@@ -43,7 +43,7 @@ const Tab = props => {
   return (
     <div className={className}>
       {isButton ? (
-        <InlineTextButton className={buttonClasses} onClick={onClick}>
+        <InlineTextButton rootClassName={buttonClasses} onClick={onClick}>
           {text}
         </InlineTextButton>
       ) : (

src/components/TopbarDesktop/TopbarDesktop.css

@@ -304,6 +304,7 @@
 }
 
 .logoutButton {
+  @apply --marketplaceLinkStyles;
   /* Font is specific to this component */
   @apply --marketplaceH4FontStyles;
   font-size: 14px;

src/components/TopbarDesktop/TopbarDesktop.js

@@ -100,7 +100,7 @@ const TopbarDesktop = props => {
           </NamedLink>
         </MenuItem>
         <MenuItem key="logout">
-          <InlineTextButton className={css.logoutButton} onClick={onLogout}>
+          <InlineTextButton rootClassName={css.logoutButton} onClick={onLogout}>
             <span className={css.menuItemBorder} />
             <FormattedMessage id="TopbarDesktop.logout" />
           </InlineTextButton>

src/components/TopbarMobileMenu/TopbarMobileMenu.css

@@ -55,6 +55,7 @@
 }
 
 .logoutButton {
+  @apply --marketplaceLinkStyles;
   /* Logout font is smaller and gray since the action is not recommended. */
   @apply --marketplaceH3FontStyles;
   color: var(--matterColorAnti);

src/components/TopbarMobileMenu/TopbarMobileMenu.js

@@ -81,7 +81,7 @@ const TopbarMobileMenu = props => {
         <span className={css.greeting}>
           <FormattedMessage id="TopbarMobileMenu.greeting" values={{ displayName }} />
         </span>
-        <InlineTextButton className={css.logoutButton} onClick={onLogout}>
+        <InlineTextButton rootClassName={css.logoutButton} onClick={onLogout}>
           <FormattedMessage id="TopbarMobileMenu.logoutLink" />
         </InlineTextButton>
         <NamedLink

src/components/UserCard/UserCard.css

@@ -59,6 +59,7 @@
 }
 
 .showMore {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH4FontStyles;
   margin: 0 0 0 5px;
 }
@@ -116,6 +117,7 @@
 }
 
 .contact {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH4FontStyles;
   margin: 0;
 }

src/components/UserCard/UserCard.js

@@ -42,7 +42,7 @@ class ExpandableBio extends Component {
       this.setState({ expand: true });
     };
     const showMore = (
-      <InlineTextButton className={css.showMore} onClick={handleShowMoreClick}>
+      <InlineTextButton rootClassName={css.showMore} onClick={handleShowMoreClick}>
         <FormattedMessage id="UserCard.showFullBioLink" />
       </InlineTextButton>
     );
@@ -86,7 +86,7 @@ const UserCard = props => {
   const separator = isCurrentUser ? null : <span className={css.linkSeparator}>•</span>;
 
   const contact = (
-    <InlineTextButton className={css.contact} onClick={handleContactUserClick}>
+    <InlineTextButton rootClassName={css.contact} onClick={handleContactUserClick}>
       <FormattedMessage id="UserCard.contactUser" />
     </InlineTextButton>
   );

src/containers/AuthenticationPage/AuthenticationPage.css

@@ -122,6 +122,7 @@
 
 /* Helper links */
 .modalHelperLink {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceModalHelperLink;
 }
 

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -157,7 +157,7 @@ export class AuthenticationPageComponent extends Component {
     const email = <span className={css.email}>{user.attributes.email}</span>;
 
     const resendEmailLink = (
-      <InlineTextButton className={css.modalHelperLink} onClick={onResendVerificationEmail}>
+      <InlineTextButton rootClassName={css.modalHelperLink} onClick={onResendVerificationEmail}>
         <FormattedMessage id="AuthenticationPage.resendEmailLinkText" />
       </InlineTextButton>
     );

src/containers/ListingPage/ListingPage.css

@@ -383,6 +383,7 @@
 }
 
 .contactLink {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceH4FontStyles;
   margin: 0;
 }

src/containers/ListingPage/SectionHeading.js

@@ -45,7 +45,7 @@ const SectionHeading = props => {
           {showContactUser ? (
             <span className={css.contactWrapper}>
               <span className={css.separator}>•</span>
-              <InlineTextButton className={css.contactLink} onClick={onContactUser}>
+              <InlineTextButton rootClassName={css.contactLink} onClick={onContactUser}>
                 <FormattedMessage id="ListingPage.contactUser" />
               </InlineTextButton>
             </span>

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css

@@ -52,6 +52,7 @@
 }
 
 .helperLink {
+  @apply --marketplaceLinkStyles;
   @apply --marketplaceModalHelperLink;
 }
 

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js

@@ -45,13 +45,13 @@ export const PasswordRecoveryPageComponent = props => {
   });
 
   const resendEmailLink = (
-    <InlineTextButton className={css.helperLink} onClick={() => onSubmitEmail(submittedEmail)}>
+    <InlineTextButton rootClassName={css.helperLink} onClick={() => onSubmitEmail(submittedEmail)}>
       <FormattedMessage id="PasswordRecoveryPage.resendEmailLinkText" />
     </InlineTextButton>
   );
 
   const fixEmailLink = (
-    <InlineTextButton className={css.helperLink} onClick={onRetypeEmail}>
+    <InlineTextButton rootClassName={css.helperLink} onClick={onRetypeEmail}>
       <FormattedMessage id="PasswordRecoveryPage.fixEmailLinkText" />
     </InlineTextButton>
   );

src/forms/PayoutDetailsForm/PayoutDetailsFormCompany.js

@@ -193,7 +193,7 @@ const PayoutDetailsFormCompanyComponent = ({ fieldRenderProps }) => {
                 <React.Fragment>
                   <InlineTextButton
                     type="button"
-                    className={css.fieldArrayAdd}
+                    rootClassName={css.fieldArrayAdd}
                     onClick={() => push('company.additionalOwners', undefined)}
                   >
                     <span className={css.additionalOwnerLabel}>