Updated all long style names to be more compact

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

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