Updated all long style names to be more compact

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

app/javascript/gabsocial/components/about_sidebar.js

@@ -20,21 +20,21 @@ class AboutSidebar extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
+      <header role='banner' className={[_s._, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
         <ResponsiveClassesComponent
-          classNames={[_s.default, _s.width240PX].join(' ')}
-          classNamesXS={[_s.default, _s.width100PC].join(' ')}
+          classNames={[_s._, _s.w240PX].join(' ')}
+          classNamesXS={[_s._, _s.w100PC].join(' ')}
         >
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}
-            classNamesXS={[_s.default, _s.px15].join(' ')}
+            classNames={[_s._, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}
+            classNamesXS={[_s._, _s.px15].join(' ')}
           >
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}
-              classNamesXS={[_s.default,  _s.alignItemsStart, _s.width100PC, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
+              classNames={[_s._, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}
+              classNamesXS={[_s._,  _s.aiStart, _s.w100PC, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
             >
-              <div className={[_s.default, _s.width100PC].join(' ')}>
-                <div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                   {
                     me && <BackButton icon='arrow-left' toHome />
                   }
@@ -44,7 +44,7 @@ class AboutSidebar extends ImmutablePureComponent {
                 </div>
 
               </div>
-              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   items.map((menuItem, i) => (

app/javascript/gabsocial/components/account.js

@@ -65,7 +65,7 @@ class Account extends ImmutablePureComponent {
         isOutline={true}
         color='brand'
         backgroundColor='none'
-        className={[_s.px10, _s.flexRow, _s.alignItemsCenter].join(' ')}
+        className={[_s.px10, _s.flexRow, _s.aiCenter].join(' ')}
         icon={actionIcon}
         iconSize='10px'
       >
@@ -83,40 +83,40 @@ class Account extends ImmutablePureComponent {
       <Button
         isNarrow
         backgroundColor='none'
-        className={[_s.alignItemsEnd, _s.px5]}
+        className={[_s.aiEnd, _s.px5]}
         onClick={dismissAction}
         icon='close'
         iconSize='8px'
-        iconClassName={_s.colorSecondary}
+        iconClassName={_s.cSecondary}
       />
     )
 
     const content = { __html: account.get('note_emojified') }
 
     return (
-      <div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}>
-        <div className={[_s.default, _s.flexRow, _s.alignItemsStart].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.aiStart].join(' ')}>
 
           <NavLink
-            className={[_s.default, _s.noUnderline].join(' ')}
+            className={[_s._, _s.noUnderline].join(' ')}
             title={account.get('acct')}
             to={`/${account.get('acct')}`}
           >
             <Avatar account={account} size={avatarSize} />
           </NavLink>
 
-          <div className={[_s.default, _s.px10, _s.overflowHidden, _s.flexNormal].join(' ')}>
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+          <div className={[_s._, _s.px10, _s.overflowHidden, _s.flexNormal].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
               <NavLink
                 title={account.get('acct')}
                 to={`/${account.get('acct')}`}
-                className={[_s.default, _s.alignItemsStart, _s.pt2, _s.pr5, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')}
+                className={[_s._, _s.aiStart, _s.pt2, _s.pr5, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')}
               >
                 <DisplayName account={account} isMultiline={compact} />
                 {!compact && actionButton}
               </NavLink>
 
-              <div className={[_s.default].join(' ')}>
+              <div className={[_s._].join(' ')}>
                 {dismissBtn}
                 {compact && actionButton}
               </div>

app/javascript/gabsocial/components/account_action_button.js

@@ -104,7 +104,7 @@ class AccountActionButton extends ImmutablePureComponent {
       <Button
         {...buttonOptions}
         isNarrow
-        className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+        className={[_s.jcCenter, _s.aiCenter].join(' ')}
       >
         <Text
           color='inherit'

app/javascript/gabsocial/components/autosuggest_account.js

@@ -14,7 +14,7 @@ class AutosuggestAccount extends ImmutablePureComponent {
 
     return (
       <div
-        className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
+        className={[_s._, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.aiCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
         title={account.get('acct')}
       >
         <Avatar account={account} size={26} />

app/javascript/gabsocial/components/autosuggest_emoji.js

@@ -22,7 +22,7 @@ class AutosuggestEmoji extends React.PureComponent {
     }
 
     return (
-      <div className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s._, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.aiCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <img className='emojione' src={url} alt={emoji.native || emoji.colons} />
         <Text className={_s.ml10}>
           {emoji.colons}

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -194,32 +194,32 @@ class AutosuggestTextbox extends ImmutablePureComponent {
     const { suggestionsHidden } = this.state
 
     const textareaContainerClasses = CX({
-      default: 1,
-      maxWidth100PC: 1,
+      _: 1,
+      maxW100PC: 1,
       flexGrow1: small,
-      justifyContentCenter: small,
+      jcCenter: small,
       py5: small,
     })
 
     const textareaClasses = CX({
-      default: 1,
+      _: 1,
       font: 1,
       wrap: 1,
       resizeNone: 1,
       bgTransparent: 1,
       outlineNone: 1,
       lineHeight125: 1,
-      colorPrimary: 1,
-      width100PC: !small,
+      cPrimary: 1,
+      w100PC: !small,
       pt15: !small,
       px15: !small,
       px10: small,
       pb10: !small,
       fs16PX: !small,
       fs14PX: small,
-      heightMax200PX: small,
-      heightMax80VH: !small,
-      heightMin80PX: !small,
+      maxH200PX: small,
+      maxH80VH: !small,
+      minH80PX: !small,
     })
 
     return (
@@ -272,7 +272,7 @@ class AutosuggestTextbox extends ImmutablePureComponent {
 
         {
           !small && !suggestionsHidden && !suggestions.isEmpty() &&
-          <div className={[_s.default].join(' ')}>
+          <div className={[_s._].join(' ')}>
             {suggestions.map(this.renderSuggestion)}
           </div>
         }

app/javascript/gabsocial/components/avatar.js

@@ -89,7 +89,7 @@ class Avatar extends ImmutablePureComponent {
 
     const isPro = !!account ? account.get('is_pro') : false
     const alt = !account ? '' : `${account.get('display_name')} ${isPro ? '(PRO)' : ''}`.trim()
-    const classes = [_s.default, _s.circle, _s.overflowHidden]
+    const classes = [_s._, _s.circle, _s.overflowHidden]
     if (isPro) {
       classes.push(_s.boxShadowAvatarPro)
     }

app/javascript/gabsocial/components/back_button.js

@@ -30,13 +30,13 @@ class BackButton extends React.PureComponent {
     } = this.props
 
     const classes = CX(className, {
-       alignItemsCenter: 1,
+       aiCenter: 1,
        bgTransparent: 1,
        mr5: 1,
        cursorPointer: 1,
        outlineNone: 1,
-       default: 1,
-       justifyContentCenter: 1,
+       _: 1,
+       jcCenter: 1,
     })
 
     return (
@@ -47,7 +47,7 @@ class BackButton extends React.PureComponent {
         className={classes}
         icon={icon || 'angle-left'}
         iconSize={iconSize || '24px'}
-        iconClassName={iconClassName || [_s.mr5, _s.colorPrimary].join(' ')}
+        iconClassName={iconClassName || [_s.mr5, _s.cPrimary].join(' ')}
         onClick={this.handleBackClick}
       />
     )

app/javascript/gabsocial/components/block.js

@@ -10,7 +10,7 @@ class Block extends React.PureComponent {
     const { children } = this.props
 
     return (
-      <div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
+      <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
         {children}
       </div>
     )

app/javascript/gabsocial/components/block_heading.js

@@ -8,8 +8,8 @@ class BlockHeading extends React.PureComponent {
     const { title } = this.props
 
     return (
-      <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>
         </div>
       </div>

app/javascript/gabsocial/components/bundle_column_error.js

@@ -24,15 +24,15 @@ class BundleColumnError extends React.PureComponent {
     const { intl: { formatMessage } } = this.props
 
     return (
-      <div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-        <div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
-          <div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
+      <div className={[_s._, _s.minH100VH, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <div className={[_s._, _s.minH53PX, _s.bgBrand, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+          <div className={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w1255PX].join(' ')}>
 
-            <div className={[_s.default, _s.flexRow].join(' ')}>
+            <div className={[_s._, _s.flexRow].join(' ')}>
 
-              <h1 className={[_s.default, _s.mr15].join(' ')}>
-                <Button href='/' isText aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
-                  <Icon id='logo' className={_s.colorWhite} />
+              <h1 className={[_s._, _s.mr15].join(' ')}>
+                <Button href='/' isText aria-label='Gab' className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
+                  <Icon id='logo' className={_s.cWhite} />
                 </Button>
               </h1>
 
@@ -40,20 +40,20 @@ class BundleColumnError extends React.PureComponent {
           </div>
         </div>
 
-        <div className={[_s.default, _s.maxWidth640PX, _s.px15, _s.py10].join(' ')}>
+        <div className={[_s._, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
 
-          <Icon id='warning' size='28px' className={[_s.default, _s.colorSecondary, _s.mb15].join(' ')} />
+          <Icon id='warning' size='28px' className={[_s._, _s.cSecondary, _s.mb15].join(' ')} />
 
           <Text size='medium' className={_s.pt15}>
             {formatMessage(messages.body)}
           </Text>
 
-          <div className={[_s.default, _s.py10, _s.my10].join(' ')}>
+          <div className={[_s._, _s.py10, _s.my10].join(' ')}>
             <Text>
               {APP_NAME} ({version})
             </Text>
 
-            <div className={[_s.default, _s.flexRow, _s.mt10, _s.alignItemsCenter].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.mt10, _s.aiCenter].join(' ')}>
               <Button
                 isText
                 href={source_url}
@@ -77,7 +77,7 @@ class BundleColumnError extends React.PureComponent {
 
           <Divider />
 
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <Button
               icon='repost'
               onClick={this.handleRetry} size={64}

app/javascript/gabsocial/components/button.js

@@ -109,7 +109,7 @@ class Button extends React.PureComponent {
 
     // Style the component according to props
     const classes = noClasses ? className : cx(className, {
-      default: 1,
+      _: 1,
       noUnderline: 1,
       font: 1,
       cursorPointer: 1,
@@ -129,11 +129,11 @@ class Button extends React.PureComponent {
       bgSubtle: backgroundColor === COLORS.secondary,
       bgDanger: backgroundColor === COLORS.danger,
       
-      colorPrimary: color === COLORS.primary,
-      colorSecondary: color === COLORS.secondary,
-      colorTertiary: color === COLORS.tertiary,
-      colorWhite: color === COLORS.white,
-      colorBrand: color === COLORS.brand,
+      cPrimary: color === COLORS.primary,
+      cSecondary: color === COLORS.secondary,
+      cTertiary: color === COLORS.tertiary,
+      cWhite: color === COLORS.white,
+      cBrand: color === COLORS.brand,
 
       borderColorBrand: color === COLORS.brand && isOutline,
       border1PX: isOutline,
@@ -145,7 +145,7 @@ class Button extends React.PureComponent {
       py10: !isText && !isNarrow,
       px15: !isText,
 
-      width100PC: isBlock,
+      w100PC: isBlock,
 
       underline_onHover: underlineOnHover,
 
@@ -155,7 +155,7 @@ class Button extends React.PureComponent {
       bgDangerDark_onHover: backgroundColor === COLORS.danger && !isDisabled,
 
       bgBrand_onHover: color === COLORS.brand && isOutline && !isDisabled,
-      colorWhite_onHover: color === COLORS.brand && isOutline && !isDisabled,
+      cWhite_onHover: color === COLORS.brand && isOutline && !isDisabled,
     })
 
     const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'

app/javascript/gabsocial/components/character_counter.js

@@ -19,7 +19,7 @@ class CharacterCounter extends React.PureComponent {
     const dashoffset = circumference * (1 - diff)
 
     return (
-      <div className={[_s.default, _s.mr10, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
+      <div className={[_s._, _s.mr10, _s.jcCenter, _s.aiCenter].join(' ')}>
         <svg
           width={actualRadius * 2}
           height={actualRadius * 2}

app/javascript/gabsocial/components/column_indicator.js

@@ -12,7 +12,7 @@ class ColumnIndicator extends React.PureComponent {
     const title = type !== 'error' && !message ? intl.formatMessage(messages[type]) : message
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.py15].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.jcCenter, _s.aiCenter, _s.py15].join(' ')}>
         <Icon id={type} size='30px' />
         {
           type !== 'loading' &&

app/javascript/gabsocial/components/comment.js

@@ -85,7 +85,7 @@ class Comment extends ImmutablePureComponent {
     }
 
     const contentClasses = CX({
-      default: 1,
+      _: 1,
       px10: 1,
       pt5: 1,
       pb10: 1,
@@ -95,19 +95,19 @@ class Comment extends ImmutablePureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
-        <div className={_s.default} style={style}>
+      <div className={[_s._, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
+        <div className={_s._} style={style}>
 
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <NavLink
               to={`/${status.getIn(['account', 'acct'])}`}
               title={status.getIn(['account', 'acct'])}
-              className={[_s.default, _s.mr10, _s.pt5].join(' ')}
+              className={[_s._, _s.mr10, _s.pt5].join(' ')}
             >
               <Avatar account={status.get('account')} size={32} />
             </NavLink>
 
-            <div className={[_s.default, _s.flexShrink1, _s.maxWidth100PC42PX].join(' ')}>
+            <div className={[_s._, _s.flexShrink1, _s.maxW100PC42PX].join(' ')}>
               <div className={contentClasses}>
                 <CommentHeader
                   ancestorAccountId={ancestorAccountId}
@@ -122,7 +122,7 @@ class Comment extends ImmutablePureComponent {
                   isComment
                   collapsable
                 />
-                <div className={[_s.default, _s.mt5].join(' ')}>
+                <div className={[_s._, _s.mt5].join(' ')}>
                   <StatusMedia
                     isComment
                     status={status}
@@ -136,7 +136,7 @@ class Comment extends ImmutablePureComponent {
                 </div>
               </div>
 
-              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
                 <CommentButton
                   title={intl.formatMessage(status.get('favourited') ? messages.unlike : messages.like)}
                   onClick={this.handleOnFavorite}

app/javascript/gabsocial/components/comment_header.js

@@ -43,11 +43,11 @@ class CommentHeader extends ImmutablePureComponent {
     const myComment = status.getIn(['account', 'id']) === me
 
     return (
-      <div className={[_s.default, _s.alignItemsStart, _s.py2, _s.maxWidth100PC, _s.flexGrow1].join(' ')}>
+      <div className={[_s._, _s.aiStart, _s.py2, _s.maxW100PC, _s.flexGrow1].join(' ')}>
 
-        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.width100PC, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.w100PC, _s.maxW100PC, _s.aiCenter].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'])}
           >
@@ -60,11 +60,11 @@ class CommentHeader extends ImmutablePureComponent {
 
           {
             isOwner &&
-            <div className={[_s.default, _s.alignItemsCenter, _s.ml5].join(' ')}>
+            <div className={[_s._, _s.aiCenter, _s.ml5].join(' ')}>
               <span className={_s.visiblyHidden}>
                 {intl.formatMessage(messages.original)}
               </span>
-              <Icon id='mic' size='10px' className={_s.colorBrand} />
+              <Icon id='mic' size='10px' className={_s.cBrand} />
             </div>
           }
 

app/javascript/gabsocial/components/comment_list.js

@@ -41,7 +41,7 @@ class CommentList extends ImmutablePureComponent {
         </Wrapper>
         {
           size > 0 && size > max && commentsLimited &&
-          <div className={[_s.default, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.alignItemsCenter].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.aiCenter].join(' ')}>
             <Button
               isText
               backgroundColor='none'
@@ -52,7 +52,7 @@ class CommentList extends ImmutablePureComponent {
                 View more comments
               </Text>
             </Button>
-            <div className={[_s.default, _s.mlAuto].join(' ')}>
+            <div className={[_s._, _s.mlAuto].join(' ')}>
               <Text color='tertiary'>
                 {max}
                 &nbsp;of&nbsp;

app/javascript/gabsocial/components/composer.js

@@ -72,7 +72,7 @@ const findWithRegex = (regex, contentBlock, callback) => {
 const HighlightedSpan = (props) => {
   return (
     <span
-      className={_s.colorBrand}
+      className={_s.cBrand}
       data-offset-key={props.offsetKey}
     >
       {props.children}
@@ -238,10 +238,10 @@ class Composer extends React.PureComponent {
     const { editorState } = this.state
 
     const editorContainerClasses = cx({
-      default: 1,
+      _: 1,
       cursorText: 1,
       text: 1,
-      colorPrimary: 1,
+      cPrimary: 1,
       fs16PX: !small,
       fs14PX: small,
       pt15: !small,
@@ -251,7 +251,7 @@ class Composer extends React.PureComponent {
     })
 
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
 
         {
           !small && isPro &&

app/javascript/gabsocial/components/display_name.js

@@ -80,20 +80,20 @@ class DisplayName extends ImmutablePureComponent {
     if (!account) return null
 
     const containerClassName = CX({
-      default: 1,
-      maxWidth100PC: 1,
-      alignItemsCenter: !isMultiline,
+      _: 1,
+      maxW100PC: 1,
+      aiCenter: !isMultiline,
       flexRow: !isMultiline,
       cursorPointer: !noHover,
-      alignItemsCenter: isCentered,
+      aiCenter: isCentered,
     })
 
     const displayNameClasses = CX({
       text: 1,
       overflowWrapBreakWord: 1,
       whiteSpaceNoWrap: 1,
-      fontWeightBold: 1,
-      colorPrimary: 1,
+      fw600: 1,
+      cPrimary: 1,
       mr2: 1,
       lineHeight125: !isSmall,
       fs14PX: isSmall,
@@ -108,8 +108,8 @@ class DisplayName extends ImmutablePureComponent {
       flexShrink1: 1,
       overflowWrapBreakWord: 1,
       textOverflowEllipsis: 1,
-      colorSecondary: 1,
-      fontWeightNormal: 1,
+      cSecondary: 1,
+      fw400: 1,
       lineHeight15: isMultiline,
       lineHeight125: !isMultiline,
       ml5: !isMultiline,
@@ -147,7 +147,7 @@ class DisplayName extends ImmutablePureComponent {
         onMouseLeave={noHover ? undefined : this.handleMouseLeave}
         ref={this.setRef}
       >
-        <span className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.maxWidth100PC].join(' ')}>
+        <span className={[_s._, _s.flexRow, _s.aiCenter, _s.maxW100PC].join(' ')}>
           <bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
             <strong
               className={displayNameClasses}
@@ -155,12 +155,12 @@ class DisplayName extends ImmutablePureComponent {
             />
             {
               account.get('locked') &&
-              <Icon id='lock-filled' size={`${iconSize - 3}px`} className={[_s.colorPrimary, _s.ml5].join(' ')} />
+              <Icon id='lock-filled' size={`${iconSize - 3}px`} className={[_s.cPrimary, _s.ml5].join(' ')} />
             }
           </bdi>
           {
             account.get('is_verified') &&
-            <Icon id='verified' size={`${iconSize}px`} className={[_s.ml5, _s.default].join(' ')} />
+            <Icon id='verified' size={`${iconSize}px`} className={[_s.ml5, _s._].join(' ')} />
           }
         </span>
         {
@@ -169,7 +169,7 @@ class DisplayName extends ImmutablePureComponent {
             @{account.get('acct')}
             {
               !noRelationship && !!relationshipLabel &&
-              <span className={[_s.default, _s.ml5, _s.justifyContentCenter].join(' ')}>
+              <span className={[_s._, _s.ml5, _s.jcCenter].join(' ')}>
                 <Text
                   size='extraSmall'
                   isBadge

app/javascript/gabsocial/components/divider.js

@@ -13,10 +13,10 @@ class Divider extends React.PureComponent {
     const { isSmall, isInvisible } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       borderBottom1PX: !isInvisible,
       borderColorSecondary: !isInvisible,
-      width100PC: 1,
+      w100PC: 1,
       mb15: !isSmall,
       my10: isSmall || isInvisible,
     })

app/javascript/gabsocial/components/error_boundary.js

@@ -61,15 +61,15 @@ class ErrorBoundary extends React.PureComponent {
     if (!hasError) return this.props.children
 
     return (
-      <div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-        <div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
-          <div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
+      <div className={[_s._, _s.minH100VH, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <div className={[_s._, _s.minH53PX, _s.bgBrand, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+          <div className={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w1255PX].join(' ')}>
 
-            <div className={[_s.default, _s.flexRow].join(' ')}>
+            <div className={[_s._, _s.flexRow].join(' ')}>
 
-              <h1 className={[_s.default, _s.mr15].join(' ')}>
-                <Button href='/' isText aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
-                  <Icon id='logo' className={_s.colorWhite} />
+              <h1 className={[_s._, _s.mr15].join(' ')}>
+                <Button href='/' isText aria-label='Gab' className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
+                  <Icon id='logo' className={_s.cWhite} />
                 </Button>
               </h1>
 
@@ -77,9 +77,9 @@ class ErrorBoundary extends React.PureComponent {
           </div>
         </div>
 
-        <div className={[_s.default, _s.maxWidth640PX, _s.px15, _s.py10].join(' ')}>
+        <div className={[_s._, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
 
-          <Icon id='warning' size='28px' className={[_s.default, _s.colorSecondary, _s.mb15].join(' ')} />
+          <Icon id='warning' size='28px' className={[_s._, _s.cSecondary, _s.mb15].join(' ')} />
 
           <Text size='medium' className={_s.pt15}>
             <FormattedMessage
@@ -95,12 +95,12 @@ class ErrorBoundary extends React.PureComponent {
             />
           </Text>
 
-          <div className={[_s.default, _s.py10, _s.my10].join(' ')}>
+          <div className={[_s._, _s.py10, _s.my10].join(' ')}>
             <Text>
               {APP_NAME} ({version})
             </Text>
 
-            <div className={[_s.default, _s.flexRow, _s.mt10, _s.alignItemsCenter].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.mt10, _s.aiCenter].join(' ')}>
               <Button
                 isText
                 href={source_url}
@@ -141,7 +141,7 @@ class ErrorBoundary extends React.PureComponent {
 
           <Divider />
 
-          <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s._, _s.flexRow].join(' ')}>
             <Button href='/home'>
               <Text align='center' color='inherit'>
                 <FormattedMessage

app/javascript/gabsocial/components/extended_video_player.js

@@ -31,9 +31,9 @@ class ExtendedVideoPlayer extends React.PureComponent {
     const { src, muted, controls, alt } = this.props
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
         <video
-          className={[_s.default, _s.maxWidth100PC, _s.heightMax100PC].join(' ')}
+          className={[_s._, _s.maxW100PC, _s.maxH100PC].join(' ')}
           playsInline
           ref={this.setRef}
           src={src}

app/javascript/gabsocial/components/file_input.js

@@ -41,10 +41,10 @@ class FileInput extends React.PureComponent {
     const { file, hovering } = this.state
 
     const containerClasses = CX(className, {
-      default: 1,
-      alignItemsCenter: 1,
+      _: 1,
+      aiCenter: 1,
       cursorPointer: 1,
-      justifyContentCenter: 1,
+      jcCenter: 1,
       overflowHidden: true,
       radiusSmall: isBordered,
       px10: isBordered,
@@ -55,8 +55,8 @@ class FileInput extends React.PureComponent {
     })
 
     const iconClasses = CX({
-      colorSecondary: !hovering,
-      colorWhite: hovering,
+      cSecondary: !hovering,
+      cWhite: hovering,
     })
 
     return (
@@ -66,7 +66,7 @@ class FileInput extends React.PureComponent {
       >
         {
           !!title &&
-          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
+          <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
             <Text size='small' weight='medium' color='secondary'>
               {title}
             </Text>
@@ -83,12 +83,12 @@ class FileInput extends React.PureComponent {
         >
           <Image
             alt={title || id}
-            className={[_s.height100PC, _s.width100PC].join(' ')}
+            className={[_s.h100PC, _s.w100PC].join(' ')}
             src={fileType === 'image' ? file : null}
           />
           {
             (!file || hovering) &&
-            <div className={[_s.default, _s.posAbs, _s.cursorPointer, _s.top0, _s.bottom0, _s.left0, _s.right0, _s.alignItemsCenter, _s.justifyContentCenter, _s.bgBlackOpaquest_onHover].join(' ')}>
+            <div className={[_s._, _s.posAbs, _s.cursorPointer, _s.top0, _s.bottom0, _s.left0, _s.right0, _s.aiCenter, _s.jcCenter, _s.bgBlackOpaquest_onHover].join(' ')}>
               <Icon id='add-image' size='32px' className={iconClasses} />
             </div>
           }

app/javascript/gabsocial/components/floating_action_button.js

@@ -39,7 +39,7 @@ class FloatingActionButton extends React.PureComponent {
         <Button
           to={isDesktop ? undefined : '/compose'}
           onClick={isDesktop ? onOpenCompose : undefined}
-          className={[_s.py15, _s.height60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.width60PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+          className={[_s.py15, _s.h60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.w60PX, _s.jcCenter, _s.aiCenter].join(' ')}
           title={message}
           aria-label={message}
           icon='pencil'

app/javascript/gabsocial/components/footer_bar.js

@@ -57,9 +57,9 @@ class FooterBar extends React.PureComponent {
     ]
 
     return (
-      <div className={[_s.default, _s.z4, _s.heightMin58PX, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.heightMin58PX, _s.width100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.heightMin58PX, _s.saveAreaInsetPB, _s.justifyContentSpaceAround].join(' ')}>
+      <div className={[_s._, _s.z4, _s.minH58PX, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.minH58PX, _s.w100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.h100PC, _s.minH58PX, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
             {
               buttons.map((props) => {
                 if (props.isHidden) return null
@@ -68,12 +68,12 @@ class FooterBar extends React.PureComponent {
                   borderTop2PX: 1,
                   borderColorTransparent: !props.active,
                   borderColorBrand: props.active,
-                  height100PC: 1,
-                  heightMin58PX: 1,
+                  h100PC: 1,
+                  minH58PX: 1,
                   px15: 1,
                   flexGrow1: 1,
-                  alignItemsCenter: 1,
-                  justifyContentCenter: 1,
+                  aiCenter: 1,
+                  jcCenter: 1,
                 })
                 
                 const color = props.active ? 'brand' : 'secondary'
@@ -81,7 +81,7 @@ class FooterBar extends React.PureComponent {
                 if (props.to === '/notifications' && notificationCount > 0) {
                   childIcon = (
                     <div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt5, _s.pl20].join(' ')}>
-                      <span className={[_s.bgRed, _s.colorWhite, _s.circle, _s.py2, _s.px2, _s.minWidth14PX, _s.displayBlock].join(' ')} style={{fontSize: '12px'}}>
+                      <span className={[_s.bgRed, _s.cWhite, _s.circle, _s.py2, _s.px2, _s.minW14PX, _s.displayBlock].join(' ')} style={{fontSize: '12px'}}>
                         {notificationCount}
                       </span>
                     </div>
@@ -89,7 +89,7 @@ class FooterBar extends React.PureComponent {
                 } else if (props.to === '/home' && homeItemsQueueCount > 0) {
                   childIcon = (
                     <div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt2, _s.pl20].join(' ')}>
-                      <span className={[_s.colorBrand, _s.circle, _s.py2, _s.px2, _s.minWidth14PX, _s.displayBlock].join(' ')} style={{fontSize: '18px'}}>
+                      <span className={[_s.cBrand, _s.circle, _s.py2, _s.px2, _s.minW14PX, _s.displayBlock].join(' ')} style={{fontSize: '18px'}}>
                         •
                       </span>
                     </div>

app/javascript/gabsocial/components/form.js

@@ -12,14 +12,14 @@ class Form extends React.PureComponent {
     } = this.props
 
     return (
-      <form onSubmit={onSubmit} className={_s.default}>
+      <form onSubmit={onSubmit} className={_s._}>
         {
           !!errorMessage &&
           <Text color='danger' className={_s.my10}>
             {errorMessage}
           </Text>
         }
-        <div className={_s.default}>
+        <div className={_s._}>
           {children}
         </div>
       </form>

app/javascript/gabsocial/components/global_footer.js

@@ -11,30 +11,30 @@ export default class GlobalFooter extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s.default, _s.z4, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.left0, _s.right0, _s.bottom0, _s.width100PC, _s.bgSubtle, _s.borderTop1PX, _s.alignItemsCenter, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s._, _s.z4, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.left0, _s.right0, _s.bottom0, _s.w100PC, _s.bgSubtle, _s.borderTop1PX, _s.aiCenter, _s.borderColorSecondary].join(' ')}>
 
-          <div className={[_s.default, _s.mt15, _s.mb15].join(' ')}>
+          <div className={[_s._, _s.mt15, _s.mb15].join(' ')}>
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.width1255PX, _s.flexRow, _s.py15, _s.mt15, _s.mb15].join(' ')}
-              classNamesSmall={[_s.default, _s.width1255PX, _s.alignItemsCenter, _s.pt15, _s.px15, _s.mt15].join(' ')}
+              classNames={[_s._, _s.w1255PX, _s.flexRow, _s.py15, _s.mt15, _s.mb15].join(' ')}
+              classNamesSmall={[_s._, _s.w1255PX, _s.aiCenter, _s.pt15, _s.px15, _s.mt15].join(' ')}
             >
 
               <ResponsiveClassesComponent
-                classNames={[_s.default, _s.width330PX].join(' ')}
-                classNamesSmall={[_s.default, _s.alignItemsCenter].join(' ')}
+                classNames={[_s._, _s.w330PX].join(' ')}
+                classNamesSmall={[_s._, _s.aiCenter].join(' ')}
               >
-                <div className={[_s.default, _s.mb10].join(' ')}>
+                <div className={[_s._, _s.mb10].join(' ')}>
                   <Icon id='logo' />
                 </div>
-                <div className={[_s.default, _s.pr15, _s.maxWidth640PX].join(' ')}>
+                <div className={[_s._, _s.pr15, _s.maxW640PX].join(' ')}>
                   <Text size='medium'>We build Freedom Of Speech Software. We champion free speech, individual liberty and the free flow of information online. All are welcome.</Text>
                 </div>
               </ResponsiveClassesComponent>
 
               <ResponsiveClassesComponent
-                classNames={[_s.default, _s.flexRow, _s.flexGrow1, _s.pl15].join(' ')}
-                classNamesSmall={[_s.default, _s.py15, _s.width100PC, _s.px15].join(' ')}
+                classNames={[_s._, _s.flexRow, _s.flexGrow1, _s.pl15].join(' ')}
+                classNamesSmall={[_s._, _s.py15, _s.w100PC, _s.px15].join(' ')}
               >
 
                 <GlobalFooterColumn
@@ -117,13 +117,13 @@ export default class GlobalFooter extends React.PureComponent {
             </ResponsiveClassesComponent>
           </div>
 
-          <div className={[_s.default, _s.alignItemsCenter, _s.bgSecondary, _s.height100PC, _s.heightMin58PX, _s.width100PC, _s.saveAreaInsetPB, _s.justifyContentSpaceAround].join(' ')}>
+          <div className={[_s._, _s.aiCenter, _s.bgSecondary, _s.h100PC, _s.minH58PX, _s.w100PC, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.width1255PX, _s.flexRow, _s.alignItemsCenter].join(' ')}
-              classNamesXS={[_s.default, _s.width1255PX, _s.alignItemsCenter, _s.px15, _s.pt15].join(' ')}
+              classNames={[_s._, _s.w1255PX, _s.flexRow, _s.aiCenter].join(' ')}
+              classNamesXS={[_s._, _s.w1255PX, _s.aiCenter, _s.px15, _s.pt15].join(' ')}
             >
 
-              <div classNames={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <div classNames={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
                 <Text weight='bold'>
                   © 2020
                 </Text>
@@ -142,8 +142,8 @@ export default class GlobalFooter extends React.PureComponent {
               </div>
                 
               <ResponsiveClassesComponent
-                classNames={[_s.default, _s.alignItemsCenter, _s.mlAuto].join(' ')}
-                classNamesXS={[_s.default, _s.alignItemsCenter, _s.py15].join(' ')}
+                classNames={[_s._, _s.aiCenter, _s.mlAuto].join(' ')}
+                classNamesXS={[_s._, _s.aiCenter, _s.py15].join(' ')}
               >
                 <Text>
                   Made in USA 🇺🇸
@@ -181,8 +181,8 @@ class GlobalFooterColumn extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s.default, _s.flexNormal].join(' ')}
-        classNamesSmall={[_s.default, _s.width100PC, _s.alignItemsCenter, _s.mt15, _s.mb5, _s.pt15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
+        classNames={[_s._, _s.flexNormal].join(' ')}
+        classNamesSmall={[_s._, _s.w100PC, _s.aiCenter, _s.mt15, _s.mb5, _s.pt15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
       >
         <div className={_s.mb10}>
           <Heading size='h3'>{title}</Heading>

app/javascript/gabsocial/components/group_collection_item.js

@@ -42,7 +42,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
     }
 
     const navLinkClasses = cx({
-      default: 1,
+      _: 1,
       noUnderline: 1,
       overflowHidden: 1,
       borderColorSecondary: 1,
@@ -57,7 +57,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
     })
 
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
         <NavLink
           to={`/groups/${group.get('id')}`}
           className={navLinkClasses}
@@ -67,18 +67,18 @@ class GroupCollectionItem extends ImmutablePureComponent {
             <Image
               src={coverSrc}
               alt={group.get('title')}
-              className={_s.height158PX}
+              className={_s.h158PX}
             />
           }
 
           {
             (!coverSrc || coverMissing) && (isMember || isAdmin) &&
-            <div className={[_s.default, _s.height40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
+            <div className={[_s._, _s.h40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
           }
 
           {
             (isMember || isAdmin) &&
-            <div className={[_s.default, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
               {
                 isMember &&
                 <Text
@@ -104,12 +104,12 @@ class GroupCollectionItem extends ImmutablePureComponent {
             </div>
           }
 
-          <div className={[_s.default, _s.px10, _s.my10].join(' ')}>
+          <div className={[_s._, _s.px10, _s.my10].join(' ')}>
             <Text color='primary' size='medium' weight='bold'>
               {group.get('title')}
             </Text>
 
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.mt5, _s.mb5].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.aiCenter, _s.mt5, _s.mb5].join(' ')}>
               <Text color='secondary' size='small'>
                 {shortNumberFormat(group.get('member_count'))}
                 &nbsp;

app/javascript/gabsocial/components/group_header.js

@@ -97,25 +97,25 @@ class GroupHeader extends ImmutablePureComponent {
     // {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
 
     return (
-      <div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
+      <div className={[_s._, _s.z1, _s.w100PC, _s.mb15].join(' ')}>
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
 
               {
                 coverSrc && !coverSrcMissing &&
-                <Image className={_s.height200PX} src={coverSrc} alt={title} />
+                <Image className={_s.h200PX} src={coverSrc} alt={title} />
               }
 
-              <div className={[_s.default, _s.width100PC].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
 
-                <div className={[_s.default, _s.width100PC, _s.px15, _s.mt10, _s.py10].join(' ')}>
+                <div className={[_s._, _s.w100PC, _s.px15, _s.mt10, _s.py10].join(' ')}>
                   {children}
                 </div>
 
                 {
                   !!me &&
-                  <div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter, _s.mt5, _s.pb15, _s.pt5, _s.height100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter, _s.mt5, _s.pb15, _s.pt5, _s.h100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
                     {
                       !!actionButtonTitle &&
                       <Button
@@ -140,7 +140,7 @@ class GroupHeader extends ImmutablePureComponent {
                   </div>
                 }
 
-                <div className={[_s.default, _s.flexRow, _s.height100PC, _s.mt5, _s.pt10, _s.pb5, _s.mb5, _s.px10].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.h100PC, _s.mt5, _s.pt10, _s.pb5, _s.mb5, _s.px10].join(' ')}>
 
                   <Pills pills={tabs} />
 
@@ -152,20 +152,20 @@ class GroupHeader extends ImmutablePureComponent {
 
         { /** desktop */}
         <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.bottomLeftRadiusSmall, _s.bottomRightRadiusSmall].join(' ')}>
-            <div className={[_s.default, _s.width100PC].join(' ')}>
+          <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.bottomLeftRadiusSmall, _s.bottomRightRadiusSmall].join(' ')}>
+            <div className={[_s._, _s.w100PC].join(' ')}>
 
               {
                 coverSrc && !coverSrcMissing &&
-                <Image className={_s.height350PX} src={coverSrc} alt={title} />
+                <Image className={_s.h350PX} src={coverSrc} alt={title} />
               }
               
-              <div className={[_s.default].join(' ')}>
-                <div className={[_s.default, _s.flexRow, _s.py10, _s.px10].join(' ')}>
-                  <div className={[_s.default, _s.width100PC].join(' ')}>
-                    <div className={[_s.default, _s.flexRow].join(' ')}>
+              <div className={[_s._].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.py10, _s.px10].join(' ')}>
+                  <div className={[_s._, _s.w100PC].join(' ')}>
+                    <div className={[_s._, _s.flexRow].join(' ')}>
                       <Icon id='group' size='28px' />
-                      <div className={[_s.default, _s.ml7, _s.flexNormal].join(' ')}>
+                      <div className={[_s._, _s.ml7, _s.flexNormal].join(' ')}>
                         <Heading>
                           {title}
                         </Heading>
@@ -179,15 +179,15 @@ class GroupHeader extends ImmutablePureComponent {
                     </div>
                   </div>
                 </div>
-                <div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
-                  <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
+                <div className={[_s._, _s.h53PX, _s.w100PC].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.h100PC, _s.px10].join(' ')}>
                     
                     <TabBar tabs={tabs} isLarge />
 
-                    <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
+                    <div className={[_s._, _s.flexRow, _s.aiCenter, _s.h100PC, _s.mlAuto].join(' ')}>
                       {
                         !!me &&
-                        <div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
+                        <div className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
                           <Button
                             iconSize='18px'
                             color='brand'

app/javascript/gabsocial/components/group_list_item.js

@@ -56,22 +56,22 @@ class GroupListItem extends ImmutablePureComponent {
     }
     
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       overflowHidden: 1,
       bgSubtle_onHover: 1,
       borderColorSecondary: 1,
       borderBottom1PX: !isLast,
       flexRow: 1,
       py5: 1,
-      width100PC: 1,
+      w100PC: 1,
     })
 
     const containerLinkClasses = CX({
-      default: 1,
+      _: 1,
       flexRow: 1,
       noUnderline: 1,
-      width100PC: 1,
-      maxWidth100PC86PX: isAddable,
+      w100PC: 1,
+      maxW100PC86PX: isAddable,
     })
 
     const coverSrc = group.get('cover_image_url') || ''
@@ -94,11 +94,11 @@ class GroupListItem extends ImmutablePureComponent {
             <Image
               src={coverSrc}
               alt={group.get('title')}
-              className={[_s.radiusSmall, _s.height53PX, _s.width84PX, _s.ml15].join(' ')}
+              className={[_s.radiusSmall, _s.h53PX, _s.w84PX, _s.ml15].join(' ')}
             />
           }
 
-          <div className={[_s.default, _s.px10, _s.mt5, _s.flexShrink1].join(' ')}>
+          <div className={[_s._, _s.px10, _s.mt5, _s.flexShrink1].join(' ')}>
             <Text color='brand' weight='bold'>
               {group.get('title')}
             </Text>
@@ -113,13 +113,13 @@ class GroupListItem extends ImmutablePureComponent {
         </Wrapper>
         {
           isAddable &&
-          <div className={[_s.default, _s.justifyContentCenter, _s.flexGrow1].join(' ')}>
+          <div className={[_s._, _s.jcCenter, _s.flexGrow1].join(' ')}>
             {
               relationships &&
               <Button
                 isNarrow
                 color='white'
-                className={[_s.px10, _s.width76PX].join(' ')}
+                className={[_s.px10, _s.w76PX].join(' ')}
                 backgroundColor={addButtonColor}
                 onClick={this.handleOnToggleMembership}
                 onMouseEnter={this.handleOnMouseEnter}

app/javascript/gabsocial/components/hashtag_item.js

@@ -19,9 +19,9 @@ class HashtagItem extends ImmutablePureComponent {
     return (
       <NavLink
         to={`/tags/${hashtag.get('name')}`}
-        className={[_s.default, _s.noUnderline, _s.bgSubtle_onHover, _s.px15, _s.py5].join(' ')}
+        className={[_s._, _s.noUnderline, _s.bgSubtle_onHover, _s.px15, _s.py5].join(' ')}
       >
-        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
           <div>
             <Text color='brand' size='medium' weight='bold' className={[_s.py2, _s.lineHeight15].join(' ')}>
               #{hashtag.get('name')}
@@ -36,7 +36,7 @@ class HashtagItem extends ImmutablePureComponent {
               title='Remove'
               icon='close'
               iconSize='8px'
-              iconClassName={_s.colorSecondary}
+              iconClassName={_s.cSecondary}
               className={_s.mlAuto}
             />
           }

app/javascript/gabsocial/components/heading.js

@@ -36,12 +36,12 @@ class Heading extends React.PureComponent {
 
     // Each size has it's own custom style
     const classes = cx({
-      default: 1,
+      _: 1,
       text: 1,
       textAlignCenter: isCentered,
 
-      colorPrimary: [SIZES.h1, SIZES.h2].indexOf(size) > -1,
-      colorSecondary: [SIZES.h3, SIZES.h4, SIZES.h5].indexOf(size) > -1,
+      cPrimary: [SIZES.h1, SIZES.h2].indexOf(size) > -1,
+      cSecondary: [SIZES.h3, SIZES.h4, SIZES.h5].indexOf(size) > -1,
 
       fs24PX: size === SIZES.h1,
       fs19PX: size === SIZES.h2,
@@ -54,8 +54,8 @@ class Heading extends React.PureComponent {
       lineHeight2: size === SIZES.h5,
       py2: size === SIZES.h5,
 
-      fontWeightMedium: [SIZES.h1, SIZES.h3, SIZES.h5].indexOf(size) > -1,
-      fontWeightBold: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
+      fw500: [SIZES.h1, SIZES.h3, SIZES.h5].indexOf(size) > -1,
+      fw600: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
     })
 
     return React.createElement(

app/javascript/gabsocial/components/image.js

@@ -28,7 +28,7 @@ class Image extends React.PureComponent {
     const { error } = this.state
 
     const classes = cx(className, {
-      default: 1,
+      _: 1,
       objectFitCover: !!src && fit === 'cover',
       bgSecondary: !src,
     })

app/javascript/gabsocial/components/image_loader.js

@@ -142,9 +142,9 @@ class ImageLoader extends React.PureComponent {
     // }
 
     const className = CX({
-      default: 1,
-      width100PC: 1,
-      height100PC: 1,
+      _: 1,
+      w100PC: 1,
+      h100PC: 1,
       // 'image-loader--loading': loading,
       // 'image-loader--amorphous': !this.hasSize(),
     });
@@ -154,7 +154,7 @@ class ImageLoader extends React.PureComponent {
         <LoadingBar loading={loading ? 1 : 0} className='loading-bar' style={{ width: this.state.width || width }} />
         {loading ? (
           <canvas
-            className={[_s.default, _s.objectFitCover].join(' ')}
+            className={[_s._, _s.objectFitCover].join(' ')}
             ref={this.setCanvasRef}
             width={width}
             height={height}

app/javascript/gabsocial/components/input.js

@@ -34,7 +34,7 @@ class Input extends React.PureComponent {
     } = this.props
 
     const inputClasses = cx({
-      default: 1,
+      _: 1,
       text: 1,
       outlineNone: 1,
       lineHeight125: !small,
@@ -44,8 +44,8 @@ class Input extends React.PureComponent {
       py5: small,
       bgTransparent: !readOnly,
       bgSecondary: readOnly,
-      colorPrimary: !readOnly,
-      colorSecondary: readOnly,
+      cPrimary: !readOnly,
+      cSecondary: readOnly,
       fs15PX: !small,
       fs13PX: small,
       flexGrow1: 1,
@@ -65,16 +65,16 @@ class Input extends React.PureComponent {
       <React.Fragment>
         {
           !!title && !hideLabel &&
-          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
+          <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
             <Text htmlFor={id} size='small' weight='medium' color='secondary' tagName='label'>
               {title}
             </Text>
           </div>
         }
-        <div className={[_s.default, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.aiCenter].join(' ')}>
           {
             !!prependIcon &&
-            <Icon id={prependIcon} size='16px' className={[_s.colorPrimary, _s.ml15, _s.mr5].join(' ')} />
+            <Icon id={prependIcon} size='16px' className={[_s.cPrimary, _s.ml15, _s.mr5].join(' ')} />
           }
 
           {

app/javascript/gabsocial/components/link_footer.js

@@ -72,14 +72,14 @@ class LinkFooter extends React.PureComponent {
     ]
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       px10: !noPadding,
       mb15: 1,
     })
 
     return (
       <div className={containerClasses}>
-        <nav aria-label='Footer' role='navigation' className={[_s.default, _s.flexWrap, _s.flexRow].join(' ')}>
+        <nav aria-label='Footer' role='navigation' className={[_s._, _s.flexWrap, _s.flexRow].join(' ')}>
           {
             linkFooterItems.map((linkFooterItem, i) => {
               if (linkFooterItem.requiresUser && !me) return null

app/javascript/gabsocial/components/list_item.js

@@ -35,7 +35,7 @@ class ListItem extends React.PureComponent {
 
     if (!title) {
       return (
-        <div className={[_s.default, _s.bgSecondary, _s.width100PC, _s.height4PX].join(' ')} />
+        <div className={[_s._, _s.bgSecondary, _s.w100PC, _s.h4PX].join(' ')} />
       )
     }
 
@@ -56,7 +56,7 @@ class ListItem extends React.PureComponent {
     const showActive = isActive !== undefined
 
     const containerClasses = cx({
-      default: 1,
+      _: 1,
       cursorPointer: 1,
       noUnderline: 1,
       px15: !small,
@@ -64,8 +64,8 @@ class ListItem extends React.PureComponent {
       px10: small,
       py10: small,
       flexRow: 1,
-      alignItemsCenter: 1,
-      width100PC: 1,
+      aiCenter: 1,
+      w100PC: 1,
       outlineNone: 1,
       bgTransparent: 1,
       bgSubtle_onHover: 1,
@@ -76,14 +76,14 @@ class ListItem extends React.PureComponent {
     const iconClasses = cx({
       mr10: !large,
       mr15: large,
-      colorPrimary: !!icon,
+      cPrimary: !!icon,
       circle: !icon && !!image,
     })
 
     const textContainerClasses = cx({
-      default: 1,
+      _: 1,
       pr5: 1,
-      maxWidth100PC42PX: !hideArrow || showActive,
+      maxW100PC42PX: !hideArrow || showActive,
     })
 
     return (
@@ -132,7 +132,7 @@ class ListItem extends React.PureComponent {
           <Icon
             id={!!actionIcon ? actionIcon : 'angle-right'}
             size='10px'
-            className={[_s.mlAuto, _s.colorSecondary, _s.flexShrink1].join(' ')}
+            className={[_s.mlAuto, _s.cSecondary, _s.flexShrink1].join(' ')}
           />
         }
 

app/javascript/gabsocial/components/load_more.js

@@ -20,7 +20,7 @@ class LoadMore extends React.PureComponent {
     if (!visible || disabled) return null
 
     return (
-      <div className={[_s.default, _s.py15, _s.px10].join(' ')}>
+      <div className={[_s._, _s.py15, _s.px10].join(' ')}>
         <Button
           isBlock
           radiusSmall

app/javascript/gabsocial/components/logged_out_navigation_bar.js

@@ -15,19 +15,19 @@ class LoggedOutNavigationBar extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}
-        classNamesXS={[_s.default, _s.z4, _s.heightMin98PX, _s.width100PC].join(' ')}
+        classNames={[_s._, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}
+        classNamesXS={[_s._, _s.z4, _s.minH98PX, _s.w100PC].join(' ')}
       >
         <ResponsiveClassesComponent
-          classNames={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
-          classNamesXS={[_s.default, _s.heightMin98PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
+          classNames={[_s._, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
+          classNamesXS={[_s._, _s.minH98PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
         >
 
-          <div className={[_s.default, _s.width1255PX, _s.flexRow, _s.flexWrap, _s.height100PC].join(' ')}>
+          <div className={[_s._, _s.w1255PX, _s.flexRow, _s.flexWrap, _s.h100PC].join(' ')}>
           
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.flexRow, _s.flexGrow1, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR].join(' ')}
-              classNamesXS={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')}
+              classNames={[_s._, _s.aiCenter, _s.jcCenter, _s.flexRow, _s.flexGrow1, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR].join(' ')}
+              classNamesXS={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}
             >
 
               <Button
@@ -41,7 +41,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
               {
                 isProfile &&
                 <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
-                  <div className={[_s.default, _s.flexRow, _s.mr15].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.mr15].join(' ')}>
                     <NavigationBarButton title='Home' icon='home' href='/home' />
                     <NavigationBarButton title='Explore' icon='explore' to='/explore' />
                     <NavigationBarButton title='News' icon='news' to='/news' />
@@ -49,15 +49,15 @@ class LoggedOutNavigationBar extends React.PureComponent {
                 </ResponsiveComponent>
               }
 
-              <div className={[_s.default, _s.flexGrow1, _s.pr10, _s.mrAuto, _s.maxWidth640PX].join(' ')}>
+              <div className={[_s._, _s.flexGrow1, _s.pr10, _s.mrAuto, _s.maxW640PX].join(' ')}>
                 <Search isInNav />
               </div>
 
             </ResponsiveClassesComponent>
 
             <ResponsiveClassesComponent
-              classNames={[_s.default, _s.flexRow, _s.py5, _s.px10, _s.width330PX, _s.mlAuto].join(' ')}
-              classNamesXS={[_s.default, _s.flexRow, _s.pb5, _s.px10, _s.width100PC].join(' ')}
+              classNames={[_s._, _s.flexRow, _s.py5, _s.px10, _s.w330PX, _s.mlAuto].join(' ')}
+              classNamesXS={[_s._, _s.flexRow, _s.pb5, _s.px10, _s.w100PC].join(' ')}
             >
 
               <Button
@@ -66,7 +66,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
                 color='white'
                 backgroundColor='none'
                 href='/auth/sign_in'
-                className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter, _s.py7].join(' ')}
+                className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.aiCenter, _s.jcCenter, _s.py7].join(' ')}
               >
                 <Text color='inherit' weight='medium' align='center'>
                   Log in
@@ -78,7 +78,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
                 color='brand'
                 backgroundColor='white'
                 href='/auth/sign_up'
-                className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
+                className={[_s.jcCenter, _s.aiCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
               >
                 <Text color='inherit' weight='bold' align='center'>
                   Sign up

app/javascript/gabsocial/components/logged_out_sidebar.js

@@ -65,21 +65,21 @@ class Sidebar extends React.PureComponent {
     ]
 
     return (
-      <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
-        <div className={[_s.default, _s.width240PX].join(' ')}>
-          <div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}>
-            <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
-              <div className={[_s.default, _s.width100PC].join(' ')}>
+      <header role='banner' className={[_s._, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
+        <div className={[_s._, _s.w240PX].join(' ')}>
+          <div className={[_s._, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
+            <div className={[_s._, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
+              <div className={[_s._, _s.w100PC].join(' ')}>
                 {
                   !!title &&
-                  <div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                     <Heading size='h1'>
                       {title}
                     </Heading>
                   </div>
                 }
               </div>
-              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   menuItems.map((menuItem, i) => {

app/javascript/gabsocial/components/media_gallery.js

@@ -130,9 +130,9 @@ class Item extends ImmutablePureComponent {
 
     if (attachment.get('type') === 'unknown') {
       return (
-        <div className={[_s.default, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
-          <a className={[_s.default, _s.heigh100PC, _s.width100PC, _s.cursorPointer].join(' ')} href={attachment.get('remote_url')} target='_blank' rel='noreferrer noopener'>
-            <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
+        <div className={[_s._, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
+          <a className={[_s._, _s.heigh100PC, _s.w100PC, _s.cursorPointer].join(' ')} href={attachment.get('remote_url')} target='_blank' rel='noreferrer noopener'>
+            <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s._, _s.heigh100PC, _s.w100PC].join(' ')} />
           </a>
         </div>
       )
@@ -155,7 +155,7 @@ class Item extends ImmutablePureComponent {
 
       thumbnail = (
         <a
-          className={[_s.default, _s.overflowHidden, _s.height100PC, _s.width100PC, _s.cursorPointer].join(' ')}
+          className={[_s._, _s.overflowHidden, _s.h100PC, _s.w100PC, _s.cursorPointer].join(' ')}
           href={attachment.get('remote_url') || originalUrl}
           onClick={this.handleClick}
           target='_blank'
@@ -166,7 +166,7 @@ class Item extends ImmutablePureComponent {
             src={previewUrl}
             srcSet={srcSet}
             sizes={sizes}
-            className={[_s.height100PC, _s.width100PC, _s.objectFitCover].join(' ')}
+            className={[_s.h100PC, _s.w100PC, _s.objectFitCover].join(' ')}
             alt={attachment.get('description')}
             title={attachment.get('description')}
             style={{ objectPosition: `${x}% ${y}%` }}
@@ -178,9 +178,9 @@ class Item extends ImmutablePureComponent {
       const autoPlay = !isIOS() && autoPlayGif !== false;
 
       thumbnail = (
-        <div className={[_s.default, _s.overflowHidden, _s.heigh100PC, _s.width100PC].join(' ')}>
+        <div className={[_s._, _s.overflowHidden, _s.heigh100PC, _s.w100PC].join(' ')}>
           <video
-            className={[_s.default, _s.cursorPointer, _s.objectFitCover, _s.width100PC, _s.height100PC, _s.z1].join(' ')}
+            className={[_s._, _s.cursorPointer, _s.objectFitCover, _s.w100PC, _s.h100PC, _s.z1].join(' ')}
             aria-label={attachment.get('description')}
             title={attachment.get('description')}
             role='application'
@@ -196,7 +196,7 @@ class Item extends ImmutablePureComponent {
             playsInline
           />
 
-          <div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
+          <div className={[_s._, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
             <Text size='extraSmall' color='white' weight='medium'>GIF</Text>
           </div>
         </div>
@@ -207,7 +207,7 @@ class Item extends ImmutablePureComponent {
       <div className={[_s.defeault, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
         {
           !visible && !this.state.loaded &&
-          <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} />
+          <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s._, _s.heigh100PC, _s.w100PC].join(' ')} />
         }
         {visible && thumbnail}
       </div>
@@ -515,7 +515,7 @@ class MediaGallery extends React.PureComponent {
     ))
 
     const containerClasses = cx({
-      default: 1,
+      _: 1,
       displayBlock: 1,
       overflowHidden: 1,
       borderColorSecondary: size === 1 && visible,
@@ -538,7 +538,7 @@ class MediaGallery extends React.PureComponent {
 
         {
           visible &&
-          <div className={[_s.default, _s.displayBlock, _s.width100PC, _s.height100PC, _s.overflowHidden].join(' ')}>
+          <div className={[_s._, _s.displayBlock, _s.w100PC, _s.h100PC, _s.overflowHidden].join(' ')}>
             {children}
           </div>
         }

app/javascript/gabsocial/components/media_item.js

@@ -77,19 +77,19 @@ class MediaItem extends ImmutablePureComponent {
     }
 
     const containerClasses = cx({
-      default: 1,
+      _: 1,
       posAbs: 1,
       top0: 1,
-      height100PC: 1,
-      width100PC: 1,
+      h100PC: 1,
+      w100PC: 1,
       py2: !isSmall,
       px2: !isSmall,
     })
 
     const linkClasses = cx({
-      default: 1,
-      width100PC: 1,
-      height100PC: 1,
+      _: 1,
+      w100PC: 1,
+      h100PC: 1,
       overflowHidden: 1,
       border1PX: 1,
       borderColorPrimary: 1,
@@ -98,7 +98,7 @@ class MediaItem extends ImmutablePureComponent {
     const statusUrl = `/${account.getIn(['acct'])}/posts/${status.get('id')}`;
 
     return (
-      <div className={[_s.default, _s.width25PC, _s.pt25PC].join(' ')}>
+      <div className={[_s._, _s.w25PC, _s.pt25PC].join(' ')}>
         <div className={containerClasses}>
           <NavLink
             to={statusUrl}
@@ -111,7 +111,7 @@ class MediaItem extends ImmutablePureComponent {
                 height='100%'
                 width='100%'
                 ref={this.setCanvasRef}
-                className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
+                className={[_s._, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
               />
             }
 
@@ -127,19 +127,19 @@ class MediaItem extends ImmutablePureComponent {
               />
             }
 
-            <div className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.height100PC, _s.width100PC, _s.z3, _s.posAbs].join(' ')}>
+            <div className={[_s._, _s.aiCenter, _s.jcCenter, _s.h100PC, _s.w100PC, _s.z3, _s.posAbs].join(' ')}>
               {
                 !visible &&
                 <Icon
                   id='hidden'
                   size='22px'
-                  className={[_s.colorWhite].join('')}
+                  className={[_s.cWhite].join('')}
                 />
               }
 
               {
                 !!badge &&
-                <div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr5, _s.mt5, _s.mb5, _s.bottom0, _s.right0].join(' ')}>
+                <div className={[_s._, _s.posAbs, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr5, _s.mt5, _s.mb5, _s.bottom0, _s.right0].join(' ')}>
                   <Text size='extraSmall' color='white'>
                     {badge}
                   </Text>

app/javascript/gabsocial/components/modal/boost_modal.js

@@ -40,7 +40,7 @@ class BoostModal extends ImmutablePureComponent {
         onClose={onClose}
       >
       
-      <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
         <StatusContainer
           contextType='boost-modal'
           id={status.get('id')}
@@ -48,11 +48,11 @@ class BoostModal extends ImmutablePureComponent {
         />
       </div>
 
-        <div className={[_s.default, _s.justifyContentCenter, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+        <div className={[_s._, _s.jcCenter, _s.px15, _s.mt5, _s.mb15].join(' ')}>
           <Text align='center'>
             {intl.formatMessage(messages.combo)}
           </Text>
-          <div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.my10, _s.pt15, _s.pb5].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.jcCenter, _s.my10, _s.pt15, _s.pb5].join(' ')}>
             <Button onClick={this.handleRepost} buttonRef={this.setRef}>
               <Text color='inherit' className={_s.px15}>
                 {intl.formatMessage(buttonText)}

app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js

@@ -31,7 +31,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
         title={intl.formatMessage(messages.title)}
       >
       
-        <div className={[_s.default, _s.pb10].join(' ')}>
+        <div className={[_s._, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='community_timeline'
             settings={settings}
@@ -44,7 +44,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
         <Button
           backgroundColor='brand'
           color='white'
-          className={_s.justifyContentCenter}
+          className={_s.jcCenter}
           onClick={this.handleSaveAndClose}
         >
           <Text color='inherit' weight='bold' align='center'>

app/javascript/gabsocial/components/modal/confirmation_modal.js

@@ -35,21 +35,21 @@ class ConfirmationModal extends React.PureComponent {
     } = this.props
 
     return (
-      <div className={_s.width330PX}>
+      <div className={_s.w330PX}>
         <Block>
-          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
-            <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
+            <div className={[_s._, _s.px15, _s.py15].join(' ')}>
 
               <Heading size='h1' isCentered>
                 {title}
               </Heading>
 
-              <div className={[_s.default, _s.mt10].join(' ')}>
+              <div className={[_s._, _s.mt10].join(' ')}>
                 <Text align='center' color='secondary'>
                   {message}
                 </Text>
 
-                <div className={[_s.default, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
                   <Button
                     backgroundColor='tertiary'
                     color='primary'

app/javascript/gabsocial/components/modal/display_options_modal.js

@@ -51,19 +51,19 @@ class DisplayOptionsModal extends ImmutablePureComponent {
         title={intl.formatMessage(messages.title)}
       >
 
-        <div className={[_s.default, _s.mb15].join(' ')}>
+        <div className={[_s._, _s.mb15].join(' ')}>
           <Text align='center' color='secondary' size='medium'>
             {intl.formatMessage(messages.message)}
           </Text>
         </div>
 
-        <div className={[_s.default, _s.mb15].join(' ')}>
+        <div className={[_s._, _s.mb15].join(' ')}>
           <Text weight='bold' size='small' color='secondary'>
             Font Size
           </Text>
-          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-              <span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '12px'}}>
+          <div className={[_s._, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+            <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+              <span className={[_s._, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '12px'}}>
                 Aa
               </span>
               <input
@@ -75,18 +75,18 @@ class DisplayOptionsModal extends ImmutablePureComponent {
                 onChange={this.handleOnFontSizeChange}
                 className={[_s.flexGrow1, _s.outlineNone, _s.ml15, _s.mr15].join(' ')}
               />
-              <span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '18px'}}>
+              <span className={[_s._, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '18px'}}>
                 Aa
               </span>
             </div>
           </div>
         </div>
 
-        <div className={[_s.default, _s.mb15].join(' ')}>
+        <div className={[_s._, _s.mb15].join(' ')}>
           <Text weight='bold' size='small' color='secondary'>
             Rounded
           </Text>
-          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+          <div className={[_s._, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
             <SettingSwitch
               prefix='displayOptions'
               settings={displayOptionsSettings}
@@ -105,11 +105,11 @@ class DisplayOptionsModal extends ImmutablePureComponent {
           </div>
         </div>
 
-        <div className={[_s.default, _s.mb10].join(' ')}>
+        <div className={[_s._, _s.mb10].join(' ')}>
           <Text weight='bold' size='small' color='secondary'>
             Theme
           </Text>
-          <div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
+          <div className={[_s._, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
 
             <ThemeBlock
               title='Light'
@@ -186,9 +186,9 @@ class ThemeBlock extends React.PureComponent {
     const id = `theme-${value}`
 
     return (
-      <label className={[_s.default, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
+      <label className={[_s._, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
         <div
-          className={[_s.default, _s.borderBottom6PX, _s.alignItemsCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
+          className={[_s._, _s.borderBottom6PX, _s.aiCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
           style={style}
         >
           <input

app/javascript/gabsocial/components/modal/edit_profile_modal.js

@@ -115,13 +115,13 @@ class EditProfileModal extends ImmutablePureComponent {
     const isVerified = account.get('is_verified')
 
     return (
-      <div style={{ width: '440px' }} className={[_s.default, _s.modal].join(' ')}>
+      <div style={{ width: '440px' }} className={[_s._, _s.modal].join(' ')}>
         <Block>
-          <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(' ')}>
             <Button
               backgroundColor='none'
               title={intl.formatMessage(messages.close)}
-              className={[_s.mrAuto, _s.width60PX, _s.pl0].join(' ')}
+              className={[_s.mrAuto, _s.w60PX, _s.pl0].join(' ')}
               onClick={this.handleOnClose}
               color='secondary'
               icon='close'
@@ -132,14 +132,14 @@ class EditProfileModal extends ImmutablePureComponent {
             </Heading>
             <Button
               title={intl.formatMessage(messages.save)}
-              className={[_s.mlAuto, _s.width60PX].join(' ')}
+              className={[_s.mlAuto, _s.w60PX].join(' ')}
               onClick={this.handleOnSave}
             >
               {intl.formatMessage(messages.save)}
             </Button>
           </div>
-          <div className={[_s.default, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
-            <div className={[_s.default, _s.width100PC, _s.alignItemsCenter].join(' ')}>
+          <div className={[_s._, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
+            <div className={[_s._, _s.w100PC, _s.aiCenter].join(' ')}>
               <FileInput
                 width='440px'
                 height='180px'
@@ -147,7 +147,7 @@ class EditProfileModal extends ImmutablePureComponent {
                 onChange={this.handleCoverPhotoChange}
                 file={headerSrc}
               />
-              <div className={[_s.default, _s.mtNeg50PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+              <div className={[_s._, _s.mtNeg50PX, _s.aiCenter, _s.jcCenter].join(' ')}>
                 <FileInput
                   width='132px'
                   height='132px'
@@ -157,7 +157,7 @@ class EditProfileModal extends ImmutablePureComponent {
                   onChange={this.handleProfilePhotoChange}
                 />
               </div>
-              <div className={[_s.default, _s.py5, _s.px15, _s.mt5, _s.mb15, _s.width100PC].join(' ')}>
+              <div className={[_s._, _s.py5, _s.px15, _s.mt5, _s.mb15, _s.w100PC].join(' ')}>
                 {
                   !isVerified &&
                   <React.Fragment>
@@ -182,7 +182,7 @@ class EditProfileModal extends ImmutablePureComponent {
 
                 <Divider isInvisible />
 
-                <div className={[_s.default, _s.px10].join(' ')}>
+                <div className={[_s._, _s.px10].join(' ')}>
                   <Switch
                     label='Private account'
                     checked={locked}

app/javascript/gabsocial/components/modal/embed_modal.js

@@ -55,12 +55,12 @@ class EmbedModal extends ImmutablePureComponent {
         title={intl.formatMessage(messages.embed)}
         onClose={onClose}
       >
-        <div className={_s.default}>
+        <div className={_s._}>
           <Text className={_s.my10}>
             {intl.formatMessage(messages.instructions)}
           </Text>
 
-          <div className={[_s.default, _s.mb10].join(' ')}>
+          <div className={[_s._, _s.mb10].join(' ')}>
             <Input
               readOnly
               type='text'
@@ -76,9 +76,9 @@ class EmbedModal extends ImmutablePureComponent {
             {intl.formatMessage(messages.preview)}
           </Text>
 
-          <div className={[_s.default, _s.width100PC, _s.bgSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <div className={[_s._, _s.w100PC, _s.bgSubtle, _s.h220PX, _s.aiCenter, _s.jcCenter].join(' ')}>
             <iframe
-              className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
+              className={[_s._, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
               frameBorder='0'
               ref={this.setIframeRef}
               sandbox='allow-same-origin'

app/javascript/gabsocial/components/modal/gif_picker_modal.js

@@ -55,8 +55,8 @@ class GifPickerModal extends React.PureComponent {
     return (
       <div style={{ width: '560px' }}>
         <Block>
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
-            <div className={[_s.default, _s.flexGrow1, _s.mr5].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
+            <div className={[_s._, _s.flexGrow1, _s.mr5].join(' ')}>
               <Input
                 onChange={this.onChange}
                 value={searchText}
@@ -74,7 +74,7 @@ class GifPickerModal extends React.PureComponent {
               iconSize='10px'
             />
           </div>
-          <div className={[_s.default, _s.heightMin50VH, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
+          <div className={[_s._, _s.minH50VH, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
             {
               error &&
               <ColumnIndicator type='error' />
@@ -86,7 +86,7 @@ class GifPickerModal extends React.PureComponent {
 
             {
               (results.length > 0 || categories.length > 0) &&
-              <div className={[_s.default, _s.width100PC, _s.height100PC].join(' ')}>
+              <div className={[_s._, _s.w100PC, _s.h100PC].join(' ')}>
                 {
                   results.length === 0 && categories.length > 0 &&
                   <GifCategoriesCollection categories={categories} handleSelectCategory={this.handleSelectCategory} />
@@ -119,13 +119,13 @@ class GifResultsCollectionColumn extends React.PureComponent {
     const { results } = this.props
 
     return (
-      <div className={[_s.default, _s.flexNormal].join(' ')}>
+      <div className={[_s._, _s.flexNormal].join(' ')}>
       {
         results.map((result, i) => (
           <button
             key={`gif-result-item-${i}`}
             onClick={() => this.onClick(result)}
-            className={[_s.default, _s.outlineNone, _s.bgTransparent, _s.cursorPointer, _s.px2, _s.py2].join(' ')}
+            className={[_s._, _s.outlineNone, _s.bgTransparent, _s.cursorPointer, _s.px2, _s.py2].join(' ')}
           >
             <Image
               height={result.media[0].tinygif.dims[1]}
@@ -155,7 +155,7 @@ class GifResultsCollection extends React.PureComponent {
     const columnIndex = 10
 
     return (
-      <div className={[_s.default, _s.height100PC, _s.flexRow, _s.width100PC].join(' ')}>
+      <div className={[_s._, _s.h100PC, _s.flexRow, _s.w100PC].join(' ')}>
         <GifResultsCollectionColumn
           results={results.slice(0, columnIndex)}
           handleSelectGifResult={handleSelectGifResult}
@@ -187,20 +187,20 @@ class GifCategoriesCollection extends React.PureComponent {
     const { categories } = this.props
 
     return (
-      <div className={[_s.default, _s.height100PC, _s.width100PC, _s.flexRow, _s.flexWrap].join(' ')}>
+      <div className={[_s._, _s.h100PC, _s.w100PC, _s.flexRow, _s.flexWrap].join(' ')}>
         {
           categories.map((category, i) => (
             <button
               key={`gif-category-${i}`}
               onClick={() => this.onClick(category.searchterm)}
-              className={[_s.default, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.width50PC].join(' ')}
+              className={[_s._, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.w50PC].join(' ')}
             >
-              <div className={[_s.default, _s.cursorPointer].join(' ')}>
+              <div className={[_s._, _s.cursorPointer].join(' ')}>
                 <Image
                   height={150}
                   src={category.image}
                 />
-                <div className={[_s.default, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
+                <div className={[_s._, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
                   <Text color='white' weight='bold' size='extraLarge'>
                     {category.searchterm}
                   </Text>

app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js

@@ -20,7 +20,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
           {intl.formatMessage(messages.benefits)}
         </Text>
 
-        <div className={[_s.default, _s.my10].join(' ')}>
+        <div className={[_s._, _s.my10].join(' ')}>
           <Text>• Schedule Posts</Text>
           <Text>• Get Verified</Text>
           <Text>• Create Groups</Text>
@@ -34,8 +34,8 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
           color='white'
           icon='pro'
           href='https://pro.gab.com'
-          className={_s.justifyContentCenter}
-          iconClassName={[_s.mr5, _s.colorWhite].join(' ')}
+          className={_s.jcCenter}
+          iconClassName={[_s.mr5, _s.cWhite].join(' ')}
         >
           <Text color='inherit' weight='bold' align='center'>
             {intl.formatMessage(messages.title)}

app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js

@@ -28,7 +28,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
         onClose={onClose}
       >
 
-        <div className={[_s.default, _s.pb10].join(' ')}>
+        <div className={[_s._, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='community_timeline'
             settings={settings}
@@ -41,7 +41,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
         <Button
           backgroundColor='brand'
           color='white'
-          className={_s.justifyContentCenter}
+          className={_s.jcCenter}
           onClick={this.handleSaveAndClose}
         >
           <Text color='inherit' weight='bold' align='center'>

app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js

@@ -26,7 +26,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         onClose={onClose}
       >
       
-        <div className={[_s.default, _s.pb10].join(' ')}>
+        <div className={[_s._, _s.pb10].join(' ')}>
           {
             /*
             <SettingSwitch
@@ -75,7 +75,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         <Button
           backgroundColor='brand'
           color='white'
-          className={_s.justifyContentCenter}
+          className={_s.jcCenter}
           onClick={this.handleSaveAndClose}
         >
           <Text color='inherit' weight='bold' align='center'>

app/javascript/gabsocial/components/modal/hotkeys_modal.js

@@ -16,7 +16,7 @@ class HotkeysModal extends ImmutablePureComponent {
         title={intl.formatMessage(messages.heading)}
         onClose={onClose}
       >
-        <div className={[_s.default, _s.flexRow].join(' ')}>
+        <div className={[_s._, _s.flexRow].join(' ')}>
           <table>
             <thead>
               <tr>

app/javascript/gabsocial/components/modal/list_add_user_modal.js

@@ -42,12 +42,12 @@ class ListAddUserModal extends ImmutablePureComponent {
         title={title}
         onClose={onClose}
       >
-        <div className={[_s.default, _s.boxShadowNone].join(' ')}>
+        <div className={[_s._, _s.boxShadowNone].join(' ')}>
           <div>
             {
               lists && lists.map((list) => {
                 return (
-                  <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.py10, _s.px15, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+                  <div className={[_s._, _s.flexRow, _s.aiCenter, _s.py10, _s.px15, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
                     <Text color='primary' size='large' className={[_s.overflowHidden, _s.flexNormal, _s.pr5, _s.textOverflowEllipsis].join(' ')}>
                       {list.get('title')}
                     </Text>

app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js

@@ -26,7 +26,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
         onClose={onClose}
       >
       
-        <div className={[_s.default, _s.pb10].join(' ')}>
+        <div className={[_s._, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='list_timeline'
             settings={settings}
@@ -71,7 +71,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
         <Button
           backgroundColor='brand'
           color='white'
-          className={_s.justifyContentCenter}
+          className={_s.jcCenter}
           onClick={this.handleSaveAndClose}
         >
           <Text color='inherit' weight='bold' align='center'>

app/javascript/gabsocial/components/modal/loading_modal.js

@@ -3,10 +3,10 @@ import Block from '../block'
 import ColumnIndicator from '../column_indicator'
 
 const LoadingModal = () => (
-  <div className={_s.width330PX}>
+  <div className={_s.w330PX}>
     <Block>
-      <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/modal/media_modal.js

@@ -173,14 +173,14 @@ class MediaModal extends ImmutablePureComponent {
     }
 
     const navigationClasses = CX({
-      default: 1,
+      _: 1,
       displayNone: navigationHidden,
     })
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+      <div className={[_s._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
         <div
-          className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+          className={[_s._, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
           role='presentation'
           onClick={onClose}
         >
@@ -254,8 +254,8 @@ class MediaModal extends ImmutablePureComponent {
 
         {
           media.size > 1 &&
-          <div className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
-            <div className={[_s.default, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
+          <div className={[_s._, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
+            <div className={[_s._, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
               <Pagination
                 count={media.size}
                 activeIndex={index}

app/javascript/gabsocial/components/modal/modal_base.js

@@ -109,22 +109,22 @@ class ModalBase extends React.PureComponent {
     const visible = !!children
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       z4: 1,
-      height100PC: visible,
-      width100PC: visible,
+      h100PC: visible,
+      w100PC: visible,
       displayNone: !visible,
     })
 
     const dialogClasses = CX({
-      default: 1,
+      _: 1,
       posFixed: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: !isXS || isCenteredXS,
-      justifyContentEnd: isXS && !isCenteredXS,
+      aiCenter: 1,
+      jcCenter: !isXS || isCenteredXS,
+      jcEnd: isXS && !isCenteredXS,
       z4: 1,
-      width100PC: 1,
-      height100PC: 1,
+      w100PC: 1,
+      h100PC: 1,
       top0: 1,
       rightAuto: 1,
       bottomAuto: 1,
@@ -138,7 +138,7 @@ class ModalBase extends React.PureComponent {
           <React.Fragment>
             <div
               role='presentation'
-              className={[_s.default, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+              className={[_s._, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
             />
             <div
               ref={this.setDialog}

app/javascript/gabsocial/components/modal/modal_layout.js

@@ -26,17 +26,17 @@ class ModalLayout extends React.PureComponent {
     } = this.props
 
     const childrenContainerClasses = cx({
-      default: 1,
-      heightMax80VH: 1,
+      _: 1,
+      maxH80VH: 1,
       overflowYScroll: 1,
       px15: !noPadding,
       py10: !noPadding,
     })
 
     return (
-      <div style={{width: `${width}px`}} className={[_s.default, _s.modal].join(' ')}>
+      <div style={{width: `${width}px`}} className={[_s._, _s.modal].join(' ')}>
         <Block>
-          <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='h2'>
               {title}
             </Heading>

app/javascript/gabsocial/components/modal/pro_upgrade_modal.js

@@ -25,11 +25,11 @@ class ProUpgradeModal extends ImmutablePureComponent {
     const imgSuffix = (theme === 'light' || !theme) ? 'light' : 'dark'
 
     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>
     )
 
@@ -46,23 +46,23 @@ class ProUpgradeModal extends ImmutablePureComponent {
           {intl.formatMessage(messages.benefits)}
         </Text>
 
-        <div className={[_s.default, _s.my10].join(' ')}>
+        <div className={[_s._, _s.my10].join(' ')}>
           <Image
             src={`/headers/pro-features-${imgSuffix}.png`}
             width='100%'
             height='auto'
             fit='cover'
-            className={[_s.heightMax340PX, _s.heightMin200PX].join(' ')}
+            className={[_s.maxH340PX, _s.minH200PX].join(' ')}
           />
         </div>
 
-        <div className={[_s.default, _s.flexRow, _s.py10].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.py10].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'>
               {intl.formatMessage(messages.learnMore)}
@@ -70,12 +70,12 @@ class ProUpgradeModal extends ImmutablePureComponent {
           </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'>
               {intl.formatMessage(messages.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/modal/report_modal.js

@@ -63,12 +63,12 @@ class ReportModal extends ImmutablePureComponent {
       >
 
         <ResponsiveClassesComponent
-          classNames={[_s.default, _s.flexRow].join(' ')}
-          classNamesSmall={[_s.default, _s.flexColumnReverse].join(' ')}
+          classNames={[_s._, _s.flexRow].join(' ')}
+          classNamesSmall={[_s._, _s.flexColumnReverse].join(' ')}
         >
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.width50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
-            classNamesSmall={[_s.default, _s.width100PC, _s.py10, _s.px15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
+            classNames={[_s._, _s.w50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
+            classNamesSmall={[_s._, _s.w100PC, _s.py10, _s.px15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
           >
             <Text color='secondary' size='small'>
               {intl.formatMessage(messages.hint)}
@@ -95,10 +95,10 @@ class ReportModal extends ImmutablePureComponent {
           </ResponsiveClassesComponent>
 
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.width50PC, _s.heightMax80VH].join(' ')}
-            classNamesSmall={[_s.default, _s.width100PC, _s.height260PX].join(' ')}
+            classNames={[_s._, _s.w50PC, _s.maxH80VH].join(' ')}
+            classNamesSmall={[_s._, _s.w100PC, _s.h260PX].join(' ')}
           >
-            <div className={[_s.default, _s.height100PC, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}>
+            <div className={[_s._, _s.h100PC, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}>
               {
                 statusIds.map(statusId => (
                   <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />

app/javascript/gabsocial/components/modal/status_revisions_modal.js

@@ -32,14 +32,14 @@ class StatusRevisionsModal extends ImmutablePureComponent {
         width={480}
         onClose={onClose}
       >
-        <div className={[_s.default]}>
+        <div className={[_s._]}>
           {
             revisions.map((revision, i) => {
               const isFirst = i === 0
               const isLast = i === revisions.size - 1
 
               const containerClasses = cx({
-                default: 1,
+                _: 1,
                 pt5: 1,
                 pb10: 1,
                 mt5: !isFirst,
@@ -49,12 +49,12 @@ class StatusRevisionsModal extends ImmutablePureComponent {
 
               return (
                 <div key={`status-revision-${i}`} className={containerClasses}>
-                  <div className={[_s.default, _s.pb5].join(' ')}>
+                  <div className={[_s._, _s.pb5].join(' ')}>
                     <Text size='medium'>
                       {revision.get('text')}
                     </Text>
                   </div>
-                  <div className={[_s.default]}>
+                  <div className={[_s._]}>
                     <Text size='small' color='secondary'>
                       Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
                     </Text>

app/javascript/gabsocial/components/modal/unauthorized_modal.js

@@ -18,8 +18,8 @@ class UnauthorizedModal extends ImmutablePureComponent {
         onClose={onClose}
         width={480}
       >
-        <div className={[_s.default, _s.mt15, _s.mb15, _s.px15, _s.pb15].join(' ')}>
-          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+        <div className={[_s._, _s.mt15, _s.mb15, _s.px15, _s.pb15].join(' ')}>
+          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
             <Text className={[_s.px15, _s.py15, _s.mb15]} size='medium' weight='medium' align='center'>
               {intl.formatMessage(messages.text)}
             </Text>

app/javascript/gabsocial/components/navigation_bar.js

@@ -45,17 +45,17 @@ class NavigationBar extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+      <div className={[_s._, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
+        <div className={[_s._, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
 
-          <div className={[_s.default, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.width1255PX].join(' ')}>
+          <div className={[_s._, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.w1255PX].join(' ')}>
 
             { /** Default */}
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
 
-              <div className={[_s.default, _s.flexRow].join(' ')}>
+              <div className={[_s._, _s.flexRow].join(' ')}>
 
-                <h1 className={[_s.default, _s.mr15].join(' ')}>
+                <h1 className={[_s._, _s.mr15].join(' ')}>
                   <Button
                     to='/'
                     isText
@@ -63,7 +63,7 @@ class NavigationBar extends ImmutablePureComponent {
                     aria-label='Gab'
                     color='none'
                     backgroundColor='none'
-                    className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
+                    className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
                   >
                     <Icon id='logo' className={_s.fillNavigationBrand} />
                   </Button>
@@ -71,28 +71,28 @@ class NavigationBar extends ImmutablePureComponent {
 
                 {
                   !noSearch &&
-                  <div className={[_s.default, _s.width340PX, _s.mr10].join(' ')}>
+                  <div className={[_s._, _s.w340PX, _s.mr10].join(' ')}>
                     <Search isInNav />
                   </div>
                 }
 
               </div>
 
-              <div className={[_s.default, _s.mlAuto].join(' ')}>
+              <div className={[_s._, _s.mlAuto].join(' ')}>
                 {
                   !noActions &&
-                  <div className={[_s.default, _s.height53PX, _s.pl15, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceBetween].join(' ')}>
+                  <div className={[_s._, _s.h53PX, _s.pl15, _s.flexRow, _s.aiCenter, _s.jcSpaceBetween].join(' ')}>
 
                     <NavigationBarButton title='Home' icon='home' to='/home' />
                     <NavigationBarButton title='Explore' icon='explore' to='/explore' />
                     <NavigationBarButton title='News' icon='news' to='/news' />
 
-                    <div className={[_s.default, _s.height20PX, _s.width1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
+                    <div className={[_s._, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
 
                     <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />
                     <NavigationBarButton attrTitle='Settings' icon='cog' href='/settings/preferences' />
 
-                    <div className={[_s.default, _s.height20PX, _s.width1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
+                    <div className={[_s._, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
                   
                     {
                       !!account &&
@@ -100,7 +100,7 @@ class NavigationBar extends ImmutablePureComponent {
                         ref={this.setAvatarNode}
                         title={account.get('display_name')}
                         onClick={this.handleOnOpenNavSettingsPopover}
-                        className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter, _s.ml15].join(' ')}
+                        className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s._, _s.jcCenter, _s.ml15].join(' ')}
                       >
                         <Avatar account={account} size={32} noHover />
                       </button>
@@ -113,13 +113,13 @@ class NavigationBar extends ImmutablePureComponent {
             
             { /** Mobile */}
             <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-              <div className={[_s.default, _s.width84PX, _s.alignItemsStart, _s.pl10].join(' ')}>
+              <div className={[_s._, _s.w84PX, _s.aiStart, _s.pl10].join(' ')}>
                 {
                   !!account && !showBackBtn && !noActions &&
                   <button
                     title={account.get('display_name')}
                     onClick={onOpenSidebar}
-                    className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter].join(' ')}
+                    className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s._, _s.jcCenter].join(' ')}
                   >
                     <Avatar account={account} size={32} noHover />
                   </button>
@@ -127,7 +127,7 @@ class NavigationBar extends ImmutablePureComponent {
                 {
                   showBackBtn &&
                   <BackButton
-                    className={_s.height53PX}
+                    className={_s.h53PX}
                     icon='angle-left'
                     iconSize='18px'
                     iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
@@ -135,7 +135,7 @@ class NavigationBar extends ImmutablePureComponent {
                 }
                 {
                   noActions &&
-                  <h1 className={[_s.default, _s.mr15].join(' ')}>
+                  <h1 className={[_s._, _s.mr15].join(' ')}>
                     <Button
                       to='/'
                       isText
@@ -143,7 +143,7 @@ class NavigationBar extends ImmutablePureComponent {
                       aria-label='Gab'
                       color='none'
                       backgroundColor='none'
-                      className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
+                      className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
                     >
                       <Icon id='logo' className={_s.fillNavigationBrand} />
                     </Button>
@@ -151,7 +151,7 @@ class NavigationBar extends ImmutablePureComponent {
                 }
               </div>
               
-              <div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
+              <div className={[_s._, _s.h53PX, _s.jcCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
                 <Heading size='h1'>
                   <span className={_s.colorNavigation}>
                     {title}
@@ -159,8 +159,8 @@ class NavigationBar extends ImmutablePureComponent {
                 </Heading>
               </div>
 
-              <div className={[_s.default, _s.width84PX, _s.pr15].join(' ')}>
-                <div className={[_s.default, _s.bgTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mlAuto].join(' ')}>
+              <div className={[_s._, _s.w84PX, _s.pr15].join(' ')}>
+                <div className={[_s._, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
                   {
                     actions && actions.map((action, i) => (
                       <Button
@@ -170,7 +170,7 @@ class NavigationBar extends ImmutablePureComponent {
                         to={action.to || undefined}
                         onClick={action.onClick ? () => action.onClick() : undefined}
                         key={`action-btn-${i}`}
-                        className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')}
+                        className={[_s.ml5, _s.h53PX, _s.jcCenter, _s.px5].join(' ')}
                         icon={action.icon}
                         iconClassName={_s.fillNavigation}
                         iconSize='18px'
@@ -185,7 +185,7 @@ class NavigationBar extends ImmutablePureComponent {
                       color='primary'
                       to='/search'
                       key={`action-btn-search`}
-                      className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')}
+                      className={[_s.ml5, _s.h53PX, _s.jcCenter, _s.px5].join(' ')}
                       icon='search'
                       iconClassName={_s.fillNavigation}
                       iconSize='18px'

app/javascript/gabsocial/components/navigation_bar_button.js

@@ -19,11 +19,11 @@ class NavigationBarButton extends React.PureComponent {
     const active = false
 
     const classes = CX({
-      default: 1,
-      height53PX: 1,
+      _: 1,
+      h53PX: 1,
       flexRow: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       outlineNone: 1,
       cursorPointer: 1,
       bgTransparent: 1,
@@ -31,9 +31,9 @@ class NavigationBarButton extends React.PureComponent {
       colorNavigation: 1,
       px10: !!title,
       px5: !title,
-      colorWhite: !!title,
+      cWhite: !!title,
       fs13PX: !!title,
-      fontWeightNormal: !!title,
+      fw400: !!title,
     })
 
     const iconClasses = CX({

app/javascript/gabsocial/components/notification.js

@@ -91,7 +91,7 @@ class Notification extends ImmutablePureComponent {
     }
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       px10: 1,
       cursorPointer: 1,
       bgSubtle_onHover: !isUnread,
@@ -104,15 +104,15 @@ class Notification extends ImmutablePureComponent {
         tabIndex='0'
         aria-label={`${message} ${createdAt}`}
       >
-        <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
+        <div className={[_s._, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s._, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
 
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-              <Icon id={icon} size='20px' className={[_s.colorPrimary, _s.minWidth20PX, _s.mt5, _s.mr15].join(' ')} />
+              <Icon id={icon} size='20px' className={[_s.cPrimary, _s.minW20PX, _s.mt5, _s.mr15].join(' ')} />
             </Responsive>
 
-            <div className={[_s.default, _s.flexNormal].join(' ')}>
-              <div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
+            <div className={[_s._, _s.flexNormal].join(' ')}>
+              <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
                 {
                   accounts && accounts.map((account, i) => (
                     <NavLink
@@ -125,8 +125,8 @@ class Notification extends ImmutablePureComponent {
                   ))
                 }
               </div>
-              <div className={[_s.default, _s.pt5].join(' ')}>
-                <div className={[_s.default, _s.flexRow, _s.alignItemsEnd].join(' ')}>
+              <div className={[_s._, _s.pt5].join(' ')}>
+                <div className={[_s._, _s.flexRow, _s.aiEnd].join(' ')}>
                   <div className={_s.text}>
                     {
                       accounts && accounts.slice(0, 1).map((account, i) => (
@@ -151,7 +151,7 @@ class Notification extends ImmutablePureComponent {
               </div>
               {
                 !!statusId &&
-                <div className={[_s.default, _s.pt10, _s.mt5].join(' ')}>
+                <div className={[_s._, _s.pt10, _s.mt5].join(' ')}>
                   <StatusContainer
                     contextType='notification'
                     id={statusId}

app/javascript/gabsocial/components/pagination.js

@@ -23,15 +23,15 @@ class Pagination extends React.PureComponent {
     if (isNaN(count)) return
 
     return (
-      <ul className={[_s.default, _s.flexRow, _s.listStyleNone].join(' ')}>
+      <ul className={[_s._, _s.flexRow, _s.listStyleNone].join(' ')}>
         {
           Array.apply(null, {
             length: count
           }).map((_, i) => {
             const btnClasses = CX({
-              default: 1,
-              width10PX: 1,
-              height10PX: 1,
+              _: 1,
+              w10PX: 1,
+              h10PX: 1,
               outlineNone: 1,
               circle: 1,
               cursorPointer: 1,
@@ -43,7 +43,7 @@ class Pagination extends React.PureComponent {
             })
 
             return (
-              <li className={[_s.default, _s.px5].join(' ')} key={`pagination-${i}`}>
+              <li className={[_s._, _s.px5].join(' ')} key={`pagination-${i}`}>
                 <button
                   tabIndex='0'
                   className={btnClasses}

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

app/javascript/gabsocial/components/pill_item.js

@@ -46,11 +46,11 @@ class PillItem extends React.PureComponent {
     const active = isActive || (to === location.pathname && !location.search) || isCurrent
 
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       noUnderline: 1,
       text: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       py5: 1,
       outlineNone: 1,
       cursorPointer: 1,
@@ -63,10 +63,10 @@ class PillItem extends React.PureComponent {
     })
 
     const textParentClasses = CX({
-      default: 1,
-      height100PC: 1,
-      alignItemsCenter: 1,
-      justifyContentCenter: 1,
+      _: 1,
+      h100PC: 1,
+      aiCenter: 1,
+      jcCenter: 1,
       py2: 1,
       px15: 1,
     })

app/javascript/gabsocial/components/pills.js

@@ -14,8 +14,8 @@ class Pills extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s.default, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
-        classNamesXS={[_s.default, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
+        classNames={[_s._, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
+        classNamesXS={[_s._, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
       >
         {
           !!pills &&

app/javascript/gabsocial/components/placeholder/account_placeholder.js

@@ -10,7 +10,7 @@ class AccountPlaceholder extends React.PureComponent {
     const { isLast, isSmall } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py7: 1,
       borderColorSecondary: !isLast,

app/javascript/gabsocial/components/placeholder/comment_placeholder.js

@@ -8,7 +8,7 @@ export default class CommentPlaceholder extends React.PureComponent {
   
   render() {
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py10: 1,
     })

app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js

@@ -10,7 +10,7 @@ class GroupListItemPlaceholder extends React.PureComponent {
     const { isLast } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py7: 1,
       borderColorSecondary: !isLast,

app/javascript/gabsocial/components/placeholder/list_item_placeholder.js

@@ -11,7 +11,7 @@ class ListItemPlaceholder extends React.PureComponent {
     const { isLast } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py15: 1,
       borderColorSecondary: !isLast,
@@ -19,7 +19,7 @@ class ListItemPlaceholder extends React.PureComponent {
     })
 
     const classesXS = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py7: 1,
       borderColorSecondary: !isLast,

app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js

@@ -6,7 +6,7 @@ export default class MediaGalleryPanelPlaceholder extends React.PureComponent {
   
   render() {
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
         <PlaceholderLayout viewBox='0 0 334 164'>
           <rect x='0' y='0' rx='4' ry='4' width='76' height='76' /> 
           <rect x='86' y='0' rx='4' ry='4' width='76' height='76' /> 

app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js

@@ -6,7 +6,7 @@ export default class MediaGalleryPlaceholder extends React.PureComponent {
 
   render() {
     return (
-      <div className={[_s.default, _s.px5, _s.py5].join(' ')}>
+      <div className={[_s._, _s.px5, _s.py5].join(' ')}>
         <PlaceholderLayout viewBox='0 0 400 196'>
           <rect x='0' y='0' rx='0' ry='0' width='96' height='96' /> 
           <rect x='100' y='0' rx='0' ry='0' width='96' height='96' /> 

app/javascript/gabsocial/components/placeholder/notification_placeholder.js

@@ -14,7 +14,7 @@ class NotificationPlaceholder extends React.PureComponent {
     const { isLast } = this.props
 
     const classes = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py15: 1,
       borderColorSecondary: !isLast,
@@ -22,7 +22,7 @@ class NotificationPlaceholder extends React.PureComponent {
     })
 
     const classesXS = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       py15: 1,
       borderColorSecondary: !isLast,
@@ -37,7 +37,7 @@ class NotificationPlaceholder extends React.PureComponent {
       <React.Fragment>
         <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
           <div className={classes}>
-            <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
+            <div className={[_s._, _s.py2, _s.px2].join(' ')}>
               <PlaceholderLayout viewBox='0 0 400 170'>
                 <rect x='24' y='34' rx='4' ry='4' width={width2} height='8' />
                 <rect x={left} y='34' rx='4' ry='4' width='12' height='8' />
@@ -61,7 +61,7 @@ class NotificationPlaceholder extends React.PureComponent {
         </ResponsiveComponent>
         <ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}>
           <div className={classesXS}>
-            <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
+            <div className={[_s._, _s.py2, _s.px2].join(' ')}>
               <PlaceholderLayout viewBox='0 0 380 200'>
                 <circle cx='20' cy='20' r='20' />
                 <rect x='0' y='54' rx='5' ry='5' width={width1} height='10' />

app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js

@@ -6,7 +6,7 @@ export default class ProfileHeaderXSPlaceholder extends React.PureComponent {
   
   render() {
     return (
-      <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
+      <div className={[_s._, _s.px10, _s.py10].join(' ')}>
         <PlaceholderLayout viewBox='0 0 400 660'>
           <rect x='0' y='0' rx='0' ry='0' width='400' height='202' /> 
           <circle cx='200' cy='200' r='54' /> 

app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js

@@ -6,7 +6,7 @@ export default class ProfileInfoPanelPlaceholder extends React.PureComponent {
   
   render() {
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
         <PlaceholderLayout viewBox='0 0 340 108'>
           <rect x='0' y='0' rx='4' ry='4' width='330' height='8' /> 
           <rect x='0' y='18' rx='4' ry='4' width='314' height='8' /> 

app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js

@@ -6,7 +6,7 @@ export default class ProfileStatsPanelPlaceholder extends React.PureComponent {
 
   render() {
     return (
-      <div className={_s.default}>
+      <div className={_s._}>
         <PlaceholderLayout viewBox='0 0 178 20'>
           <rect x='2' y='2' rx='4' ry='4' width='24' height='6' /> 
           <rect x='2' y='12' rx='4' ry='4' width='38' height='6' /> 

app/javascript/gabsocial/components/placeholder/status_placeholder.js

@@ -12,7 +12,7 @@ export default class StatusPlaceholder extends React.PureComponent {
 
   render() {
     const containerClasses = CX({
-      default: 1,
+      _: 1,
       px15: 1,
       mt5: 1,
       mb15: 1,
@@ -23,7 +23,7 @@ export default class StatusPlaceholder extends React.PureComponent {
     })
 
     const containerClassesXS = CX({
-      default: 1,
+      _: 1,
       bgPrimary: 1,
       boxShadowBlock: 1,
       borderTop1PX: 1,

app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js

@@ -14,7 +14,7 @@ export default class TrendsItemPlaceholder extends React.PureComponent {
     const subtitle3Width = getRandomInt(120, 225)
 
     return (
-      <div className={[_s.default, _s.px15, _s.py10, _s.pb5, _s.mb5].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py10, _s.pb5, _s.mb5].join(' ')}>
         <PlaceholderLayout viewBox='0 0 340 138'>
           <rect x='0' y='0' rx='3' ry='3' width={title1Width} height='12' />
           <rect x='0' y='23' rx='3' ry='3' width={title2Width} height='12' />

app/javascript/gabsocial/components/poll.js

@@ -71,12 +71,12 @@ class Poll extends ImmutablePureComponent {
     }
 
     const chartClasses = cx({
-      default: 1,
+      _: 1,
       posAbs: 1,
       top0: 1,
       left0: 1,
       radiusSmall: 1,
-      height100PC: 1,
+      h100PC: 1,
       bgSecondary: !leading && !optionHasNoVotes,
       bgTertiary: !leading && optionHasNoVotes,
       bgBrandLight: leading,
@@ -89,7 +89,7 @@ class Poll extends ImmutablePureComponent {
     })
 
     const listItemClasses = cx({
-      default: 1,
+      _: 1,
       flexRow: 1,
       py10: showResults,
       mb10: 1,
@@ -102,12 +102,12 @@ class Poll extends ImmutablePureComponent {
     })
 
     const textContainerClasses = cx({
-      default: 1,
-      width100PC: 1,
+      _: 1,
+      w100PC: 1,
       px15: 1,
       py10: !showResults,
       cursorPointer: !showResults,
-      alignItemsCenter: !showResults,
+      aiCenter: !showResults,
     })
 
     return (
@@ -127,7 +127,7 @@ class Poll extends ImmutablePureComponent {
             size='medium'
             color='primary'
             weight={(leading && showResults) ? 'bold' : 'normal'}
-            className={[_s.displayFlex, _s.flexRow, _s.width100PC, _s.alignItemsCenter].join(' ')}
+            className={[_s.displayFlex, _s.flexRow, _s.w100PC, _s.aiCenter].join(' ')}
           >
             {
               !showResults &&
@@ -138,7 +138,7 @@ class Poll extends ImmutablePureComponent {
                 checked={active}
                 onChange={this.handleOptionChange}
                 disabled={disabled}
-                className={[_s.default, _s.mr10].join(' ')}
+                className={[_s._, _s.mr10].join(' ')}
               />
             }
 
@@ -176,14 +176,14 @@ class Poll extends ImmutablePureComponent {
     const disabled = this.props.disabled || Object.entries(this.state.selected).every(item => !item)
 
     return (
-      <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-        <ul className={[_s.default, _s.listStyleNone].join(' ')}>
+      <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+        <ul className={[_s._, _s.listStyleNone].join(' ')}>
           {
             poll.get('options').map((option, i) => this.renderOption(option, i))
           }
         </ul>
 
-        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
           {
             !showResults && me &&
             <Button

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>