From 5d1a40d93668b9db4e7d8d5837fe26514c706947 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Mon, 15 Feb 2021 21:47:56 -0500
Subject: [PATCH] Added CharacterCounter to ComposeDestinationHeader
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Added:
- CharacterCounter to ComposeDestinationHeader
- Styles for stroke colors for CharacterCounter

• Updated:
- CharacterCounter styles, heights to fit in header
---
 .../gabsocial/components/character_counter.js         | 11 ++++++-----
 .../compose/components/compose_destination_header.js  |  9 +++++++++
 app/javascript/styles/global.css                      |  4 ++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/javascript/gabsocial/components/character_counter.js b/app/javascript/gabsocial/components/character_counter.js
index b0b3e9da..414f3e3f 100644
--- a/app/javascript/gabsocial/components/character_counter.js
+++ b/app/javascript/gabsocial/components/character_counter.js
@@ -12,11 +12,12 @@ class CharacterCounter extends React.PureComponent {
   render() {
     const { text, max } = this.props
 
-    const actualRadius = 16
-    const radius = 12
+    const actualRadius = 10
+    const radius = 8
     const circumference = 2 * Math.PI * radius
     const diff = Math.min(length(text), max) / max
     const dashoffset = circumference * (1 - diff)
+    const circleClass = length(text) > max ? _s.strokeError : _s.strokeBrand
 
     return (
       <div className={[_s.d, _s.mr10, _s.jcCenter, _s.aiCenter].join(' ')}>
@@ -31,8 +32,8 @@ class CharacterCounter extends React.PureComponent {
             cy={actualRadius}
             r={radius}
             fill='none'
-            stroke='#e6e6e6'
             strokeWidth='2'
+            className={_s.strokeSecondary}
           />
           <circle
             style={{
@@ -43,9 +44,9 @@ class CharacterCounter extends React.PureComponent {
             cx={actualRadius}
             cy={actualRadius}
             r={radius}
-            strokeWidth='2'
+            strokeWidth='2.25'
             strokeLinecap='round'
-            stroke='#21cf7a'
+            className={circleClass}
           />
         </svg>
       </div>
diff --git a/app/javascript/gabsocial/features/compose/components/compose_destination_header.js b/app/javascript/gabsocial/features/compose/components/compose_destination_header.js
index 3c01326c..523b42fb 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_destination_header.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_destination_header.js
@@ -6,6 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import {
   CX,
   MODAL_COMPOSE,
+  MAX_POST_CHARACTER_COUNT,
   POPOVER_COMPOSE_POST_DESTINATION,
 } from '../../../constants'
 import { openModal } from '../../../actions/modal'
@@ -14,6 +15,7 @@ import Avatar from '../../../components/avatar'
 import Button from '../../../components/button'
 import Icon from '../../../components/icon'
 import Text from '../../../components/text'
+import CharacterCounter from '../../../components/character_counter'
 
 class ComposeDestinationHeader extends ImmutablePureComponent {
 
@@ -38,6 +40,7 @@ class ComposeDestinationHeader extends ImmutablePureComponent {
       composeGroup,
       composeGroupId,
       formLocation,
+      text,
     } = this.props
 
     const isIntroduction = formLocation === 'introduction'
@@ -85,6 +88,10 @@ class ComposeDestinationHeader extends ImmutablePureComponent {
             </div>
           }
         </div>
+        {
+          !!text &&
+          <CharacterCounter max={MAX_POST_CHARACTER_COUNT} text={text} />
+        }
         {
           !isModal && !isIntroduction &&
           <Button
@@ -94,6 +101,7 @@ class ComposeDestinationHeader extends ImmutablePureComponent {
             color='tertiary'
             icon='fullscreen'
             onClick={this.handleOnExpand}
+            className={_s.ml10}
           />
         }
       </div>
@@ -106,6 +114,7 @@ const mapStateToProps = (state) => {
 
   return {
     composeGroupId,
+    text: state.getIn(['compose', 'text']),
     isReply: !!state.getIn(['compose', 'in_reply_to']),
     isEdit: state.getIn(['compose', 'id']) !== null,
     composeGroup: state.getIn(['groups', composeGroupId]),
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index e816a34c..88f4d5ff 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -1137,6 +1137,10 @@ pre {
   color: var(--navigation_brand);
 }
 
+.strokeBrand { stroke: var(--color_brand); }
+.strokeSecondary { stroke: var(--solid_color_secondary); }
+.strokeError { stroke: var(--color_red); }
+
 .navigationUnderlineActive:after {
   content: '';
   display: block;