Updated all long style names to be more compact

• Updated:
- all long style names to be more compact

app/javascript/gabsocial/features/compose/components/compose_extra_button.js

@@ -20,7 +20,7 @@ class ComposeExtraButton extends React.PureComponent {
     } = this.props
 
     const btnClasses = cx({
-      default: 1,
+      _: 1,
       circle: 1,
       noUnderline: 1,
       font: 1,
@@ -38,8 +38,8 @@ class ComposeExtraButton extends React.PureComponent {
     })
 
     const iconClasses = cx({
-      colorSecondary: !active,
-      colorWhite: active,
+      cSecondary: !active,
+      cWhite: active,
     })
 
     const iconSize = !!small ? '14px' : '16px'
@@ -64,7 +64,7 @@ class ComposeExtraButton extends React.PureComponent {
     }
 
     return (
-      <div className={[_s.default, _s.mr2].join(' ')} ref={buttonRef}>
+      <div className={[_s._, _s.mr2].join(' ')} ref={buttonRef}>
         {button}
         {children}
       </div>

app/javascript/gabsocial/features/compose/components/compose_form.js

@@ -211,20 +211,20 @@ class ComposeForm extends ImmutablePureComponent {
     const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
 
     const parentContainerClasses = CX({
-      default: 1,
-      width100PC: 1,
+      _: 1,
+      w100PC: 1,
       flexRow: !shouldCondense,
       pb10: !shouldCondense,
     })
 
     const childContainerClasses = CX({
-      default: 1,
+      _: 1,
       flexWrap: 1,
       overflowHidden: 1,
       flex1: 1,
-      heightMin28PX: 1,
+      minH28PX: 1,
       py2: shouldCondense,
-      alignItemsEnd: shouldCondense,
+      aiEnd: shouldCondense,
       flexRow: shouldCondense,
       radiusSmall: shouldCondense,
       bgSubtle: shouldCondense,
@@ -232,10 +232,10 @@ class ComposeForm extends ImmutablePureComponent {
     })
 
     const actionsContainerClasses = CX({
-      default: 1,
+      _: 1,
       flexRow: 1,
-      alignItemsCenter: !shouldCondense,
-      alignItemsStart: shouldCondense,
+      aiCenter: !shouldCondense,
+      aiStart: shouldCondense,
       mt10: !shouldCondense,
       px10: !shouldCondense,
       mlAuto: shouldCondense,
@@ -243,20 +243,20 @@ class ComposeForm extends ImmutablePureComponent {
     })
 
     const commentPublishBtnClasses = CX({
-      default: 1,
-      justifyContentCenter: 1,
+      _: 1,
+      jcCenter: 1,
       displayNone: length(this.props.text) === 0,
     })
 
     return (
-      <div className={[_s.default, _s.width100PC].join(' ')}>
+      <div className={[_s._, _s.w100PC].join(' ')}>
         {
           shouldCondense &&
           <div className={parentContainerClasses}>
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
 
-              <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
-                <div className={[_s.default, _s.mr10].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
+                <div className={[_s._, _s.mr10].join(' ')}>
                   <Avatar account={account} size={28} noHover />
                 </div>
 
@@ -287,7 +287,7 @@ class ComposeForm extends ImmutablePureComponent {
                   />
 
                   <div className={actionsContainerClasses}>
-                    <div className={[_s.default, _s.flexRow, _s.mrAuto].join(' ')}>
+                    <div className={[_s._, _s.flexRow, _s.mrAuto].join(' ')}>
 
                       { /* <EmojiPickerButton small={shouldCondense} isMatch={isMatch} /> */}
 
@@ -312,7 +312,7 @@ class ComposeForm extends ImmutablePureComponent {
 
               {
                 (isUploading || anyMedia) &&
-                <div className={[_s.default, _s.width100PC, _s.pl35, _s.mt5].join(' ')}>
+                <div className={[_s._, _s.w100PC, _s.pl35, _s.mt5].join(' ')}>
                   <UploadForm
                     replyToId={replyToId}
                     isModalOpen={isModalOpen}
@@ -326,7 +326,7 @@ class ComposeForm extends ImmutablePureComponent {
         {
           !shouldCondense &&
           <div className={parentContainerClasses}>
-            <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
               <div
                 className={childContainerClasses}
                 ref={this.setForm}
@@ -335,7 +335,7 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   !!reduxReplyToId && isModalOpen && isMatch &&
-                  <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
                     <StatusContainer
                       contextType='compose'
                       id={reduxReplyToId}
@@ -346,7 +346,7 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   !!spoiler &&
-                  <div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
                     <Input
                       placeholder={intl.formatMessage(messages.spoiler_placeholder)}
                       value={this.props.spoilerText}
@@ -382,7 +382,7 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   (isUploading || anyMedia) &&
-                  <div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.mt5].join(' ')}>
                     <UploadForm
                       replyToId={replyToId}
                       isModalOpen={isModalOpen}
@@ -393,7 +393,7 @@ class ComposeForm extends ImmutablePureComponent {
                 {
                   /* : todo :
                   !!selectedGifSrc && !anyMedia &&
-                  <div className={[_s.default, _s.px15].join(' ')}>
+                  <div className={[_s._, _s.px15].join(' ')}>
                     <GifForm
                       replyToId={replyToId}
                       small={shouldCondense}
@@ -405,14 +405,14 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   !edit && hasPoll &&
-                  <div className={[_s.default, _s.px15, _s.mt5].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.mt5].join(' ')}>
                     <PollForm replyToId={replyToId} />
                   </div>
                 }
 
                 {
                   !!quoteOfId && isModalOpen && isMatch &&
-                  <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
+                  <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
                     <StatusContainer
                       contextType='compose'
                       id={quoteOfId}
@@ -422,7 +422,7 @@ class ComposeForm extends ImmutablePureComponent {
                 }
 
                 <div className={actionsContainerClasses}>
-                  <div className={[_s.default, _s.flexRow, _s.mrAuto].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.mrAuto].join(' ')}>
 
                     <UploadButton small={shouldCondense} />
 

app/javascript/gabsocial/features/compose/components/gif_form.js

@@ -15,12 +15,12 @@ class GifForm extends React.PureComponent {
     if (!selectedGifSrc) return null
 
     return (
-      <div className={_s.default}>
-        <div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
+      <div className={_s._}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
           <Image
             width='auto'
             src={selectedGifSrc}
-            className={[_s.maxWidth100PC, _s.radiusSmall, _s.height260PX].join(' ')}
+            className={[_s.maxW100PC, _s.radiusSmall, _s.h260PX].join(' ')}
           />
         </div>
       </div>

app/javascript/gabsocial/features/compose/components/media_upload_item.js

@@ -81,7 +81,7 @@ class Upload extends ImmutablePureComponent {
     const description = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || ''
 
     const descriptionContainerClasses = cx({
-      default: 1,
+      _: 1,
       posAbs: 1,
       right0: 1,
       bottom0: 1,
@@ -96,20 +96,20 @@ class Upload extends ImmutablePureComponent {
     return (
       <div
         tabIndex='0'
-        className={[_s.default, _s.width50PC, _s.px5, _s.py5].join(' ')}
+        className={[_s._, _s.w50PC, _s.px5, _s.py5].join(' ')}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         onClick={this.handleClick}
         role='button'
       >
-        <div className={[_s.default, _s.radiusSmall, _s.overflowHidden, _s.height158PX].join(' ')}>
+        <div className={[_s._, _s.radiusSmall, _s.overflowHidden, _s.h158PX].join(' ')}>
           <Image
-            className={[_s.default, _s.height158PX].join(' ')}
+            className={[_s._, _s.h158PX].join(' ')}
             src={media.get('preview_url')}
           />
           {
             media.get('type') === 'gifv' &&
-            <div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.ml10, _s.mt10, _s.top0, _s.left0].join(' ')}>
+            <div className={[_s._, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.ml10, _s.mt10, _s.top0, _s.left0].join(' ')}>
               <Text size='extraSmall' color='white' weight='medium'>GIF</Text>
             </div>
           }

app/javascript/gabsocial/features/compose/components/poll_form.js

@@ -43,8 +43,8 @@ class PollForm extends ImmutablePureComponent {
     if (!options) return null
 
     return (
-      <div className={[_s.default, _s.px10, _s.py10, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
-        <ul className={[_s.default, _s.listStyleNone].join(' ')}>
+      <div className={[_s._, _s.px10, _s.py10, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
+        <ul className={[_s._, _s.listStyleNone].join(' ')}>
           {
             options.map((title, i) => (
               <PollFormOption
@@ -62,14 +62,14 @@ class PollForm extends ImmutablePureComponent {
           }
         </ul>
 
-        <div className={[_s.default, _s.flexRow].join(' ')}>
+        <div className={[_s._, _s.flexRow].join(' ')}>
           {
             options.size < 4 && (
               <Button
                 isOutline
                 backgroundColor='none'
                 color='brand'
-                className={[_s.alignItemsCenter, _s.mr10].join(' ')}
+                className={[_s.aiCenter, _s.mr10].join(' ')}
                 onClick={onAddOption}
                 icon='add'
                 iconSize='14px'
@@ -82,7 +82,7 @@ class PollForm extends ImmutablePureComponent {
             )
           }
 
-          <div className={[_s.default, _s.flexGrow1].join(' ')}>
+          <div className={[_s._, _s.flexGrow1].join(' ')}>
             <Select
               value={expiresIn}
               onChange={this.handleSelectDuration}
@@ -147,7 +147,7 @@ class PollFormOption extends ImmutablePureComponent {
     const { isPollMultiple, title, index, intl } = this.props
 
     const toggleClasses = cx({
-      default: 1,
+      _: 1,
       px10: 1,
       py10: 1,
       borderColorSecondary: 1,
@@ -158,8 +158,8 @@ class PollFormOption extends ImmutablePureComponent {
     })
 
     return (
-      <li className={[_s.default, _s.flexRow, _s.mb10].join(' ')}>
-        <label className={[_s.default, _s.flexRow, _s.flexGrow1, _s.alignItemsCenter].join(' ')}>
+      <li className={[_s._, _s.flexRow, _s.mb10].join(' ')}>
+        <label className={[_s._, _s.flexRow, _s.flexGrow1, _s.aiCenter].join(' ')}>
           <span
             className={toggleClasses}
             onClick={this.handleToggleMultiple}
@@ -180,10 +180,10 @@ class PollFormOption extends ImmutablePureComponent {
           <Button
             isNarrow
             backgroundColor='none'
-            className={[_s.ml5, _s.justifyContentCenter].join(' ')}
+            className={[_s.ml5, _s.jcCenter].join(' ')}
             icon='close'
             iconSize='8px'
-            iconClassName={_s.colorSecondary}
+            iconClassName={_s.cSecondary}
             disabled={index <= 1}
             title={intl.formatMessage(messages.remove_option)}
             onClick={this.handleOptionRemove}

app/javascript/gabsocial/features/compose/components/sensitive_media_button.js

@@ -11,7 +11,7 @@ class SensitiveMediaButton extends React.PureComponent {
     const { active, disabled, onClick, intl } = this.props
 
     return (
-      <div className={[_s.default, _s.alignItemsStart, _s.px5].join(' ')}>
+      <div className={[_s._, _s.aiStart, _s.px5].join(' ')}>
         <Switch
           id='mark-sensitive'
           type='checkbox'

app/javascript/gabsocial/features/compose/components/upload_form.js

@@ -17,8 +17,8 @@ class UploadForm extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <div className={_s.default}>
-        <div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
+      <div className={_s._}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
           {
             mediaIds.map(id => (
               <Upload id={id} key={id} />