Progress

app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js

@@ -17,7 +17,7 @@ export default class CharacterCounter extends PureComponent {
     const dashoffset = circumference * (1 - diff)
 
     return (
-      <div className={[_s.default, _s.marginRight10PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
+      <div className={[_s.default, _s.mr10, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
         <svg width={actualRadius * 2} height={actualRadius * 2} viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}>
           <circle fill='none' cx={actualRadius} cy={actualRadius} r={radius} fill="none" stroke="#e6e6e6" strokeWidth="2" />
           <circle style={{

app/javascript/gabsocial/features/compose/components/compose_extra_button.js

@@ -39,8 +39,8 @@ export default class ComposeExtraButton extends PureComponent {
 
     const containerClasses = cx({
       default: 1,
-      marginRight10PX: !small,
-      marginRight2PX: small,
+      mr10: !small,
+      mr2: small,
     })
 
     const btnClasses = cx({
@@ -52,15 +52,15 @@ export default class ComposeExtraButton extends PureComponent {
       backgroundSubtle: !hovering && !active,
       backgroundSubtle2: hovering && !active,
       backgroundColorBrandLight: active,
-      paddingVertical10PX: !small,
-      paddingHorizontal10PX: !small,
-      paddingVertical5PX: small,
-      paddingHorizontal5PX: small,
+      py10: !small,
+      px10: !small,
+      py5: small,
+      px5: small,
     })
 
     const titleClasses = cx({
       default: 1,
-      marginLeft5PX: 1,
+      ml5: 1,
       text: 1,
       lineHeight15: 1,
       fontSize12PX: 1,

app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js

@@ -243,26 +243,26 @@ class ComposeForm extends ImmutablePureComponent {
       flexRow: shouldCondense,
       radiusSmall: shouldCondense,
       backgroundSubtle: shouldCondense,
-      paddingHorizontal5PX: shouldCondense,
+      px5: shouldCondense,
     })
 
     const actionsContainerClasses = cx({
       default: 1,
       flexRow: 1,
       alignItemsCenter: 1,
-      marginTop10PX: !shouldCondense,
+      mt10: !shouldCondense,
     })
 
     const avatarContainerClasses = cx({
       default: 1,
-      marginRight10PX: 1,
-      marginTop5PX: shouldCondense,
+      mr10: 1,
+      mt5: shouldCondense,
     })
 
     const contentWarningClasses = cx({
       default: 1,
-      paddingTop5PX: 1,
-      paddingBottom10PX: 1,
+      pt5: 1,
+      pb10: 1,
       borderBottom1PX: 1,
       borderColorSecondary: 1,
       displayNone: !spoiler
@@ -355,7 +355,7 @@ class ComposeForm extends ImmutablePureComponent {
             {
               !shouldCondense &&
               <Button
-                className={[_s.fontSize15PX, _s.paddingHorizontal15PX].join(' ')}
+                className={[_s.fontSize15PX, _s.px15].join(' ')}
                 onClick={this.handleSubmit}
                 disabled={disabledButton}
               >

app/javascript/gabsocial/features/compose/components/poll_form.js

@@ -68,17 +68,17 @@ class PollFormOption extends ImmutablePureComponent {
 
     const toggleClasses = cx({
       default: 1,
-      paddingHorizontal10PX: 1,
-      paddingVertical10PX: 1,
+      px10: 1,
+      py10: 1,
       borderColorSecondary: 1,
       border1PX: 1,
       outlineNone: 1,
-      marginRight10PX: 1,
+      mr10: 1,
       circle: !isPollMultiple,
     })
 
     return (
-      <li className={[_s.default, _s.flexRow, _s.marginBottom10PX].join(' ')}>
+      <li className={[_s.default, _s.flexRow, _s.mb10].join(' ')}>
         <label className={[_s.default, _s.flexRow, _s.flexGrow1, _s.alignItemsCenter].join(' ')}>
           <span
             className={toggleClasses}
@@ -106,7 +106,7 @@ class PollFormOption extends ImmutablePureComponent {
             narrow
             circle
             backgroundColor='none'
-            className={[_s.marginLeft5PX, _s.justifyContentCenter].join(' ')}
+            className={[_s.ml5, _s.justifyContentCenter].join(' ')}
             icon='close'
             iconWidth='8px'
             iconHeight='8px'
@@ -167,7 +167,7 @@ class PollForm extends ImmutablePureComponent {
     if (!options) return null
 
     return (
-      <div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
+      <div className={[_s.default, _s.px10, _s.py10, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
         <ul className={[_s.default, _s.listStyleNone].join(' ')}>
           {
             options.map((title, i) => (
@@ -192,12 +192,12 @@ class PollForm extends ImmutablePureComponent {
                 outline
                 backgroundColor='none'
                 color='brand'
-                className={[_s.alignItemsCenter, _s.marginRight10PX].join(' ')}
+                className={[_s.alignItemsCenter, _s.mr10].join(' ')}
                 onClick={this.handleAddOption}
                 icon='add'
                 iconWidth='14px'
                 iconHeight='14px'
-                iconClassName={[_s.fillColorBrand, _s.marginRight5PX].join(' ')}
+                iconClassName={[_s.fillColorBrand, _s.mr5].join(' ')}
               >
                 <Text color='brand'>
                   {intl.formatMessage(messages.add_option)}