Updated all long style names to be more compact

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

app/javascript/gabsocial/components/panel/group_info_panel.js

@@ -71,7 +71,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
 
     if (noPanel) {
       return (
-        <div className={[_s.default].join(' ')}>
+        <div className={[_s._].join(' ')}>
           {
             !!group &&
             <React.Fragment>
@@ -87,12 +87,12 @@ class GroupInfoPanel extends ImmutablePureComponent {
               <Text className={[_s.mt10, _s.py2].join(' ')} color='secondary' size='small' align='center'>
                 {group.get('description')}
               </Text>
-              <div className={[_s.default, _s.mt10, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
+              <div className={[_s._, _s.mt10, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
                 <Text color='secondary' size='small' align='center'>
                   <Icon
                     id={isPrivate ? 'lock-filled' : 'globe'}
                     size='10px'
-                    className={_s.colorSecondary}
+                    className={_s.cSecondary}
                   />
                   <span className={_s.ml5}>
                     {intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)}
@@ -190,7 +190,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
               <React.Fragment>
                 <Divider isSmall />
                 <GroupInfoPanelRow title={intl.formatMessage(messages.tags)} icon='shop'>
-                  <div className={[_s.default, _s.flexRow, _s.justifyContentEnd, _s.flexWrap, _s.pl5].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.jcEnd, _s.flexWrap, _s.pl5].join(' ')}>
                     {
                       tags.map((tag) => (
                         <div className={[_s.mr5, _s.mb5].join(' ')}>
@@ -223,8 +223,8 @@ class GroupInfoPanelRow extends React.PureComponent {
     const { icon, title } = this.props
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.py2].join(' ')}>
-        <div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
+      <div className={[_s._, _s.flexRow, _s.py2].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.jcCenter].join(' ')}>
           <Icon id={icon} size='16px' />
           <Text weight='bold' size='medium' className={_s.ml10}>
             {title}

app/javascript/gabsocial/components/panel/list_details_panel.js

@@ -47,9 +47,9 @@ class ListDetailsPanel extends ImmutablePureComponent {
         }
         {
           title && createdAt &&
-          <div className={_s.default}>
+          <div className={_s._}>
 
-            <div className={_s.default}>
+            <div className={_s._}>
               <Text weight='medium'>
                 {title}
               </Text>
@@ -57,8 +57,8 @@ class ListDetailsPanel extends ImmutablePureComponent {
 
             <Divider isSmall />
 
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-              <Icon id='calendar' size='12px' className={_s.colorSecondary} />
+            <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+              <Icon id='calendar' size='12px' className={_s.cSecondary} />
               <Text
                 size='small'
                 color='secondary'

app/javascript/gabsocial/components/panel/lists_panel.js

@@ -85,7 +85,7 @@ class ListsPanel extends ImmutablePureComponent {
         footerButtonTo={count > maxCount ? '/lists' : undefined}
         noPadding
       >
-        <div className={[_s.default, _s.boxShadowNone].join(' ')}>
+        <div className={[_s._, _s.boxShadowNone].join(' ')}>
           <List
             scrollKey='lists_sidebar_panel'
             items={listItems}

app/javascript/gabsocial/components/panel/media_gallery_panel.js

@@ -70,7 +70,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
         headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined}
         headerButtonTo={!!account ? `/${account.get('acct')}/media` : undefined}
       > 
-        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
           {
             !!account && attachments.size > 0 &&
             attachments.slice(0, 16).map((attachment, i) => (
@@ -84,7 +84,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
           }
           {
             !account || (attachments.size === 0 && isLoading) &&
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
               <MediaGalleryPanelPlaceholder />
             </div>
           }

app/javascript/gabsocial/components/panel/panel_layout.js

@@ -37,18 +37,18 @@ export default class PanelLayout extends React.PureComponent {
     } = this.props
 
     return (
-      <aside className={[_s.default, _s.mb15].join(' ')}>
+      <aside className={[_s._, _s.mb15].join(' ')}>
         <Block>
           {
             (title || subtitle) &&
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
                 <Heading size='h2'>
                   {title}
                 </Heading>
                 {
                   (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
-                  <div className={[_s.default, _s.mlAuto].join(' ')}>
+                  <div className={[_s._, _s.mlAuto].join(' ')}>
                     <Button
                       isText
                       backgroundColor='none'
@@ -74,7 +74,7 @@ export default class PanelLayout extends React.PureComponent {
 
           {
             !noPadding &&
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
               {children}
             </div>
           }
@@ -85,7 +85,7 @@ export default class PanelLayout extends React.PureComponent {
 
           {
             (!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo || !!footerButtonHref)) &&
-            <div className={_s.default}>
+            <div className={_s._}>
               <Button
                 isText
                 color='none'

app/javascript/gabsocial/components/panel/pro_panel.js

@@ -27,11 +27,11 @@ class ProPanel extends React.PureComponent {
     if (isPro) return null
 
     const title = (
-      <span className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
-        <span className={[_s.default, _s.mr2].join(' ')}>
+      <span className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
+        <span className={[_s._, _s.mr2].join(' ')}>
           Upgrade to Gab
         </span>
-        <span className={[_s.bgPro, _s.colorBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
+        <span className={[_s.bgPro, _s.cBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
       </span>
     )
 
@@ -41,13 +41,13 @@ class ProPanel extends React.PureComponent {
         subtitle={intl.formatMessage(messages.text)}
       >
 
-        <div className={[_s.default, _s.flexRow, _s.pb5].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.pb5].join(' ')}>
           <Button
             isOutline
             color='brand'
             backgroundColor='none'
             href={URL_GAB_PRO}
-            className={[_s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mr10].join(' ')}
+            className={[_s.flexRow, _s.aiCenter, _s.jcCenter, _s.mr10].join(' ')}
           >
             <Text color='inherit' weight='medium' align='center'>
               Learn more
@@ -55,12 +55,12 @@ class ProPanel extends React.PureComponent {
           </Button>
           <Button
             href={URL_GAB_PRO}
-            className={[_s.flexRow, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}
+            className={[_s.flexRow, _s.flexGrow1, _s.aiCenter, _s.jcCenter].join(' ')}
           >
             <Text color='inherit' size='large' weight='bold' align='center'>
               Upgrade
             </Text>
-            <Icon id='arrow-right' size='20px' className={[_s.colorWhite, _s.ml5].join(' ')} />
+            <Icon id='arrow-right' size='20px' className={[_s.cWhite, _s.ml5].join(' ')} />
           </Button>
         </div>
 

app/javascript/gabsocial/components/panel/profile_info_panel.js

@@ -58,7 +58,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
     return (
       <Wrapper title={intl.formatMessage(messages.title)}>
-        <div className={[_s.default].join(' ')}>
+        <div className={[_s._].join(' ')}>
           {
             hasNote &&
             <React.Fragment>
@@ -67,8 +67,8 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             </React.Fragment>
           }
 
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-            <Icon id='calendar' size='12px' className={_s.colorSecondary} />
+          <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+            <Icon id='calendar' size='12px' className={_s.cSecondary} />
             <Text
               size='small'
               color='secondary'
@@ -86,7 +86,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             hasBadges &&
             <React.Fragment>
               <Divider isSmall />
-              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
                 { 
                   isPro &&
                   <div className={[_s.mr5, _s.radiusSmall, _s.bgPro, _s.py2, _s.px5].join(' ')}>
@@ -111,12 +111,12 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
           {
             fields.size > 0 && 
-            <div className={[_s.default]}>
+            <div className={[_s._]}>
               {
                 fields.map((pair, i) => (
                   <React.Fragment>
                     <Divider isSmall />
-                    <dl className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')} key={`profile-field-${i}`}>
+                    <dl className={[_s._, _s.flexRow, _s.aiCenter].join(' ')} key={`profile-field-${i}`}>
                       <dt
                         className={[_s.text, _s.dangerousContent, _s.pr5].join(' ')}
                         dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}

app/javascript/gabsocial/components/panel/profile_stats_panel.js

@@ -46,8 +46,8 @@ class ProfileStatsPanel extends ImmutablePureComponent {
         {
           !!account &&
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.flexRow].join(' ')}
-            classNamesXS={[_s.default, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
+            classNames={[_s._, _s.flexRow].join(' ')}
+            classNamesXS={[_s._, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
           >
             <UserStat
               title={intl.formatMessage(messages.gabs)}

app/javascript/gabsocial/components/panel/shop_panel.js

@@ -74,7 +74,7 @@ class ShopPanel extends React.PureComponent {
         footerButtonTitle={intl.formatMessage(messages.shop_now)}
         footerButtonHref={URL_DISSENTER_SHOP}
       >
-        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.pl5, _s.pt5].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap, _s.pl5, _s.pt5].join(' ')}>
           {
             items.map((block, i) => (
               <ShopItem

app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js

@@ -28,23 +28,23 @@ class SignUpLogInPanel extends React.PureComponent {
     if (me) return null
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       radiusSmall: 1,
       overflowHidden: 1,
       bgPrimary: 1,
       boxShadowBlock: 1,
       py15: 1,
-      justifyContentCenter: 1,
+      jcCenter: 1,
       heigh315PX: !isXS,
-      height158PX: isXS,
+      h158PX: isXS,
     })
 
     return (
-      <aside className={[_s.default, _s.mb15].join(' ')}>
+      <aside className={[_s._, _s.mb15].join(' ')}>
         <div className={containerClasses}>
-          <div className={[_s.default]}>
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.default].join(' ')}>
+          <div className={[_s._]}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s._].join(' ')}>
                 <Text color='primary' size='extraExtraLarge' weight='bold' align='center' tag='h2'>
                   {intl.formatMessage(messages.title)}
                 </Text>
@@ -57,8 +57,8 @@ class SignUpLogInPanel extends React.PureComponent {
 
           {
             !isXS &&
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.default, _s.pb5].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s._, _s.pb5].join(' ')}>
                 <Button
                   isOutline
                   color='white'

app/javascript/gabsocial/components/panel/sign_up_panel.js

@@ -31,13 +31,13 @@ class SignUpPanel extends React.PureComponent {
         title={intl.formatMessage(messages.title)}
         subtitle={intl.formatMessage(messages.subtitle)}
       >
-        <div className={[_s.default, _s.flexRow, _s.pb5].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.pb5].join(' ')}>
           <Button
             isOutline
             color='brand'
             backgroundColor='none'
             href='/auth/sign_in'
-            className={[_s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mr10].join(' ')}
+            className={[_s.flexRow, _s.aiCenter, _s.jcCenter, _s.mr10].join(' ')}
           >
             <Text color='inherit' weight='medium' align='center' className={_s.px10}>
               {intl.formatMessage(messages.login)}

app/javascript/gabsocial/components/panel/status_promotion_panel.js

@@ -56,7 +56,7 @@ class StatusPromotionPanel extends ImmutablePureComponent {
     const { status } = this.props
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       pb10: !!status ? status.get('media_attachments').size === 0 : false,
     })
 
@@ -67,23 +67,23 @@ class StatusPromotionPanel extends ImmutablePureComponent {
         }
         {
           !!status &&
-          <div className={_s.default}>
-            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
+          <div className={_s._}>
+            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
 
                 <NavLink
                   to={`/${status.getIn(['account', 'acct'])}`}
                   title={status.getIn(['account', 'acct'])}
-                  className={[_s.default, _s.mr10].join(' ')}
+                  className={[_s._, _s.mr10].join(' ')}
                 >
                   <Avatar account={status.get('account')} size={28} />
                 </NavLink>
 
-                <div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.mt5].join(' ')}>
+                <div className={[_s._, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
 
-                  <div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsStart].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
                     <NavLink
-                      className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
+                      className={[_s._, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
                       to={`/${status.getIn(['account', 'acct'])}`}
                       title={status.getIn(['account', 'acct'])}
                     >
@@ -96,7 +96,7 @@ class StatusPromotionPanel extends ImmutablePureComponent {
                       color='none'
                       icon='ellipsis'
                       iconSize='20px'
-                      iconClassName={_s.colorSecondary}
+                      iconClassName={_s.cSecondary}
                       className={_s.mlAuto}
                       onClick={() => {}}
                       // buttonRef={this.setStatusOptionsButton}

app/javascript/gabsocial/components/panel/user_panel.js

@@ -91,13 +91,13 @@ class UserPanel extends ImmutablePureComponent {
     return (
       <PanelLayout noPadding>
         <div
-          className={[_s.default, _s.height122PX].join(' ')}
+          className={[_s._, _s.h122PX].join(' ')}
           onMouseEnter={this.handleOnMouseEnter}
           onMouseLeave={this.handleOnMouseLeave}
         >
           <Image
             alt={intl.formatMessage(messages.headerPhoto)}
-            className={_s.height122PX}
+            className={_s.h122PX}
             src={account.get('header_static')}
           />
           <Button
@@ -112,18 +112,18 @@ class UserPanel extends ImmutablePureComponent {
         </div>
 
         <NavLink
-          className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
+          className={[_s._, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
           to={`/${acct}`}
         >
-          <div className={[_s.default, _s.mtNeg32PX, _s.circle, _s.borderColorPrimary, _s.border6PX].join(' ')}>
+          <div className={[_s._, _s.mtNeg32PX, _s.circle, _s.borderColorPrimary, _s.border6PX].join(' ')}>
             <Avatar account={account} size={62} noHover />
           </div>
-          <div className={[_s.default, _s.ml15].join(' ')}>
+          <div className={[_s._, _s.ml15].join(' ')}>
             <DisplayName account={account} isMultiline noRelationship noHover />
           </div>
         </NavLink>
 
-        <div className={[_s.default, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
+        <div className={[_s._, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
           <UserStat
             to={`/${acct}`}
             title={intl.formatMessage(messages.gabs)}

app/javascript/gabsocial/components/panel/verified_accounts_panel.js

@@ -76,7 +76,7 @@ class VerifiedAccountsPanel extends ImmutablePureComponent {
         // footerButtonTitle={intl.formatMessage(messages.show_more)}
         // footerButtonTo='/explore'
       >
-        <div className={_s.default}>
+        <div className={_s._}>
           {
             suggestions.map(accountId => (
               <Account

app/javascript/gabsocial/components/panel/who_to_follow_panel.js

@@ -88,7 +88,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
         footerButtonTitle={intl.formatMessage(messages.show_more)}
         footerButtonTo='/explore'
       >
-        <div className={_s.default}>
+        <div className={_s._}>
           {
             arr.map((accountId) => (
               <Child