diff --git a/app/javascript/gabsocial/components/about_sidebar.js b/app/javascript/gabsocial/components/about_sidebar.js
index b3e32c77..26eda88e 100644
--- a/app/javascript/gabsocial/components/about_sidebar.js
+++ b/app/javascript/gabsocial/components/about_sidebar.js
@@ -20,21 +20,21 @@ class AboutSidebar extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <header role='banner' className={[_s._, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
+      <header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
         <ResponsiveClassesComponent
-          classNames={[_s._, _s.w240PX].join(' ')}
-          classNamesXS={[_s._, _s.w100PC].join(' ')}
+          classNames={[_s.d, _s.w240PX].join(' ')}
+          classNamesXS={[_s.d, _s.w100PC].join(' ')}
         >
           <ResponsiveClassesComponent
-            classNames={[_s._, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}
-            classNamesXS={[_s._, _s.px15].join(' ')}
+            classNames={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}
+            classNamesXS={[_s.d, _s.px15].join(' ')}
           >
             <ResponsiveClassesComponent
-              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(' ')}
+              classNames={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}
+              classNamesXS={[_s.d,  _s.aiStart, _s.w100PC, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
             >
-              <div className={[_s._, _s.w100PC].join(' ')}>
-                <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+              <div className={[_s.d, _s.w100PC].join(' ')}>
+                <div className={[_s.d, _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._, _s.w100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   items.map((menuItem, i) => (
diff --git a/app/javascript/gabsocial/components/account.js b/app/javascript/gabsocial/components/account.js
index be200cac..ad9dbc0a 100644
--- a/app/javascript/gabsocial/components/account.js
+++ b/app/javascript/gabsocial/components/account.js
@@ -94,29 +94,29 @@ class Account extends ImmutablePureComponent {
     const content = { __html: account.get('note_emojified') }
 
     return (
-      <div className={[_s._, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}>
-        <div className={[_s._, _s.flexRow, _s.aiStart].join(' ')}>
+      <div className={[_s.d, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.aiStart].join(' ')}>
 
           <NavLink
-            className={[_s._, _s.noUnderline].join(' ')}
+            className={[_s.d, _s.noUnderline].join(' ')}
             title={account.get('acct')}
             to={`/${account.get('acct')}`}
           >
             <Avatar account={account} size={avatarSize} />
           </NavLink>
 
-          <div className={[_s._, _s.px10, _s.overflowHidden, _s.flexNormal].join(' ')}>
-            <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+          <div className={[_s.d, _s.px10, _s.overflowHidden, _s.flexNormal].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
               <NavLink
                 title={account.get('acct')}
                 to={`/${account.get('acct')}`}
-                className={[_s._, _s.aiStart, _s.pt2, _s.pr5, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')}
+                className={[_s.d, _s.aiStart, _s.pt2, _s.pr5, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')}
               >
                 <DisplayName account={account} isMultiline={compact} />
                 {!compact && actionButton}
               </NavLink>
 
-              <div className={[_s._].join(' ')}>
+              <div className={[_s.d].join(' ')}>
                 {dismissBtn}
                 {compact && actionButton}
               </div>
diff --git a/app/javascript/gabsocial/components/autosuggest_account.js b/app/javascript/gabsocial/components/autosuggest_account.js
index bc984b14..c1889b53 100644
--- a/app/javascript/gabsocial/components/autosuggest_account.js
+++ b/app/javascript/gabsocial/components/autosuggest_account.js
@@ -14,7 +14,7 @@ class AutosuggestAccount extends ImmutablePureComponent {
 
     return (
       <div
-        className={[_s._, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.aiCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
+        className={[_s.d, _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} />
diff --git a/app/javascript/gabsocial/components/autosuggest_emoji.js b/app/javascript/gabsocial/components/autosuggest_emoji.js
index 6f00556e..10134b89 100644
--- a/app/javascript/gabsocial/components/autosuggest_emoji.js
+++ b/app/javascript/gabsocial/components/autosuggest_emoji.js
@@ -22,7 +22,7 @@ class AutosuggestEmoji extends React.PureComponent {
     }
 
     return (
-      <div className={[_s._, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.aiCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s.d, _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}
diff --git a/app/javascript/gabsocial/components/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox.js
index cf6e0599..ff7a1605 100644
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -194,7 +194,7 @@ class AutosuggestTextbox extends ImmutablePureComponent {
     const { suggestionsHidden } = this.state
 
     const textareaContainerClasses = CX({
-      _: 1,
+      d: 1,
       maxW100PC: 1,
       flexGrow1: small,
       jcCenter: small,
@@ -202,7 +202,7 @@ class AutosuggestTextbox extends ImmutablePureComponent {
     })
 
     const textareaClasses = CX({
-      _: 1,
+      d: 1,
       font: 1,
       wrap: 1,
       resizeNone: 1,
@@ -272,7 +272,7 @@ class AutosuggestTextbox extends ImmutablePureComponent {
 
         {
           !small && !suggestionsHidden && !suggestions.isEmpty() &&
-          <div className={[_s._].join(' ')}>
+          <div className={[_s.d].join(' ')}>
             {suggestions.map(this.renderSuggestion)}
           </div>
         }
diff --git a/app/javascript/gabsocial/components/avatar.js b/app/javascript/gabsocial/components/avatar.js
index 590ff502..8076aad7 100644
--- a/app/javascript/gabsocial/components/avatar.js
+++ b/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._, _s.circle, _s.overflowHidden]
+    const classes = [_s.d, _s.circle, _s.overflowHidden]
     if (isPro) {
       classes.push(_s.boxShadowAvatarPro)
     }
diff --git a/app/javascript/gabsocial/components/back_button.js b/app/javascript/gabsocial/components/back_button.js
index 9819455d..9f5bf2f6 100644
--- a/app/javascript/gabsocial/components/back_button.js
+++ b/app/javascript/gabsocial/components/back_button.js
@@ -35,7 +35,7 @@ class BackButton extends React.PureComponent {
        mr5: 1,
        cursorPointer: 1,
        outlineNone: 1,
-       _: 1,
+       d: 1,
        jcCenter: 1,
     })
 
diff --git a/app/javascript/gabsocial/components/block.js b/app/javascript/gabsocial/components/block.js
index 8204b569..6516db0f 100644
--- a/app/javascript/gabsocial/components/block.js
+++ b/app/javascript/gabsocial/components/block.js
@@ -10,7 +10,7 @@ class Block extends React.PureComponent {
     const { children } = this.props
 
     return (
-      <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
+      <div className={[_s.d, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
         {children}
       </div>
     )
diff --git a/app/javascript/gabsocial/components/block_heading.js b/app/javascript/gabsocial/components/block_heading.js
index fdef3eef..68a2f02a 100644
--- a/app/javascript/gabsocial/components/block_heading.js
+++ b/app/javascript/gabsocial/components/block_heading.js
@@ -8,8 +8,8 @@ class BlockHeading extends React.PureComponent {
     const { title } = this.props
 
     return (
-      <div className={[_s._, _s.px15, _s.py10].join(' ')}>
-        <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+      <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
           <Heading size='h2'>{title}</Heading>
         </div>
       </div>
diff --git a/app/javascript/gabsocial/components/bundle_column_error.js b/app/javascript/gabsocial/components/bundle_column_error.js
index 69ad69e9..af4be68c 100644
--- a/app/javascript/gabsocial/components/bundle_column_error.js
+++ b/app/javascript/gabsocial/components/bundle_column_error.js
@@ -24,14 +24,14 @@ class BundleColumnError extends React.PureComponent {
     const { intl: { formatMessage } } = this.props
 
     return (
-      <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.d, _s.minH100VH, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <div className={[_s.d, _s.minH53PX, _s.bgBrand, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+          <div className={[_s.d, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w1255PX].join(' ')}>
 
-            <div className={[_s._, _s.flexRow].join(' ')}>
+            <div className={[_s.d, _s.flexRow].join(' ')}>
 
-              <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(' ')}>
+              <h1 className={[_s.d, _s.mr15].join(' ')}>
+                <Button href='/' isText aria-label='Gab' className={[_s.d, _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._, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
+        <div className={[_s.d, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
 
-          <Icon id='warning' size='28px' className={[_s._, _s.cSecondary, _s.mb15].join(' ')} />
+          <Icon id='warning' size='28px' className={[_s.d, _s.cSecondary, _s.mb15].join(' ')} />
 
           <Text size='medium' className={_s.pt15}>
             {formatMessage(messages.body)}
           </Text>
 
-          <div className={[_s._, _s.py10, _s.my10].join(' ')}>
+          <div className={[_s.d, _s.py10, _s.my10].join(' ')}>
             <Text>
               {APP_NAME} ({version})
             </Text>
 
-            <div className={[_s._, _s.flexRow, _s.mt10, _s.aiCenter].join(' ')}>
+            <div className={[_s.d, _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._, _s.flexRow].join(' ')}>
+          <div className={[_s.d, _s.flexRow].join(' ')}>
             <Button
               icon='repost'
               onClick={this.handleRetry} size={64}
diff --git a/app/javascript/gabsocial/components/button.js b/app/javascript/gabsocial/components/button.js
index b62303a8..95ec8a1f 100644
--- a/app/javascript/gabsocial/components/button.js
+++ b/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, {
-      _: 1,
+      d: 1,
       noUnderline: 1,
       font: 1,
       cursorPointer: 1,
diff --git a/app/javascript/gabsocial/components/character_counter.js b/app/javascript/gabsocial/components/character_counter.js
index b5d6fb2b..b0b3e9da 100644
--- a/app/javascript/gabsocial/components/character_counter.js
+++ b/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._, _s.mr10, _s.jcCenter, _s.aiCenter].join(' ')}>
+      <div className={[_s.d, _s.mr10, _s.jcCenter, _s.aiCenter].join(' ')}>
         <svg
           width={actualRadius * 2}
           height={actualRadius * 2}
diff --git a/app/javascript/gabsocial/components/column_indicator.js b/app/javascript/gabsocial/components/column_indicator.js
index df9f9e22..02242a38 100644
--- a/app/javascript/gabsocial/components/column_indicator.js
+++ b/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._, _s.w100PC, _s.jcCenter, _s.aiCenter, _s.py15].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.jcCenter, _s.aiCenter, _s.py15].join(' ')}>
         <Icon id={type} size='30px' />
         {
           type !== 'loading' &&
diff --git a/app/javascript/gabsocial/components/comment.js b/app/javascript/gabsocial/components/comment.js
index 12a4060f..a6460238 100644
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -85,7 +85,7 @@ class Comment extends ImmutablePureComponent {
     }
 
     const contentClasses = CX({
-      _: 1,
+      d: 1,
       px10: 1,
       pt5: 1,
       pb10: 1,
@@ -95,19 +95,19 @@ class Comment extends ImmutablePureComponent {
     })
 
     return (
-      <div className={[_s._, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
-        <div className={_s._} style={style}>
+      <div className={[_s.d, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
+        <div className={_s.d} style={style}>
 
-          <div className={[_s._, _s.flexRow].join(' ')}>
+          <div className={[_s.d, _s.flexRow].join(' ')}>
             <NavLink
               to={`/${status.getIn(['account', 'acct'])}`}
               title={status.getIn(['account', 'acct'])}
-              className={[_s._, _s.mr10, _s.pt5].join(' ')}
+              className={[_s.d, _s.mr10, _s.pt5].join(' ')}
             >
               <Avatar account={status.get('account')} size={32} />
             </NavLink>
 
-            <div className={[_s._, _s.flexShrink1, _s.maxW100PC42PX].join(' ')}>
+            <div className={[_s.d, _s.flexShrink1, _s.maxW100PC42PX].join(' ')}>
               <div className={contentClasses}>
                 <CommentHeader
                   ancestorAccountId={ancestorAccountId}
@@ -122,7 +122,7 @@ class Comment extends ImmutablePureComponent {
                   isComment
                   collapsable
                 />
-                <div className={[_s._, _s.mt5].join(' ')}>
+                <div className={[_s.d, _s.mt5].join(' ')}>
                   <StatusMedia
                     isComment
                     status={status}
@@ -136,7 +136,7 @@ class Comment extends ImmutablePureComponent {
                 </div>
               </div>
 
-              <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
+              <div className={[_s.d, _s.flexRow, _s.mt5].join(' ')}>
                 <CommentButton
                   title={intl.formatMessage(status.get('favourited') ? messages.unlike : messages.like)}
                   onClick={this.handleOnFavorite}
diff --git a/app/javascript/gabsocial/components/comment_header.js b/app/javascript/gabsocial/components/comment_header.js
index 3d7ad383..df55698a 100644
--- a/app/javascript/gabsocial/components/comment_header.js
+++ b/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._, _s.aiStart, _s.py2, _s.maxW100PC, _s.flexGrow1].join(' ')}>
+      <div className={[_s.d, _s.aiStart, _s.py2, _s.maxW100PC, _s.flexGrow1].join(' ')}>
 
-        <div className={[_s._, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.w100PC, _s.maxW100PC, _s.aiCenter].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.w100PC, _s.maxW100PC, _s.aiCenter].join(' ')}>
           <NavLink
-            className={[_s._, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
+            className={[_s.d, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
             to={`/${status.getIn(['account', 'acct'])}`}
             title={status.getIn(['account', 'acct'])}
           >
@@ -60,7 +60,7 @@ class CommentHeader extends ImmutablePureComponent {
 
           {
             isOwner &&
-            <div className={[_s._, _s.aiCenter, _s.ml5].join(' ')}>
+            <div className={[_s.d, _s.aiCenter, _s.ml5].join(' ')}>
               <span className={_s.visiblyHidden}>
                 {intl.formatMessage(messages.original)}
               </span>
diff --git a/app/javascript/gabsocial/components/comment_list.js b/app/javascript/gabsocial/components/comment_list.js
index 767e0fc6..3c292377 100644
--- a/app/javascript/gabsocial/components/comment_list.js
+++ b/app/javascript/gabsocial/components/comment_list.js
@@ -41,7 +41,7 @@ class CommentList extends ImmutablePureComponent {
         </Wrapper>
         {
           size > 0 && size > max && commentsLimited &&
-          <div className={[_s._, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.aiCenter].join(' ')}>
+          <div className={[_s.d, _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._, _s.mlAuto].join(' ')}>
+            <div className={[_s.d, _s.mlAuto].join(' ')}>
               <Text color='tertiary'>
                 {max}
                 &nbsp;of&nbsp;
diff --git a/app/javascript/gabsocial/components/composer.js b/app/javascript/gabsocial/components/composer.js
index ba7f9b09..83924b5f 100644
--- a/app/javascript/gabsocial/components/composer.js
+++ b/app/javascript/gabsocial/components/composer.js
@@ -238,7 +238,7 @@ class Composer extends React.PureComponent {
     const { editorState } = this.state
 
     const editorContainerClasses = cx({
-      _: 1,
+      d: 1,
       cursorText: 1,
       text: 1,
       cPrimary: 1,
@@ -251,7 +251,7 @@ class Composer extends React.PureComponent {
     })
 
     return (
-      <div className={_s._}>
+      <div className={_s.d}>
 
         {
           !small && isPro &&
diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js
index d244c9ff..bbaee84a 100644
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -80,7 +80,7 @@ class DisplayName extends ImmutablePureComponent {
     if (!account) return null
 
     const containerClassName = CX({
-      _: 1,
+      d: 1,
       maxW100PC: 1,
       aiCenter: !isMultiline,
       flexRow: !isMultiline,
@@ -147,7 +147,7 @@ class DisplayName extends ImmutablePureComponent {
         onMouseLeave={noHover ? undefined : this.handleMouseLeave}
         ref={this.setRef}
       >
-        <span className={[_s._, _s.flexRow, _s.aiCenter, _s.maxW100PC].join(' ')}>
+        <span className={[_s.d, _s.flexRow, _s.aiCenter, _s.maxW100PC].join(' ')}>
           <bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
             <strong
               className={displayNameClasses}
@@ -160,7 +160,7 @@ class DisplayName extends ImmutablePureComponent {
           </bdi>
           {
             account.get('is_verified') &&
-            <Icon id='verified' size={`${iconSize}px`} className={[_s.ml5, _s._].join(' ')} />
+            <Icon id='verified' size={`${iconSize}px`} className={[_s.ml5, _s.d].join(' ')} />
           }
         </span>
         {
@@ -169,7 +169,7 @@ class DisplayName extends ImmutablePureComponent {
             @{account.get('acct')}
             {
               !noRelationship && !!relationshipLabel &&
-              <span className={[_s._, _s.ml5, _s.jcCenter].join(' ')}>
+              <span className={[_s.d, _s.ml5, _s.jcCenter].join(' ')}>
                 <Text
                   size='extraSmall'
                   isBadge
diff --git a/app/javascript/gabsocial/components/divider.js b/app/javascript/gabsocial/components/divider.js
index e83a8f74..5b88eb4e 100644
--- a/app/javascript/gabsocial/components/divider.js
+++ b/app/javascript/gabsocial/components/divider.js
@@ -13,7 +13,7 @@ class Divider extends React.PureComponent {
     const { isSmall, isInvisible } = this.props
 
     const classes = CX({
-      _: 1,
+      d: 1,
       borderBottom1PX: !isInvisible,
       borderColorSecondary: !isInvisible,
       w100PC: 1,
diff --git a/app/javascript/gabsocial/components/error_boundary.js b/app/javascript/gabsocial/components/error_boundary.js
index 27900e92..6b90cfd7 100644
--- a/app/javascript/gabsocial/components/error_boundary.js
+++ b/app/javascript/gabsocial/components/error_boundary.js
@@ -61,14 +61,14 @@ class ErrorBoundary extends React.PureComponent {
     if (!hasError) return this.props.children
 
     return (
-      <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.d, _s.minH100VH, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <div className={[_s.d, _s.minH53PX, _s.bgBrand, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+          <div className={[_s.d, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w1255PX].join(' ')}>
 
-            <div className={[_s._, _s.flexRow].join(' ')}>
+            <div className={[_s.d, _s.flexRow].join(' ')}>
 
-              <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(' ')}>
+              <h1 className={[_s.d, _s.mr15].join(' ')}>
+                <Button href='/' isText aria-label='Gab' className={[_s.d, _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._, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
+        <div className={[_s.d, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
 
-          <Icon id='warning' size='28px' className={[_s._, _s.cSecondary, _s.mb15].join(' ')} />
+          <Icon id='warning' size='28px' className={[_s.d, _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._, _s.py10, _s.my10].join(' ')}>
+          <div className={[_s.d, _s.py10, _s.my10].join(' ')}>
             <Text>
               {APP_NAME} ({version})
             </Text>
 
-            <div className={[_s._, _s.flexRow, _s.mt10, _s.aiCenter].join(' ')}>
+            <div className={[_s.d, _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._, _s.flexRow].join(' ')}>
+          <div className={[_s.d, _s.flexRow].join(' ')}>
             <Button href='/home'>
               <Text align='center' color='inherit'>
                 <FormattedMessage
diff --git a/app/javascript/gabsocial/components/extended_video_player.js b/app/javascript/gabsocial/components/extended_video_player.js
index ff48b160..8b56b974 100644
--- a/app/javascript/gabsocial/components/extended_video_player.js
+++ b/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._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
         <video
-          className={[_s._, _s.maxW100PC, _s.maxH100PC].join(' ')}
+          className={[_s.d, _s.maxW100PC, _s.maxH100PC].join(' ')}
           playsInline
           ref={this.setRef}
           src={src}
diff --git a/app/javascript/gabsocial/components/file_input.js b/app/javascript/gabsocial/components/file_input.js
index 226abe67..68ba4f05 100644
--- a/app/javascript/gabsocial/components/file_input.js
+++ b/app/javascript/gabsocial/components/file_input.js
@@ -41,7 +41,7 @@ class FileInput extends React.PureComponent {
     const { file, hovering } = this.state
 
     const containerClasses = CX(className, {
-      _: 1,
+      d: 1,
       aiCenter: 1,
       cursorPointer: 1,
       jcCenter: 1,
@@ -66,7 +66,7 @@ class FileInput extends React.PureComponent {
       >
         {
           !!title &&
-          <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
+          <div className={[_s.d, _s.mb10, _s.pl15].join(' ')}>
             <Text size='small' weight='medium' color='secondary'>
               {title}
             </Text>
@@ -88,7 +88,7 @@ class FileInput extends React.PureComponent {
           />
           {
             (!file || hovering) &&
-            <div className={[_s._, _s.posAbs, _s.cursorPointer, _s.top0, _s.bottom0, _s.left0, _s.right0, _s.aiCenter, _s.jcCenter, _s.bgBlackOpaquest_onHover].join(' ')}>
+            <div className={[_s.d, _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>
           }
diff --git a/app/javascript/gabsocial/components/footer_bar.js b/app/javascript/gabsocial/components/footer_bar.js
index f59997f6..9c1a4a4f 100644
--- a/app/javascript/gabsocial/components/footer_bar.js
+++ b/app/javascript/gabsocial/components/footer_bar.js
@@ -57,9 +57,9 @@ class FooterBar extends React.PureComponent {
     ]
 
     return (
-      <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(' ')}>
+      <div className={[_s.d, _s.z4, _s.minH58PX, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.minH58PX, _s.w100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.h100PC, _s.minH58PX, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
             {
               buttons.map((props) => {
                 if (props.isHidden) return null
diff --git a/app/javascript/gabsocial/components/form.js b/app/javascript/gabsocial/components/form.js
index 8ff46d81..99c4b0d8 100644
--- a/app/javascript/gabsocial/components/form.js
+++ b/app/javascript/gabsocial/components/form.js
@@ -12,14 +12,14 @@ class Form extends React.PureComponent {
     } = this.props
 
     return (
-      <form onSubmit={onSubmit} className={_s._}>
+      <form onSubmit={onSubmit} className={_s.d}>
         {
           !!errorMessage &&
           <Text color='danger' className={_s.my10}>
             {errorMessage}
           </Text>
         }
-        <div className={_s._}>
+        <div className={_s.d}>
           {children}
         </div>
       </form>
diff --git a/app/javascript/gabsocial/components/global_footer.js b/app/javascript/gabsocial/components/global_footer.js
index 4de5cc8d..03de23b7 100644
--- a/app/javascript/gabsocial/components/global_footer.js
+++ b/app/javascript/gabsocial/components/global_footer.js
@@ -11,30 +11,30 @@ export default class GlobalFooter extends React.PureComponent {
   render() {
 
     return (
-      <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.d, _s.z4, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.left0, _s.right0, _s.bottom0, _s.w100PC, _s.bgSubtle, _s.borderTop1PX, _s.aiCenter, _s.borderColorSecondary].join(' ')}>
 
-          <div className={[_s._, _s.mt15, _s.mb15].join(' ')}>
+          <div className={[_s.d, _s.mt15, _s.mb15].join(' ')}>
             <ResponsiveClassesComponent
-              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(' ')}
+              classNames={[_s.d, _s.w1255PX, _s.flexRow, _s.py15, _s.mt15, _s.mb15].join(' ')}
+              classNamesSmall={[_s.d, _s.w1255PX, _s.aiCenter, _s.pt15, _s.px15, _s.mt15].join(' ')}
             >
 
               <ResponsiveClassesComponent
-                classNames={[_s._, _s.w330PX].join(' ')}
-                classNamesSmall={[_s._, _s.aiCenter].join(' ')}
+                classNames={[_s.d, _s.w330PX].join(' ')}
+                classNamesSmall={[_s.d, _s.aiCenter].join(' ')}
               >
-                <div className={[_s._, _s.mb10].join(' ')}>
+                <div className={[_s.d, _s.mb10].join(' ')}>
                   <Icon id='logo' />
                 </div>
-                <div className={[_s._, _s.pr15, _s.maxW640PX].join(' ')}>
+                <div className={[_s.d, _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._, _s.flexRow, _s.flexGrow1, _s.pl15].join(' ')}
-                classNamesSmall={[_s._, _s.py15, _s.w100PC, _s.px15].join(' ')}
+                classNames={[_s.d, _s.flexRow, _s.flexGrow1, _s.pl15].join(' ')}
+                classNamesSmall={[_s.d, _s.py15, _s.w100PC, _s.px15].join(' ')}
               >
 
                 <GlobalFooterColumn
@@ -117,13 +117,13 @@ export default class GlobalFooter extends React.PureComponent {
             </ResponsiveClassesComponent>
           </div>
 
-          <div className={[_s._, _s.aiCenter, _s.bgSecondary, _s.h100PC, _s.minH58PX, _s.w100PC, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
+          <div className={[_s.d, _s.aiCenter, _s.bgSecondary, _s.h100PC, _s.minH58PX, _s.w100PC, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
             <ResponsiveClassesComponent
-              classNames={[_s._, _s.w1255PX, _s.flexRow, _s.aiCenter].join(' ')}
-              classNamesXS={[_s._, _s.w1255PX, _s.aiCenter, _s.px15, _s.pt15].join(' ')}
+              classNames={[_s.d, _s.w1255PX, _s.flexRow, _s.aiCenter].join(' ')}
+              classNamesXS={[_s.d, _s.w1255PX, _s.aiCenter, _s.px15, _s.pt15].join(' ')}
             >
 
-              <div classNames={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+              <div classNames={[_s.d, _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._, _s.aiCenter, _s.mlAuto].join(' ')}
-                classNamesXS={[_s._, _s.aiCenter, _s.py15].join(' ')}
+                classNames={[_s.d, _s.aiCenter, _s.mlAuto].join(' ')}
+                classNamesXS={[_s.d, _s.aiCenter, _s.py15].join(' ')}
               >
                 <Text>
                   Made in USA 🇺🇸
@@ -181,8 +181,8 @@ class GlobalFooterColumn extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s._, _s.flexNormal].join(' ')}
-        classNamesSmall={[_s._, _s.w100PC, _s.aiCenter, _s.mt15, _s.mb5, _s.pt15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
+        classNames={[_s.d, _s.flexNormal].join(' ')}
+        classNamesSmall={[_s.d, _s.w100PC, _s.aiCenter, _s.mt15, _s.mb5, _s.pt15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
       >
         <div className={_s.mb10}>
           <Heading size='h3'>{title}</Heading>
diff --git a/app/javascript/gabsocial/components/group_collection_item.js b/app/javascript/gabsocial/components/group_collection_item.js
index 93bce788..52cb5f10 100644
--- a/app/javascript/gabsocial/components/group_collection_item.js
+++ b/app/javascript/gabsocial/components/group_collection_item.js
@@ -42,7 +42,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
     }
 
     const navLinkClasses = cx({
-      _: 1,
+      d: 1,
       noUnderline: 1,
       overflowHidden: 1,
       borderColorSecondary: 1,
@@ -57,7 +57,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
     })
 
     return (
-      <div className={_s._}>
+      <div className={_s.d}>
         <NavLink
           to={`/groups/${group.get('id')}`}
           className={navLinkClasses}
@@ -73,12 +73,12 @@ class GroupCollectionItem extends ImmutablePureComponent {
 
           {
             (!coverSrc || coverMissing) && (isMember || isAdmin) &&
-            <div className={[_s._, _s.h40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
+            <div className={[_s.d, _s.h40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
           }
 
           {
             (isMember || isAdmin) &&
-            <div className={[_s._, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
+            <div className={[_s.d, _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._, _s.px10, _s.my10].join(' ')}>
+          <div className={[_s.d, _s.px10, _s.my10].join(' ')}>
             <Text color='primary' size='medium' weight='bold'>
               {group.get('title')}
             </Text>
 
-            <div className={[_s._, _s.flexRow, _s.aiCenter, _s.mt5, _s.mb5].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.mt5, _s.mb5].join(' ')}>
               <Text color='secondary' size='small'>
                 {shortNumberFormat(group.get('member_count'))}
                 &nbsp;
diff --git a/app/javascript/gabsocial/components/group_header.js b/app/javascript/gabsocial/components/group_header.js
index d2869b71..fc6a2a4f 100644
--- a/app/javascript/gabsocial/components/group_header.js
+++ b/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._, _s.z1, _s.w100PC, _s.mb15].join(' ')}>
+      <div className={[_s.d, _s.z1, _s.w100PC, _s.mb15].join(' ')}>
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
-            <div className={[_s._, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+            <div className={[_s.d, _s.w100PC].join(' ')}>
 
               {
                 coverSrc && !coverSrcMissing &&
                 <Image className={_s.h200PX} src={coverSrc} alt={title} />
               }
 
-              <div className={[_s._, _s.w100PC].join(' ')}>
+              <div className={[_s.d, _s.w100PC].join(' ')}>
 
-                <div className={[_s._, _s.w100PC, _s.px15, _s.mt10, _s.py10].join(' ')}>
+                <div className={[_s.d, _s.w100PC, _s.px15, _s.mt10, _s.py10].join(' ')}>
                   {children}
                 </div>
 
                 {
                   !!me &&
-                  <div className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter, _s.mt5, _s.pb15, _s.pt5, _s.h100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
+                  <div className={[_s.d, _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._, _s.flexRow, _s.h100PC, _s.mt5, _s.pt10, _s.pb5, _s.mb5, _s.px10].join(' ')}>
+                <div className={[_s.d, _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._, _s.boxShadowBlock, _s.bgPrimary, _s.bottomLeftRadiusSmall, _s.bottomRightRadiusSmall].join(' ')}>
-            <div className={[_s._, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.boxShadowBlock, _s.bgPrimary, _s.bottomLeftRadiusSmall, _s.bottomRightRadiusSmall].join(' ')}>
+            <div className={[_s.d, _s.w100PC].join(' ')}>
 
               {
                 coverSrc && !coverSrcMissing &&
                 <Image className={_s.h350PX} src={coverSrc} alt={title} />
               }
               
-              <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(' ')}>
+              <div className={[_s.d].join(' ')}>
+                <div className={[_s.d, _s.flexRow, _s.py10, _s.px10].join(' ')}>
+                  <div className={[_s.d, _s.w100PC].join(' ')}>
+                    <div className={[_s.d, _s.flexRow].join(' ')}>
                       <Icon id='group' size='28px' />
-                      <div className={[_s._, _s.ml7, _s.flexNormal].join(' ')}>
+                      <div className={[_s.d, _s.ml7, _s.flexNormal].join(' ')}>
                         <Heading>
                           {title}
                         </Heading>
@@ -179,15 +179,15 @@ class GroupHeader extends ImmutablePureComponent {
                     </div>
                   </div>
                 </div>
-                <div className={[_s._, _s.h53PX, _s.w100PC].join(' ')}>
-                  <div className={[_s._, _s.flexRow, _s.h100PC, _s.px10].join(' ')}>
+                <div className={[_s.d, _s.h53PX, _s.w100PC].join(' ')}>
+                  <div className={[_s.d, _s.flexRow, _s.h100PC, _s.px10].join(' ')}>
                     
                     <TabBar tabs={tabs} isLarge />
 
-                    <div className={[_s._, _s.flexRow, _s.aiCenter, _s.h100PC, _s.mlAuto].join(' ')}>
+                    <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.h100PC, _s.mlAuto].join(' ')}>
                       {
                         !!me &&
-                        <div className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
+                        <div className={[_s.d, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
                           <Button
                             iconSize='18px'
                             color='brand'
diff --git a/app/javascript/gabsocial/components/group_list_item.js b/app/javascript/gabsocial/components/group_list_item.js
index 4f3ac29b..d44f9ca8 100644
--- a/app/javascript/gabsocial/components/group_list_item.js
+++ b/app/javascript/gabsocial/components/group_list_item.js
@@ -56,7 +56,7 @@ class GroupListItem extends ImmutablePureComponent {
     }
     
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       overflowHidden: 1,
       bgSubtle_onHover: 1,
       borderColorSecondary: 1,
@@ -67,7 +67,7 @@ class GroupListItem extends ImmutablePureComponent {
     })
 
     const containerLinkClasses = CX({
-      _: 1,
+      d: 1,
       flexRow: 1,
       noUnderline: 1,
       w100PC: 1,
@@ -98,7 +98,7 @@ class GroupListItem extends ImmutablePureComponent {
             />
           }
 
-          <div className={[_s._, _s.px10, _s.mt5, _s.flexShrink1].join(' ')}>
+          <div className={[_s.d, _s.px10, _s.mt5, _s.flexShrink1].join(' ')}>
             <Text color='brand' weight='bold'>
               {group.get('title')}
             </Text>
@@ -113,7 +113,7 @@ class GroupListItem extends ImmutablePureComponent {
         </Wrapper>
         {
           isAddable &&
-          <div className={[_s._, _s.jcCenter, _s.flexGrow1].join(' ')}>
+          <div className={[_s.d, _s.jcCenter, _s.flexGrow1].join(' ')}>
             {
               relationships &&
               <Button
diff --git a/app/javascript/gabsocial/components/hashtag_item.js b/app/javascript/gabsocial/components/hashtag_item.js
index a9c7e3f0..410b9cf4 100644
--- a/app/javascript/gabsocial/components/hashtag_item.js
+++ b/app/javascript/gabsocial/components/hashtag_item.js
@@ -19,9 +19,9 @@ class HashtagItem extends ImmutablePureComponent {
     return (
       <NavLink
         to={`/tags/${hashtag.get('name')}`}
-        className={[_s._, _s.noUnderline, _s.bgSubtle_onHover, _s.px15, _s.py5].join(' ')}
+        className={[_s.d, _s.noUnderline, _s.bgSubtle_onHover, _s.px15, _s.py5].join(' ')}
       >
-        <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
           <div>
             <Text color='brand' size='medium' weight='bold' className={[_s.py2, _s.lineHeight15].join(' ')}>
               #{hashtag.get('name')}
diff --git a/app/javascript/gabsocial/components/heading.js b/app/javascript/gabsocial/components/heading.js
index 6cf81984..bb07145c 100644
--- a/app/javascript/gabsocial/components/heading.js
+++ b/app/javascript/gabsocial/components/heading.js
@@ -36,7 +36,7 @@ class Heading extends React.PureComponent {
 
     // Each size has it's own custom style
     const classes = cx({
-      _: 1,
+      d: 1,
       text: 1,
       textAlignCenter: isCentered,
 
diff --git a/app/javascript/gabsocial/components/image.js b/app/javascript/gabsocial/components/image.js
index 84b3ee41..b92406fa 100644
--- a/app/javascript/gabsocial/components/image.js
+++ b/app/javascript/gabsocial/components/image.js
@@ -28,7 +28,7 @@ class Image extends React.PureComponent {
     const { error } = this.state
 
     const classes = cx(className, {
-      _: 1,
+      d: 1,
       objectFitCover: !!src && fit === 'cover',
       bgSecondary: !src,
     })
diff --git a/app/javascript/gabsocial/components/image_loader.js b/app/javascript/gabsocial/components/image_loader.js
index 72637c20..52ea4a31 100644
--- a/app/javascript/gabsocial/components/image_loader.js
+++ b/app/javascript/gabsocial/components/image_loader.js
@@ -142,7 +142,7 @@ class ImageLoader extends React.PureComponent {
     // }
 
     const className = CX({
-      _: 1,
+      d: 1,
       w100PC: 1,
       h100PC: 1,
       // 'image-loader--loading': loading,
@@ -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._, _s.objectFitCover].join(' ')}
+            className={[_s.d, _s.objectFitCover].join(' ')}
             ref={this.setCanvasRef}
             width={width}
             height={height}
diff --git a/app/javascript/gabsocial/components/input.js b/app/javascript/gabsocial/components/input.js
index 3a1908df..1bae32b6 100644
--- a/app/javascript/gabsocial/components/input.js
+++ b/app/javascript/gabsocial/components/input.js
@@ -34,7 +34,7 @@ class Input extends React.PureComponent {
     } = this.props
 
     const inputClasses = cx({
-      _: 1,
+      d: 1,
       text: 1,
       outlineNone: 1,
       lineHeight125: !small,
@@ -65,13 +65,13 @@ class Input extends React.PureComponent {
       <React.Fragment>
         {
           !!title && !hideLabel &&
-          <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
+          <div className={[_s.d, _s.mb10, _s.pl15].join(' ')}>
             <Text htmlFor={id} size='small' weight='medium' color='secondary' tagName='label'>
               {title}
             </Text>
           </div>
         }
-        <div className={[_s._, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.aiCenter].join(' ')}>
+        <div className={[_s.d, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.aiCenter].join(' ')}>
           {
             !!prependIcon &&
             <Icon id={prependIcon} size='16px' className={[_s.cPrimary, _s.ml15, _s.mr5].join(' ')} />
diff --git a/app/javascript/gabsocial/components/link_footer.js b/app/javascript/gabsocial/components/link_footer.js
index 02101b43..5331fcee 100644
--- a/app/javascript/gabsocial/components/link_footer.js
+++ b/app/javascript/gabsocial/components/link_footer.js
@@ -72,14 +72,14 @@ class LinkFooter extends React.PureComponent {
     ]
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       px10: !noPadding,
       mb15: 1,
     })
 
     return (
       <div className={containerClasses}>
-        <nav aria-label='Footer' role='navigation' className={[_s._, _s.flexWrap, _s.flexRow].join(' ')}>
+        <nav aria-label='Footer' role='navigation' className={[_s.d, _s.flexWrap, _s.flexRow].join(' ')}>
           {
             linkFooterItems.map((linkFooterItem, i) => {
               if (linkFooterItem.requiresUser && !me) return null
diff --git a/app/javascript/gabsocial/components/list_item.js b/app/javascript/gabsocial/components/list_item.js
index cee748fe..13c269be 100644
--- a/app/javascript/gabsocial/components/list_item.js
+++ b/app/javascript/gabsocial/components/list_item.js
@@ -35,7 +35,7 @@ class ListItem extends React.PureComponent {
 
     if (!title) {
       return (
-        <div className={[_s._, _s.bgSecondary, _s.w100PC, _s.h4PX].join(' ')} />
+        <div className={[_s.d, _s.bgSecondary, _s.w100PC, _s.h4PX].join(' ')} />
       )
     }
 
@@ -56,7 +56,7 @@ class ListItem extends React.PureComponent {
     const showActive = isActive !== undefined
 
     const containerClasses = cx({
-      _: 1,
+      d: 1,
       cursorPointer: 1,
       noUnderline: 1,
       px15: !small,
@@ -81,7 +81,7 @@ class ListItem extends React.PureComponent {
     })
 
     const textContainerClasses = cx({
-      _: 1,
+      d: 1,
       pr5: 1,
       maxW100PC42PX: !hideArrow || showActive,
     })
diff --git a/app/javascript/gabsocial/components/load_more.js b/app/javascript/gabsocial/components/load_more.js
index 06d7d378..31400821 100644
--- a/app/javascript/gabsocial/components/load_more.js
+++ b/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._, _s.py15, _s.px10].join(' ')}>
+      <div className={[_s.d, _s.py15, _s.px10].join(' ')}>
         <Button
           isBlock
           radiusSmall
diff --git a/app/javascript/gabsocial/components/logged_out_navigation_bar.js b/app/javascript/gabsocial/components/logged_out_navigation_bar.js
index 668a2564..1442c518 100644
--- a/app/javascript/gabsocial/components/logged_out_navigation_bar.js
+++ b/app/javascript/gabsocial/components/logged_out_navigation_bar.js
@@ -15,19 +15,19 @@ class LoggedOutNavigationBar extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s._, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}
-        classNamesXS={[_s._, _s.z4, _s.minH98PX, _s.w100PC].join(' ')}
+        classNames={[_s.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}
+        classNamesXS={[_s.d, _s.z4, _s.minH98PX, _s.w100PC].join(' ')}
       >
         <ResponsiveClassesComponent
-          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(' ')}
+          classNames={[_s.d, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
+          classNamesXS={[_s.d, _s.minH98PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
         >
 
-          <div className={[_s._, _s.w1255PX, _s.flexRow, _s.flexWrap, _s.h100PC].join(' ')}>
+          <div className={[_s.d, _s.w1255PX, _s.flexRow, _s.flexWrap, _s.h100PC].join(' ')}>
           
             <ResponsiveClassesComponent
-              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(' ')}
+              classNames={[_s.d, _s.aiCenter, _s.jcCenter, _s.flexRow, _s.flexGrow1, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR].join(' ')}
+              classNamesXS={[_s.d, _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._, _s.flexRow, _s.mr15].join(' ')}>
+                  <div className={[_s.d, _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._, _s.flexGrow1, _s.pr10, _s.mrAuto, _s.maxW640PX].join(' ')}>
+              <div className={[_s.d, _s.flexGrow1, _s.pr10, _s.mrAuto, _s.maxW640PX].join(' ')}>
                 <Search isInNav />
               </div>
 
             </ResponsiveClassesComponent>
 
             <ResponsiveClassesComponent
-              classNames={[_s._, _s.flexRow, _s.py5, _s.px10, _s.w330PX, _s.mlAuto].join(' ')}
-              classNamesXS={[_s._, _s.flexRow, _s.pb5, _s.px10, _s.w100PC].join(' ')}
+              classNames={[_s.d, _s.flexRow, _s.py5, _s.px10, _s.w330PX, _s.mlAuto].join(' ')}
+              classNamesXS={[_s.d, _s.flexRow, _s.pb5, _s.px10, _s.w100PC].join(' ')}
             >
 
               <Button
diff --git a/app/javascript/gabsocial/components/logged_out_sidebar.js b/app/javascript/gabsocial/components/logged_out_sidebar.js
index 5ac7461c..f26308e9 100644
--- a/app/javascript/gabsocial/components/logged_out_sidebar.js
+++ b/app/javascript/gabsocial/components/logged_out_sidebar.js
@@ -65,21 +65,21 @@ class Sidebar extends React.PureComponent {
     ]
 
     return (
-      <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(' ')}>
+      <header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
+        <div className={[_s.d, _s.w240PX].join(' ')}>
+          <div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
+            <div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
+              <div className={[_s.d, _s.w100PC].join(' ')}>
                 {
                   !!title &&
-                  <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+                  <div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                     <Heading size='h1'>
                       {title}
                     </Heading>
                   </div>
                 }
               </div>
-              <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   menuItems.map((menuItem, i) => {
diff --git a/app/javascript/gabsocial/components/media_gallery.js b/app/javascript/gabsocial/components/media_gallery.js
index 6cd391a8..c643dd85 100644
--- a/app/javascript/gabsocial/components/media_gallery.js
+++ b/app/javascript/gabsocial/components/media_gallery.js
@@ -130,9 +130,9 @@ class Item extends ImmutablePureComponent {
 
     if (attachment.get('type') === 'unknown') {
       return (
-        <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(' ')} />
+        <div className={[_s.d, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
+          <a className={[_s.d, _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.d, _s.heigh100PC, _s.w100PC].join(' ')} />
           </a>
         </div>
       )
@@ -155,7 +155,7 @@ class Item extends ImmutablePureComponent {
 
       thumbnail = (
         <a
-          className={[_s._, _s.overflowHidden, _s.h100PC, _s.w100PC, _s.cursorPointer].join(' ')}
+          className={[_s.d, _s.overflowHidden, _s.h100PC, _s.w100PC, _s.cursorPointer].join(' ')}
           href={attachment.get('remote_url') || originalUrl}
           onClick={this.handleClick}
           target='_blank'
@@ -178,9 +178,9 @@ class Item extends ImmutablePureComponent {
       const autoPlay = !isIOS() && autoPlayGif !== false;
 
       thumbnail = (
-        <div className={[_s._, _s.overflowHidden, _s.heigh100PC, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.overflowHidden, _s.heigh100PC, _s.w100PC].join(' ')}>
           <video
-            className={[_s._, _s.cursorPointer, _s.objectFitCover, _s.w100PC, _s.h100PC, _s.z1].join(' ')}
+            className={[_s.d, _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._, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
+          <div className={[_s.d, _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._, _s.heigh100PC, _s.w100PC].join(' ')} />
+          <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.d, _s.heigh100PC, _s.w100PC].join(' ')} />
         }
         {visible && thumbnail}
       </div>
@@ -515,7 +515,7 @@ class MediaGallery extends React.PureComponent {
     ))
 
     const containerClasses = cx({
-      _: 1,
+      d: 1,
       displayBlock: 1,
       overflowHidden: 1,
       borderColorSecondary: size === 1 && visible,
@@ -538,7 +538,7 @@ class MediaGallery extends React.PureComponent {
 
         {
           visible &&
-          <div className={[_s._, _s.displayBlock, _s.w100PC, _s.h100PC, _s.overflowHidden].join(' ')}>
+          <div className={[_s.d, _s.displayBlock, _s.w100PC, _s.h100PC, _s.overflowHidden].join(' ')}>
             {children}
           </div>
         }
diff --git a/app/javascript/gabsocial/components/media_item.js b/app/javascript/gabsocial/components/media_item.js
index 4ad396dd..9f993c40 100644
--- a/app/javascript/gabsocial/components/media_item.js
+++ b/app/javascript/gabsocial/components/media_item.js
@@ -77,7 +77,7 @@ class MediaItem extends ImmutablePureComponent {
     }
 
     const containerClasses = cx({
-      _: 1,
+      d: 1,
       posAbs: 1,
       top0: 1,
       h100PC: 1,
@@ -87,7 +87,7 @@ class MediaItem extends ImmutablePureComponent {
     })
 
     const linkClasses = cx({
-      _: 1,
+      d: 1,
       w100PC: 1,
       h100PC: 1,
       overflowHidden: 1,
@@ -98,7 +98,7 @@ class MediaItem extends ImmutablePureComponent {
     const statusUrl = `/${account.getIn(['acct'])}/posts/${status.get('id')}`;
 
     return (
-      <div className={[_s._, _s.w25PC, _s.pt25PC].join(' ')}>
+      <div className={[_s.d, _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._, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
+                className={[_s.d, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
               />
             }
 
@@ -127,7 +127,7 @@ class MediaItem extends ImmutablePureComponent {
               />
             }
 
-            <div className={[_s._, _s.aiCenter, _s.jcCenter, _s.h100PC, _s.w100PC, _s.z3, _s.posAbs].join(' ')}>
+            <div className={[_s.d, _s.aiCenter, _s.jcCenter, _s.h100PC, _s.w100PC, _s.z3, _s.posAbs].join(' ')}>
               {
                 !visible &&
                 <Icon
@@ -139,7 +139,7 @@ class MediaItem extends ImmutablePureComponent {
 
               {
                 !!badge &&
-                <div className={[_s._, _s.posAbs, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr5, _s.mt5, _s.mb5, _s.bottom0, _s.right0].join(' ')}>
+                <div className={[_s.d, _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>
diff --git a/app/javascript/gabsocial/components/modal/boost_modal.js b/app/javascript/gabsocial/components/modal/boost_modal.js
index d8aa85f4..952ae905 100644
--- a/app/javascript/gabsocial/components/modal/boost_modal.js
+++ b/app/javascript/gabsocial/components/modal/boost_modal.js
@@ -40,7 +40,7 @@ class BoostModal extends ImmutablePureComponent {
         onClose={onClose}
       >
       
-      <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
+      <div className={[_s.d, _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._, _s.jcCenter, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+        <div className={[_s.d, _s.jcCenter, _s.px15, _s.mt5, _s.mb15].join(' ')}>
           <Text align='center'>
             {intl.formatMessage(messages.combo)}
           </Text>
-          <div className={[_s._, _s.flexRow, _s.jcCenter, _s.my10, _s.pt15, _s.pb5].join(' ')}>
+          <div className={[_s.d, _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)}
diff --git a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
index a0b6183c..99fb9560 100644
--- a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
+++ b/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._, _s.pb10].join(' ')}>
+        <div className={[_s.d, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='community_timeline'
             settings={settings}
diff --git a/app/javascript/gabsocial/components/modal/confirmation_modal.js b/app/javascript/gabsocial/components/modal/confirmation_modal.js
index 53bbef56..308cdbc4 100644
--- a/app/javascript/gabsocial/components/modal/confirmation_modal.js
+++ b/app/javascript/gabsocial/components/modal/confirmation_modal.js
@@ -37,19 +37,19 @@ class ConfirmationModal extends React.PureComponent {
     return (
       <div className={_s.w330PX}>
         <Block>
-          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
-            <div className={[_s._, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
+            <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
 
               <Heading size='h1' isCentered>
                 {title}
               </Heading>
 
-              <div className={[_s._, _s.mt10].join(' ')}>
+              <div className={[_s.d, _s.mt10].join(' ')}>
                 <Text align='center' color='secondary'>
                   {message}
                 </Text>
 
-                <div className={[_s._, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
+                <div className={[_s.d, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
                   <Button
                     backgroundColor='tertiary'
                     color='primary'
diff --git a/app/javascript/gabsocial/components/modal/display_options_modal.js b/app/javascript/gabsocial/components/modal/display_options_modal.js
index 98b2a38e..043c5607 100644
--- a/app/javascript/gabsocial/components/modal/display_options_modal.js
+++ b/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._, _s.mb15].join(' ')}>
+        <div className={[_s.d, _s.mb15].join(' ')}>
           <Text align='center' color='secondary' size='medium'>
             {intl.formatMessage(messages.message)}
           </Text>
         </div>
 
-        <div className={[_s._, _s.mb15].join(' ')}>
+        <div className={[_s.d, _s.mb15].join(' ')}>
           <Text weight='bold' size='small' color='secondary'>
             Font Size
           </Text>
-          <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'}}>
+          <div className={[_s.d, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
+              <span className={[_s.d, _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._, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '18px'}}>
+              <span className={[_s.d, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '18px'}}>
                 Aa
               </span>
             </div>
           </div>
         </div>
 
-        <div className={[_s._, _s.mb15].join(' ')}>
+        <div className={[_s.d, _s.mb15].join(' ')}>
           <Text weight='bold' size='small' color='secondary'>
             Rounded
           </Text>
-          <div className={[_s._, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+          <div className={[_s.d, _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._, _s.mb10].join(' ')}>
+        <div className={[_s.d, _s.mb10].join(' ')}>
           <Text weight='bold' size='small' color='secondary'>
             Theme
           </Text>
-          <div className={[_s._, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
+          <div className={[_s.d, _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._, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
+      <label className={[_s.d, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
         <div
-          className={[_s._, _s.borderBottom6PX, _s.aiCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
+          className={[_s.d, _s.borderBottom6PX, _s.aiCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
           style={style}
         >
           <input
diff --git a/app/javascript/gabsocial/components/modal/edit_profile_modal.js b/app/javascript/gabsocial/components/modal/edit_profile_modal.js
index 64bb6053..af8f8250 100644
--- a/app/javascript/gabsocial/components/modal/edit_profile_modal.js
+++ b/app/javascript/gabsocial/components/modal/edit_profile_modal.js
@@ -115,9 +115,9 @@ class EditProfileModal extends ImmutablePureComponent {
     const isVerified = account.get('is_verified')
 
     return (
-      <div style={{ width: '440px' }} className={[_s._, _s.modal].join(' ')}>
+      <div style={{ width: '440px' }} className={[_s.d, _s.modal].join(' ')}>
         <Block>
-          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
             <Button
               backgroundColor='none'
               title={intl.formatMessage(messages.close)}
@@ -138,8 +138,8 @@ class EditProfileModal extends ImmutablePureComponent {
               {intl.formatMessage(messages.save)}
             </Button>
           </div>
-          <div className={[_s._, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
-            <div className={[_s._, _s.w100PC, _s.aiCenter].join(' ')}>
+          <div className={[_s.d, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
+            <div className={[_s.d, _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._, _s.mtNeg50PX, _s.aiCenter, _s.jcCenter].join(' ')}>
+              <div className={[_s.d, _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._, _s.py5, _s.px15, _s.mt5, _s.mb15, _s.w100PC].join(' ')}>
+              <div className={[_s.d, _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._, _s.px10].join(' ')}>
+                <div className={[_s.d, _s.px10].join(' ')}>
                   <Switch
                     label='Private account'
                     checked={locked}
diff --git a/app/javascript/gabsocial/components/modal/embed_modal.js b/app/javascript/gabsocial/components/modal/embed_modal.js
index 40e14437..cb0849ce 100644
--- a/app/javascript/gabsocial/components/modal/embed_modal.js
+++ b/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._}>
+        <div className={_s.d}>
           <Text className={_s.my10}>
             {intl.formatMessage(messages.instructions)}
           </Text>
 
-          <div className={[_s._, _s.mb10].join(' ')}>
+          <div className={[_s.d, _s.mb10].join(' ')}>
             <Input
               readOnly
               type='text'
@@ -76,9 +76,9 @@ class EmbedModal extends ImmutablePureComponent {
             {intl.formatMessage(messages.preview)}
           </Text>
 
-          <div className={[_s._, _s.w100PC, _s.bgSubtle, _s.h220PX, _s.aiCenter, _s.jcCenter].join(' ')}>
+          <div className={[_s.d, _s.w100PC, _s.bgSubtle, _s.h220PX, _s.aiCenter, _s.jcCenter].join(' ')}>
             <iframe
-              className={[_s._, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
+              className={[_s.d, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
               frameBorder='0'
               ref={this.setIframeRef}
               sandbox='allow-same-origin'
diff --git a/app/javascript/gabsocial/components/modal/gif_picker_modal.js b/app/javascript/gabsocial/components/modal/gif_picker_modal.js
index 5e467359..8aca2c98 100644
--- a/app/javascript/gabsocial/components/modal/gif_picker_modal.js
+++ b/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._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
-            <div className={[_s._, _s.flexGrow1, _s.mr5].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
+            <div className={[_s.d, _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._, _s.minH50VH, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
+          <div className={[_s.d, _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._, _s.w100PC, _s.h100PC].join(' ')}>
+              <div className={[_s.d, _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._, _s.flexNormal].join(' ')}>
+      <div className={[_s.d, _s.flexNormal].join(' ')}>
       {
         results.map((result, i) => (
           <button
             key={`gif-result-item-${i}`}
             onClick={() => this.onClick(result)}
-            className={[_s._, _s.outlineNone, _s.bgTransparent, _s.cursorPointer, _s.px2, _s.py2].join(' ')}
+            className={[_s.d, _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._, _s.h100PC, _s.flexRow, _s.w100PC].join(' ')}>
+      <div className={[_s.d, _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._, _s.h100PC, _s.w100PC, _s.flexRow, _s.flexWrap].join(' ')}>
+      <div className={[_s.d, _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._, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.w50PC].join(' ')}
+              className={[_s.d, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.w50PC].join(' ')}
             >
-              <div className={[_s._, _s.cursorPointer].join(' ')}>
+              <div className={[_s.d, _s.cursorPointer].join(' ')}>
                 <Image
                   height={150}
                   src={category.image}
                 />
-                <div className={[_s._, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
+                <div className={[_s.d, _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>
diff --git a/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
index dd411464..88d9c6fc 100644
--- a/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
+++ b/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._, _s.my10].join(' ')}>
+        <div className={[_s.d, _s.my10].join(' ')}>
           <Text>• Schedule Posts</Text>
           <Text>• Get Verified</Text>
           <Text>• Create Groups</Text>
diff --git a/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
index c1fc01e5..e37c2c67 100644
--- a/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
@@ -28,7 +28,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
         onClose={onClose}
       >
 
-        <div className={[_s._, _s.pb10].join(' ')}>
+        <div className={[_s.d, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='community_timeline'
             settings={settings}
diff --git a/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
index 626e18de..835a0350 100644
--- a/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
@@ -26,7 +26,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         onClose={onClose}
       >
       
-        <div className={[_s._, _s.pb10].join(' ')}>
+        <div className={[_s.d, _s.pb10].join(' ')}>
           {
             /*
             <SettingSwitch
diff --git a/app/javascript/gabsocial/components/modal/hotkeys_modal.js b/app/javascript/gabsocial/components/modal/hotkeys_modal.js
index 77e4f8ef..27828256 100644
--- a/app/javascript/gabsocial/components/modal/hotkeys_modal.js
+++ b/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._, _s.flexRow].join(' ')}>
+        <div className={[_s.d, _s.flexRow].join(' ')}>
           <table>
             <thead>
               <tr>
diff --git a/app/javascript/gabsocial/components/modal/list_add_user_modal.js b/app/javascript/gabsocial/components/modal/list_add_user_modal.js
index e5e6ded7..b471bd86 100644
--- a/app/javascript/gabsocial/components/modal/list_add_user_modal.js
+++ b/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._, _s.boxShadowNone].join(' ')}>
+        <div className={[_s.d, _s.boxShadowNone].join(' ')}>
           <div>
             {
               lists && lists.map((list) => {
                 return (
-                  <div className={[_s._, _s.flexRow, _s.aiCenter, _s.py10, _s.px15, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+                  <div className={[_s.d, _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>
diff --git a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
index 5c63311f..c13a4099 100644
--- a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
@@ -26,7 +26,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
         onClose={onClose}
       >
       
-        <div className={[_s._, _s.pb10].join(' ')}>
+        <div className={[_s.d, _s.pb10].join(' ')}>
           <SettingSwitch
             prefix='list_timeline'
             settings={settings}
diff --git a/app/javascript/gabsocial/components/modal/loading_modal.js b/app/javascript/gabsocial/components/modal/loading_modal.js
index 8e0fc88d..5c5d965a 100644
--- a/app/javascript/gabsocial/components/modal/loading_modal.js
+++ b/app/javascript/gabsocial/components/modal/loading_modal.js
@@ -5,8 +5,8 @@ import ColumnIndicator from '../column_indicator'
 const LoadingModal = () => (
   <div className={_s.w330PX}>
     <Block>
-      <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(' ')}>
+      <div className={[_s.d, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+        <div className={[_s.d, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
           <ColumnIndicator type='loading' />
         </div>
       </div>
diff --git a/app/javascript/gabsocial/components/modal/media_modal.js b/app/javascript/gabsocial/components/modal/media_modal.js
index 01c37063..d6635ef8 100644
--- a/app/javascript/gabsocial/components/modal/media_modal.js
+++ b/app/javascript/gabsocial/components/modal/media_modal.js
@@ -173,14 +173,14 @@ class MediaModal extends ImmutablePureComponent {
     }
 
     const navigationClasses = CX({
-      _: 1,
+      d: 1,
       displayNone: navigationHidden,
     })
 
     return (
-      <div className={[_s._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
         <div
-          className={[_s._, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+          className={[_s.d, _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._, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
-            <div className={[_s._, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
+          <div className={[_s.d, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
+            <div className={[_s.d, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
               <Pagination
                 count={media.size}
                 activeIndex={index}
diff --git a/app/javascript/gabsocial/components/modal/modal_base.js b/app/javascript/gabsocial/components/modal/modal_base.js
index ad7903e7..3012c06c 100644
--- a/app/javascript/gabsocial/components/modal/modal_base.js
+++ b/app/javascript/gabsocial/components/modal/modal_base.js
@@ -109,7 +109,7 @@ class ModalBase extends React.PureComponent {
     const visible = !!children
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       z4: 1,
       h100PC: visible,
       w100PC: visible,
@@ -117,7 +117,7 @@ class ModalBase extends React.PureComponent {
     })
 
     const dialogClasses = CX({
-      _: 1,
+      d: 1,
       posFixed: 1,
       aiCenter: 1,
       jcCenter: !isXS || isCenteredXS,
@@ -138,7 +138,7 @@ class ModalBase extends React.PureComponent {
           <React.Fragment>
             <div
               role='presentation'
-              className={[_s._, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+              className={[_s.d, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
             />
             <div
               ref={this.setDialog}
diff --git a/app/javascript/gabsocial/components/modal/modal_layout.js b/app/javascript/gabsocial/components/modal/modal_layout.js
index 308d0eb7..e7206502 100644
--- a/app/javascript/gabsocial/components/modal/modal_layout.js
+++ b/app/javascript/gabsocial/components/modal/modal_layout.js
@@ -26,7 +26,7 @@ class ModalLayout extends React.PureComponent {
     } = this.props
 
     const childrenContainerClasses = cx({
-      _: 1,
+      d: 1,
       maxH80VH: 1,
       overflowYScroll: 1,
       px15: !noPadding,
@@ -34,9 +34,9 @@ class ModalLayout extends React.PureComponent {
     })
 
     return (
-      <div style={{width: `${width}px`}} className={[_s._, _s.modal].join(' ')}>
+      <div style={{width: `${width}px`}} className={[_s.d, _s.modal].join(' ')}>
         <Block>
-          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
             <Heading size='h2'>
               {title}
             </Heading>
diff --git a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
index 4cb13002..210d04e9 100644
--- a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
+++ b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
@@ -25,8 +25,8 @@ class ProUpgradeModal extends ImmutablePureComponent {
     const imgSuffix = (theme === 'light' || !theme) ? 'light' : 'dark'
 
     const title = (
-      <span className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
-        <span className={[_s._, _s.mr2].join(' ')}>
+      <span className={[_s.d, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
+        <span className={[_s.d, _s.mr2].join(' ')}>
           Upgrade to Gab
         </span>
         <span className={[_s.bgPro, _s.cBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
@@ -46,7 +46,7 @@ class ProUpgradeModal extends ImmutablePureComponent {
           {intl.formatMessage(messages.benefits)}
         </Text>
 
-        <div className={[_s._, _s.my10].join(' ')}>
+        <div className={[_s.d, _s.my10].join(' ')}>
           <Image
             src={`/headers/pro-features-${imgSuffix}.png`}
             width='100%'
@@ -56,7 +56,7 @@ class ProUpgradeModal extends ImmutablePureComponent {
           />
         </div>
 
-        <div className={[_s._, _s.flexRow, _s.py10].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.py10].join(' ')}>
           <Button
             isOutline
             color='brand'
diff --git a/app/javascript/gabsocial/components/modal/report_modal.js b/app/javascript/gabsocial/components/modal/report_modal.js
index 41356367..1ec6f59c 100644
--- a/app/javascript/gabsocial/components/modal/report_modal.js
+++ b/app/javascript/gabsocial/components/modal/report_modal.js
@@ -63,12 +63,12 @@ class ReportModal extends ImmutablePureComponent {
       >
 
         <ResponsiveClassesComponent
-          classNames={[_s._, _s.flexRow].join(' ')}
-          classNamesSmall={[_s._, _s.flexColumnReverse].join(' ')}
+          classNames={[_s.d, _s.flexRow].join(' ')}
+          classNamesSmall={[_s.d, _s.flexColumnReverse].join(' ')}
         >
           <ResponsiveClassesComponent
-            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(' ')}
+            classNames={[_s.d, _s.w50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
+            classNamesSmall={[_s.d, _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._, _s.w50PC, _s.maxH80VH].join(' ')}
-            classNamesSmall={[_s._, _s.w100PC, _s.h260PX].join(' ')}
+            classNames={[_s.d, _s.w50PC, _s.maxH80VH].join(' ')}
+            classNamesSmall={[_s.d, _s.w100PC, _s.h260PX].join(' ')}
           >
-            <div className={[_s._, _s.h100PC, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}>
+            <div className={[_s.d, _s.h100PC, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}>
               {
                 statusIds.map(statusId => (
                   <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />
diff --git a/app/javascript/gabsocial/components/modal/status_revisions_modal.js b/app/javascript/gabsocial/components/modal/status_revisions_modal.js
index 70555c33..4a276e8a 100644
--- a/app/javascript/gabsocial/components/modal/status_revisions_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_revisions_modal.js
@@ -32,14 +32,14 @@ class StatusRevisionsModal extends ImmutablePureComponent {
         width={480}
         onClose={onClose}
       >
-        <div className={[_s._]}>
+        <div className={[_s.d]}>
           {
             revisions.map((revision, i) => {
               const isFirst = i === 0
               const isLast = i === revisions.size - 1
 
               const containerClasses = cx({
-                _: 1,
+                d: 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._, _s.pb5].join(' ')}>
+                  <div className={[_s.d, _s.pb5].join(' ')}>
                     <Text size='medium'>
                       {revision.get('text')}
                     </Text>
                   </div>
-                  <div className={[_s._]}>
+                  <div className={[_s.d]}>
                     <Text size='small' color='secondary'>
                       Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
                     </Text>
diff --git a/app/javascript/gabsocial/components/modal/unauthorized_modal.js b/app/javascript/gabsocial/components/modal/unauthorized_modal.js
index cdb2d735..7ce915b9 100644
--- a/app/javascript/gabsocial/components/modal/unauthorized_modal.js
+++ b/app/javascript/gabsocial/components/modal/unauthorized_modal.js
@@ -18,8 +18,8 @@ class UnauthorizedModal extends ImmutablePureComponent {
         onClose={onClose}
         width={480}
       >
-        <div className={[_s._, _s.mt15, _s.mb15, _s.px15, _s.pb15].join(' ')}>
-          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
+        <div className={[_s.d, _s.mt15, _s.mb15, _s.px15, _s.pb15].join(' ')}>
+          <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
             <Text className={[_s.px15, _s.py15, _s.mb15]} size='medium' weight='medium' align='center'>
               {intl.formatMessage(messages.text)}
             </Text>
diff --git a/app/javascript/gabsocial/components/navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar.js
index be801ea7..4afdd715 100644
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar.js
@@ -45,17 +45,17 @@ class NavigationBar extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <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.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
 
-          <div className={[_s._, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.w1255PX].join(' ')}>
+          <div className={[_s.d, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.w1255PX].join(' ')}>
 
             { /** Default */}
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
 
-              <div className={[_s._, _s.flexRow].join(' ')}>
+              <div className={[_s.d, _s.flexRow].join(' ')}>
 
-                <h1 className={[_s._, _s.mr15].join(' ')}>
+                <h1 className={[_s.d, _s.mr15].join(' ')}>
                   <Button
                     to='/'
                     isText
@@ -63,7 +63,7 @@ class NavigationBar extends ImmutablePureComponent {
                     aria-label='Gab'
                     color='none'
                     backgroundColor='none'
-                    className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
+                    className={[_s.d, _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._, _s.w340PX, _s.mr10].join(' ')}>
+                  <div className={[_s.d, _s.w340PX, _s.mr10].join(' ')}>
                     <Search isInNav />
                   </div>
                 }
 
               </div>
 
-              <div className={[_s._, _s.mlAuto].join(' ')}>
+              <div className={[_s.d, _s.mlAuto].join(' ')}>
                 {
                   !noActions &&
-                  <div className={[_s._, _s.h53PX, _s.pl15, _s.flexRow, _s.aiCenter, _s.jcSpaceBetween].join(' ')}>
+                  <div className={[_s.d, _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._, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
+                    <div className={[_s.d, _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._, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
+                    <div className={[_s.d, _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.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s._, _s.jcCenter, _s.ml15].join(' ')}
+                        className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.d, _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._, _s.w84PX, _s.aiStart, _s.pl10].join(' ')}>
+              <div className={[_s.d, _s.w84PX, _s.aiStart, _s.pl10].join(' ')}>
                 {
                   !!account && !showBackBtn && !noActions &&
                   <button
                     title={account.get('display_name')}
                     onClick={onOpenSidebar}
-                    className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s._, _s.jcCenter].join(' ')}
+                    className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.d, _s.jcCenter].join(' ')}
                   >
                     <Avatar account={account} size={32} noHover />
                   </button>
@@ -135,7 +135,7 @@ class NavigationBar extends ImmutablePureComponent {
                 }
                 {
                   noActions &&
-                  <h1 className={[_s._, _s.mr15].join(' ')}>
+                  <h1 className={[_s.d, _s.mr15].join(' ')}>
                     <Button
                       to='/'
                       isText
@@ -143,7 +143,7 @@ class NavigationBar extends ImmutablePureComponent {
                       aria-label='Gab'
                       color='none'
                       backgroundColor='none'
-                      className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
+                      className={[_s.d, _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._, _s.h53PX, _s.jcCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
+              <div className={[_s.d, _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._, _s.w84PX, _s.pr15].join(' ')}>
-                <div className={[_s._, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
+              <div className={[_s.d, _s.w84PX, _s.pr15].join(' ')}>
+                <div className={[_s.d, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
                   {
                     actions && actions.map((action, i) => (
                       <Button
diff --git a/app/javascript/gabsocial/components/navigation_bar_button.js b/app/javascript/gabsocial/components/navigation_bar_button.js
index 874e291f..fa1a1173 100644
--- a/app/javascript/gabsocial/components/navigation_bar_button.js
+++ b/app/javascript/gabsocial/components/navigation_bar_button.js
@@ -19,7 +19,7 @@ class NavigationBarButton extends React.PureComponent {
     const active = false
 
     const classes = CX({
-      _: 1,
+      d: 1,
       h53PX: 1,
       flexRow: 1,
       aiCenter: 1,
diff --git a/app/javascript/gabsocial/components/notification.js b/app/javascript/gabsocial/components/notification.js
index bf317995..2b6c1d20 100644
--- a/app/javascript/gabsocial/components/notification.js
+++ b/app/javascript/gabsocial/components/notification.js
@@ -91,7 +91,7 @@ class Notification extends ImmutablePureComponent {
     }
 
     const containerClasses = CX({
-      _: 1,
+      d: 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._, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s._, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
+        <div className={[_s.d, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
 
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
               <Icon id={icon} size='20px' className={[_s.cPrimary, _s.minW20PX, _s.mt5, _s.mr15].join(' ')} />
             </Responsive>
 
-            <div className={[_s._, _s.flexNormal].join(' ')}>
-              <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
+            <div className={[_s.d, _s.flexNormal].join(' ')}>
+              <div className={[_s.d, _s.flexRow, _s.flexWrap].join(' ')}>
                 {
                   accounts && accounts.map((account, i) => (
                     <NavLink
@@ -125,8 +125,8 @@ class Notification extends ImmutablePureComponent {
                   ))
                 }
               </div>
-              <div className={[_s._, _s.pt5].join(' ')}>
-                <div className={[_s._, _s.flexRow, _s.aiEnd].join(' ')}>
+              <div className={[_s.d, _s.pt5].join(' ')}>
+                <div className={[_s.d, _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._, _s.pt10, _s.mt5].join(' ')}>
+                <div className={[_s.d, _s.pt10, _s.mt5].join(' ')}>
                   <StatusContainer
                     contextType='notification'
                     id={statusId}
diff --git a/app/javascript/gabsocial/components/pagination.js b/app/javascript/gabsocial/components/pagination.js
index b49eeead..6d24dcc6 100644
--- a/app/javascript/gabsocial/components/pagination.js
+++ b/app/javascript/gabsocial/components/pagination.js
@@ -23,13 +23,13 @@ class Pagination extends React.PureComponent {
     if (isNaN(count)) return
 
     return (
-      <ul className={[_s._, _s.flexRow, _s.listStyleNone].join(' ')}>
+      <ul className={[_s.d, _s.flexRow, _s.listStyleNone].join(' ')}>
         {
           Array.apply(null, {
             length: count
           }).map((_, i) => {
             const btnClasses = CX({
-              _: 1,
+              d: 1,
               w10PX: 1,
               h10PX: 1,
               outlineNone: 1,
@@ -43,7 +43,7 @@ class Pagination extends React.PureComponent {
             })
 
             return (
-              <li className={[_s._, _s.px5].join(' ')} key={`pagination-${i}`}>
+              <li className={[_s.d, _s.px5].join(' ')} key={`pagination-${i}`}>
                 <button
                   tabIndex='0'
                   className={btnClasses}
diff --git a/app/javascript/gabsocial/components/panel/group_info_panel.js b/app/javascript/gabsocial/components/panel/group_info_panel.js
index c1cf9036..17e6fe46 100644
--- a/app/javascript/gabsocial/components/panel/group_info_panel.js
+++ b/app/javascript/gabsocial/components/panel/group_info_panel.js
@@ -71,7 +71,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
 
     if (noPanel) {
       return (
-        <div className={[_s._].join(' ')}>
+        <div className={[_s.d].join(' ')}>
           {
             !!group &&
             <React.Fragment>
@@ -87,7 +87,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
               <Text className={[_s.mt10, _s.py2].join(' ')} color='secondary' size='small' align='center'>
                 {group.get('description')}
               </Text>
-              <div className={[_s._, _s.mt10, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
+              <div className={[_s.d, _s.mt10, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
                 <Text color='secondary' size='small' align='center'>
                   <Icon
                     id={isPrivate ? 'lock-filled' : 'globe'}
@@ -190,7 +190,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
               <React.Fragment>
                 <Divider isSmall />
                 <GroupInfoPanelRow title={intl.formatMessage(messages.tags)} icon='shop'>
-                  <div className={[_s._, _s.flexRow, _s.jcEnd, _s.flexWrap, _s.pl5].join(' ')}>
+                  <div className={[_s.d, _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._, _s.flexRow, _s.py2].join(' ')}>
-        <div className={[_s._, _s.flexRow, _s.jcCenter].join(' ')}>
+      <div className={[_s.d, _s.flexRow, _s.py2].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.jcCenter].join(' ')}>
           <Icon id={icon} size='16px' />
           <Text weight='bold' size='medium' className={_s.ml10}>
             {title}
diff --git a/app/javascript/gabsocial/components/panel/list_details_panel.js b/app/javascript/gabsocial/components/panel/list_details_panel.js
index c6e770f7..4a848441 100644
--- a/app/javascript/gabsocial/components/panel/list_details_panel.js
+++ b/app/javascript/gabsocial/components/panel/list_details_panel.js
@@ -47,9 +47,9 @@ class ListDetailsPanel extends ImmutablePureComponent {
         }
         {
           title && createdAt &&
-          <div className={_s._}>
+          <div className={_s.d}>
 
-            <div className={_s._}>
+            <div className={_s.d}>
               <Text weight='medium'>
                 {title}
               </Text>
@@ -57,7 +57,7 @@ class ListDetailsPanel extends ImmutablePureComponent {
 
             <Divider isSmall />
 
-            <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
               <Icon id='calendar' size='12px' className={_s.cSecondary} />
               <Text
                 size='small'
diff --git a/app/javascript/gabsocial/components/panel/lists_panel.js b/app/javascript/gabsocial/components/panel/lists_panel.js
index 3fdda64d..06f427bd 100644
--- a/app/javascript/gabsocial/components/panel/lists_panel.js
+++ b/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._, _s.boxShadowNone].join(' ')}>
+        <div className={[_s.d, _s.boxShadowNone].join(' ')}>
           <List
             scrollKey='lists_sidebar_panel'
             items={listItems}
diff --git a/app/javascript/gabsocial/components/panel/media_gallery_panel.js b/app/javascript/gabsocial/components/panel/media_gallery_panel.js
index 6666b667..a9c6ccd5 100644
--- a/app/javascript/gabsocial/components/panel/media_gallery_panel.js
+++ b/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._, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
+        <div className={[_s.d, _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._, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.w100PC].join(' ')}>
               <MediaGalleryPanelPlaceholder />
             </div>
           }
diff --git a/app/javascript/gabsocial/components/panel/panel_layout.js b/app/javascript/gabsocial/components/panel/panel_layout.js
index 0482fa2f..333c5373 100644
--- a/app/javascript/gabsocial/components/panel/panel_layout.js
+++ b/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._, _s.mb15].join(' ')}>
+      <aside className={[_s.d, _s.mb15].join(' ')}>
         <Block>
           {
             (title || subtitle) &&
-            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+            <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
                 <Heading size='h2'>
                   {title}
                 </Heading>
                 {
                   (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
-                  <div className={[_s._, _s.mlAuto].join(' ')}>
+                  <div className={[_s.d, _s.mlAuto].join(' ')}>
                     <Button
                       isText
                       backgroundColor='none'
@@ -74,7 +74,7 @@ export default class PanelLayout extends React.PureComponent {
 
           {
             !noPadding &&
-            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
+            <div className={[_s.d, _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._}>
+            <div className={_s.d}>
               <Button
                 isText
                 color='none'
diff --git a/app/javascript/gabsocial/components/panel/pro_panel.js b/app/javascript/gabsocial/components/panel/pro_panel.js
index 8f1790af..91cb138a 100644
--- a/app/javascript/gabsocial/components/panel/pro_panel.js
+++ b/app/javascript/gabsocial/components/panel/pro_panel.js
@@ -27,8 +27,8 @@ class ProPanel extends React.PureComponent {
     if (isPro) return null
 
     const title = (
-      <span className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
-        <span className={[_s._, _s.mr2].join(' ')}>
+      <span className={[_s.d, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
+        <span className={[_s.d, _s.mr2].join(' ')}>
           Upgrade to Gab
         </span>
         <span className={[_s.bgPro, _s.cBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
@@ -41,7 +41,7 @@ class ProPanel extends React.PureComponent {
         subtitle={intl.formatMessage(messages.text)}
       >
 
-        <div className={[_s._, _s.flexRow, _s.pb5].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.pb5].join(' ')}>
           <Button
             isOutline
             color='brand'
diff --git a/app/javascript/gabsocial/components/panel/profile_info_panel.js b/app/javascript/gabsocial/components/panel/profile_info_panel.js
index 515f7c4f..562b7215 100644
--- a/app/javascript/gabsocial/components/panel/profile_info_panel.js
+++ b/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._].join(' ')}>
+        <div className={[_s.d].join(' ')}>
           {
             hasNote &&
             <React.Fragment>
@@ -67,7 +67,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             </React.Fragment>
           }
 
-          <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
             <Icon id='calendar' size='12px' className={_s.cSecondary} />
             <Text
               size='small'
@@ -86,7 +86,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             hasBadges &&
             <React.Fragment>
               <Divider isSmall />
-              <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+              <div className={[_s.d, _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._]}>
+            <div className={[_s.d]}>
               {
                 fields.map((pair, i) => (
                   <React.Fragment>
                     <Divider isSmall />
-                    <dl className={[_s._, _s.flexRow, _s.aiCenter].join(' ')} key={`profile-field-${i}`}>
+                    <dl className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')} key={`profile-field-${i}`}>
                       <dt
                         className={[_s.text, _s.dangerousContent, _s.pr5].join(' ')}
                         dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
diff --git a/app/javascript/gabsocial/components/panel/profile_stats_panel.js b/app/javascript/gabsocial/components/panel/profile_stats_panel.js
index 96e575b4..25ad3244 100644
--- a/app/javascript/gabsocial/components/panel/profile_stats_panel.js
+++ b/app/javascript/gabsocial/components/panel/profile_stats_panel.js
@@ -46,8 +46,8 @@ class ProfileStatsPanel extends ImmutablePureComponent {
         {
           !!account &&
           <ResponsiveClassesComponent
-            classNames={[_s._, _s.flexRow].join(' ')}
-            classNamesXS={[_s._, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
+            classNames={[_s.d, _s.flexRow].join(' ')}
+            classNamesXS={[_s.d, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
           >
             <UserStat
               title={intl.formatMessage(messages.gabs)}
diff --git a/app/javascript/gabsocial/components/panel/shop_panel.js b/app/javascript/gabsocial/components/panel/shop_panel.js
index a95aeb9c..da07dba5 100644
--- a/app/javascript/gabsocial/components/panel/shop_panel.js
+++ b/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._, _s.flexRow, _s.flexWrap, _s.pl5, _s.pt5].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.flexWrap, _s.pl5, _s.pt5].join(' ')}>
           {
             items.map((block, i) => (
               <ShopItem
diff --git a/app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js b/app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js
index b32c3ed4..9a2bc82c 100644
--- a/app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js
+++ b/app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js
@@ -28,7 +28,7 @@ class SignUpLogInPanel extends React.PureComponent {
     if (me) return null
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       radiusSmall: 1,
       overflowHidden: 1,
       bgPrimary: 1,
@@ -40,11 +40,11 @@ class SignUpLogInPanel extends React.PureComponent {
     })
 
     return (
-      <aside className={[_s._, _s.mb15].join(' ')}>
+      <aside className={[_s.d, _s.mb15].join(' ')}>
         <div className={containerClasses}>
-          <div className={[_s._]}>
-            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s._].join(' ')}>
+          <div className={[_s.d]}>
+            <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s.d].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._, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s._, _s.pb5].join(' ')}>
+            <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s.d, _s.pb5].join(' ')}>
                 <Button
                   isOutline
                   color='white'
diff --git a/app/javascript/gabsocial/components/panel/sign_up_panel.js b/app/javascript/gabsocial/components/panel/sign_up_panel.js
index 5fbb9cd6..6adb6576 100644
--- a/app/javascript/gabsocial/components/panel/sign_up_panel.js
+++ b/app/javascript/gabsocial/components/panel/sign_up_panel.js
@@ -31,7 +31,7 @@ class SignUpPanel extends React.PureComponent {
         title={intl.formatMessage(messages.title)}
         subtitle={intl.formatMessage(messages.subtitle)}
       >
-        <div className={[_s._, _s.flexRow, _s.pb5].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.pb5].join(' ')}>
           <Button
             isOutline
             color='brand'
diff --git a/app/javascript/gabsocial/components/panel/status_promotion_panel.js b/app/javascript/gabsocial/components/panel/status_promotion_panel.js
index b863ade9..1c2e5d49 100644
--- a/app/javascript/gabsocial/components/panel/status_promotion_panel.js
+++ b/app/javascript/gabsocial/components/panel/status_promotion_panel.js
@@ -56,7 +56,7 @@ class StatusPromotionPanel extends ImmutablePureComponent {
     const { status } = this.props
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       pb10: !!status ? status.get('media_attachments').size === 0 : false,
     })
 
@@ -67,23 +67,23 @@ class StatusPromotionPanel extends ImmutablePureComponent {
         }
         {
           !!status &&
-          <div className={_s._}>
-            <div className={[_s._, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
+          <div className={_s.d}>
+            <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s.d, _s.flexRow, _s.mt5].join(' ')}>
 
                 <NavLink
                   to={`/${status.getIn(['account', 'acct'])}`}
                   title={status.getIn(['account', 'acct'])}
-                  className={[_s._, _s.mr10].join(' ')}
+                  className={[_s.d, _s.mr10].join(' ')}
                 >
                   <Avatar account={status.get('account')} size={28} />
                 </NavLink>
 
-                <div className={[_s._, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
+                <div className={[_s.d, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
 
-                  <div className={[_s._, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
+                  <div className={[_s.d, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
                     <NavLink
-                      className={[_s._, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
+                      className={[_s.d, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
                       to={`/${status.getIn(['account', 'acct'])}`}
                       title={status.getIn(['account', 'acct'])}
                     >
diff --git a/app/javascript/gabsocial/components/panel/user_panel.js b/app/javascript/gabsocial/components/panel/user_panel.js
index 5c7c2e0b..91f1dd63 100644
--- a/app/javascript/gabsocial/components/panel/user_panel.js
+++ b/app/javascript/gabsocial/components/panel/user_panel.js
@@ -91,7 +91,7 @@ class UserPanel extends ImmutablePureComponent {
     return (
       <PanelLayout noPadding>
         <div
-          className={[_s._, _s.h122PX].join(' ')}
+          className={[_s.d, _s.h122PX].join(' ')}
           onMouseEnter={this.handleOnMouseEnter}
           onMouseLeave={this.handleOnMouseLeave}
         >
@@ -112,18 +112,18 @@ class UserPanel extends ImmutablePureComponent {
         </div>
 
         <NavLink
-          className={[_s._, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
+          className={[_s.d, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
           to={`/${acct}`}
         >
-          <div className={[_s._, _s.mtNeg32PX, _s.circle, _s.borderColorPrimary, _s.border6PX].join(' ')}>
+          <div className={[_s.d, _s.mtNeg32PX, _s.circle, _s.borderColorPrimary, _s.border6PX].join(' ')}>
             <Avatar account={account} size={62} noHover />
           </div>
-          <div className={[_s._, _s.ml15].join(' ')}>
+          <div className={[_s.d, _s.ml15].join(' ')}>
             <DisplayName account={account} isMultiline noRelationship noHover />
           </div>
         </NavLink>
 
-        <div className={[_s._, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
+        <div className={[_s.d, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
           <UserStat
             to={`/${acct}`}
             title={intl.formatMessage(messages.gabs)}
diff --git a/app/javascript/gabsocial/components/panel/verified_accounts_panel.js b/app/javascript/gabsocial/components/panel/verified_accounts_panel.js
index 064bb36c..f40c15d5 100644
--- a/app/javascript/gabsocial/components/panel/verified_accounts_panel.js
+++ b/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._}>
+        <div className={_s.d}>
           {
             suggestions.map(accountId => (
               <Account
diff --git a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js b/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
index 22b1fd2d..48cd3073 100644
--- a/app/javascript/gabsocial/components/panel/who_to_follow_panel.js
+++ b/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._}>
+        <div className={_s.d}>
           {
             arr.map((accountId) => (
               <Child
diff --git a/app/javascript/gabsocial/components/pill_item.js b/app/javascript/gabsocial/components/pill_item.js
index 814f9400..4b473761 100644
--- a/app/javascript/gabsocial/components/pill_item.js
+++ b/app/javascript/gabsocial/components/pill_item.js
@@ -46,7 +46,7 @@ class PillItem extends React.PureComponent {
     const active = isActive || (to === location.pathname && !location.search) || isCurrent
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       noUnderline: 1,
       text: 1,
       aiCenter: 1,
@@ -63,7 +63,7 @@ class PillItem extends React.PureComponent {
     })
 
     const textParentClasses = CX({
-      _: 1,
+      d: 1,
       h100PC: 1,
       aiCenter: 1,
       jcCenter: 1,
diff --git a/app/javascript/gabsocial/components/pills.js b/app/javascript/gabsocial/components/pills.js
index bb2cb89c..3bbee24b 100644
--- a/app/javascript/gabsocial/components/pills.js
+++ b/app/javascript/gabsocial/components/pills.js
@@ -14,8 +14,8 @@ class Pills extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s._, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
-        classNamesXS={[_s._, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
+        classNames={[_s.d, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
+        classNamesXS={[_s.d, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
       >
         {
           !!pills &&
diff --git a/app/javascript/gabsocial/components/placeholder/account_placeholder.js b/app/javascript/gabsocial/components/placeholder/account_placeholder.js
index 2984e541..bcac5bec 100644
--- a/app/javascript/gabsocial/components/placeholder/account_placeholder.js
+++ b/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({
-      _: 1,
+      d: 1,
       px15: 1,
       py7: 1,
       borderColorSecondary: !isLast,
diff --git a/app/javascript/gabsocial/components/placeholder/comment_placeholder.js b/app/javascript/gabsocial/components/placeholder/comment_placeholder.js
index d5735fff..d0f87b51 100644
--- a/app/javascript/gabsocial/components/placeholder/comment_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/comment_placeholder.js
@@ -8,7 +8,7 @@ export default class CommentPlaceholder extends React.PureComponent {
   
   render() {
     const classes = CX({
-      _: 1,
+      d: 1,
       px15: 1,
       py10: 1,
     })
diff --git a/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js b/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
index 88f85060..59e9211a 100644
--- a/app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
+++ b/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({
-      _: 1,
+      d: 1,
       px15: 1,
       py7: 1,
       borderColorSecondary: !isLast,
diff --git a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js b/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
index 224b0961..c8256f12 100644
--- a/app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
+++ b/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({
-      _: 1,
+      d: 1,
       px15: 1,
       py15: 1,
       borderColorSecondary: !isLast,
@@ -19,7 +19,7 @@ class ListItemPlaceholder extends React.PureComponent {
     })
 
     const classesXS = CX({
-      _: 1,
+      d: 1,
       px15: 1,
       py7: 1,
       borderColorSecondary: !isLast,
diff --git a/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js b/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js
index 9f96b7ab..eeeeb005 100644
--- a/app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js
+++ b/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._}>
+      <div className={_s.d}>
         <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' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js b/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
index dbb7825d..699ee826 100644
--- a/app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
+++ b/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._, _s.px5, _s.py5].join(' ')}>
+      <div className={[_s.d, _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' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js b/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
index 6ef33b4f..4c5935ca 100644
--- a/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/notification_placeholder.js
@@ -14,7 +14,7 @@ class NotificationPlaceholder extends React.PureComponent {
     const { isLast } = this.props
 
     const classes = CX({
-      _: 1,
+      d: 1,
       px15: 1,
       py15: 1,
       borderColorSecondary: !isLast,
@@ -22,7 +22,7 @@ class NotificationPlaceholder extends React.PureComponent {
     })
 
     const classesXS = CX({
-      _: 1,
+      d: 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._, _s.py2, _s.px2].join(' ')}>
+            <div className={[_s.d, _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._, _s.py2, _s.px2].join(' ')}>
+            <div className={[_s.d, _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' />
diff --git a/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js b/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js
index 77d7a812..ac39f829 100644
--- a/app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js
+++ b/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._, _s.px10, _s.py10].join(' ')}>
+      <div className={[_s.d, _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' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js b/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
index 4a3cf2ec..320c7723 100644
--- a/app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
+++ b/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._}>
+      <div className={_s.d}>
         <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' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js b/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
index b14923c7..ab7ac6d5 100644
--- a/app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
+++ b/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._}>
+      <div className={_s.d}>
         <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' /> 
diff --git a/app/javascript/gabsocial/components/placeholder/status_placeholder.js b/app/javascript/gabsocial/components/placeholder/status_placeholder.js
index 2541f0e3..e9dc1391 100644
--- a/app/javascript/gabsocial/components/placeholder/status_placeholder.js
+++ b/app/javascript/gabsocial/components/placeholder/status_placeholder.js
@@ -12,7 +12,7 @@ export default class StatusPlaceholder extends React.PureComponent {
 
   render() {
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       px15: 1,
       mt5: 1,
       mb15: 1,
@@ -23,7 +23,7 @@ export default class StatusPlaceholder extends React.PureComponent {
     })
 
     const containerClassesXS = CX({
-      _: 1,
+      d: 1,
       bgPrimary: 1,
       boxShadowBlock: 1,
       borderTop1PX: 1,
diff --git a/app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js b/app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js
index 5a203e4c..e8d5a128 100644
--- a/app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js
+++ b/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._, _s.px15, _s.py10, _s.pb5, _s.mb5].join(' ')}>
+      <div className={[_s.d, _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' />
diff --git a/app/javascript/gabsocial/components/poll.js b/app/javascript/gabsocial/components/poll.js
index 72b9be4c..e429c6ef 100644
--- a/app/javascript/gabsocial/components/poll.js
+++ b/app/javascript/gabsocial/components/poll.js
@@ -71,7 +71,7 @@ class Poll extends ImmutablePureComponent {
     }
 
     const chartClasses = cx({
-      _: 1,
+      d: 1,
       posAbs: 1,
       top0: 1,
       left0: 1,
@@ -89,7 +89,7 @@ class Poll extends ImmutablePureComponent {
     })
 
     const listItemClasses = cx({
-      _: 1,
+      d: 1,
       flexRow: 1,
       py10: showResults,
       mb10: 1,
@@ -102,7 +102,7 @@ class Poll extends ImmutablePureComponent {
     })
 
     const textContainerClasses = cx({
-      _: 1,
+      d: 1,
       w100PC: 1,
       px15: 1,
       py10: !showResults,
@@ -138,7 +138,7 @@ class Poll extends ImmutablePureComponent {
                 checked={active}
                 onChange={this.handleOptionChange}
                 disabled={disabled}
-                className={[_s._, _s.mr10].join(' ')}
+                className={[_s.d, _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._, _s.px15, _s.py10].join(' ')}>
-        <ul className={[_s._, _s.listStyleNone].join(' ')}>
+      <div className={[_s.d, _s.px15, _s.py10].join(' ')}>
+        <ul className={[_s.d, _s.listStyleNone].join(' ')}>
           {
             poll.get('options').map((option, i) => this.renderOption(option, i))
           }
         </ul>
 
-        <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.aiCenter].join(' ')}>
           {
             !showResults && me &&
             <Button
diff --git a/app/javascript/gabsocial/components/popover/date_picker_popover.js b/app/javascript/gabsocial/components/popover/date_picker_popover.js
index b46e0a2b..9bb8c166 100644
--- a/app/javascript/gabsocial/components/popover/date_picker_popover.js
+++ b/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._, _s.bgSubtle].join(' ')}>
+        <div className={[_s.d, _s.bgSubtle].join(' ')}>
           <DatePicker
             inline
             target={this}
@@ -102,7 +102,7 @@ class DatePickerPopover extends React.PureComponent {
         </div>
         {
           date &&
-          <div className={[_s._, _s.aiCenter, _s.flexRow, _s.px10, _s.py10, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.d, _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'),
diff --git a/app/javascript/gabsocial/components/popover/error_popover.js b/app/javascript/gabsocial/components/popover/error_popover.js
index 38a93aaa..e5461189 100644
--- a/app/javascript/gabsocial/components/popover/error_popover.js
+++ b/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._, _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(' ')}>
+          <div className={[_s.d, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+            <div className={[_s.d, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
               <ColumnIndicator type='error' message='Error loading popover' />
             </div>
           </div>
diff --git a/app/javascript/gabsocial/components/popover/loading_popover.js b/app/javascript/gabsocial/components/popover/loading_popover.js
index e27338fb..04ab73f3 100644
--- a/app/javascript/gabsocial/components/popover/loading_popover.js
+++ b/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._, _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(' ')}>
+          <div className={[_s.d, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+            <div className={[_s.d, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
               <ColumnIndicator type='loading' />
             </div>
           </div>
diff --git a/app/javascript/gabsocial/components/popover/popover_base.js b/app/javascript/gabsocial/components/popover/popover_base.js
index 5246a7c5..0fd1f80a 100644
--- a/app/javascript/gabsocial/components/popover/popover_base.js
+++ b/app/javascript/gabsocial/components/popover/popover_base.js
@@ -130,7 +130,7 @@ class PopoverBase extends ImmutablePureComponent {
     } = this.props
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       z4: 1,
       boxShadowPopover: visible,
       displayNone: !visible,
diff --git a/app/javascript/gabsocial/components/popover/popover_layout.js b/app/javascript/gabsocial/components/popover/popover_layout.js
index c08f1501..454225da 100644
--- a/app/javascript/gabsocial/components/popover/popover_layout.js
+++ b/app/javascript/gabsocial/components/popover/popover_layout.js
@@ -33,17 +33,17 @@ export default class PopoverLayout extends React.PureComponent {
 
     if (isXS) {
       return (
-        <div className={[_s._, _s.modal, _s.px10, _s.pb10].join(' ')}>
-          <div className={[_s._, _s.bgPrimary, _s.radiusSmall, _s.overflowHidden, _s.mb10].join(' ')}>
+        <div className={[_s.d, _s.modal, _s.px10, _s.pb10].join(' ')}>
+          <div className={[_s.d, _s.bgPrimary, _s.radiusSmall, _s.overflowHidden, _s.mb10].join(' ')}>
             {
               !!title &&
-              <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
+              <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
                 <Heading size='2'>
                   {title}
                 </Heading>
               </div>
             }
-            <div className={[_s._, _s.maxH80VH, _s.radiusSmall, _s.overflowYScroll].join(' ')}>
+            <div className={[_s.d, _s.maxH80VH, _s.radiusSmall, _s.overflowYScroll].join(' ')}>
               {children}
             </div>
           </div>
diff --git a/app/javascript/gabsocial/components/popover/status_visibility_popover.js b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
index 1a7699e9..2a77f01d 100644
--- a/app/javascript/gabsocial/components/popover/status_visibility_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
@@ -85,14 +85,14 @@ class StatusVisibilityDropdown extends React.PureComponent {
         isXS={isXS}
         onClose={this.handleOnClosePopover}
       >
-        <div className={[_s._].join(' ')}>
+        <div className={[_s.d].join(' ')}>
           {
             options.map((option, i) => {
               const isActive = option.value === value
               const isLast = i === options.length - 1
 
               const containerClasses = cx({
-                _: 1,
+                d: 1,
                 flexRow: 1,
                 py10: 1,
                 cursorPointer: 1,
@@ -116,7 +116,7 @@ class StatusVisibilityDropdown extends React.PureComponent {
                   className={containerClasses}
                 >
                   <Icon id={option.icon} size='16px' className={iconClasses} />
-                  <div className={[_s._, _s.px10, _s.pt2].join(' ')}>
+                  <div className={[_s.d, _s.px10, _s.pt2].join(' ')}>
                     <Text size='medium' color={isActive ? 'white' : 'primary'}>
                       {option.title}
                     </Text>
diff --git a/app/javascript/gabsocial/components/popover/user_info_popover.js b/app/javascript/gabsocial/components/popover/user_info_popover.js
index 6ff1956d..a9a354e2 100644
--- a/app/javascript/gabsocial/components/popover/user_info_popover.js
+++ b/app/javascript/gabsocial/components/popover/user_info_popover.js
@@ -38,30 +38,30 @@ class UserInfoPopover extends ImmutablePureComponent {
 
     return (
       <PopoverLayout width={280}>
-        <div className={[_s._, _s.w100PC, _s.px15, _s.py15].join(' ')} id='user-info-popover'>
+        <div className={[_s.d, _s.w100PC, _s.px15, _s.py15].join(' ')} id='user-info-popover'>
           
-          <div className={[_s._, _s.flexRow].join(' ')}>
+          <div className={[_s.d, _s.flexRow].join(' ')}>
             <NavLink
               to={to}
-              className={[_s._, _s.noUnderline, _s.flexGrow1].join(' ')}
+              className={[_s.d, _s.noUnderline, _s.flexGrow1].join(' ')}
             >
               <Avatar account={account} size={42} noHover />
               <DisplayName account={account} isMultiline noHover />
             </NavLink>
 
-            <div className={[_s._, _s.mlAuto, _s.right0, _s.posAbs, _s.mt5].join(' ')}>
+            <div className={[_s.d, _s.mlAuto, _s.right0, _s.posAbs, _s.mt5].join(' ')}>
               <AccountActionButton account={account} />
             </div>
           </div>
 
-          <div className={[_s._, _s.mt10].join(' ')}>
+          <div className={[_s.d, _s.mt10].join(' ')}>
             <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
           </div>
 
-          <div className={[_s._, _s.flexRow, _s.mt10].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.mt10].join(' ')}>
             <NavLink
               to={`${to}/followers`}
-              className={[_s._, _s.flexRow, _s.mr10, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
+              className={[_s.d, _s.flexRow, _s.mr10, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
             >
               <Text weight='extraBold' color='primary'>
                 {shortNumberFormat(account.get('followers_count'))}&nbsp;
@@ -72,7 +72,7 @@ class UserInfoPopover extends ImmutablePureComponent {
             </NavLink>
             <NavLink
               to={`${to}/following`}
-              className={[_s._, _s.flexRow, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
+              className={[_s.d, _s.flexRow, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
             >
               <Text weight='extraBold' color='primary'>
                 {shortNumberFormat(account.get('following_count'))}&nbsp;
diff --git a/app/javascript/gabsocial/components/popover/video_stats_popover.js b/app/javascript/gabsocial/components/popover/video_stats_popover.js
index 9ca9fd97..0a347594 100644
--- a/app/javascript/gabsocial/components/popover/video_stats_popover.js
+++ b/app/javascript/gabsocial/components/popover/video_stats_popover.js
@@ -72,7 +72,7 @@ class VideoStatsPopover extends ImmutablePureComponent {
     ]
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       bgBlack: !isXS,
       bgPrimary: !isXS,
       px10: 1,
@@ -137,8 +137,8 @@ class VideoStatLine extends React.PureComponent {
     const color = isXS ? 'primary' : 'white'
 
     return (
-      <div className={[_s._, _s.flexRow, _s.pt2].join(' ')}>
-        <div className={[_s._, _s.w115PX, _s.aiEnd, _s.mr5].join(' ')}>
+      <div className={[_s.d, _s.flexRow, _s.pt2].join(' ')}>
+        <div className={[_s.d, _s.w115PX, _s.aiEnd, _s.mr5].join(' ')}>
           <Text size='extraSmall' weight='medium' color={color}>
             {title}
           </Text>
diff --git a/app/javascript/gabsocial/components/profile_header.js b/app/javascript/gabsocial/components/profile_header.js
index 335ad6be..f4536933 100644
--- a/app/javascript/gabsocial/components/profile_header.js
+++ b/app/javascript/gabsocial/components/profile_header.js
@@ -69,9 +69,9 @@ class ProfileHeader extends ImmutablePureComponent {
 
     if (isXS && !account) {
       return (
-        <div className={[_s._, _s.z1, _s.w100PC].join(' ')}>
-          <div className={[_s._, _s.z1, _s.w100PC, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
-            <div className={[_s._, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.z1, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.z1, _s.w100PC, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+            <div className={[_s.d, _s.w100PC].join(' ')}>
               <ProfileHeaderXSPlaceholder />
             </div>
           </div>
@@ -112,14 +112,14 @@ class ProfileHeader extends ImmutablePureComponent {
     const top = headerMissing ? -46 : -380
 
     const avatarContainerClasses = CX({
-      _: 1,
+      d: 1,
       circle: 1,
       mtNeg75PX: !headerMissing,
       boxShadowProfileAvatar: !headerMissing,
     })
 
     const stickyBarContainerClasses = CX({
-      _: 1,
+      d: 1,
       flexRow: 1,
       px15: 1,
       aiCenter: 1,
@@ -127,19 +127,19 @@ class ProfileHeader extends ImmutablePureComponent {
     })
 
     const tabBarContainerClasses = CX({
-      _: 1,
+      d: 1,
       displayNone: stickied,
     })
 
     const mobileAvatarContainerClasses = CX({
-      _: 1,
+      d: 1,
       circle: 1,
       boxShadowProfileAvatar: 1,
       mtNeg50PX: !headerMissing,
     })
 
     const mobileDescriptionContainerClasses = CX({
-      _: 1,
+      d: 1,
       w100PC: 1,
       px15: 1,
       mt5: !!me,
@@ -149,14 +149,14 @@ class ProfileHeader extends ImmutablePureComponent {
     })
 
     return (
-      <div className={[_s._, _s.z1, _s.w100PC].join(' ')}>
+      <div className={[_s.d, _s.z1, _s.w100PC].join(' ')}>
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s._, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+          <div className={[_s.d, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
 
-            <div className={[_s._, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.w100PC].join(' ')}>
               {
                 !headerMissing &&
-                <div className={[_s._, _s.h200PX, _s.px10, _s.w100PC, _s.mt10, _s.overflowHidden].join(' ')}>
+                <div className={[_s.d, _s.h200PX, _s.px10, _s.w100PC, _s.mt10, _s.overflowHidden].join(' ')}>
                   <Image
                     alt={intl.formatMessage(messages.headerPhoto)}
                     className={[_s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.h100PC].join(' ')}
@@ -166,17 +166,17 @@ class ProfileHeader extends ImmutablePureComponent {
               }
               {
                 headerMissing &&
-                <div className={[_s._, _s.h20PX, _s.w100PC].join(' ')} />
+                <div className={[_s.d, _s.h20PX, _s.w100PC].join(' ')} />
               }
 
-              <div className={[_s._, _s.w100PC].join(' ')}>
+              <div className={[_s.d, _s.w100PC].join(' ')}>
 
-                <div className={[_s._, _s.aiCenter, _s.px15, _s.mb5].join(' ')}>
+                <div className={[_s.d, _s.aiCenter, _s.px15, _s.mb5].join(' ')}>
                   <div className={mobileAvatarContainerClasses}>
                     <Avatar size={100} account={account} noHover />
                   </div>
 
-                  <div className={[_s._, _s.flexRow, _s.flexNormal, _s.py10].join(' ')}>
+                  <div className={[_s.d, _s.flexRow, _s.flexNormal, _s.py10].join(' ')}>
                     <DisplayName
                       account={account}
                       isMultiline
@@ -188,10 +188,10 @@ class ProfileHeader extends ImmutablePureComponent {
                 </div>
 
 
-                <div className={[_s._, _s.bgPrimary, _s.aiCenter].join(' ')}>
+                <div className={[_s.d, _s.bgPrimary, _s.aiCenter].join(' ')}>
                   {
                     account && account.get('id') === me &&
-                    <div className={[_s._,_s.py5].join(' ')}>
+                    <div className={[_s.d,_s.py5].join(' ')}>
                       <Button
                         isOutline
                         backgroundColor='none'
@@ -208,9 +208,9 @@ class ProfileHeader extends ImmutablePureComponent {
 
                   {
                     account && account.get('id') !== me && !!me &&
-                    <div className={[_s._, _s.flexRow, _s.py5].join(' ')}>
+                    <div className={[_s.d, _s.flexRow, _s.py5].join(' ')}>
                       
-                      <div className={[_s._, _s.flexRow, _s.mr10].join(' ')}>
+                      <div className={[_s.d, _s.flexRow, _s.mr10].join(' ')}>
                         <AccountActionButton account={account} />
                       </div>
 
@@ -235,7 +235,7 @@ class ProfileHeader extends ImmutablePureComponent {
                     {children}
                   </div>
 
-                  <div className={[_s._, _s.mt10, _s.mb10, _s.pt5, _s.w100PC, _s.pr10].join(' ')}>
+                  <div className={[_s.d, _s.mt10, _s.mb10, _s.pt5, _s.w100PC, _s.pr10].join(' ')}>
                     <Pills pills={tabs} />
                   </div>
                 </div>
@@ -248,12 +248,12 @@ class ProfileHeader extends ImmutablePureComponent {
         { /** desktop */ }
         <Responsive min={BREAKPOINT_EXTRA_SMALL}>
           <Sticky top={top} enabled onStateChange={this.onStickyStateChange}>
-            <div className={[_s._, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
+            <div className={[_s.d, _s.z1, _s.w100PC, _s.aiCenter, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
 
-              <div className={[_s._, _s.w1015PX].join(' ')}>
+              <div className={[_s.d, _s.w1015PX].join(' ')}>
                 {
                   !headerMissing &&
-                  <div className={[_s._, _s.h350PX, _s.w100PC, _s.bottomRightRadiusSmall, _s.bottomLeftRadiusSmall, _s.overflowHidden].join(' ')}>
+                  <div className={[_s.d, _s.h350PX, _s.w100PC, _s.bottomRightRadiusSmall, _s.bottomLeftRadiusSmall, _s.overflowHidden].join(' ')}>
                     <Image
                       alt={intl.formatMessage(messages.headerPhoto)}
                       className={_s.h100PC}
@@ -263,12 +263,12 @@ class ProfileHeader extends ImmutablePureComponent {
                 }
                 {
                   headerMissing &&
-                  <div className={[_s._, _s.h20PX, _s.w100PC].join(' ')} />
+                  <div className={[_s.d, _s.h20PX, _s.w100PC].join(' ')} />
                 }
 
-                <div className={[_s._, _s.w100PC].join(' ')}>
+                <div className={[_s.d, _s.w100PC].join(' ')}>
 
-                  <div className={[_s._, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
+                  <div className={[_s.d, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
                     <div className={avatarContainerClasses}>
                       {
                         account &&
@@ -277,7 +277,7 @@ class ProfileHeader extends ImmutablePureComponent {
                       {
                         !account &&
                         <div
-                          className={[_s._, _s.circle, _s.overflowHidden, _s.bgSecondary].join(' ')}
+                          className={[_s.d, _s.circle, _s.overflowHidden, _s.bgSecondary].join(' ')}
                           style={{
                             width: `${avatarSize}px`,
                             height: `${avatarSize}px`,
@@ -286,27 +286,27 @@ class ProfileHeader extends ImmutablePureComponent {
                       }
                     </div>
 
-                    <div className={[_s._, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>
+                    <div className={[_s.d, _s.flexRow, _s.px15, _s.flexNormal, _s.py10].join(' ')}>
                       <DisplayName account={account} isMultiline isLarge noHover />
                     </div>
                   </div>
 
 
-                  <div className={[_s._, _s.flexRow, _s.bgPrimary, _s.h53PX].join(' ')}>
+                  <div className={[_s.d, _s.flexRow, _s.bgPrimary, _s.h53PX].join(' ')}>
                     <div className={tabBarContainerClasses}>
                       <TabBar tabs={tabs} isLarge />
                     </div>
 
                     <div className={stickyBarContainerClasses}>
                       <Avatar size={36} account={account} noHover />
-                      <div className={[_s._, _s.ml10].join(' ')}>
+                      <div className={[_s.d, _s.ml10].join(' ')}>
                         <DisplayName account={account} noUsername noRelationship noHover isLarge />
                       </div>
                     </div>
 
                     {
                       account && account.get('id') === me &&
-                      <div className={[_s._, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
+                      <div className={[_s.d, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
                         <Button
                           isOutline
                           backgroundColor='none'
@@ -323,7 +323,7 @@ class ProfileHeader extends ImmutablePureComponent {
 
                     {
                       account && account.get('id') !== me &&
-                      <div className={[_s._, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
+                      <div className={[_s.d, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
                         {
                           !!me &&
                           <div>
@@ -341,7 +341,7 @@ class ProfileHeader extends ImmutablePureComponent {
                           </div>
                         }
 
-                        <div className={[_s._, _s.flexRow, _s.pb3].join(' ')}>
+                        <div className={[_s.d, _s.flexRow, _s.pb3].join(' ')}>
                           <AccountActionButton account={account} />
                         </div>
 
diff --git a/app/javascript/gabsocial/components/profile_navigation_bar.js b/app/javascript/gabsocial/components/profile_navigation_bar.js
index eed527c7..e3c62933 100644
--- a/app/javascript/gabsocial/components/profile_navigation_bar.js
+++ b/app/javascript/gabsocial/components/profile_navigation_bar.js
@@ -9,10 +9,10 @@ class ProfileNavigationBar extends React.PureComponent {
     const { titleHTML } = this.props
 
     return (
-      <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.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.minH53PX, _s.bgNavigation, _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.w100PC].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
 
             <BackButton
               className={[_s.minH53PX, _s.pl10, _s.pr10].join(' ')}
@@ -20,7 +20,7 @@ class ProfileNavigationBar extends React.PureComponent {
               iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
             />
 
-            <div className={[_s._, _s.minH53PX, _s.jcCenter, _s.mrAuto].join(' ')}>
+            <div className={[_s.d, _s.minH53PX, _s.jcCenter, _s.mrAuto].join(' ')}>
               <Heading size='h1'>
                 <span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
                   <div dangerouslySetInnerHTML={{ __html: titleHTML }} />
diff --git a/app/javascript/gabsocial/components/progress_bar.js b/app/javascript/gabsocial/components/progress_bar.js
index b6a45918..66ccda61 100644
--- a/app/javascript/gabsocial/components/progress_bar.js
+++ b/app/javascript/gabsocial/components/progress_bar.js
@@ -20,7 +20,7 @@ class ProgressBar extends React.PureComponent {
     }
 
     const containerClassName = CX({
-      _: 1,
+      d: 1,
       bgLoading: !small,
       bgSecondary: small,
       noUnderline: 1,
@@ -37,8 +37,8 @@ class ProgressBar extends React.PureComponent {
         noClasses
         className={containerClassName}
       >
-        <div className={[_s._, _s.bgBrand, _s.circle, _s.h100PC, _s.backgroundCandy].join(' ')} style={style} />
-        <div className={[_s._, _s.posAbs,  _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <div className={[_s.d, _s.bgBrand, _s.circle, _s.h100PC, _s.backgroundCandy].join(' ')} style={style} />
+        <div className={[_s.d, _s.posAbs,  _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
           {
             !!title &&
             <Text size='small' weight='bold' color='white' className={_s.textShadow}>
diff --git a/app/javascript/gabsocial/components/pull_to_refresher.js b/app/javascript/gabsocial/components/pull_to_refresher.js
index ab8d8344..5c8d1729 100644
--- a/app/javascript/gabsocial/components/pull_to_refresher.js
+++ b/app/javascript/gabsocial/components/pull_to_refresher.js
@@ -8,8 +8,8 @@ export default class PullToRefresher extends React.PureComponent {
   render() {
     return (
       <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-        <div className={[_s._, _s.h53PX, _s.w100PC, _s.aiCenter, _s.posAbs, _s.left0, _s.right0, _s.topNeg50PX].join(' ')}>
-          <div className={[_s._, _s.w100PC, _s.aiCenter].join(' ')}>
+        <div className={[_s.d, _s.h53PX, _s.w100PC, _s.aiCenter, _s.posAbs, _s.left0, _s.right0, _s.topNeg50PX].join(' ')}>
+          <div className={[_s.d, _s.w100PC, _s.aiCenter].join(' ')}>
             <Icon id='loading' size='24px' />
           </div>
         </div>
diff --git a/app/javascript/gabsocial/components/rich_text_editor_bar.js b/app/javascript/gabsocial/components/rich_text_editor_bar.js
index c1b8f055..6ed6eb63 100644
--- a/app/javascript/gabsocial/components/rich_text_editor_bar.js
+++ b/app/javascript/gabsocial/components/rich_text_editor_bar.js
@@ -92,7 +92,7 @@ class RichTextEditorBar extends React.PureComponent {
     if (!rteControlsVisible || !isPro) return null
 
     return (
-      <div className={[_s._, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.py5, _s.px15, _s.aiCenter, _s.flexRow].join(' ')}>
+      <div className={[_s.d, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary, _s.py5, _s.px15, _s.aiCenter, _s.flexRow].join(' ')}>
         {
           RTE_ITEMS.map((item, i) => (
             <StyleButton
@@ -152,7 +152,7 @@ class StyleButton extends React.PureComponent {
     const iconColor = active ? 'cWhite' : 'cSecondary'
 
     const btnClasses = cx({
-      _: 1,
+      d: 1,
       noUnderline: 1,
       cursorPointer: 1,
       px10: 1,
diff --git a/app/javascript/gabsocial/components/search.js b/app/javascript/gabsocial/components/search.js
index 847a71f9..a97f08fb 100644
--- a/app/javascript/gabsocial/components/search.js
+++ b/app/javascript/gabsocial/components/search.js
@@ -84,7 +84,7 @@ class Search extends React.PureComponent {
     const highlighted = focused || `${value}`.length > 0
 
     const inputClasses = CX({
-      _: 1,
+      d: 1,
       text: 1,
       outlineNone: 1,
       lineHeight125: 1,
@@ -100,7 +100,7 @@ class Search extends React.PureComponent {
     })
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       searchNavigation: (!highlighted && isInNav && theme === 'light') || (isInNav && theme !== 'light'),
       bgWhite: (highlighted && isInNav && theme === 'light'),
       bgPrimary: !isInNav,
@@ -114,7 +114,7 @@ class Search extends React.PureComponent {
     const id = 'nav-search'
       
     return (
-      <div className={[_s._, _s.jcCenter, _s.h53PX].join(' ')}>
+      <div className={[_s.d, _s.jcCenter, _s.h53PX].join(' ')}>
         <div className={containerClasses}>
           <label className={_s.visiblyHidden} htmlFor={id}>Search</label>
 
diff --git a/app/javascript/gabsocial/components/select.js b/app/javascript/gabsocial/components/select.js
index 42441327..163ecfdd 100644
--- a/app/javascript/gabsocial/components/select.js
+++ b/app/javascript/gabsocial/components/select.js
@@ -25,9 +25,9 @@ class Select extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <div className={_s._}>
+      <div className={_s.d}>
         <select
-          className={[_s._, _s.outlineNone, _s.text, _s.border1PX, _s.borderColorSecondary, _s.px15, _s.select, _s.fs14PX].join(' ')}
+          className={[_s.d, _s.outlineNone, _s.text, _s.border1PX, _s.borderColorSecondary, _s.px15, _s.select, _s.fs14PX].join(' ')}
           value={value}
           onChange={onChange}
         >
diff --git a/app/javascript/gabsocial/components/sensitive_media_item.js b/app/javascript/gabsocial/components/sensitive_media_item.js
index 1f357416..6c2d80ae 100644
--- a/app/javascript/gabsocial/components/sensitive_media_item.js
+++ b/app/javascript/gabsocial/components/sensitive_media_item.js
@@ -13,14 +13,14 @@ class SensitiveMediaItem extends React.PureComponent {
     } = this.props
 
     return (
-      <div className={[_s._, _s.px15, _s.pt5].join(' ')}>
-        <div className={[_s._, _s.flexRow, _s.radiusSmall, _s.bgTertiary, _s.py10, _s.px15, _s.h100PC, _s.w100PC].join(' ')}>
-          <div className={[_s._, _s.jcCenter, _s.flexNormal].join(' ')}>
+      <div className={[_s.d, _s.px15, _s.pt5].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.radiusSmall, _s.bgTertiary, _s.py10, _s.px15, _s.h100PC, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.jcCenter, _s.flexNormal].join(' ')}>
             <Text color='secondary'>
               {intl.formatMessage(messages.warning)}
             </Text>
           </div>
-          <div className={[_s._, _s.jcCenter, _s.mlAuto].join(' ')}>
+          <div className={[_s.d, _s.jcCenter, _s.mlAuto].join(' ')}>
             <Button
               onClick={onClick}
               color='tertiary'
diff --git a/app/javascript/gabsocial/components/settings_sidebar.js b/app/javascript/gabsocial/components/settings_sidebar.js
index b28ef263..5c326012 100644
--- a/app/javascript/gabsocial/components/settings_sidebar.js
+++ b/app/javascript/gabsocial/components/settings_sidebar.js
@@ -38,12 +38,12 @@ class Sidebar extends ImmutablePureComponent {
     ]
 
     return (
-      <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(' ')}>
-                <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+      <header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
+        <div className={[_s.d, _s.w240PX].join(' ')}>
+          <div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
+            <div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
+              <div className={[_s.d, _s.w100PC].join(' ')}>
+                <div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                   <BackButton
                     icon='arrow-left'
                     toHome
@@ -54,7 +54,7 @@ class Sidebar extends ImmutablePureComponent {
                 </div>
 
               </div>
-              <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   menuItems.map((menuItem, i) => {
diff --git a/app/javascript/gabsocial/components/shop_item.js b/app/javascript/gabsocial/components/shop_item.js
index fdb6798a..77e6648b 100644
--- a/app/javascript/gabsocial/components/shop_item.js
+++ b/app/javascript/gabsocial/components/shop_item.js
@@ -16,7 +16,7 @@ class ShopItem extends React.PureComponent {
 
     return (
       <a
-        className={[_s._, _s.w50PC, _s.noUnderline, _s.overflowHidden, _s.cursorPointer, _s.pb15, _s.pr5].join(' ')}
+        className={[_s.d, _s.w50PC, _s.noUnderline, _s.overflowHidden, _s.cursorPointer, _s.pb15, _s.pr5].join(' ')}
         target='_blank'
         rel={DEFAULT_REL}
         href={link}
diff --git a/app/javascript/gabsocial/components/sidebar.js b/app/javascript/gabsocial/components/sidebar.js
index ea2ef1f5..a4665301 100644
--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar.js
@@ -160,14 +160,14 @@ class Sidebar extends ImmutablePureComponent {
     ]
 
     return (
-      <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(' ')}>
+      <header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
+        <div className={[_s.d, _s.w240PX].join(' ')}>
+          <div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
+            <div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
+              <div className={[_s.d, _s.w100PC].join(' ')}>
                 {
                   !!title &&
-                  <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+                  <div className={[_s.d, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
                     {
                       showBackBtn &&
                       <BackButton
@@ -179,7 +179,7 @@ class Sidebar extends ImmutablePureComponent {
                     </Heading>
                     {
                       !!actions &&
-                      <div className={[_s._, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
+                      <div className={[_s.d, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
                         {
                           actions.map((action, i) => (
                             <Button
@@ -202,12 +202,12 @@ class Sidebar extends ImmutablePureComponent {
                 }
                 {
                   !!tabs &&
-                  <div className={[_s._, _s.mt10, _s.pb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+                  <div className={[_s.d, _s.mt10, _s.pb15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
                     <Pills pills={tabs} />
                   </div>
                 }
               </div>
-              <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s.d, _s.w100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
                 {
                   menuItems.map((menuItem, i) => {
diff --git a/app/javascript/gabsocial/components/sidebar_section_item.js b/app/javascript/gabsocial/components/sidebar_section_item.js
index 58c225c8..90d368b5 100644
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -48,7 +48,7 @@ class SidebarSectionItem extends React.PureComponent {
     const isNotifications = to === '/notifications'
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       maxW100PC: 1,
       w100PC: 1,
       flexRow: 1,
@@ -65,7 +65,7 @@ class SidebarSectionItem extends React.PureComponent {
     })
 
     const countClasses = CX({
-      _: 1,
+      d: 1,
       text: 1,
       mlAuto: 1,
       fs12PX: 1,
@@ -88,7 +88,7 @@ class SidebarSectionItem extends React.PureComponent {
         buttonRef={buttonRef}
         onMouseEnter={() => this.handleOnMouseEnter()}
         onMouseLeave={() => this.handleOnMouseLeave()}
-        className={[_s._, _s.noUnderline, _s.outlineNone, _s.cursorPointer, _s.w100PC, _s.bgTransparent].join(' ')}
+        className={[_s.d, _s.noUnderline, _s.outlineNone, _s.cursorPointer, _s.w100PC, _s.bgTransparent].join(' ')}
       >
         <div className={containerClasses}>
           {
@@ -107,10 +107,10 @@ class SidebarSectionItem extends React.PureComponent {
             />
           }
           
-          <div className={[_s._, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.w100PC].join(' ')}>
             <ResponsiveClassesComponent
-              classNames={[_s._, _s.fw400, _s.fs15PX, _s.text, _s.textOverflowEllipsis, _s.cPrimary].join(' ')}
-              classNamesSmall={[_s._, _s.fw400, _s.fs13PX, _s.text, _s.textOverflowEllipsis, _s.cPrimary].join(' ')}
+              classNames={[_s.d, _s.fw400, _s.fs15PX, _s.text, _s.textOverflowEllipsis, _s.cPrimary].join(' ')}
+              classNamesSmall={[_s.d, _s.fw400, _s.fs13PX, _s.text, _s.textOverflowEllipsis, _s.cPrimary].join(' ')}
             >
               {title}
             </ResponsiveClassesComponent>
diff --git a/app/javascript/gabsocial/components/sidebar_section_title.js b/app/javascript/gabsocial/components/sidebar_section_title.js
index bee8a9c7..98175679 100644
--- a/app/javascript/gabsocial/components/sidebar_section_title.js
+++ b/app/javascript/gabsocial/components/sidebar_section_title.js
@@ -8,7 +8,7 @@ class SidebarSectionTitle extends React.PureComponent {
     const { children } = this.props
 
     return (
-      <div className={[_s._, _s.py5, _s.px10, _s.mt10].join(' ')}>
+      <div className={[_s.d, _s.py5, _s.px10, _s.mt10].join(' ')}>
         <Text color='tertiary'>
           {children}
         </Text>
diff --git a/app/javascript/gabsocial/components/sidebar_xs.js b/app/javascript/gabsocial/components/sidebar_xs.js
index 93c7e1ec..5dc0f096 100644
--- a/app/javascript/gabsocial/components/sidebar_xs.js
+++ b/app/javascript/gabsocial/components/sidebar_xs.js
@@ -135,7 +135,7 @@ class SidebarXS extends ImmutablePureComponent {
     ]
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       posFixed: 1,
       top0: 1,
       left0: 1,
@@ -147,10 +147,10 @@ class SidebarXS extends ImmutablePureComponent {
         
     return (
       <div className={containerClasses}>
-        <div className={[_s._, _s.posFixed, _s.top0, _s.left0, _s.right0, _s.bgBlackOpaque, _s.bottom0].join(' ')} role='button' onClick={this.handleSidebarClose} />
+        <div className={[_s.d, _s.posFixed, _s.top0, _s.left0, _s.right0, _s.bgBlackOpaque, _s.bottom0].join(' ')} role='button' onClick={this.handleSidebarClose} />
         <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.saveAreaInsetPT, _s.saveAreaInsetPB, _s.saveAreaInsetPL, _s.minW330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxW80PC].join(' ')}>
 
-          <div className={[_s._, _s.flexRow, _s.px15, _s.h53PX, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.aiCenter, _s.jcCenter].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.px15, _s.h53PX, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.aiCenter, _s.jcCenter].join(' ')}>
             <Heading size='h2'>Account Info</Heading>
             <Button
               title='close'
@@ -163,10 +163,10 @@ class SidebarXS extends ImmutablePureComponent {
             />
           </div>
 
-          <div className={[_s._, _s.w100PC, _s.overflowYScroll, _s.calcH53PX].join(' ')}>
+          <div className={[_s.d, _s.w100PC, _s.overflowYScroll, _s.calcH53PX].join(' ')}>
 
-            <div className={[_s._, _s.w100PC, _s.px15, _s.py10].join(' ')}>
-              <div className={[_s._, _s.mt5].join(' ')}>
+            <div className={[_s.d, _s.w100PC, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s.d, _s.mt5].join(' ')}>
                 <Link
                   to={`/${acct}`}
                   title={acct}
@@ -175,11 +175,11 @@ class SidebarXS extends ImmutablePureComponent {
                   <Avatar account={account} size={60} />
                 </Link>
               </div>
-              <div className={[_s._, _s.my10, _s.w100PC].join(' ')}>
+              <div className={[_s.d, _s.my10, _s.w100PC].join(' ')}>
                 <DisplayName account={account} isMultiline />
               </div>
 
-              <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
+              <div className={[_s.d, _s.flexRow, _s.flexWrap].join(' ')}>
                 <NavLink
                   to={`/${acct}/followers`}
                   onClick={this.handleSidebarClose}
@@ -202,11 +202,11 @@ class SidebarXS extends ImmutablePureComponent {
 
             </div>
 
-            <div className={[_s._, _s.my10, _s.px15].join(' ')}>
+            <div className={[_s.d, _s.my10, _s.px15].join(' ')}>
               <WrappedBundle component={ProgressPanel} />
             </div>
 
-            <div className={[_s._, _s.mb15, _s.boxShadowNone].join(' ')}>
+            <div className={[_s.d, _s.mb15, _s.boxShadowNone].join(' ')}>
               <List
                 items={mainItems}
                 size='large'
diff --git a/app/javascript/gabsocial/components/sort_block.js b/app/javascript/gabsocial/components/sort_block.js
index 85b5908f..7e08c579 100644
--- a/app/javascript/gabsocial/components/sort_block.js
+++ b/app/javascript/gabsocial/components/sort_block.js
@@ -32,7 +32,7 @@ class SortBlock extends React.PureComponent {
     } = this.props
 
     return (
-      <div className={[_s._, _s.px15, _s.py5, _s.mb5, _s.flexRow].join(' ')}>
+      <div className={[_s.d, _s.px15, _s.py5, _s.mb5, _s.flexRow].join(' ')}>
         <Text color='secondary' size='small'>
           {intl.formatMessage(messages.sortBy)}
         </Text>
@@ -53,7 +53,7 @@ class SortBlock extends React.PureComponent {
         {
           !!subValue &&
           <React.Fragment>
-            <div className={[_s._, _s.px5].join(' ')}>
+            <div className={[_s.d, _s.px5].join(' ')}>
               <DotTextSeperator />
             </div>
 
diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js
index 52cf9f36..633d3b1a 100644
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -416,14 +416,14 @@ class Status extends ImmutablePureComponent {
     })
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       radiusSmall: !isChild,
       bgPrimary: !isChild,
       boxShadowBlock: !isChild,
     })
 
     const containerClassesXS = CX({
-      _: 1,
+      d: 1,
       bgPrimary: !isChild,
       boxShadowBlock: !isChild,
       borderTop1PX: !isChild,
@@ -431,7 +431,7 @@ class Status extends ImmutablePureComponent {
     })
 
     const innerContainerClasses = CX({
-      _: 1,
+      d: 1,
       overflowHidden: 1,
       radiusSmall: isChild,
       borderColorSecondary: isChild,
@@ -465,7 +465,7 @@ class Status extends ImmutablePureComponent {
             classNamesXS={containerClassesXS}
           >
             <div
-              className={[_s._, _s.outlineNone].join(' ')}
+              className={[_s.d, _s.outlineNone].join(' ')}
               tabIndex={this.props.isMuted ? null : 0}
               data-featured={isFeatured ? 'true' : null}
               aria-label={textForScreenReader(intl, status, rebloggedByText)}
@@ -488,7 +488,7 @@ class Status extends ImmutablePureComponent {
                     reduced={isChild}
                   />
 
-                  <div className={_s._}>
+                  <div className={_s.d}>
                     <StatusContent
                       status={status}
                       reblogContent={reblogContent}
@@ -514,14 +514,14 @@ class Status extends ImmutablePureComponent {
 
                   {
                     (!!status.get('quote') || status.get('has_quote')) && !isChild &&
-                    <div className={[_s._, _s.mt10, _s.px10].join(' ')}>
+                    <div className={[_s.d, _s.mt10, _s.px10].join(' ')}>
                       {
                         !!status.get('quoted_status') &&
                         <Status status={status.get('quoted_status')} isChild intl={intl} />
                       }
                       {
                         !status.get('quoted_status') &&
-                        <div className={[_s._, _s.border1PX, _s.bgSubtle, _s.radiusSmall, _s.py15, _s.px15, _s.borderColorSecondary].join(' ')}>
+                        <div className={[_s.d, _s.border1PX, _s.bgSubtle, _s.radiusSmall, _s.py15, _s.px15, _s.borderColorSecondary].join(' ')}>
                           <Text color='tertiary' size='medium'>The quoted gab is unavailable.</Text>
                         </div>
                       }
@@ -545,8 +545,8 @@ class Status extends ImmutablePureComponent {
                   {
                     !isChild && !!me &&
                     <ResponsiveClassesComponent
-                      classNames={[_s._, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}
-                      classNamesXS={[_s._, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px10, _s.mb10].join(' ')}
+                      classNames={[_s.d, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}
+                      classNamesXS={[_s.d, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px10, _s.mb10].join(' ')}
                     >
                       <ComposeFormContainer replyToId={status.get('id')} shouldCondense />
                     </ResponsiveClassesComponent>
@@ -555,7 +555,7 @@ class Status extends ImmutablePureComponent {
                   {
                     status.get('replies_count') > 0 && !isChild && !isNotification && !commentsLimited &&
                     <React.Fragment>
-                      <div className={[_s._, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
+                      <div className={[_s.d, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
 
                       <SortBlock
                         value={sortByTitle}
diff --git a/app/javascript/gabsocial/components/status_action_bar.js b/app/javascript/gabsocial/components/status_action_bar.js
index bf0d8788..cbe45695 100644
--- a/app/javascript/gabsocial/components/status_action_bar.js
+++ b/app/javascript/gabsocial/components/status_action_bar.js
@@ -61,14 +61,14 @@ class StatusActionBar extends ImmutablePureComponent {
     const myStatus = status.getIn(['account', 'id']) === me
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       px10: 1,
       mt10: !shouldCondense,
       mt5: shouldCondense,
     })
 
     const innerContainerClasses = CX({
-      _: 1,
+      d: 1,
       py2: 1,
       flexRow: 1,
       w100PC: 1,
@@ -78,7 +78,7 @@ class StatusActionBar extends ImmutablePureComponent {
     })
 
     const likeBtnClasses = CX({
-      _: 1,
+      d: 1,
       text: 1,
       cursorPointer: myStatus,
       fw400: 1,
@@ -90,7 +90,7 @@ class StatusActionBar extends ImmutablePureComponent {
     })
 
     const interactionBtnClasses = CX({
-      _: 1,
+      d: 1,
       text: 1,
       cursorPointer: 1,
       fw400: 1,
@@ -105,7 +105,7 @@ class StatusActionBar extends ImmutablePureComponent {
       <div className={containerClasses}>
         {
           hasInteractions && 
-          <div className={[_s._, _s.flexRow, _s.aiEnd, _s.px5].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiEnd, _s.px5].join(' ')}>
             {
               favoriteCount > 0 &&
               <button
@@ -146,7 +146,7 @@ class StatusActionBar extends ImmutablePureComponent {
           </div>
         }
         <div className={innerContainerClasses}>
-          <div className={[_s._, _s.flexRow, _s.py2, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.py2, _s.w100PC].join(' ')}>
             <StatusActionBarItem
               title={intl.formatMessage(messages.like)}
               icon={!!status.get('favourited') ? 'liked' : 'like'}
diff --git a/app/javascript/gabsocial/components/status_action_bar_item.js b/app/javascript/gabsocial/components/status_action_bar_item.js
index 172aea88..fa7227d6 100644
--- a/app/javascript/gabsocial/components/status_action_bar_item.js
+++ b/app/javascript/gabsocial/components/status_action_bar_item.js
@@ -29,7 +29,7 @@ class StatusActionBarItem extends React.PureComponent {
     })
 
     const iconClasses = CX({
-      _: 1,
+      d: 1,
       inheritFill: 1,
       mr10: !!title,
     })
@@ -38,7 +38,7 @@ class StatusActionBarItem extends React.PureComponent {
     const weight = active ? 'bold' : 'medium'
 
     return (
-      <div className={[_s._, _s.px5, _s.flexNormal].join(' ')}>
+      <div className={[_s.d, _s.px5, _s.flexNormal].join(' ')}>
         <Button
           isBlock
           radiusSmall
diff --git a/app/javascript/gabsocial/components/status_card.js b/app/javascript/gabsocial/components/status_card.js
index 4f9bcf4c..6a3754dc 100644
--- a/app/javascript/gabsocial/components/status_card.js
+++ b/app/javascript/gabsocial/components/status_card.js
@@ -117,7 +117,7 @@ class StatusCard extends ImmutablePureComponent {
     return (
       <div
         ref={this.setRef}
-        className={[_s._, _s.bgTertiary, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
+        className={[_s.d, _s.bgTertiary, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
         dangerouslySetInnerHTML={content}
       />
     )
@@ -139,7 +139,7 @@ class StatusCard extends ImmutablePureComponent {
     const title = interactive ?
       (
         <a
-          className={[_s._, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.cPrimary, _s.fs15PX, _s.fw500].join(' ')}
+          className={[_s.d, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.cPrimary, _s.fs15PX, _s.fw500].join(' ')}
           href={card.get('url')}
           title={cardTitle}
           rel={DEFAULT_REL}
@@ -149,18 +149,18 @@ class StatusCard extends ImmutablePureComponent {
         </a>
       )
       : (
-        <span className={[_s._, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.cPrimary, _s.fs15PX, _s.fw500].join(' ')}>
+        <span className={[_s.d, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.cPrimary, _s.fs15PX, _s.fw500].join(' ')}>
           {cardTitle}
         </span>
       )
 
     const description = (
-      <div className={[_s._, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
+      <div className={[_s.d, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
         {title}
-        <p className={[_s._, _s.displayFlex, _s.text, _s.mt5, _s.mb5, _s.overflowWrapBreakWord, _s.cSecondary, _s.fs13PX, _s.fw400].join(' ')}>
+        <p className={[_s.d, _s.displayFlex, _s.text, _s.mt5, _s.mb5, _s.overflowWrapBreakWord, _s.cSecondary, _s.fs13PX, _s.fw400].join(' ')}>
           {trim(card.get('description') || '', maxDescription)}
         </p>
-        <span className={[_s._, _s.mtAuto, _s.flexRow, _s.aiCenter, _s.cSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fs13PX].join(' ')}>
+        <span className={[_s.d, _s.mtAuto, _s.flexRow, _s.aiCenter, _s.cSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fs13PX].join(' ')}>
           <Icon id='link' size='10px' className={[_s.cSecondary, _s.mr5].join(' ')} fixedWidth />
           {provider}
         </span>
@@ -170,15 +170,15 @@ class StatusCard extends ImmutablePureComponent {
     // : todo : use <Image />
     let embed = ''
     const thumbnail = interactive ?
-      <img loading='lazy' alt={''} src={cardImg} className={[_s._, _s.objectFitCover, _s.posAbs, _s.w100PC, _s.h100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
+      <img loading='lazy' alt={''} src={cardImg} className={[_s.d, _s.objectFitCover, _s.posAbs, _s.w100PC, _s.h100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
       :
       (
         <ResponsiveClassesComponent
-          classNames={[_s._, _s.h220PX, _s.w330PX].join(' ')}
-          classNamesSmall={[_s._, _s.h260PX, _s.w100PC].join(' ')}
-          classNamesXS={[_s._, _s.h200PX, _s.w100PC].join(' ')}
+          classNames={[_s.d, _s.h220PX, _s.w330PX].join(' ')}
+          classNamesSmall={[_s.d, _s.h260PX, _s.w100PC].join(' ')}
+          classNamesXS={[_s.d, _s.h200PX, _s.w100PC].join(' ')}
         >
-          <img loading='lazy' alt={''} src={cardImg} className={[_s._, _s.objectFitCover, _s.w100PC, _s.h100PC].join(' ')} />
+          <img loading='lazy' alt={''} src={cardImg} className={[_s.d, _s.objectFitCover, _s.w100PC, _s.h100PC].join(' ')} />
         </ResponsiveClassesComponent>
       )
 
@@ -194,18 +194,18 @@ class StatusCard extends ImmutablePureComponent {
       }
 
       return (
-        <div className={[_s._, _s.w100PC, _s.px10].join(' ')}>
-          <div className={[_s._, _s.overflowHidden, _s.w100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
+        <div className={[_s.d, _s.w100PC, _s.px10].join(' ')}>
+          <div className={[_s.d, _s.overflowHidden, _s.w100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
             {
               !isReduced &&
-              <div className={[_s._, _s.w100PC].join(' ')}>
-                <div className={[_s._, _s.w100PC, _s.pt5625PC].join(' ')}>
+              <div className={[_s.d, _s.w100PC].join(' ')}>
+                <div className={[_s.d, _s.w100PC, _s.pt5625PC].join(' ')}>
                   {!!embed && embed}
                   {!embed && thumbnail}
                   {!embed &&
-                    <div className={[_s._, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.aiCenter, _s.jcCenter].join(' ')}>
+                    <div className={[_s.d, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.aiCenter, _s.jcCenter].join(' ')}>
                       <button
-                        className={[_s._, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
+                        className={[_s.d, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
                         onClick={this.handleEmbedClick}
                       >
                         <Icon id={iconVariant} size='22px' className={[_s.cWhite].join(' ')} />
@@ -221,30 +221,30 @@ class StatusCard extends ImmutablePureComponent {
       )
     } else if (cardImg) {
       embed = (
-        <div className={[_s._].join(' ')}>
+        <div className={[_s.d].join(' ')}>
           {thumbnail}
         </div>
       )
     } else {
       embed = (
-        <div className={[_s._, _s.py15, _s.px15, _s.w72PX, _s.aiCenter, _s.jcCenter].join(' ')}>
+        <div className={[_s.d, _s.py15, _s.px15, _s.w72PX, _s.aiCenter, _s.jcCenter].join(' ')}>
           <Icon id='website' size='22px' className={_s.cSecondary} />
         </div>
       )
     }
 
     return (
-      <div className={[_s._, _s.w100PC, _s.px10].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.px10].join(' ')}>
         <a
           href={card.get('url')}
           rel={DEFAULT_REL}
           ref={this.setRef}
           target='_blank'
-          className={[_s._, _s.cursorPointer, _s.overflowHidden, _s.noUnderline, _s.w100PC, _s.bgSubtle_onHover, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}
+          className={[_s.d, _s.cursorPointer, _s.overflowHidden, _s.noUnderline, _s.w100PC, _s.bgSubtle_onHover, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}
         >
           <ResponsiveClassesComponent
-            classNames={[_s._, _s.flexRow, _s.w100PC].join(' ')}
-            classNamesSmall={!cardImg ? undefined : [_s._, _s.w100PC].join(' ')}
+            classNames={[_s.d, _s.flexRow, _s.w100PC].join(' ')}
+            classNamesSmall={!cardImg ? undefined : [_s.d, _s.w100PC].join(' ')}
           >
             {!isReduced && embed}
             {description}
diff --git a/app/javascript/gabsocial/components/status_check_box.js b/app/javascript/gabsocial/components/status_check_box.js
index cc3b90c7..bcbc7794 100644
--- a/app/javascript/gabsocial/components/status_check_box.js
+++ b/app/javascript/gabsocial/components/status_check_box.js
@@ -53,13 +53,13 @@ class StatusCheckBox extends ImmutablePureComponent {
     }
 
     return (
-      <div className={[_s._, _s.flexRow].join(' ')}>
-        <div className={[_s._].join(' ')}>
+      <div className={[_s.d, _s.flexRow].join(' ')}>
+        <div className={[_s.d].join(' ')}>
           <StatusContent status={status} />
           {media}
         </div>
 
-        <div className={[_s._, _s.mlAuto].join(' ')}>
+        <div className={[_s.d, _s.mlAuto].join(' ')}>
           <Switch checked={checked} onChange={onToggle} disabled={disabled} />
         </div>
       </div>
diff --git a/app/javascript/gabsocial/components/status_content.js b/app/javascript/gabsocial/components/status_content.js
index f51b65d1..2c524c24 100644
--- a/app/javascript/gabsocial/components/status_content.js
+++ b/app/javascript/gabsocial/components/status_content.js
@@ -183,7 +183,7 @@ class StatusContent extends ImmutablePureComponent {
 
       if (hidden) {
         mentionsPlaceholder = (
-          <div className={[_s.statusContent, _s._, _s.aiStart, _s.flexRow, _s.flexWrap].join(' ')}>
+          <div className={[_s.statusContent, _s.d, _s.aiStart, _s.flexRow, _s.flexWrap].join(' ')}>
             {mentionLinks}
           </div>
         )
@@ -192,7 +192,7 @@ class StatusContent extends ImmutablePureComponent {
       const toggleText = intl.formatMessage(hidden ? messages.show : messages.hide)
 
       const spoilerContainerClasses = cx({
-        _: 1,
+        d: 1,
         py10: 1,
         borderBottom1PX: !hidden,
         borderColorSecondary: !hidden,
@@ -224,7 +224,7 @@ class StatusContent extends ImmutablePureComponent {
         >
 
           <div className={spoilerContainerClasses}>
-            <div className={[_s._, _s.flexRow, _s.mr5].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.mr5].join(' ')}>
               <Icon id='warning' size='14px' className={[_s.cPrimary, _s.mt2, _s.mr5].join(' ')}/>
               <div
                 className={[_s.statusContent, _s.outlineNone].join(' ')}
@@ -233,7 +233,7 @@ class StatusContent extends ImmutablePureComponent {
               />
             </div>
 
-            <div className={[_s._, _s.mt10, _s.aiStart].join(' ')}>
+            <div className={[_s.d, _s.mt10, _s.aiStart].join(' ')}>
               <Button
                 isNarrow
                 radiusSmall
diff --git a/app/javascript/gabsocial/components/status_header.js b/app/javascript/gabsocial/components/status_header.js
index b52d88dd..8e7a1fab 100644
--- a/app/javascript/gabsocial/components/status_header.js
+++ b/app/javascript/gabsocial/components/status_header.js
@@ -44,7 +44,7 @@ class StatusHeader extends ImmutablePureComponent {
     const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`
 
     const containerClasses = cx({
-      _: 1,
+      d: 1,
       px15: 1,
       py10: !reduced,
       pb10: reduced,
@@ -76,24 +76,24 @@ class StatusHeader extends ImmutablePureComponent {
 
     return (
       <div className={containerClasses}>
-        <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.mt5].join(' ')}>
 
           {
             !reduced &&
             <NavLink
               to={`/${status.getIn(['account', 'acct'])}`}
               title={status.getIn(['account', 'acct'])}
-              className={[_s._, _s.mr10].join(' ')}
+              className={[_s.d, _s.mr10].join(' ')}
             >
               <Avatar account={status.get('account')} size={avatarSize} />
             </NavLink>
           }
 
-          <div className={[_s._, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
+          <div className={[_s.d, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
 
-            <div className={[_s._, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
               <NavLink
-                className={[_s._, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
+                className={[_s.d, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
                 to={`/${status.getIn(['account', 'acct'])}`}
                 title={status.getIn(['account', 'acct'])}
               >
@@ -116,7 +116,7 @@ class StatusHeader extends ImmutablePureComponent {
               }
             </div>
 
-            <div className={[_s._, _s.flexRow, _s.aiCenter, _s.lineHeight15].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.lineHeight15].join(' ')}>
               <Button
                 isText
                 underlineOnHover
@@ -131,8 +131,8 @@ class StatusHeader extends ImmutablePureComponent {
 
               <DotTextSeperator />
               
-              <span title={visibilityText} className={[_s._, _s.displayInline, _s.ml5].join(' ')}>
-                <Icon id={visibilityIcon} size='12px' className={[_s._, _s.cSecondary].join(' ')} />
+              <span title={visibilityText} className={[_s.d, _s.displayInline, _s.ml5].join(' ')}>
+                <Icon id={visibilityIcon} size='12px' className={[_s.d, _s.cSecondary].join(' ')} />
               </span>
 
               {
@@ -141,8 +141,8 @@ class StatusHeader extends ImmutablePureComponent {
                   <DotTextSeperator />
                   <span title={intl.formatMessage(messages.expirationMessage, {
                     time: timeUntilExpiration,
-                  })} className={[_s._, _s.displayInline, _s.ml5].join(' ')}>
-                    <Icon id='stopwatch' size='13px' className={[_s._, _s.cSecondary].join(' ')} />
+                  })} className={[_s.d, _s.displayInline, _s.ml5].join(' ')}>
+                    <Icon id='stopwatch' size='13px' className={[_s.d, _s.cSecondary].join(' ')} />
                   </span>
                 </React.Fragment>
               }
diff --git a/app/javascript/gabsocial/components/status_prepend.js b/app/javascript/gabsocial/components/status_prepend.js
index f8ad0c8d..ef05c428 100644
--- a/app/javascript/gabsocial/components/status_prepend.js
+++ b/app/javascript/gabsocial/components/status_prepend.js
@@ -31,12 +31,12 @@ class StatusPrepend extends ImmutablePureComponent {
     else if (isComment) iconId = 'comment'
 
     return (
-      <div className={[_s._, _s.w100PC, _s.aiStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-        <div className={[_s._, _s.w100PC, _s.flexRow, _s.aiCenter, _s.py5, _s.px15].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.aiStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+        <div className={[_s.d, _s.w100PC, _s.flexRow, _s.aiCenter, _s.py5, _s.px15].join(' ')}>
           <Icon id={iconId} size='12px' className={[_s.cSecondary, _s.mr5].join(' ')} />
           {
             isRepost && !isComment &&
-            <div className={[_s._, _s.flexRow].join(' ')}>
+            <div className={[_s.d, _s.flexRow].join(' ')}>
               <Text size='small' color='secondary'>
                 <FormattedMessage
                   id='status.reposted_by'
diff --git a/app/javascript/gabsocial/components/switch.js b/app/javascript/gabsocial/components/switch.js
index 48895c2d..30d8f9d8 100644
--- a/app/javascript/gabsocial/components/switch.js
+++ b/app/javascript/gabsocial/components/switch.js
@@ -19,7 +19,7 @@ class Switch extends React.PureComponent {
 
     const checkboxContainerClasses = CX({
       cursorPointer: 1,
-      _: 1,
+      d: 1,
       h24PX: 1,
       w50PX: 1,
       circle: 1,
@@ -31,7 +31,7 @@ class Switch extends React.PureComponent {
     })
 
     const checkboxLabelClasses = CX({
-      _: 1,
+      d: 1,
       m1PX: 1,
       h20PX: 1,
       w20PX: 1,
@@ -44,7 +44,7 @@ class Switch extends React.PureComponent {
     })
 
     return (
-      <div className={[_s._, _s.flexRow, _s.py5, _s.aiCenter].join(' ')}>
+      <div className={[_s.d, _s.flexRow, _s.py5, _s.aiCenter].join(' ')}>
         <Text {...labelProps} className={_s.mr10}>
           {label}
         </Text>
diff --git a/app/javascript/gabsocial/components/tab_bar.js b/app/javascript/gabsocial/components/tab_bar.js
index 3b08ab12..46754422 100644
--- a/app/javascript/gabsocial/components/tab_bar.js
+++ b/app/javascript/gabsocial/components/tab_bar.js
@@ -15,8 +15,8 @@ class TabBar extends React.PureComponent {
 
     return (
       <ResponsiveClassesComponent
-        classNames={[_s._, _s.h53PX, _s.px5, _s.flexRow, _s.overflowXScroll, _s.noScrollbar].join(' ')}
-        classNamesXS={[_s._, _s.h40PX, _s.px5, _s.flexRow].join(' ')}
+        classNames={[_s.d, _s.h53PX, _s.px5, _s.flexRow, _s.overflowXScroll, _s.noScrollbar].join(' ')}
+        classNamesXS={[_s.d, _s.h40PX, _s.px5, _s.flexRow].join(' ')}
       >
         {
           // Check for if tabs exist or not.
diff --git a/app/javascript/gabsocial/components/tab_bar_item.js b/app/javascript/gabsocial/components/tab_bar_item.js
index ed16e7aa..b5694d53 100644
--- a/app/javascript/gabsocial/components/tab_bar_item.js
+++ b/app/javascript/gabsocial/components/tab_bar_item.js
@@ -55,7 +55,7 @@ class TabBarItem extends React.PureComponent {
     const active = isActive || (to === location.pathname && !location.search) || isCurrent
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       h100PC: 1,
       noUnderline: 1,
       text: 1,
@@ -74,7 +74,7 @@ class TabBarItem extends React.PureComponent {
     })
 
     const textParentClasses = CX({
-      _: 1,
+      d: 1,
       h100PC: 1,
       aiCenter: 1,
       jcCenter: 1,
diff --git a/app/javascript/gabsocial/components/text.js b/app/javascript/gabsocial/components/text.js
index c8f4e503..06587754 100644
--- a/app/javascript/gabsocial/components/text.js
+++ b/app/javascript/gabsocial/components/text.js
@@ -71,7 +71,7 @@ class Text extends React.PureComponent {
 
     // Style the component according to props
     const classes = cx(className, {
-      _: 1,
+      d: 1,
       text: 1,
 
       radiusSmall: isBadge,
diff --git a/app/javascript/gabsocial/components/textarea.js b/app/javascript/gabsocial/components/textarea.js
index 5e014f55..18ffaa32 100644
--- a/app/javascript/gabsocial/components/textarea.js
+++ b/app/javascript/gabsocial/components/textarea.js
@@ -23,7 +23,7 @@ class Textarea extends React.PureComponent {
     } = this.props
 
     const inputClasses = cx({
-      _: 1,
+      d: 1,
       text: 1,
       outlineNone: 1,
       lineHeight125: 1,
@@ -43,13 +43,13 @@ class Textarea extends React.PureComponent {
       <div>
         {
           !!title &&
-          <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
+          <div className={[_s.d, _s.mb10, _s.pl15].join(' ')}>
             <Text size='small' weight='medium' color='secondary'>
               {title}
             </Text>
           </div>
         }
-        <div className={[_s._, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.radiusSmall, _s.aiCenter].join(' ')}>
+        <div className={[_s.d, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.radiusSmall, _s.aiCenter].join(' ')}>
           <textarea
             className={inputClasses}
             type='text'
diff --git a/app/javascript/gabsocial/components/timeline_compose_block.js b/app/javascript/gabsocial/components/timeline_compose_block.js
index 18788c04..d073ae72 100644
--- a/app/javascript/gabsocial/components/timeline_compose_block.js
+++ b/app/javascript/gabsocial/components/timeline_compose_block.js
@@ -25,8 +25,8 @@ class TimelineComposeBlock extends ImmutablePureComponent {
 
     if (modal) {
       return (
-        <section className={_s._}>
-          <div className={[_s._, _s.flexRow].join(' ')}>
+        <section className={_s.d}>
+          <div className={[_s.d, _s.flexRow].join(' ')}>
             <ComposeFormContainer {...rest} modal={modal} />
           </div>
         </section>
@@ -34,13 +34,13 @@ class TimelineComposeBlock extends ImmutablePureComponent {
     }
 
     return (
-      <section className={[_s._, _s.mb15].join(' ')}>
+      <section className={[_s.d, _s.mb15].join(' ')}>
         <ResponsiveClassesComponent
-          classNames={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}
-          classNamesXS={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden].join(' ')}
+          classNames={[_s.d, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}
+          classNamesXS={[_s.d, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden].join(' ')}
         >
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-            <div className={[_s._, _s.bgSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.aiCenter, _s.flexRow].join(' ')}>
+            <div className={[_s.d, _s.bgSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.aiCenter, _s.flexRow].join(' ')}>
               <div className={_s.mr10}>
                 <Avatar account={account} size={20} noHover />
               </div>
diff --git a/app/javascript/gabsocial/components/timeline_queue_button_header.js b/app/javascript/gabsocial/components/timeline_queue_button_header.js
index 3e0ce13e..d66a851f 100644
--- a/app/javascript/gabsocial/components/timeline_queue_button_header.js
+++ b/app/javascript/gabsocial/components/timeline_queue_button_header.js
@@ -79,7 +79,7 @@ class TimelineQueueButtonHeader extends React.PureComponent {
     const hasItems = count > 0
 
     const containerClasses = cx({
-      _: 1,
+      d: 1,
       pb5: 1,
       posSticky: !hidden,
       top120PX: !hidden,
@@ -88,7 +88,7 @@ class TimelineQueueButtonHeader extends React.PureComponent {
     })
 
     const innerContainerClasses = cx({
-      _: 1,
+      d: 1,
       displayNone: !hasItems,
       mtNeg26PX: 1,
     })
diff --git a/app/javascript/gabsocial/components/trends_item.js b/app/javascript/gabsocial/components/trends_item.js
index 28a6f2ce..c2af79f7 100644
--- a/app/javascript/gabsocial/components/trends_item.js
+++ b/app/javascript/gabsocial/components/trends_item.js
@@ -57,7 +57,7 @@ class TrendingItem extends React.PureComponent {
     }
 
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       noUnderline: 1,
       px15: 1,
       pt10: 1,
@@ -83,8 +83,8 @@ class TrendingItem extends React.PureComponent {
         onMouseLeave={() => this.handleOnMouseLeave()}
       >
       
-        <div className={[_s._, _s.flexNormal, _s.pb5].join(' ')}>
-          <div className={_s._}>
+        <div className={[_s.d, _s.flexNormal, _s.pb5].join(' ')}>
+          <div className={_s.d}>
             <Text size='medium' color='primary' weight='bold'>
               {correctedTitle}
             </Text>
@@ -92,14 +92,14 @@ class TrendingItem extends React.PureComponent {
 
           {
             !!correctedDescription && !descriptionHasLink &&
-            <div className={[_s._, _s.maxH56PX, _s.overflowHidden, _s.pt5, _s.mb5].join(' ')}>
+            <div className={[_s.d, _s.maxH56PX, _s.overflowHidden, _s.pt5, _s.mb5].join(' ')}>
               <Text size='small' color='secondary'>
                 {correctedDescription}
               </Text>
             </div>
           }
           
-          <div className={[_s._, _s.flexRow].join(' ')}>
+          <div className={[_s.d, _s.flexRow].join(' ')}>
             <Text color='secondary' size='small'>
               {index}
             </Text>
diff --git a/app/javascript/gabsocial/components/upload_area.js b/app/javascript/gabsocial/components/upload_area.js
index 9d544416..483cb88c 100644
--- a/app/javascript/gabsocial/components/upload_area.js
+++ b/app/javascript/gabsocial/components/upload_area.js
@@ -48,20 +48,20 @@ class UploadArea extends React.PureComponent {
       >
         {({ backgroundOpacity, backgroundScale }) => (
           <div
-            className={[_s._, _s.aiCenter, _s.jcCenter, _s.bgPrimaryOpaque, _s.w100PC, _s.h100PC, _s.posAbs, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
+            className={[_s.d, _s.aiCenter, _s.jcCenter, _s.bgPrimaryOpaque, _s.w100PC, _s.h100PC, _s.posAbs, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
             style={{
               visibility: active ? 'visible' : 'hidden',
               opacity: backgroundOpacity
             }}
           >
-            <div className={[_s._, _s.w340PX, _s.h260PX, _s.px10, _s.py10].join(' ')}>
+            <div className={[_s.d, _s.w340PX, _s.h260PX, _s.px10, _s.py10].join(' ')}>
               <div
-                className={[_s._, _s.posAbs, _s.bgPrimary, _s.h100PC, _s.w100PC, _s.radiusSmall].join(' ')}
+                className={[_s.d, _s.posAbs, _s.bgPrimary, _s.h100PC, _s.w100PC, _s.radiusSmall].join(' ')}
                 style={{
                   transform: `scale(${backgroundScale})`
                 }}
               />
-              <div className={[_s._, _s.h100PC, _s.w100PC, _s.border2PX, _s.borderColorSecondary, _s.borderDashed, _s.radiusSmall, _s.aiCenter, _s.jcCenter].join(' ')}>
+              <div className={[_s.d, _s.h100PC, _s.w100PC, _s.border2PX, _s.borderColorSecondary, _s.borderDashed, _s.radiusSmall, _s.aiCenter, _s.jcCenter].join(' ')}>
                 <Text size='medium' color='secondary'>
                   {intl.formatMessage(messages.title)}
                 </Text>
diff --git a/app/javascript/gabsocial/components/user_stat.js b/app/javascript/gabsocial/components/user_stat.js
index c47dcfff..49f18cf2 100644
--- a/app/javascript/gabsocial/components/user_stat.js
+++ b/app/javascript/gabsocial/components/user_stat.js
@@ -35,7 +35,7 @@ class UserStat extends React.PureComponent {
 
     const align = isCentered ? 'center' : 'left'
     const containerClasses = CX({
-      _: 1,
+      d: 1,
       cursorPointer: 1,
       noUnderline: 1,
       flexNormal: isCentered,
diff --git a/app/javascript/gabsocial/components/video.js b/app/javascript/gabsocial/components/video.js
index 0944a322..fd3ded50 100644
--- a/app/javascript/gabsocial/components/video.js
+++ b/app/javascript/gabsocial/components/video.js
@@ -501,13 +501,13 @@ class Video extends ImmutablePureComponent {
     // : todo spoiler :
 
     const mainContainerClasses = CX({
-      _: 1,
+      d: 1,
       mt10: 1,
       outlineNone: 1,
     })
 
     const seekHandleClasses = CX({
-      _: 1,
+      d: 1,
       posAbs: 1,
       circle: 1,
       h20PX: 1,
@@ -524,7 +524,7 @@ class Video extends ImmutablePureComponent {
     })
 
     const seekInnerHandleClasses = CX({
-      _: 1,
+      d: 1,
       circle: 1,
       h14PX: 1,
       w14PX: 1,
@@ -533,7 +533,7 @@ class Video extends ImmutablePureComponent {
     })
 
     const progressClasses = CX({
-      _: 1,
+      d: 1,
       radiusSmall: 1,
       mt10: 1,
       posAbs: 1,
@@ -542,7 +542,7 @@ class Video extends ImmutablePureComponent {
     })
 
     const volumeControlClasses = CX({
-      _: 1,
+      d: 1,
       posAbs: 1,
       bgBlackOpaque: 1,
       videoPlayerVolume: 1,
@@ -552,7 +552,7 @@ class Video extends ImmutablePureComponent {
     })
 
     const videoControlsBackgroundClasses = CX({
-      _: 1,
+      d: 1,
       z2: 1,
       px15: 1,
       videoPlayerControlsBackground: 1,
@@ -564,7 +564,7 @@ class Video extends ImmutablePureComponent {
     })
 
     const overlayClasses = CX({
-      _: 1,
+      d: 1,
       top50PC: 1,
       left50PC: 1,
       posAbs: 1,
@@ -595,7 +595,7 @@ class Video extends ImmutablePureComponent {
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
               <button
                 onClick={this.togglePlay}
-                className={[_s._, _s.outlineNone, _s.cursorPointer, _s.aiCenter, _s.jcCenter, _s.posAbs, _s.bgBlackOpaque, _s.circle, _s.h60PX, _s.w60PX].join(' ')}
+                className={[_s.d, _s.outlineNone, _s.cursorPointer, _s.aiCenter, _s.jcCenter, _s.posAbs, _s.bgBlackOpaque, _s.circle, _s.h60PX, _s.w60PX].join(' ')}
               >
                 <Icon id='play' size='24px' className={_s.cWhite} />
               </button>
@@ -603,12 +603,12 @@ class Video extends ImmutablePureComponent {
           }
           {
             !paused && true &&
-            <Icon id='loading' size='60px' className={[_s._, _s.posAbs].join(' ')} />
+            <Icon id='loading' size='60px' className={[_s.d, _s.posAbs].join(' ')} />
           }
         </div>
 
         <video
-          className={[_s._, _s.h100PC, _s.w100PC, _s.outlineNone].join(' ')}
+          className={[_s.d, _s.h100PC, _s.w100PC, _s.outlineNone].join(' ')}
           playsInline
           ref={this.setVideoRef}
           src={src}
@@ -646,19 +646,19 @@ class Video extends ImmutablePureComponent {
           ref={this.setVolumeRef}
         >
           <div
-            className={[_s._, _s.radiusSmall, _s.my10, _s.posAbs, _s.w4PX, _s.ml10, _s.bgPrimaryOpaque].join(' ')}
+            className={[_s.d, _s.radiusSmall, _s.my10, _s.posAbs, _s.w4PX, _s.ml10, _s.bgPrimaryOpaque].join(' ')}
             style={{
               height: '102px',
             }}
           />
           <div
-            className={[_s._, _s.radiusSmall, _s.my10, _s.bottom0, _s.posAbs, _s.w4PX, _s.ml10, _s.bgPrimary].join(' ')}
+            className={[_s.d, _s.radiusSmall, _s.my10, _s.bottom0, _s.posAbs, _s.w4PX, _s.ml10, _s.bgPrimary].join(' ')}
             style={{
               height: `${volumeHeight}px`
             }}
           />
           <span
-            className={[_s._, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.mbNeg5PX, _s.py5, _s.bgPrimary, _s.z3].join(' ')}
+            className={[_s.d, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.mbNeg5PX, _s.py5, _s.bgPrimary, _s.z3].join(' ')}
             tabIndex='0'
             style={{
               marginLeft: '7px',
@@ -670,7 +670,7 @@ class Video extends ImmutablePureComponent {
         <div className={videoControlsBackgroundClasses}>
 
           <div
-            className={[_s._, _s.cursorPointer, _s.h22PX, _s.videoPlayerSeek].join(' ')}
+            className={[_s.d, _s.cursorPointer, _s.h22PX, _s.videoPlayerSeek].join(' ')}
             onMouseDown={this.handleMouseDown}
             ref={this.setSeekRef}
           >
@@ -690,7 +690,7 @@ class Video extends ImmutablePureComponent {
             </span>
           </div>
 
-          <div className={[_s._, _s.flexRow, _s.aiCenter, _s.pb5, _s.noSelect].join(' ')}>
+          <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.pb5, _s.noSelect].join(' ')}>
             <Button
               isNarrow
               backgroundColor='none'
@@ -724,7 +724,7 @@ class Video extends ImmutablePureComponent {
               {formatTime(duration)}
             </Text>
 
-            <div className={[_s._, _s.mlAuto, _s.flexRow, _s.aiCenter].join(' ')}>
+            <div className={[_s.d, _s.mlAuto, _s.flexRow, _s.aiCenter].join(' ')}>
               <Button
                 isNarrow
                 backgroundColor='none'
diff --git a/app/javascript/gabsocial/components/zoomable_image.js b/app/javascript/gabsocial/components/zoomable_image.js
index 0bd35e43..3496635b 100644
--- a/app/javascript/gabsocial/components/zoomable_image.js
+++ b/app/javascript/gabsocial/components/zoomable_image.js
@@ -119,12 +119,12 @@ class ZoomableImage extends React.PureComponent {
 
     return (
       <div
-        className={[_s._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}
+        className={[_s.d, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}
         ref={this.setContainerRef}
         style={{ overflow }}
       >
         <img
-          className={[_s._, _s.objectFitContain, _s.hAuto, _s.wAuto, _s.maxW100PC, _s.maxH100PC].join(' ')}
+          className={[_s.d, _s.objectFitContain, _s.hAuto, _s.wAuto, _s.maxW100PC, _s.maxH100PC].join(' ')}
           role='presentation'
           ref={this.setImageRef}
           alt={alt}
diff --git a/app/javascript/gabsocial/features/about/about.js b/app/javascript/gabsocial/features/about/about.js
index 8d877e0f..e74bf259 100644
--- a/app/javascript/gabsocial/features/about/about.js
+++ b/app/javascript/gabsocial/features/about/about.js
@@ -10,9 +10,9 @@ export default class About extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s._].join(' ')}>
+      <div className={[_s.d].join(' ')}>
         <Block>
-          <div className={[_s._, _s.px15, _s.py15, _s.mb10].join(' ')}>
+          <div className={[_s.d, _s.px15, _s.py15, _s.mb10].join(' ')}>
             <Heading>About Gab.com</Heading>
             
             <Text tagName='p' className={_s.mt15} size='medium'>This is the Gab Social instance of Gab.com. Political speech protected by the First Amendment is welcome on this instance.</Text>
@@ -34,7 +34,7 @@ export default class About extends React.PureComponent {
 
           <Divider />
 
-          <div className={[_s._, _s.px15, _s.py15].join(' ')} id='opensource'>
+          <div className={[_s.d, _s.px15, _s.py15].join(' ')} id='opensource'>
             <Heading>Open Source</Heading>
 
             <Text tagName='p' className={_s.mt15} size='medium'>At Gab, we believe that the future of online publishing is decentralized and open. We believe that users of social networks should be able to control their social media experience on their own terms, rather than the terms set down by Big Tech.</Text>
diff --git a/app/javascript/gabsocial/features/about/dmca.js b/app/javascript/gabsocial/features/about/dmca.js
index 83d6b3a3..8827973a 100644
--- a/app/javascript/gabsocial/features/about/dmca.js
+++ b/app/javascript/gabsocial/features/about/dmca.js
@@ -10,9 +10,9 @@ export default class DMCA extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s._].join(' ')}>
+      <div className={[_s.d].join(' ')}>
         <Block>
-          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
             <Heading>GAB AI INC</Heading>
             <br />
             <Heading>COPYRIGHT POLICY</Heading>
@@ -22,7 +22,7 @@ export default class DMCA extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>We take claims of copyright infringement seriously. We will respond to notices of alleged copyright infringement that comply with applicable law. If you believe any materials accessible on or from this site (the “Website”) infringe your copyright, you may request removal of those materials (or access to them) from the Website by submitting written notification to our copyright agent designated below. In accordance with the Online Copyright Infringement Liability Limitation Act of the Digital Millennium Copyright Act (17 U.S.C. § 512) (”DMCA”), the written notice (the “DMCA Notice”) must include substantially the following:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Your physical or electronic signature.</Text>
               </li>
@@ -60,7 +60,7 @@ export default class DMCA extends React.PureComponent {
             <Heading size='h2'>Counter Notification Procedures</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>If you believe that material you posted on the Website was removed or access to it was disabled by mistake or misidentification, you may file a counter notification with us (a “Counter Notice”) by submitting written notification to our DMCA address (above) Pursuant to the DMCA, the Counter Notice must include substantially the following:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Your physical or electronic signature.</Text>
               </li>
diff --git a/app/javascript/gabsocial/features/about/investors.js b/app/javascript/gabsocial/features/about/investors.js
index 4b759223..26f80a32 100644
--- a/app/javascript/gabsocial/features/about/investors.js
+++ b/app/javascript/gabsocial/features/about/investors.js
@@ -10,9 +10,9 @@ export default class Investors extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s._].join(' ')}>
+      <div className={[_s.d].join(' ')}>
         <Block>
-          <div className={[_s._, _s.minH50VH, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s.d, _s.minH50VH, _s.px15, _s.py15].join(' ')}>
             <Heading>Investors</Heading>
             <br />
 
diff --git a/app/javascript/gabsocial/features/about/privacy_policy.js b/app/javascript/gabsocial/features/about/privacy_policy.js
index 53561e5a..e921ec26 100644
--- a/app/javascript/gabsocial/features/about/privacy_policy.js
+++ b/app/javascript/gabsocial/features/about/privacy_policy.js
@@ -10,9 +10,9 @@ export default class PrivacyPolicy extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s._].join(' ')}>
+      <div className={[_s.d].join(' ')}>
         <Block>
-          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
             <Heading>GAB AI INC</Heading>
             <br />
             <Heading>Privacy Policy</Heading>
@@ -49,7 +49,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>This policy applies to information we collect:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>On the Website.</Text>
               </li>
@@ -66,7 +66,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>It does not apply to information collected by:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Us offline or through any other means, including on any other website operated by Company or any third party (including our affiliates and subsidiaries); or</Text>
               </li>
@@ -87,7 +87,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Heading size='h2'>Information We Collect About You and How We Collect It</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>We collect several types of information from and about users of our Website, including information:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>By which you may be personally identified, such as an e-mail address (”personal information”);</Text>
               </li>
@@ -101,7 +101,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>We collect this information:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Directly from you when you provide it to us.</Text>
               </li>
@@ -117,7 +117,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Heading size='h2'>Information You Provide to Us</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>The information we collect on or through our Website may include:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Information that you provide by filling in forms on our Website. This includes information provided at the time of registering to use our Website, subscribing to our service, posting material, or requesting further services. We may also ask you for information when you report a problem with our Website.</Text>
               </li>
@@ -135,7 +135,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Heading size='h2'>Information We Collect Through Automatic Data Collection</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>As you navigate through and interact with our Website, we may use automatic data collection technologies to collect certain information about your equipment, browsing actions, and patterns, including:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Details of your visits to our Website, including traffic data, logs, and other communication data and the resources that you access and use on the Website.</Text>
               </li>
@@ -146,7 +146,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>The information we collect automatically may be only statistical data and may not include personal information. It helps us to improve our Website and to deliver a better and more personalized service, including by enabling us to:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Estimate our audience size and usage patterns.</Text>
               </li>
@@ -163,7 +163,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>The technologies we use for this automatic data collection may include:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Cookies (or browser cookies). A cookie is a small file placed on the hard drive of your computer. You may refuse to accept browser cookies by activating the appropriate setting on your browser. However, if you select this setting you may be unable to access certain parts of our Website. Unless you have adjusted your browser setting so that it will refuse cookies, our system will issue cookies when you direct your browser to our Website.</Text>
               </li>
@@ -176,7 +176,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Heading size='h2'>How We Use Your Information</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>We use information that we collect about you or that you provide to us, including any personal information:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>To present our Website and its contents to you.</Text>
               </li>
@@ -214,7 +214,7 @@ export default class PrivacyPolicy extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>It is the policy of the Company to not provide any user data to any person unless compelled by a court order issued by a U.S. court, except in cases of life-threatening emergency. The Company reserves the right to change or deviate from this policy at any time, in its sole and absolute discretion, with or without notice to you.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>We may disclose personal information that we collect or you provide as described in this privacy policy:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>To our subsidiaries and affiliates.</Text>
               </li>
@@ -237,7 +237,7 @@ export default class PrivacyPolicy extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>We may also disclose your personal information:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>To comply with any court order, law, or legal process, including to respond to any government or regulatory request.</Text>
               </li>
diff --git a/app/javascript/gabsocial/features/about/terms_of_sale.js b/app/javascript/gabsocial/features/about/terms_of_sale.js
index e475fbe8..114f1667 100644
--- a/app/javascript/gabsocial/features/about/terms_of_sale.js
+++ b/app/javascript/gabsocial/features/about/terms_of_sale.js
@@ -10,9 +10,9 @@ export default class TermsOfSale extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s._].join(' ')}>
+      <div className={[_s.d].join(' ')}>
         <Block>
-          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
             <Heading>GAB AI INC</Heading>
             <br />
             <Heading>Terms of Sale</Heading>
@@ -83,7 +83,7 @@ export default class TermsOfSale extends React.PureComponent {
             <Heading size='h2'>5. Restrictions</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>When you use the Paid Service, you may not (or attempt to):</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li className={_s.mt10}>
                 <Text tagName='p' size='medium'>violate the Terms of Service;</Text>
               </li>
diff --git a/app/javascript/gabsocial/features/about/terms_of_service.js b/app/javascript/gabsocial/features/about/terms_of_service.js
index 192c9b97..a3a06d4a 100644
--- a/app/javascript/gabsocial/features/about/terms_of_service.js
+++ b/app/javascript/gabsocial/features/about/terms_of_service.js
@@ -10,9 +10,9 @@ export default class TermsOfService extends React.PureComponent {
   render() {
 
     return (
-      <div className={[_s._].join(' ')}>
+      <div className={[_s.d].join(' ')}>
         <Block>
-          <div className={[_s._, _s.px15, _s.py15].join(' ')}>
+          <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
             <Heading>GAB AI INC</Heading>
             <br />
             <Heading>Website Terms of Service</Heading>
@@ -165,7 +165,7 @@ export default class TermsOfService extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>You are responsible for both:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Making all arrangements necessary for you to have access to the Website.</Text>
               </li>
@@ -208,7 +208,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>The Website and its entire contents, features, and functionality (including but not limited to all information, software, text, displays, images, video, and audio, and the design, selection, and arrangement thereof) are owned by the Company, its licensors, or other providers of such material and are protected by United States and international copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws. A copy of the Gab Social social networking software (“Gab Social”) and the AGPL license applicable thereto may be found at our public repository.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>These Terms of Service permit you to use the Website for your personal, non-commercial use only. You must not reproduce, distribute, modify, create derivative works of, publicly display, publicly perform, republish, download, store, or transmit any of the material on our Website, except as follows:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>You may use Gab Social software subject to the terms of the Affero GPL License, Version 3.</Text>
               </li>
@@ -231,7 +231,7 @@ export default class TermsOfService extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>You must not:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Modify copies of any materials from this site.</Text>
               </li>
@@ -251,7 +251,7 @@ export default class TermsOfService extends React.PureComponent {
             <Heading size='h2'>Prohibited Uses</Heading>
             <Text tagName='p' className={_s.mt15} size='medium'>You may use the Website only for lawful purposes and in accordance with these Terms of Service. You agree not to use the Website:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>In any way that would violate any applicable federal, state, or local law of the United States of America (including, without limitation, any laws regarding the export of data or software to and from the US or other countries) and is not protected by the First Amendment to the U.S. Constitution (the “First Amendment”).</Text>
               </li>
@@ -274,7 +274,7 @@ export default class TermsOfService extends React.PureComponent {
 
             <Text tagName='p' className={_s.mt15} size='medium'>Additionally, you agree not to:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Use the Website in any manner that could disable, overburden, damage, or impair the site or interfere with any other party’s use of the Website, including their ability to engage in real time activities through the Website.</Text>
               </li>
@@ -307,7 +307,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>All User Contributions must comply with the Content Standards set out in these Terms of Service. Any User Contribution you post to the site will be considered non-confidential and non-proprietary. By providing any User Contribution on the Website, you grant us and our affiliates and service providers, and each of their and our licensees, successors, and assigns an irrevocable, perpetual, royalty-free right to use, republish, reproduce, modify, perform, display, distribute, and otherwise disclose to third parties any such material for any purpose.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>You represent and warrant that:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>You own or control all rights in and to the User Contributions and have the right to grant the license granted above to us and our affiliates and service providers, and each of their and our respective licensees, successors, and assigns.</Text>
               </li>
@@ -324,7 +324,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>We strive to ensure that the First Amendment remains the Website’s standard for content moderation. We will make best efforts to ensure that all content moderation decisions and enforcement of these terms of service does not punish users for exercising their God-given right to speak freely.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>We collect comparatively little data on our users relative to other social networking sites. Our default position is that we should implement no prior restraints on any User Contribution. However, given the breadth of speech we permit, there may be circumstances where we are unable to determine whether content is protected by the First Amendment or not and prudence may require us to err on the side of caution. Accordingly, the Company reserves the right to take any action with respect to any User Contribution that we deem necessary or appropriate in our sole discretion, including the following:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Take any action with respect to any User Contribution that we deem necessary or appropriate in our sole discretion, including if we believe that such User Contribution violates the Terms of Service, including the Content Standards, infringes any intellectual property right or other right of any person or entity, or could threaten the physical safety of users of the Website or the public.</Text>
               </li>
@@ -346,7 +346,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>As a general rule, written expression that is protected political, religious, symbolic, or commercial speech under the First Amendment of the U.S. Constitution will be allowed on the Website. User Contributions absolutely must in their entirety comply with all applicable federal, state, and local regulations in the United States.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>Without limiting the generality of the foregoing, User Contributions must NOT:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Be unlawful or be made in furtherance of any unlawful purpose. User Contributions must not aid, abet, assist, counsel, procure or solicit the commission of, nor constitute an attempt or part of a conspiracy to commit, any unlawful act. For avoidance of doubt, speech which is merely offensive or the expression of an offensive or controversial idea or opinion, as a general rule, will be in poor taste but will not be illegal in the United States.</Text>
               </li>
@@ -473,7 +473,7 @@ export default class TermsOfService extends React.PureComponent {
             <Text tagName='p' className={_s.mt15} size='medium'>You may link to the Website, provided you do so in a way that is fair and legal and does not damage our reputation or take advantage of it, but you must not establish a link in such a way as to suggest any form of association, approval, or endorsement on our part without our express written consent.</Text>
             <Text tagName='p' className={_s.mt15} size='medium'>This Website may provide certain social media features that enable you to:</Text>
 
-            <ul className={[_s._, _s.px15, _s.mt15, _s.ml15].join(' ')}>
+            <ul className={[_s.d, _s.px15, _s.mt15, _s.ml15].join(' ')}>
               <li>
                 <Text tagName='p' size='medium'>Link from your own or certain third-party websites to certain content on this Website.</Text>
               </li>
diff --git a/app/javascript/gabsocial/features/account_gallery.js b/app/javascript/gabsocial/features/account_gallery.js
index fe097531..e6c909af 100644
--- a/app/javascript/gabsocial/features/account_gallery.js
+++ b/app/javascript/gabsocial/features/account_gallery.js
@@ -114,7 +114,7 @@ class AccountGallery extends ImmutablePureComponent {
         <div
           role='feed'
           onScroll={this.handleScroll}
-          className={[_s._, _s.flexRow, _s.flexWrap, _s.py5, _s.px5].join(' ')}
+          className={[_s.d, _s.flexRow, _s.flexWrap, _s.py5, _s.px5].join(' ')}
         >
 
           {
@@ -129,7 +129,7 @@ class AccountGallery extends ImmutablePureComponent {
 
           {
             isLoading && attachments.size === 0 &&
-            <div className={[_s._, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.w100PC].join(' ')}>
               <MediaGalleryPlaceholder />
             </div>
           }
diff --git a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
index 56b52563..7ca20e52 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -20,7 +20,7 @@ class ComposeExtraButton extends React.PureComponent {
     } = this.props
 
     const btnClasses = cx({
-      _: 1,
+      d: 1,
       circle: 1,
       noUnderline: 1,
       font: 1,
@@ -64,7 +64,7 @@ class ComposeExtraButton extends React.PureComponent {
     }
 
     return (
-      <div className={[_s._, _s.mr2].join(' ')} ref={buttonRef}>
+      <div className={[_s.d, _s.mr2].join(' ')} ref={buttonRef}>
         {button}
         {children}
       </div>
diff --git a/app/javascript/gabsocial/features/compose/components/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form.js
index 5e09f719..472b2255 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form.js
@@ -211,14 +211,14 @@ class ComposeForm extends ImmutablePureComponent {
     const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth)
 
     const parentContainerClasses = CX({
-      _: 1,
+      d: 1,
       w100PC: 1,
       flexRow: !shouldCondense,
       pb10: !shouldCondense,
     })
 
     const childContainerClasses = CX({
-      _: 1,
+      d: 1,
       flexWrap: 1,
       overflowHidden: 1,
       flex1: 1,
@@ -232,7 +232,7 @@ class ComposeForm extends ImmutablePureComponent {
     })
 
     const actionsContainerClasses = CX({
-      _: 1,
+      d: 1,
       flexRow: 1,
       aiCenter: !shouldCondense,
       aiStart: shouldCondense,
@@ -243,20 +243,20 @@ class ComposeForm extends ImmutablePureComponent {
     })
 
     const commentPublishBtnClasses = CX({
-      _: 1,
+      d: 1,
       jcCenter: 1,
       displayNone: length(this.props.text) === 0,
     })
 
     return (
-      <div className={[_s._, _s.w100PC].join(' ')}>
+      <div className={[_s.d, _s.w100PC].join(' ')}>
         {
           shouldCondense &&
           <div className={parentContainerClasses}>
-            <div className={[_s._, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.w100PC].join(' ')}>
 
-              <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
-                <div className={[_s._, _s.mr10].join(' ')}>
+              <div className={[_s.d, _s.flexRow, _s.w100PC].join(' ')}>
+                <div className={[_s.d, _s.mr10].join(' ')}>
                   <Avatar account={account} size={28} noHover />
                 </div>
 
@@ -287,7 +287,7 @@ class ComposeForm extends ImmutablePureComponent {
                   />
 
                   <div className={actionsContainerClasses}>
-                    <div className={[_s._, _s.flexRow, _s.mrAuto].join(' ')}>
+                    <div className={[_s.d, _s.flexRow, _s.mrAuto].join(' ')}>
 
                       { /* <EmojiPickerButton small={shouldCondense} isMatch={isMatch} /> */}
 
@@ -312,7 +312,7 @@ class ComposeForm extends ImmutablePureComponent {
 
               {
                 (isUploading || anyMedia) &&
-                <div className={[_s._, _s.w100PC, _s.pl35, _s.mt5].join(' ')}>
+                <div className={[_s.d, _s.w100PC, _s.pl35, _s.mt5].join(' ')}>
                   <UploadForm
                     replyToId={replyToId}
                     isModalOpen={isModalOpen}
@@ -326,7 +326,7 @@ class ComposeForm extends ImmutablePureComponent {
         {
           !shouldCondense &&
           <div className={parentContainerClasses}>
-            <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.w100PC].join(' ')}>
               <div
                 className={childContainerClasses}
                 ref={this.setForm}
@@ -335,7 +335,7 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   !!reduxReplyToId && isModalOpen && isMatch &&
-                  <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
+                  <div className={[_s.d, _s.px15, _s.py10, _s.mt5].join(' ')}>
                     <StatusContainer
                       contextType='compose'
                       id={reduxReplyToId}
@@ -346,7 +346,7 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   !!spoiler &&
-                  <div className={[_s._, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+                  <div className={[_s.d, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
                     <Input
                       placeholder={intl.formatMessage(messages.spoiler_placeholder)}
                       value={this.props.spoilerText}
@@ -382,7 +382,7 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   (isUploading || anyMedia) &&
-                  <div className={[_s._, _s.px15, _s.mt5].join(' ')}>
+                  <div className={[_s.d, _s.px15, _s.mt5].join(' ')}>
                     <UploadForm
                       replyToId={replyToId}
                       isModalOpen={isModalOpen}
@@ -393,7 +393,7 @@ class ComposeForm extends ImmutablePureComponent {
                 {
                   /* : todo :
                   !!selectedGifSrc && !anyMedia &&
-                  <div className={[_s._, _s.px15].join(' ')}>
+                  <div className={[_s.d, _s.px15].join(' ')}>
                     <GifForm
                       replyToId={replyToId}
                       small={shouldCondense}
@@ -405,14 +405,14 @@ class ComposeForm extends ImmutablePureComponent {
 
                 {
                   !edit && hasPoll &&
-                  <div className={[_s._, _s.px15, _s.mt5].join(' ')}>
+                  <div className={[_s.d, _s.px15, _s.mt5].join(' ')}>
                     <PollForm replyToId={replyToId} />
                   </div>
                 }
 
                 {
                   !!quoteOfId && isModalOpen && isMatch &&
-                  <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
+                  <div className={[_s.d, _s.px15, _s.py10, _s.mt5].join(' ')}>
                     <StatusContainer
                       contextType='compose'
                       id={quoteOfId}
@@ -422,7 +422,7 @@ class ComposeForm extends ImmutablePureComponent {
                 }
 
                 <div className={actionsContainerClasses}>
-                  <div className={[_s._, _s.flexRow, _s.mrAuto].join(' ')}>
+                  <div className={[_s.d, _s.flexRow, _s.mrAuto].join(' ')}>
 
                     <UploadButton small={shouldCondense} />
 
diff --git a/app/javascript/gabsocial/features/compose/components/gif_form.js b/app/javascript/gabsocial/features/compose/components/gif_form.js
index 0f9796a9..6f9e1f75 100644
--- a/app/javascript/gabsocial/features/compose/components/gif_form.js
+++ b/app/javascript/gabsocial/features/compose/components/gif_form.js
@@ -15,8 +15,8 @@ class GifForm extends React.PureComponent {
     if (!selectedGifSrc) return null
 
     return (
-      <div className={_s._}>
-        <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
+      <div className={_s.d}>
+        <div className={[_s.d, _s.flexRow, _s.flexWrap].join(' ')}>
           <Image
             width='auto'
             src={selectedGifSrc}
diff --git a/app/javascript/gabsocial/features/compose/components/media_upload_item.js b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
index ed3ef2ff..2afafd07 100644
--- a/app/javascript/gabsocial/features/compose/components/media_upload_item.js
+++ b/app/javascript/gabsocial/features/compose/components/media_upload_item.js
@@ -81,7 +81,7 @@ class Upload extends ImmutablePureComponent {
     const description = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || ''
 
     const descriptionContainerClasses = cx({
-      _: 1,
+      d: 1,
       posAbs: 1,
       right0: 1,
       bottom0: 1,
@@ -96,20 +96,20 @@ class Upload extends ImmutablePureComponent {
     return (
       <div
         tabIndex='0'
-        className={[_s._, _s.w50PC, _s.px5, _s.py5].join(' ')}
+        className={[_s.d, _s.w50PC, _s.px5, _s.py5].join(' ')}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         onClick={this.handleClick}
         role='button'
       >
-        <div className={[_s._, _s.radiusSmall, _s.overflowHidden, _s.h158PX].join(' ')}>
+        <div className={[_s.d, _s.radiusSmall, _s.overflowHidden, _s.h158PX].join(' ')}>
           <Image
-            className={[_s._, _s.h158PX].join(' ')}
+            className={[_s.d, _s.h158PX].join(' ')}
             src={media.get('preview_url')}
           />
           {
             media.get('type') === 'gifv' &&
-            <div className={[_s._, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.ml10, _s.mt10, _s.top0, _s.left0].join(' ')}>
+            <div className={[_s.d, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.ml10, _s.mt10, _s.top0, _s.left0].join(' ')}>
               <Text size='extraSmall' color='white' weight='medium'>GIF</Text>
             </div>
           }
diff --git a/app/javascript/gabsocial/features/compose/components/poll_form.js b/app/javascript/gabsocial/features/compose/components/poll_form.js
index 0717aeb6..56f535fd 100644
--- a/app/javascript/gabsocial/features/compose/components/poll_form.js
+++ b/app/javascript/gabsocial/features/compose/components/poll_form.js
@@ -43,8 +43,8 @@ class PollForm extends ImmutablePureComponent {
     if (!options) return null
 
     return (
-      <div className={[_s._, _s.px10, _s.py10, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
-        <ul className={[_s._, _s.listStyleNone].join(' ')}>
+      <div className={[_s.d, _s.px10, _s.py10, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
+        <ul className={[_s.d, _s.listStyleNone].join(' ')}>
           {
             options.map((title, i) => (
               <PollFormOption
@@ -62,7 +62,7 @@ class PollForm extends ImmutablePureComponent {
           }
         </ul>
 
-        <div className={[_s._, _s.flexRow].join(' ')}>
+        <div className={[_s.d, _s.flexRow].join(' ')}>
           {
             options.size < 4 && (
               <Button
@@ -82,7 +82,7 @@ class PollForm extends ImmutablePureComponent {
             )
           }
 
-          <div className={[_s._, _s.flexGrow1].join(' ')}>
+          <div className={[_s.d, _s.flexGrow1].join(' ')}>
             <Select
               value={expiresIn}
               onChange={this.handleSelectDuration}
@@ -147,7 +147,7 @@ class PollFormOption extends ImmutablePureComponent {
     const { isPollMultiple, title, index, intl } = this.props
 
     const toggleClasses = cx({
-      _: 1,
+      d: 1,
       px10: 1,
       py10: 1,
       borderColorSecondary: 1,
@@ -158,8 +158,8 @@ class PollFormOption extends ImmutablePureComponent {
     })
 
     return (
-      <li className={[_s._, _s.flexRow, _s.mb10].join(' ')}>
-        <label className={[_s._, _s.flexRow, _s.flexGrow1, _s.aiCenter].join(' ')}>
+      <li className={[_s.d, _s.flexRow, _s.mb10].join(' ')}>
+        <label className={[_s.d, _s.flexRow, _s.flexGrow1, _s.aiCenter].join(' ')}>
           <span
             className={toggleClasses}
             onClick={this.handleToggleMultiple}
diff --git a/app/javascript/gabsocial/features/compose/components/sensitive_media_button.js b/app/javascript/gabsocial/features/compose/components/sensitive_media_button.js
index b606d07c..a5e15e08 100644
--- a/app/javascript/gabsocial/features/compose/components/sensitive_media_button.js
+++ b/app/javascript/gabsocial/features/compose/components/sensitive_media_button.js
@@ -11,7 +11,7 @@ class SensitiveMediaButton extends React.PureComponent {
     const { active, disabled, onClick, intl } = this.props
 
     return (
-      <div className={[_s._, _s.aiStart, _s.px5].join(' ')}>
+      <div className={[_s.d, _s.aiStart, _s.px5].join(' ')}>
         <Switch
           id='mark-sensitive'
           type='checkbox'
diff --git a/app/javascript/gabsocial/features/compose/components/upload_form.js b/app/javascript/gabsocial/features/compose/components/upload_form.js
index e007aaf8..aa1f4e63 100644
--- a/app/javascript/gabsocial/features/compose/components/upload_form.js
+++ b/app/javascript/gabsocial/features/compose/components/upload_form.js
@@ -17,8 +17,8 @@ class UploadForm extends ImmutablePureComponent {
     } = this.props
 
     return (
-      <div className={_s._}>
-        <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
+      <div className={_s.d}>
+        <div className={[_s.d, _s.flexRow, _s.flexWrap].join(' ')}>
           {
             mediaIds.map(id => (
               <Upload id={id} key={id} />
diff --git a/app/javascript/gabsocial/features/compose/compose.js b/app/javascript/gabsocial/features/compose/compose.js
index 180dff1e..ad2ab38b 100644
--- a/app/javascript/gabsocial/features/compose/compose.js
+++ b/app/javascript/gabsocial/features/compose/compose.js
@@ -12,7 +12,7 @@ class Compose extends React.PureComponent {
 
   render () {
     return (
-      <div className={[_s._, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s.d, _s.bgPrimary, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <ComposeFormContainer isStandalone />
       </div>
     )
diff --git a/app/javascript/gabsocial/features/follow_requests.js b/app/javascript/gabsocial/features/follow_requests.js
index f81d229a..a8f9823a 100644
--- a/app/javascript/gabsocial/features/follow_requests.js
+++ b/app/javascript/gabsocial/features/follow_requests.js
@@ -58,7 +58,7 @@ class FollowRequests extends ImmutablePureComponent {
     } = this.props
 
     const unlockedPrependMessage = locked ? null : (
-      <div className={[_s._, _s.px15, _s.py15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s.d, _s.px15, _s.py15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <Text>
           <FormattedMessage
             id='follow_requests.unlocked_explanation'
diff --git a/app/javascript/gabsocial/features/group_about.js b/app/javascript/gabsocial/features/group_about.js
index 1d2bc54c..0c52ad30 100644
--- a/app/javascript/gabsocial/features/group_about.js
+++ b/app/javascript/gabsocial/features/group_about.js
@@ -35,7 +35,7 @@ class GroupAbout extends ImmutablePureComponent {
 		const { group } = this.props
 
 		return (
-			<div className={[_s._, _s.w100PC].join(' ')}>
+			<div className={[_s.d, _s.w100PC].join(' ')}>
 				<Responsive min={BREAKPOINT_EXTRA_SMALL}>
 					<ColumnIndicator type='missing' />
 				</Responsive>
diff --git a/app/javascript/gabsocial/features/group_collection_timeline.js b/app/javascript/gabsocial/features/group_collection_timeline.js
index 4b7b4726..31dfff7a 100644
--- a/app/javascript/gabsocial/features/group_collection_timeline.js
+++ b/app/javascript/gabsocial/features/group_collection_timeline.js
@@ -162,8 +162,8 @@ class GroupCollectionTimeline extends React.PureComponent {
 		} = this.props
 
 		const emptyMessage = !!me && collectionType === 'member' && hasNoGroupMembers ? (
-			<div className={[_s._, _s.w100PC]}>
-				<Text className={[_s._, _s.mb10].join(' ')}>
+			<div className={[_s.d, _s.w100PC]}>
+				<Text className={[_s.d, _s.mb10].join(' ')}>
 					Join some groups then come back here to view your group timeline
 				</Text>
 				<GroupsCollection activeTab='featured' />
diff --git a/app/javascript/gabsocial/features/group_create.js b/app/javascript/gabsocial/features/group_create.js
index d75fa62e..b6b7c2fb 100644
--- a/app/javascript/gabsocial/features/group_create.js
+++ b/app/javascript/gabsocial/features/group_create.js
@@ -294,7 +294,7 @@ class GroupCreate extends ImmutablePureComponent {
 
 				<Divider isInvisible />			
 
-				<div className={_s._}>
+				<div className={_s.d}>
 					<Text className={[_s.pl15, _s.mb10].join(' ')} size='small' weight='medium' color='secondary'>
 						{intl.formatMessage(messages.categoryTitle)}
 					</Text>
diff --git a/app/javascript/gabsocial/features/group_members.js b/app/javascript/gabsocial/features/group_members.js
index b764b8a0..c8053e59 100644
--- a/app/javascript/gabsocial/features/group_members.js
+++ b/app/javascript/gabsocial/features/group_members.js
@@ -103,7 +103,7 @@ class GroupMembers extends ImmutablePureComponent {
 
 				{
 					/* : todo :
-					<div className={[_s._, _s.jcCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
+					<div className={[_s.d, _s.jcCenter, _s.px15, _s.my5, _s.borderBottom1PX, _s.borderColorSecondary, _s.pt5, _s.pb15].join(' ')}>
 						<Input
 							id='group-member-search'
 							placeholder='Search group members'
@@ -118,7 +118,7 @@ class GroupMembers extends ImmutablePureComponent {
 					</div>
 					*/
 				}
-				<div className={[_s._].join(' ')}>
+				<div className={[_s.d].join(' ')}>
 					<ScrollableList
 						scrollKey='group-members'
 						hasMore={hasMore}
diff --git a/app/javascript/gabsocial/features/groups_collection.js b/app/javascript/gabsocial/features/groups_collection.js
index 90bf6943..0e806479 100644
--- a/app/javascript/gabsocial/features/groups_collection.js
+++ b/app/javascript/gabsocial/features/groups_collection.js
@@ -90,13 +90,13 @@ class GroupsCollection extends ImmutablePureComponent {
 
 		return (
 			<Block>
-				<div className={[_s._, _s.flexRow, _s.px15, _s.pt10, _s.jcCenter].join(' ')}>
-					<div className={[_s._, _s.flexGrow1, _s.maxW80PC, _s.jcCenter, _s.overflowHidden].join(' ')}>
+				<div className={[_s.d, _s.flexRow, _s.px15, _s.pt10, _s.jcCenter].join(' ')}>
+					<div className={[_s.d, _s.flexGrow1, _s.maxW80PC, _s.jcCenter, _s.overflowHidden].join(' ')}>
 						<Heading size='h2'>
 							{intl.formatMessage(messages[activeTab])}
 						</Heading>
 					</div>
-					<div className={[_s._, _s.flexRow, _s.mlAuto].join(' ')}>
+					<div className={[_s.d, _s.flexRow, _s.mlAuto].join(' ')}>
 						<Button
 							icon='sort'
 							className={_s.px10}
@@ -108,7 +108,7 @@ class GroupsCollection extends ImmutablePureComponent {
 						/>
 					</div>
 				</div>
-				<div className={[_s._, _s.py10, _s.w100PC].join(' ')}>
+				<div className={[_s.d, _s.py10, _s.w100PC].join(' ')}>
 					{
 						groupIds.map((groupId, i) => (
 							<GroupListItem
diff --git a/app/javascript/gabsocial/features/introduction.js b/app/javascript/gabsocial/features/introduction.js
index 25214042..d97af749 100644
--- a/app/javascript/gabsocial/features/introduction.js
+++ b/app/javascript/gabsocial/features/introduction.js
@@ -31,10 +31,10 @@ class SlideWelcome extends React.PureComponent {
 
   render() {
     return (
-      <div className={[_s._, _s.w100PC, _s.h100PC].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.h100PC].join(' ')}>
         <Image src='/headers/onboarding.png' alt='Welcome to Gab' />
 
-        <div className={[_s._, _s.px15, _s.py15].join(' ')}>
+        <div className={[_s.d, _s.px15, _s.py15].join(' ')}>
 
           <Text size='large'>Gab is the home of free speech online and a place where users shape their own experience. </Text>
           <br />
@@ -94,22 +94,22 @@ class SlidePhotos extends ImmutablePureComponent {
     const { displayNameValue } = this.state
 
     return (
-      <div className={[_s._, _s.w100PC].join(' ')}>
-        <div className={[_s._, _s.px15, _s.py15, _s.aiCenter].join(' ')}>
+      <div className={[_s.d, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.px15, _s.py15, _s.aiCenter].join(' ')}>
 
-          <div className={[_s._, _s.py10, _s.maxW640PX].join(' ')}>
+          <div className={[_s.d, _s.py10, _s.maxW640PX].join(' ')}>
             <Text size='large' align='center'>Set your cover photo, profile photo and enter your display name so people can find you.</Text>
           </div>
 
-          <div className={[_s._, _s.mt15, _s.w100PC, _s.aiCenter].join(' ')}>
-            <div className={[_s._, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden, _s.radiusSmall, _s.bgPrimary].join(' ')}>
+          <div className={[_s.d, _s.mt15, _s.w100PC, _s.aiCenter].join(' ')}>
+            <div className={[_s.d, _s.border1PX, _s.borderColorSecondary, _s.overflowHidden, _s.radiusSmall, _s.bgPrimary].join(' ')}>
               <FileInput
                 width='300px'
                 height='140px'
                 id='cover-photo'
                 onChange={this.handleCoverPhotoChange}
               />
-              <div className={[_s._, _s.mtNeg32PX, _s.aiCenter, _s.jcCenter].join(' ')}>
+              <div className={[_s.d, _s.mtNeg32PX, _s.aiCenter, _s.jcCenter].join(' ')}>
                 <FileInput
                   width='124px'
                   height='124px'
@@ -118,7 +118,7 @@ class SlidePhotos extends ImmutablePureComponent {
                   onChange={this.handleProfilePhotoChange}
                 />
               </div>
-              <div className={[_s._, _s.py5, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+              <div className={[_s.d, _s.py5, _s.px15, _s.mt5, _s.mb15].join(' ')}>
                 <Input
                   id='display-name'
                   title='Display name'
@@ -148,13 +148,13 @@ class SlideGroups extends ImmutablePureComponent {
     const { groupIds } = this.props
 
     return (
-      <div className={[_s._, _s.w100PC].join(' ')}>
-        <div className={[_s._, _s.py15, _s.aiCenter].join(' ')}>
-          <div className={[_s._, _s.px15, _s.mb15].join(' ')}>
+      <div className={[_s.d, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.py15, _s.aiCenter].join(' ')}>
+          <div className={[_s.d, _s.px15, _s.mb15].join(' ')}>
             <Text size='large'>Gab Groups are a great way to connect with people who share your interests. Please select a few groups to get started.</Text>
           </div>
 
-          <div className={[_s._, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.w100PC].join(' ')}>
             {
               groupIds.map((groupId, i) => (
                 <GroupListItem
@@ -185,8 +185,8 @@ class SlideFirstPost extends React.PureComponent {
     const { submitted } = this.props
 
     return (
-      <div className={[_s._, _s.w100PC].join(' ')}>
-        <div className={[_s._, _s.py15, _s.px15].join(' ')}>
+      <div className={[_s.d, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.py15, _s.px15].join(' ')}>
           {
             !submitted &&
             <React.Fragment>
@@ -195,7 +195,7 @@ class SlideFirstPost extends React.PureComponent {
 
               <Divider />
 
-              <div className={[_s._, _s.mt15, _s.boxShadowBlock, _s.radiusSmall].join(' ')}>
+              <div className={[_s.d, _s.mt15, _s.boxShadowBlock, _s.radiusSmall].join(' ')}>
                 <ComposeFormContainer
                   groupId={GAB_COM_INTRODUCE_YOURSELF_GROUP_ID}
                   hidePro
@@ -342,8 +342,8 @@ class Introduction extends ImmutablePureComponent {
     const nextTitle = currentIndex === 3 ? 'Finish' : 'Next'
 
     return (
-      <div className={[_s._, _s.w100PC, _s.maxH80VH].join(' ')}>
-        <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.maxH80VH].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
             <Heading>
               {title}
@@ -380,7 +380,7 @@ class Introduction extends ImmutablePureComponent {
         <ReactSwipeableViews
           index={currentIndex}
           onChangeIndex={this.handleSwipe}
-          className={[_s._, _s.flexNormal, _s.calcH80VH106PX].join(' ')}
+          className={[_s.d, _s.flexNormal, _s.calcH80VH106PX].join(' ')}
           containerStyle={{
             width: '100%',
           }}
@@ -390,15 +390,15 @@ class Introduction extends ImmutablePureComponent {
         >
           {
             pages.map((page, i) => (
-              <div key={i} className={[_s._, _s.calcH80VH106PX].join(' ')}>
+              <div key={i} className={[_s.d, _s.calcH80VH106PX].join(' ')}>
                 {page}
               </div>
             ))
           }
         </ReactSwipeableViews>
 
-        <div className={[_s._, _s.px15, _s.h53PX, _s.aiCenter, _s.jcCenter, _s.borderTop1PX, _s.borderColorSecondary, _s.w100PC, _s.flexRow].join(' ')}>
-          <div className={[_s._, _s.w50PX, _s.mrAuto].join(' ')}>
+        <div className={[_s.d, _s.px15, _s.h53PX, _s.aiCenter, _s.jcCenter, _s.borderTop1PX, _s.borderColorSecondary, _s.w100PC, _s.flexRow].join(' ')}>
+          <div className={[_s.d, _s.w50PX, _s.mrAuto].join(' ')}>
             {
               currentIndex !== 0 &&
               <Button
@@ -412,7 +412,7 @@ class Introduction extends ImmutablePureComponent {
             }
           </div>
             
-          <div className={[_s._, _s.h100PC, _s.flexGrow1, _s.aiCenter, _s.jcCenter].join(' ')}>
+          <div className={[_s.d, _s.h100PC, _s.flexGrow1, _s.aiCenter, _s.jcCenter].join(' ')}>
             <Pagination
               count={pages.length}
               activeIndex={currentIndex}
@@ -424,7 +424,7 @@ class Introduction extends ImmutablePureComponent {
           <Button
             isText
             href={currentIndex === 3 ? '/home' : undefined}
-            className={[_s._, _s.w50PX, _s.h100PC, _s.jcCenter, _s.pr0, _s.pl0, _s.mlAuto, _s.opacity05].join(' ')}
+            className={[_s.d, _s.w50PX, _s.h100PC, _s.jcCenter, _s.pr0, _s.pl0, _s.mlAuto, _s.opacity05].join(' ')}
             onClick={this.handleNext}
             backgroundColor='none'
             color='secondary'
diff --git a/app/javascript/gabsocial/features/list_create.js b/app/javascript/gabsocial/features/list_create.js
index 26e63553..7b979dd3 100644
--- a/app/javascript/gabsocial/features/list_create.js
+++ b/app/javascript/gabsocial/features/list_create.js
@@ -62,7 +62,7 @@ class ListCreate extends React.PureComponent {
           onChange={onChange}
         />
 
-        <div className={[_s._, _s.my10, _s.py5, _s.ml10].join(' ')}>
+        <div className={[_s.d, _s.my10, _s.py5, _s.ml10].join(' ')}>
           <Text color='secondary' size='small'>
             {intl.formatMessage(messages.list_description)}
           </Text>
diff --git a/app/javascript/gabsocial/features/list_edit.js b/app/javascript/gabsocial/features/list_edit.js
index ad04380d..cf5cec23 100644
--- a/app/javascript/gabsocial/features/list_edit.js
+++ b/app/javascript/gabsocial/features/list_edit.js
@@ -193,8 +193,8 @@ class ListEdit extends ImmutablePureComponent {
 
     return (
       <div>
-        <div className={[_s._, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s._, _s.z4, _s.bgPrimary, _s.px15, _s.top0, _s.posSticky, _s.borderBottom1PX, _s.borderColorSecondary,].join(' ')}>
+        <div className={[_s.d, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.d, _s.z4, _s.bgPrimary, _s.px15, _s.top0, _s.posSticky, _s.borderBottom1PX, _s.borderColorSecondary,].join(' ')}>
             <TabBar
               tabs={[
                 {
@@ -218,10 +218,10 @@ class ListEdit extends ImmutablePureComponent {
 
           {
             activeTab === 'members' &&
-            <div className={[_s._, _s.mb10, _s.py10].join(' ')}>
-              <div className={[_s._, _s.pb10, _s.pt5].join(' ')}>
-                <div className={[_s._].join(' ')}>
-                  <Text weight='bold' size='small' color='secondary' className={[_s._, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+            <div className={[_s.d, _s.mb10, _s.py10].join(' ')}>
+              <div className={[_s.d, _s.pb10, _s.pt5].join(' ')}>
+                <div className={[_s.d].join(' ')}>
+                  <Text weight='bold' size='small' color='secondary' className={[_s.d, _s.px15, _s.mt5, _s.mb15].join(' ')}>
                     Total members ({accountIds.size})
                   </Text>
                   {
@@ -243,8 +243,8 @@ class ListEdit extends ImmutablePureComponent {
 
           {
             activeTab === 'settings' &&
-            <div className={[_s._, _s.mb10, _s.pb10, _s.px15].join(' ')}>
-              <div className={[_s._, _s.py15].join(' ')}>
+            <div className={[_s.d, _s.mb10, _s.pb10, _s.px15].join(' ')}>
+              <div className={[_s.d, _s.py15].join(' ')}>
                 <Input
                   title={intl.formatMessage(messages.editListTitle)}
                   placeholder='My new list title...'
@@ -271,8 +271,8 @@ class ListEdit extends ImmutablePureComponent {
 
           {
             activeTab === 'add-new' &&
-            <div className={[_s._, _s.mb10, _s.py10].join(' ')}>
-              <div className={[_s._, _s.px15].join(' ')}>
+            <div className={[_s.d, _s.mb10, _s.py10].join(' ')}>
+              <div className={[_s.d, _s.px15].join(' ')}>
                 <Input
                   placeholder={intl.formatMessage(messages.search)}
                   value={searchSuggestionsValue}
@@ -285,9 +285,9 @@ class ListEdit extends ImmutablePureComponent {
                 />
               </div>
 
-              <div className={[_s._, _s.pt10].join(' ')}>
-                <div className={[_s._].join(' ')}>
-                  <Text weight='bold' size='small' color='secondary' className={[_s._, _s.px15, _s.mt5, _s.mb15].join(' ')}>
+              <div className={[_s.d, _s.pt10].join(' ')}>
+                <div className={[_s.d].join(' ')}>
+                  <Text weight='bold' size='small' color='secondary' className={[_s.d, _s.px15, _s.mt5, _s.mb15].join(' ')}>
                     Search results ({searchAccountIds.size})
                   </Text>
                   {
diff --git a/app/javascript/gabsocial/features/list_timeline.js b/app/javascript/gabsocial/features/list_timeline.js
index a050f0ba..1c012e84 100644
--- a/app/javascript/gabsocial/features/list_timeline.js
+++ b/app/javascript/gabsocial/features/list_timeline.js
@@ -88,7 +88,7 @@ class ListTimeline extends ImmutablePureComponent {
     }
 
     const emptyMessage = (
-      <div className={[_s._, _s.py15, _s.px15, _s.aiCenter].join(' ')}>
+      <div className={[_s.d, _s.py15, _s.px15, _s.aiCenter].join(' ')}>
         <FormattedMessage
           id='empty_column.list'
           defaultMessage='There is nothing in this list yet. When members of this list post new statuses, they will appear here.'
diff --git a/app/javascript/gabsocial/features/news.js b/app/javascript/gabsocial/features/news.js
index e15d1322..4ff0a767 100644
--- a/app/javascript/gabsocial/features/news.js
+++ b/app/javascript/gabsocial/features/news.js
@@ -128,7 +128,7 @@ class News extends React.PureComponent {
       ]
     } catch (error) {
       return (
-        <div className={[_s._, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.w100PC].join(' ')}>
           <Block>
             <ColumnIndicator type='loading' />
           </Block>
@@ -141,23 +141,23 @@ class News extends React.PureComponent {
     }
 
     return (
-      <div className={[_s._, _s.w100PC].join(' ')}>
+      <div className={[_s.d, _s.w100PC].join(' ')}>
         <Block>
-          <div className={[_s._, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.d, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
               <TabBar tabs={domainTabs} />
             </Responsive>
             <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-              <div className={[_s._, _s.w100PC, _s.pt10, _s.pb5].join(' ')}>
+              <div className={[_s.d, _s.w100PC, _s.pt10, _s.pb5].join(' ')}>
                 <Pills pills={domainTabs} />
               </div>
             </Responsive>
           </div>
 
-          <div className={[_s._, _s.px15].join(' ')}>
+          <div className={[_s.d, _s.px15].join(' ')}>
             {
               !activeDomain &&
-              <div className={[_s._, _s.py15, _s.mt15, _s.mb15].join(' ')}>
+              <div className={[_s.d, _s.py15, _s.mt15, _s.mb15].join(' ')}>
                 <Heading size='h1'>
                   <a href={`https://trends.gab.com/trend?url=${headlineLink}`} className={[_s.noUnderline, _s.cPrimary].join(' ')}>
                     {headline}
@@ -168,8 +168,8 @@ class News extends React.PureComponent {
             
             {
               !activeDomain && leadHeadlines.length > 0 &&
-                <div className={[_s._, _s.mb15].join(' ')}>
-                  <div className={[_s._, _s.px15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.jcCenter].join(' ')}>
+                <div className={[_s.d, _s.mb15].join(' ')}>
+                  <div className={[_s.d, _s.px15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.jcCenter].join(' ')}>
                     <Heading size='h2'>
                       <Icon id='trends' className={[_s.mr10].join(' ')} size='18px' />
                       Headlines
@@ -181,7 +181,7 @@ class News extends React.PureComponent {
                         isText
                         backgroundColor='none'
                         color='primary'
-                        className={[_s._, _s.py7].join(' ')}
+                        className={[_s.d, _s.py7].join(' ')}
                         href={`https://trends.gab.com/trend?url=${lead.href}`}
                       >
                         <Text>
@@ -194,13 +194,13 @@ class News extends React.PureComponent {
             }
 
             <div>
-              <div className={[_s._, _s.px15, _s.mt15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.jcCenter].join(' ')}>
+              <div className={[_s.d, _s.px15, _s.mt15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.jcCenter].join(' ')}>
                 <Heading size='h2'>
                   <Icon id='trends' className={[_s.mr10].join(' ')} size='18px' />
                   {todaysTopTitle}
                 </Heading>
               </div>
-              <div className={[_s._, _s.py10].join(' ')}>
+              <div className={[_s.d, _s.py10].join(' ')}>
                 {
                   todaysTop.map((block, i) => (
                     <TrendsItem
diff --git a/app/javascript/gabsocial/features/search.js b/app/javascript/gabsocial/features/search.js
index 9d769666..5a0b1e23 100644
--- a/app/javascript/gabsocial/features/search.js
+++ b/app/javascript/gabsocial/features/search.js
@@ -66,7 +66,7 @@ class Search extends ImmutablePureComponent {
       return (
         <ResponsiveClassesComponent classNamesXS={_s.px10}>
           <Block>
-            <div className={[_s._, _s.py15, _s.px15].join(' ')}>
+            <div className={[_s.d, _s.py15, _s.px15].join(' ')}>
               <Text>Type in the box above and submit to perform a search.</Text>
             </div>
           </Block>
@@ -97,7 +97,7 @@ class Search extends ImmutablePureComponent {
           footerButtonTitle={isMax ? undefined : 'See more'}
           noPadding
         >
-          <div className={[_s._, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.d, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
             <Text color='tertiary' size='small'>
               Showing {size} of {results.get('accounts').size} results
             </Text>
@@ -129,12 +129,12 @@ class Search extends ImmutablePureComponent {
           footerButtonTitle={isMax ? undefined : 'See more'}
           noPadding
         >
-          <div className={[_s._, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.d, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
             <Text color='tertiary' size='small'>
               Showing {size} of {results.get('groups').size} results
             </Text>
           </div>
-          <div className={_s._}>
+          <div className={_s.d}>
             {
               results.get('groups').slice(0, size).map((group, i) => (
                 <GroupListItem
@@ -162,7 +162,7 @@ class Search extends ImmutablePureComponent {
           footerButtonTitle={isMax ? undefined : 'See more'}
           noPadding
         >
-          <div className={[_s._, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+          <div className={[_s.d, _s.pb10, _s.px15, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
             <Text color='tertiary' size='small'>
               Showing {size} of {results.get('hashtags').size} results
             </Text>
diff --git a/app/javascript/gabsocial/layouts/about_layout.js b/app/javascript/gabsocial/layouts/about_layout.js
index 1ccfa350..14d6287f 100644
--- a/app/javascript/gabsocial/layouts/about_layout.js
+++ b/app/javascript/gabsocial/layouts/about_layout.js
@@ -61,7 +61,7 @@ class SettingsLayout extends React.PureComponent {
     const { menuItems } = this
 
     const mainBlockClasses = CX({
-      _: 1,
+      d: 1,
       w1015PX: 1,
       flexRow: 1,
       jcEnd: 1,
@@ -71,7 +71,7 @@ class SettingsLayout extends React.PureComponent {
     })
 
     return (
-      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgPrimary].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgPrimary].join(' ')}>
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <WrappedBundle component={SidebarXS} />
@@ -86,31 +86,31 @@ class SettingsLayout extends React.PureComponent {
           <LoggedOutNavigationBar />
         }
 
-        <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.w100PC].join(' ')}>
 
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
             <WrappedBundle component={AboutSidebar} componentParams={{ title, items: menuItems }} />
           </Responsive>
 
           <ResponsiveClassesComponent
-            classNames={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesSmall={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesXS={[_s._, _s.w100PC].join(' ')}
+            classNames={[_s.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesSmall={[_s.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s.d, _s.w100PC].join(' ')}
           >
             <main role='main'>
 
               <ResponsiveClassesComponent
                 classNames={mainBlockClasses}
-                classNamesXS={[_s._, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
+                classNamesXS={[_s.d, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
               >
 
-                <div className={[_s._, _s.w1015PX, _s.z1].join(' ')}>
+                <div className={[_s.d, _s.w1015PX, _s.z1].join(' ')}>
 
                   <Responsive max={BREAKPOINT_EXTRA_SMALL}>
                     <WrappedBundle component={AboutSidebar} componentParams={{ title, items: menuItems }} />
                   </Responsive>
       
-                  <div className={_s._}>
+                  <div className={_s.d}>
                     {children}
                   </div>
                 </div>
diff --git a/app/javascript/gabsocial/layouts/explore_layout.js b/app/javascript/gabsocial/layouts/explore_layout.js
index 1aeab94d..6e98aeac 100644
--- a/app/javascript/gabsocial/layouts/explore_layout.js
+++ b/app/javascript/gabsocial/layouts/explore_layout.js
@@ -55,7 +55,7 @@ class ExploreLayout extends ImmutablePureComponent {
     const { lazyLoaded } = this.state
 
     const pageTitleBlock = (
-      <div className={[_s._, _s.pl15, _s.pb10].join(' ')}>
+      <div className={[_s.d, _s.pl15, _s.pb10].join(' ')}>
         <Heading size='h2'>Popular posts across Gab</Heading>
       </div>
     )
@@ -69,10 +69,10 @@ class ExploreLayout extends ImmutablePureComponent {
         title={title}
       >
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s._, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.w100PC].join(' ')}>
 
-            <div className={[_s._, _s.w100PC, _s.z1].join(' ')}>
-              <div className={[_s._, _s.mt15, _s.px10].join(' ')}>
+            <div className={[_s.d, _s.w100PC, _s.z1].join(' ')}>
+              <div className={[_s.d, _s.mt15, _s.px10].join(' ')}>
                 <WrappedBundle component={SignUpLogInPanel} componentParams={{ isXS: true }} />
               </div>
               {pageTitleBlock}
@@ -83,20 +83,20 @@ class ExploreLayout extends ImmutablePureComponent {
         </Responsive>
 
         <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s._, _s.w100PC, _s.pl15].join(' ')}>
+          <div className={[_s.d, _s.w100PC, _s.pl15].join(' ')}>
 
-            <div className={[_s._, _s.flexRow, _s.w100PC, _s.jcEnd].join(' ')}>
-              <div className={[_s._, _s.w645PX, _s.z1].join(' ')}>  
+            <div className={[_s.d, _s.flexRow, _s.w100PC, _s.jcEnd].join(' ')}>
+              <div className={[_s.d, _s.w645PX, _s.z1].join(' ')}>  
 
-                <div className={_s._}>
+                <div className={_s.d}>
                   {pageTitleBlock}
                   {children}
                 </div>
               </div>
 
-              <div className={[_s._, _s.ml15, _s.w340PX].join(' ')}>
+              <div className={[_s.d, _s.ml15, _s.w340PX].join(' ')}>
                 <Sticky top={73} enabled>
-                  <div className={[_s._, _s.w340PX].join(' ')}>
+                  <div className={[_s.d, _s.w340PX].join(' ')}>
                     <SidebarPanelGroup
                       page='explore'
                       layout={[
diff --git a/app/javascript/gabsocial/layouts/group_layout.js b/app/javascript/gabsocial/layouts/group_layout.js
index d062c31c..4468c584 100644
--- a/app/javascript/gabsocial/layouts/group_layout.js
+++ b/app/javascript/gabsocial/layouts/group_layout.js
@@ -35,13 +35,13 @@ class GroupLayout extends ImmutablePureComponent {
         page='group'
       >
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s._, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.w100PC].join(' ')}>
 
             <GroupHeader group={group} relationships={relationships} isXS>
               <WrappedBundle component={GroupInfoPanel} componentParams={{ group, noPanel: true }} />
             </GroupHeader>
 
-            <div className={[_s._, _s.w100PC, _s.z1].join(' ')}>
+            <div className={[_s.d, _s.w100PC, _s.z1].join(' ')}>
               {children}
             </div>
 
@@ -49,20 +49,20 @@ class GroupLayout extends ImmutablePureComponent {
         </Responsive>
 
         <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s._, _s.w100PC, _s.pl15].join(' ')}>
+          <div className={[_s.d, _s.w100PC, _s.pl15].join(' ')}>
 
             <GroupHeader group={group} relationships={relationships} />
 
-            <div className={[_s._, _s.flexRow, _s.w100PC, _s.jcEnd].join(' ')}>
-              <div className={[_s._, _s.w645PX, _s.z1].join(' ')}>
-                <div className={_s._}>
+            <div className={[_s.d, _s.flexRow, _s.w100PC, _s.jcEnd].join(' ')}>
+              <div className={[_s.d, _s.w645PX, _s.z1].join(' ')}>
+                <div className={_s.d}>
                   {children}
                 </div>
               </div>
 
-              <div className={[_s._, _s.ml15, _s.w340PX].join(' ')}>
+              <div className={[_s.d, _s.ml15, _s.w340PX].join(' ')}>
                 <Sticky top={73} enabled>
-                  <div className={[_s._, _s.w340PX].join(' ')}>
+                  <div className={[_s.d, _s.w340PX].join(' ')}>
                     <SidebarPanelGroup
                       page={`group.${groupId}`}
                       layout={[
diff --git a/app/javascript/gabsocial/layouts/introduction_layout.js b/app/javascript/gabsocial/layouts/introduction_layout.js
index ee605880..6b8901d7 100644
--- a/app/javascript/gabsocial/layouts/introduction_layout.js
+++ b/app/javascript/gabsocial/layouts/introduction_layout.js
@@ -13,15 +13,15 @@ export default class IntroductionLayout extends React.PureComponent {
 
   render() {
     return (
-      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgTertiary].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._, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.w1255PX].join(' ')}>
-              <div className={[_s._, _s.flexRow].join(' ')}>
+        <div className={[_s.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+            <div className={[_s.d, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.w1255PX].join(' ')}>
+              <div className={[_s.d, _s.flexRow].join(' ')}>
 
-                <h1 className={[_s._, _s.mr15].join(' ')}>
-                  <div className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.px10, _s.mr15].join(' ')}>
+                <h1 className={[_s.d, _s.mr15].join(' ')}>
+                  <div className={[_s.d, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.px10, _s.mr15].join(' ')}>
                     <Icon id='logo' className={_s.fillNavigationBrand} />
                   </div>
                 </h1>
@@ -31,12 +31,12 @@ export default class IntroductionLayout extends React.PureComponent {
           </div>
         </div>
 
-        <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
-          <div className={[_s._, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.w100PC].join(' ')}>
+          <div className={[_s.d, _s.w100PC].join(' ')}>
             <main role='main'>
-              <div className={[_s._, _s.aiCenter, _s.py15, _s.px15, _s.mlAuto, _s.mrAuto].join(' ')}>
+              <div className={[_s.d, _s.aiCenter, _s.py15, _s.px15, _s.mlAuto, _s.mrAuto].join(' ')}>
 
-                <div className={[_s._, _s.w645PX, _s.maxW100PC42PX].join(' ')}>
+                <div className={[_s.d, _s.w645PX, _s.maxW100PC42PX].join(' ')}>
                   <Block>
                     <Bundle fetchComponent={Introduction} error={this.renderError}>
                       {Component => (<Component />)}
diff --git a/app/javascript/gabsocial/layouts/layout.js b/app/javascript/gabsocial/layouts/layout.js
index 4cd131a3..5e8dff73 100644
--- a/app/javascript/gabsocial/layouts/layout.js
+++ b/app/javascript/gabsocial/layouts/layout.js
@@ -41,7 +41,7 @@ class Layout extends React.PureComponent {
     } = this.props
 
     const mainBlockClasses = CX({
-      _: 1,
+      d: 1,
       w1015PX: 1,
       flexRow: 1,
       jcEnd: 1,
@@ -50,7 +50,7 @@ class Layout extends React.PureComponent {
     })
 
     return (
-      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <WrappedBundle component={SidebarXS} />
@@ -70,7 +70,7 @@ class Layout extends React.PureComponent {
           <LoggedOutNavigationBar />
         }
 
-        <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.w100PC].join(' ')}>
           {
             !noSidebar &&
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
@@ -91,15 +91,15 @@ class Layout extends React.PureComponent {
           }
 
           <ResponsiveClassesComponent
-            classNames={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesSmall={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesXS={[_s._, _s.w100PC].join(' ')}
+            classNames={[_s.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesSmall={[_s.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s.d, _s.w100PC].join(' ')}
           >
             <main role='main'>
 
               <ResponsiveClassesComponent
                 classNames={mainBlockClasses}
-                classNamesXS={[_s._, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
+                classNamesXS={[_s.d, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
               >
 
                 {
@@ -108,18 +108,18 @@ class Layout extends React.PureComponent {
 
                 {
                   !noRightSidebar &&
-                  <div className={[_s._, _s.w645PX, _s.z1].join(' ')}>
+                  <div className={[_s.d, _s.w645PX, _s.z1].join(' ')}>
 
                     {
                       !!tabs &&
                       <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-                        <div className={[_s._, _s.py15].join(' ')}>
+                        <div className={[_s.d, _s.py15].join(' ')}>
                           <Pills pills={tabs} />
                         </div>
                       </Responsive>
                     }
 
-                    <div className={_s._}>
+                    <div className={_s.d}>
                       {children}
                     </div>
                   </div>
@@ -128,9 +128,9 @@ class Layout extends React.PureComponent {
                 {
                   !noRightSidebar &&
                   <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-                    <div className={[_s._, _s.w340PX, _s.ml15].join(' ')}>
+                    <div className={[_s.d, _s.w340PX, _s.ml15].join(' ')}>
                       <Sticky top={73} enabled>
-                        <div className={[_s._, _s.w340PX].join(' ')}>
+                        <div className={[_s.d, _s.w340PX].join(' ')}>
                           <SidebarPanelGroup layout={layout} page={page} />
                         </div>
                       </Sticky>
diff --git a/app/javascript/gabsocial/layouts/profile_layout.js b/app/javascript/gabsocial/layouts/profile_layout.js
index 9838b189..e8916cfa 100644
--- a/app/javascript/gabsocial/layouts/profile_layout.js
+++ b/app/javascript/gabsocial/layouts/profile_layout.js
@@ -35,14 +35,14 @@ class ProfileLayout extends ImmutablePureComponent {
     } = this.props
 
     const mainContentClasses = CX({
-      _: 1,
+      d: 1,
       width645PX: !noSidebar,
       w1015PX: noSidebar,
       z1: 1,
     })
 
     return (
-      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           {
             !!me &&
@@ -53,12 +53,12 @@ class ProfileLayout extends ImmutablePureComponent {
             <LoggedOutNavigationBar isProfile />
           }
 
-          <main role='main' className={[_s._, _s.w100PC].join(' ')}>
+          <main role='main' className={[_s.d, _s.w100PC].join(' ')}>
 
-            <div className={[_s._, _s.w100PC, _s.flexRow, _s.pb15].join(' ')}>
+            <div className={[_s.d, _s.w100PC, _s.flexRow, _s.pb15].join(' ')}>
 
-              <div className={[_s._, _s.w100PC, _s.flexRow, _s.jcSpaceBetween].join(' ')}>
-                <div className={[_s._, _s.z1, _s.w100PC, _s.aiCenter].join(' ')}>
+              <div className={[_s.d, _s.w100PC, _s.flexRow, _s.jcSpaceBetween].join(' ')}>
+                <div className={[_s.d, _s.z1, _s.w100PC, _s.aiCenter].join(' ')}>
 
                   <ProfileHeader account={account} isXS>
                     <WrappedBundle component={ProfileInfoPanel} componentParams={{ account, noPanel: true }} />
@@ -66,9 +66,9 @@ class ProfileLayout extends ImmutablePureComponent {
                     <WrappedBundle component={ProfileStatsPanel} componentParams={{ account, noPanel: true }} />
                   </ProfileHeader>
 
-                  <div className={[_s._, _s.w100PC, , _s.flexRow, _s.jcEnd, _s.py15].join(' ')}>
-                    <div className={[_s._, _s.w100PC, _s.z1].join(' ')}>
-                      <div className={_s._}>
+                  <div className={[_s.d, _s.w100PC, , _s.flexRow, _s.jcEnd, _s.py15].join(' ')}>
+                    <div className={[_s.d, _s.w100PC, _s.z1].join(' ')}>
+                      <div className={_s.d}>
                         {children}
                       </div>
                     </div>
@@ -98,21 +98,21 @@ class ProfileLayout extends ImmutablePureComponent {
             <LoggedOutNavigationBar isProfile />
           }
 
-          <main role='main' className={[_s._, _s.w100PC].join(' ')}>
+          <main role='main' className={[_s.d, _s.w100PC].join(' ')}>
 
-            <div className={[_s._, _s.w100PC, _s.flexRow, _s.pb15].join(' ')}>
+            <div className={[_s.d, _s.w100PC, _s.flexRow, _s.pb15].join(' ')}>
 
-              <div className={[_s._, _s.w100PC, _s.flexRow, _s.jcSpaceBetween].join(' ')}>
-                <div className={[_s._, _s.z1, _s.w100PC, _s.aiCenter].join(' ')}>
+              <div className={[_s.d, _s.w100PC, _s.flexRow, _s.jcSpaceBetween].join(' ')}>
+                <div className={[_s.d, _s.z1, _s.w100PC, _s.aiCenter].join(' ')}>
 
                   <ProfileHeader account={account} />
 
-                  <div className={[_s._, _s.w1015PX, , _s.flexRow, _s.jcEnd, _s.py15].join(' ')}>
+                  <div className={[_s.d, _s.w1015PX, , _s.flexRow, _s.jcEnd, _s.py15].join(' ')}>
                     {
                       !noSidebar &&
-                      <div className={[_s._, _s.w340PX, _s.mr15].join(' ')}>
+                      <div className={[_s.d, _s.w340PX, _s.mr15].join(' ')}>
                         <Sticky top={63} enabled>
-                          <div className={[_s._, _s.w340PX].join(' ')}>
+                          <div className={[_s.d, _s.w340PX].join(' ')}>
                             <WrappedBundle component={ProfileStatsPanel} componentParams={{ account }} />
                             <WrappedBundle component={ProfileInfoPanel} componentParams={{ account }} />
                             { !unavailable && <WrappedBundle component={MediaGalleryPanel} componentParams={{ account }} /> }
@@ -123,7 +123,7 @@ class ProfileLayout extends ImmutablePureComponent {
                       </div>
                     }
                     <div className={mainContentClasses}>
-                      <div className={_s._}>
+                      <div className={_s.d}>
                         {children}
                       </div>
                     </div>
diff --git a/app/javascript/gabsocial/layouts/settings_layout.js b/app/javascript/gabsocial/layouts/settings_layout.js
index af791b58..1de5c0d1 100644
--- a/app/javascript/gabsocial/layouts/settings_layout.js
+++ b/app/javascript/gabsocial/layouts/settings_layout.js
@@ -21,7 +21,7 @@ class SettingsLayout extends React.PureComponent {
     const { children, title } = this.props
 
     const mainBlockClasses = CX({
-      _: 1,
+      d: 1,
       w1015PX: 1,
       flexRow: 1,
       jcEnd: 1,
@@ -31,7 +31,7 @@ class SettingsLayout extends React.PureComponent {
     })
 
     return (
-      <div className={[_s._, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
+      <div className={[_s.d, _s.w100PC, _s.minH100VH, _s.bgTertiary].join(' ')}>
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <WrappedBundle component={SidebarXS} />
@@ -42,27 +42,27 @@ class SettingsLayout extends React.PureComponent {
           noSearch
         />
 
-        <div className={[_s._, _s.flexRow, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.flexRow, _s.w100PC].join(' ')}>
 
           <Responsive min={BREAKPOINT_EXTRA_SMALL}>
             <SettingsSidebar title='Settings' />
           </Responsive>
 
           <ResponsiveClassesComponent
-            classNames={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesSmall={[_s._, _s.flexShrink1, _s.flexGrow1].join(' ')}
-            classNamesXS={[_s._, _s.w100PC].join(' ')}
+            classNames={[_s.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesSmall={[_s.d, _s.flexShrink1, _s.flexGrow1].join(' ')}
+            classNamesXS={[_s.d, _s.w100PC].join(' ')}
           >
             <main role='main'>
 
               <ResponsiveClassesComponent
                 classNames={mainBlockClasses}
-                classNamesXS={[_s._, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
+                classNamesXS={[_s.d, _s.w1015PX, _s.jcEnd, _s.pb15].join(' ')}
               >
 
-                <div className={[_s._, _s.w1015PX, _s.z1].join(' ')}>
+                <div className={[_s.d, _s.w1015PX, _s.z1].join(' ')}>
 
-                  <div className={_s._}>
+                  <div className={_s.d}>
                     {children}
                   </div>
                 </div>
diff --git a/app/javascript/gabsocial/pages/modal_page.js b/app/javascript/gabsocial/pages/modal_page.js
index 763d2e7d..08cb6171 100644
--- a/app/javascript/gabsocial/pages/modal_page.js
+++ b/app/javascript/gabsocial/pages/modal_page.js
@@ -30,7 +30,7 @@ class ModalPage extends React.PureComponent {
         <PageTitle path={title} />
         
         <Block>
-          <div className={[_s._, _s.py15, _s.px15].join(' ')}>
+          <div className={[_s.d, _s.py15, _s.px15].join(' ')}>
             {children}
           </div>
         </Block>
diff --git a/app/javascript/gabsocial/pages/search_page.js b/app/javascript/gabsocial/pages/search_page.js
index 35d1b5ba..d8f1e7e6 100644
--- a/app/javascript/gabsocial/pages/search_page.js
+++ b/app/javascript/gabsocial/pages/search_page.js
@@ -66,7 +66,7 @@ class SearchPage extends React.PureComponent {
         <PageTitle path={title} />
 
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-          <div className={[_s._, _s.px10].join(' ')}>
+          <div className={[_s.d, _s.px10].join(' ')}>
             <Search />
           </div>
         </Responsive>