Updated all long style names to be more compact

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

app/javascript/gabsocial/components/popover/date_picker_popover.js

@@ -73,7 +73,7 @@ class DatePickerPopover extends React.PureComponent {
         isXS={isXS}
         onClose={this.handleOnClosePopover}
       >
-        <div className={[_s.default, _s.bgSubtle].join(' ')}>
+        <div className={[_s._, _s.bgSubtle].join(' ')}>
           <DatePicker
             inline
             target={this}
@@ -102,7 +102,7 @@ class DatePickerPopover extends React.PureComponent {
         </div>
         {
           date &&
-          <div className={[_s.default, _s.alignItemsCenter, _s.flexRow, _s.px10, _s.py10, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.aiCenter, _s.flexRow, _s.px10, _s.py10, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
             <Text size='extraSmall' color='secondary'>
               <FormattedMessage id='scheduled_for_datetime' defaultMessage='Scheduled for {datetime}' values={{
                 datetime: moment.utc(date).format('lll'),

app/javascript/gabsocial/components/popover/error_popover.js

@@ -19,8 +19,8 @@ export default class ErrorPopover extends React.PureComponent {
         isXS={isXS}
         onClose={this.props.onClose}
       >
-          <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
-            <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
               <ColumnIndicator type='error' message='Error loading popover' />
             </div>
           </div>

app/javascript/gabsocial/components/popover/loading_popover.js

@@ -19,8 +19,8 @@ export default class LoadingPopover extends React.PureComponent {
         isXS={isXS}
         onClose={this.props.onClose}
       >
-          <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
-            <div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
               <ColumnIndicator type='loading' />
             </div>
           </div>

app/javascript/gabsocial/components/popover/popover_base.js

@@ -130,7 +130,7 @@ class PopoverBase extends ImmutablePureComponent {
     } = this.props
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       z4: 1,
       boxShadowPopover: visible,
       displayNone: !visible,

app/javascript/gabsocial/components/popover/popover_layout.js

@@ -33,17 +33,17 @@ export default class PopoverLayout extends React.PureComponent {
 
     if (isXS) {
       return (
-        <div className={[_s.default, _s.modal, _s.px10, _s.pb10].join(' ')}>
-          <div className={[_s.default, _s.bgPrimary, _s.radiusSmall, _s.overflowHidden, _s.mb10].join(' ')}>
+        <div className={[_s._, _s.modal, _s.px10, _s.pb10].join(' ')}>
+          <div className={[_s._, _s.bgPrimary, _s.radiusSmall, _s.overflowHidden, _s.mb10].join(' ')}>
             {
               !!title &&
-              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
                 <Heading size='2'>
                   {title}
                 </Heading>
               </div>
             }
-            <div className={[_s.default, _s.heightMax80VH, _s.radiusSmall, _s.overflowYScroll].join(' ')}>
+            <div className={[_s._, _s.maxH80VH, _s.radiusSmall, _s.overflowYScroll].join(' ')}>
               {children}
             </div>
           </div>

app/javascript/gabsocial/components/popover/status_visibility_popover.js

@@ -85,14 +85,14 @@ class StatusVisibilityDropdown extends React.PureComponent {
         isXS={isXS}
         onClose={this.handleOnClosePopover}
       >
-        <div className={[_s.default].join(' ')}>
+        <div className={[_s._].join(' ')}>
           {
             options.map((option, i) => {
               const isActive = option.value === value
               const isLast = i === options.length - 1
 
               const containerClasses = cx({
-                default: 1,
+                _: 1,
                 flexRow: 1,
                 py10: 1,
                 cursorPointer: 1,
@@ -105,8 +105,8 @@ class StatusVisibilityDropdown extends React.PureComponent {
               const iconClasses = cx({
                 ml10: 1,
                 mt2: 1,
-                colorPrimary: !isActive,
-                colorWhite: isActive,
+                cPrimary: !isActive,
+                cWhite: isActive,
               })
 
               return (
@@ -116,7 +116,7 @@ class StatusVisibilityDropdown extends React.PureComponent {
                   className={containerClasses}
                 >
                   <Icon id={option.icon} size='16px' className={iconClasses} />
-                  <div className={[_s.default, _s.px10, _s.pt2].join(' ')}>
+                  <div className={[_s._, _s.px10, _s.pt2].join(' ')}>
                     <Text size='medium' color={isActive ? 'white' : 'primary'}>
                       {option.title}
                     </Text>

app/javascript/gabsocial/components/popover/user_info_popover.js

@@ -38,30 +38,30 @@ class UserInfoPopover extends ImmutablePureComponent {
 
     return (
       <PopoverLayout width={280}>
-        <div className={[_s.default, _s.width100PC, _s.px15, _s.py15].join(' ')} id='user-info-popover'>
+        <div className={[_s._, _s.w100PC, _s.px15, _s.py15].join(' ')} id='user-info-popover'>
           
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <NavLink
               to={to}
-              className={[_s.default, _s.noUnderline, _s.flexGrow1].join(' ')}
+              className={[_s._, _s.noUnderline, _s.flexGrow1].join(' ')}
             >
               <Avatar account={account} size={42} noHover />
               <DisplayName account={account} isMultiline noHover />
             </NavLink>
 
-            <div className={[_s.default, _s.mlAuto, _s.right0, _s.posAbs, _s.mt5].join(' ')}>
+            <div className={[_s._, _s.mlAuto, _s.right0, _s.posAbs, _s.mt5].join(' ')}>
               <AccountActionButton account={account} />
             </div>
           </div>
 
-          <div className={[_s.default, _s.mt10].join(' ')}>
+          <div className={[_s._, _s.mt10].join(' ')}>
             <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
           </div>
 
-          <div className={[_s.default, _s.flexRow, _s.mt10].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.mt10].join(' ')}>
             <NavLink
               to={`${to}/followers`}
-              className={[_s.default, _s.flexRow, _s.mr10, _s.noUnderline, _s.colorPrimary, _s.underline_onHover].join(' ')}
+              className={[_s._, _s.flexRow, _s.mr10, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
             >
               <Text weight='extraBold' color='primary'>
                 {shortNumberFormat(account.get('followers_count'))}&nbsp;
@@ -72,7 +72,7 @@ class UserInfoPopover extends ImmutablePureComponent {
             </NavLink>
             <NavLink
               to={`${to}/following`}
-              className={[_s.default, _s.flexRow, _s.noUnderline, _s.colorPrimary, _s.underline_onHover].join(' ')}
+              className={[_s._, _s.flexRow, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
             >
               <Text weight='extraBold' color='primary'>
                 {shortNumberFormat(account.get('following_count'))}&nbsp;

app/javascript/gabsocial/components/popover/video_stats_popover.js

@@ -72,7 +72,7 @@ class VideoStatsPopover extends ImmutablePureComponent {
     ]
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       bgBlack: !isXS,
       bgPrimary: !isXS,
       px10: 1,
@@ -137,8 +137,8 @@ class VideoStatLine extends React.PureComponent {
     const color = isXS ? 'primary' : 'white'
 
     return (
-      <div className={[_s.default, _s.flexRow, _s.pt2].join(' ')}>
-        <div className={[_s.default, _s.width115PX, _s.alignItemsEnd, _s.mr5].join(' ')}>
+      <div className={[_s._, _s.flexRow, _s.pt2].join(' ')}>
+        <div className={[_s._, _s.w115PX, _s.aiEnd, _s.mr5].join(' ')}>
           <Text size='extraSmall' weight='medium' color={color}>
             {title}
           </Text>