[CORL-1046] Slack Helper Text Fix (#2959)

* fix: moved helper text

* chore: version bump

* chore: update description to match github

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [
@@ -19,7 +19,7 @@
   "contributors": [
     "https://github.com/coralproject/talk/graphs/contributors"
   ],
-  "description": "A better commenting experience from Mozilla, The Washington Post, and The New York Times.",
+  "description": "A better commenting experience from Vox Media.",
   "scripts": {
     "build": "NODE_ENV=production npm-run-all generate-persist --parallel build:client build:server",
     "build:development": "NODE_ENV=development npm-run-all generate --parallel build:client build:server",

src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.css

@@ -11,6 +11,11 @@
   padding-bottom: var(--v2-spacing-2);
 }
 
+.triggerHelp {
+  padding-left: 26px;
+  margin: 0;
+}
+
 .button {
   padding-top: var(--v2-spacing-1);
   padding-bottom: var(--v2-spacing-1);

src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx

@@ -13,6 +13,7 @@ import {
   Flex,
   FormField,
   FormFieldDescription,
+  HelperText,
   Label,
   TextField,
 } from "coral-ui/components/v2";
@@ -159,16 +160,23 @@ const SlackChannel: FunctionComponent<Props> = ({
                   parse={parseBool}
                 >
                   {({ input }) => (
-                    <CheckBox
-                      id={`configure-slack-channel-triggers-allComments-${input.name}`}
-                      disabled={disabled || !channelEnabled}
-                      className={styles.trigger}
-                      {...input}
-                    >
-                      <Localized id="configure-slack-channel-triggers-allComments">
-                        All Comments
+                    <div className={styles.trigger}>
+                      <CheckBox
+                        id={`configure-slack-channel-triggers-allComments-${input.name}`}
+                        disabled={disabled || !channelEnabled}
+                        {...input}
+                      >
+                        <Localized id="configure-slack-channel-triggers-allComments">
+                          All Comments
+                        </Localized>
+                      </CheckBox>
+                      <Localized id="configure-slack-notRecommended">
+                        <HelperText className={styles.triggerHelp}>
+                          Not recommended for sites with more than 10K comments
+                          per month.
+                        </HelperText>
                       </Localized>
-                    </CheckBox>
+                    </div>
                   )}
                 </Field>
                 <Field

src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx

@@ -96,8 +96,7 @@ const SlackConfigContainer: FunctionComponent<Props> = ({ form, settings }) => {
           <FormFieldDescription>
             Automatically send comments from Coral moderation queues to Slack
             channels. You will need Slack admin access to set this up. For steps
-            on how to create a Slack App see our documentation. Not recommended
-            for sites with more than 10K comments per month.
+            on how to create a Slack App see our documentation.
           </FormFieldDescription>
         </Localized>
         <Button iconLeft onClick={onAddChannel}>

src/locales/en-US/admin.ftl

@@ -763,6 +763,7 @@ configure-slack-description =
   Automatically send comments from Coral moderation queues to Slack
   channels. You will need Slack admin access to set this up. For
   steps on how to create a Slack App see our <externalLink>documentation</externalLink>.
+configure-slack-notRecommended =
   Not recommended for sites with more than 10K comments per month.
 configure-slack-addChannel = Add Channel
 

src/locales/pt-BR/admin.ftl

@@ -652,8 +652,9 @@ configure-slack-header-title = Integração com o Slack
 configure-slack-description =
   Encia automaticamente os comentários da fila de moderação do Coral para canais do Slack.
   Você precisa de acesso admin do slack para realizar esta configuração. Para as etapas de
-  como criar uma app no Slack veja nossa <externalLink>documentação</externalLink>. Não
-  recomendado para sites com mais de 10 mil comentários por mês.
+  como criar uma app no Slack veja nossa <externalLink>documentação</externalLink>.
+configure-slack-notRecommended =
+  Não recomendado para sites com mais de 10 mil comentários por mês.
 configure-slack-addChannel = Adicionar Canal
 
 configure-slack-channel-defaultName = Novo canal