Progress

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

@@ -1,23 +1,36 @@
-import { length } from 'stringz';
-import classNames from 'classnames';
+import { length } from 'stringz'
 
 export default class CharacterCounter extends PureComponent {
 
   static propTypes = {
     text: PropTypes.string.isRequired,
     max: PropTypes.number.isRequired,
-  };
+  }
 
   render () {
-    const diff = this.props.max - length(this.props.text);
-
-    const classes = classNames('character-counter', {
-      'character-counter--over': (diff < 0),
-    });
+    const radius = 12
+    const circumference = 2 * Math.PI * radius
+    const diff = length(this.props.text) / this.props.max
+    const dashoffset = circumference * (1 - diff)
 
     return (
-      <div className='character-counter__wrapper'>
-        <span className={classes}>{diff}</span>
+      <div className={[styles.default, styles.marginRight10PX, styles.justifyContentCenter, styles.alignItemsCenter].join(' ')}>
+        <svg width="32" height="32" viewBox="0 0 32 32">
+          <circle fill='none' cx="16" cy="16" r="12" fill="none" stroke="#e6e6e6" stroke-width="2" />
+          <circle style={{
+              // transform: 'rotate(-90deg)',
+              strokeDashoffset: dashoffset,
+              strokeDasharray: circumference,
+            }}
+            fill='none'
+            cx="16"
+            cy="16"
+            r="12"
+            strokeWidth="2"
+            strokeLinecap='round'
+            stroke='#21cf7a'
+          />
+        </svg>
       </div>
     )
   }

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

@@ -59,7 +59,7 @@ export default class ComposeExtraButton extends PureComponent {
           onMouseEnter={() => this.handleOnMouseEnter()}
           onMouseLeave={() => this.handleOnMouseLeave()}
         >
-          <Icon icon={icon} width='18px' height='18px' />
+          <Icon id={icon} width='18px' height='18px' className={styles.fillColorSubtle} />
           <span className={titleClasses}>
             {title}
           </span>

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

@@ -299,6 +299,7 @@ class ComposeForm extends ImmutablePureComponent {
             </div>
             <CharacterCounter max={maxPostCharacterCount} text={text} />
             <Button
+              className={[styles.fontSize15PX, styles.paddingHorizontal15PX].join(' ')}
               text={intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
               onClick={this.handleSubmit}
               disabled={disabledButton}

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

@@ -54,7 +54,7 @@ class PollButton extends PureComponent {
         title={intl.formatMessage(active ? messages.remove_poll : messages.title)}
         disabled={disabled}
         onClick={this.handleClick}
-        icon='tasks'
+        icon='poll'
       />
     )
   }

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

@@ -65,7 +65,7 @@ class UploadButton extends ImmutablePureComponent {
         title={intl.formatMessage(messages.title)}
         disabled={disabled}
         onClick={this.handleClick}
-        icon='upload'
+        icon='media'
       >
         <label>
           <span className={styles.displayNone}>{intl.formatMessage(messages.upload)}</span>