[CORL-1215] Install Style Tweaks (#3046)

* fix logic around repeat posts with or without media embeds: (#3042)

* fix: restore ReportCommentEvent (#3037)

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

* fix: fixed issue with graphiql (#3043)

* README.md Update (#3045)

* chore: update README.md

* fix: removed README from doctoc

* fix: replaced emoji codes with emjoi

* fix: removed emoji's due to browser rendering issues

* fix: fixed bugs with install styles

Co-authored-by: Tessa Thornton <tessathornton@gmail.com>
Co-authored-by: Vinh <vinh@vinh.tech>

.dockerignore

@@ -27,4 +27,3 @@ yarn.lock
 dist
 *.css.d.ts
 __generated__
-README.md.orig

.gitignore

@@ -20,5 +20,4 @@ yarn.lock
 dist
 *.css.d.ts
 __generated__
-README.md.orig
 persisted-queries.json

README.md

@@ -1,39 +1,52 @@
-# Coral ![CircleCI](https://img.shields.io/circleci/project/github/coralproject/talk.svg)
+<p align="center">
+  <a href="https://coralproject.net" target="_blank"><img width="250" src="https://docs.coralproject.net/coral/images/coralproject_by_voxmedia.svg" alt="Coral by Vox Media" /></a>
+</p>
 
-Online comments are broken. Our open-source commenting platform, Coral, rethinks
-how moderation, comment display, and conversation function, creating the
-opportunity for safer, smarter discussions around your work.
-[Read more about Coral here](https://coralproject.net/talk).
+<p align="center">
+  A better commenting experience from <a href="https://product.voxmedia.com/" target="_blank">Vox Media</a>.
+</p>
 
-Built with <3 by the Coral team, a part of [Vox Media](https://product.voxmedia.com/).
+<p align="center">
+  <a href="https://circleci.com/gh/coralproject/talk" target="_blank"><img src="https://img.shields.io/circleci/build/gh/coralproject/talk?style=flat-square" alt="CircleCI" /></a>
+  <a href="https://hub.docker.com/r/coralproject/talk" target="_blank"><img src="https://img.shields.io/docker/v/coralproject/talk?label=docker%20hub&sort=semver&style=flat-square" alt="Docker Image Version" /></a>
+  <a href="https://hub.docker.com/r/coralproject/talk" target="_blank"><img src="https://img.shields.io/docker/image-size/coralproject/talk?label=docker%20image%20size&sort=semver&style=flat-square" alt="Docker Image Size" /></a>
+  <a href="https://twitter.com/coralproject" target="_blank"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/coralproject?style=flat-square"></a>
+</p>
 
-Preview Coral easily by running it via a Heroku App:
+## Description
 
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/coralproject/talk)
+Online comments are broken. Our open-source commenting platform,
+[Coral](https://coralproject.net), rethinks how moderation, comment display, and
+conversation function, creating the opportunity for safer, smarter discussions
+around your work.
 
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-## Table of Contents
+We offer hosting and support packages for Coral, as well as exclusive,
+customer-only features. [Contact us](https://coralproject.net/pricing/) for more
+information or [sign up for a webinar](https://coralproject.net).
 
-- [Documentation](#documentation)
-- [Pre-Launch Guide](#pre-launch-guide)
-- [More Resources](#more-resources)
-- [License](#license)
+## Documentation
 
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+If you're new to Coral, the [Coral documentation](https://docs.coralproject.net/)
+is a great place to start running and developing with Coral.
 
-## Documentation
+You’ve installed Coral, and you’re preparing to launch it on your site. The real
+community work starts now, before you go live. You have a unique opportunity
+pre-launch to set your community up for success. Read our
+[Community Guides](https://guides.coralproject.net/start-here/) to learn more.
 
-You can get started with Coral using our [Documentation](https://docs.coralproject.net/talk/).
+## Support
 
-## Pre-Launch Guide
+We can help you set up Coral, migrate your comments from another system,
+integrate your registration platform, pair with your programmers, and help you
+with bespoke installs. To learn more, [contact us](https://coralproject.net/pricing/).
 
-You’ve installed Coral on your server, and you’re preparing to launch it on your site. The real community work starts now, before you go live. You have a unique opportunity pre-launch to set your community up for success. Read our [Community Guides](https://guides.coralproject.net/start-here/) to learn more.
+## Contributing
 
-## More Resources
+Coral is a Apache-2.0 licensed open-source project built with <3 by the Coral
+team, a part of [Vox Media](https://product.voxmedia.com/).
 
-- [Learn more about Coral and sign up for a webinar](https://coralproject.net/)
+If you are interested in contributing to Coral, check out our [Contributor's Guide](CONTRIBUTING.md).
 
 ## License
 
-Coral is released under the [Apache License, v2.0](/LICENSE).
+Coral is [Apache-2.0 licensed](LICENSE).

package.json

@@ -29,7 +29,7 @@
     "migration:create": "ts-node --transpile-only ./scripts/migration/create.ts",
     "docs:events": "ts-node ./scripts/generateEventDocs.ts ./src/core/client/stream/events.ts ./CLIENT_EVENTS.md",
     "docs:css-variables": "ts-node ./scripts/generateCSSVariablesDocs.ts ./src/core/client/ui/theme/streamVariables.ts ./CSS_VARIABLES.md",
-    "doctoc": "doctoc --maxlevel=3 --title '## Table of Contents' README.md CLIENT_EVENTS.md CONTRIBUTING.md WEBHOOKS.md EXTERNAL_MODERATION_PHASES.md",
+    "doctoc": "doctoc --maxlevel=3 --title '## Table of Contents' CLIENT_EVENTS.md CONTRIBUTING.md WEBHOOKS.md EXTERNAL_MODERATION_PHASES.md",
     "generate": "npm-run-all generate:css-types generate:schema generate:relay",
     "generate-persist": "npm-run-all generate:css-types generate:schema generate:relay-persist",
     "generate:css-types": "tcm src/core/client/",
@@ -101,7 +101,7 @@
     "graphql-extensions": "^0.11.0",
     "graphql-fields": "2.0.3",
     "graphql-import": "^0.7.1",
-    "graphql-playground-html": "^1.6.22",
+    "graphql-playground-html": "1.6.13",
     "graphql-redis-subscriptions": "^2.2.1",
     "graphql-subscriptions": "^1.1.0",
     "graphql-tools": "^4.0.7",
@@ -409,6 +409,11 @@
       "Newer versions has problems with radio and checkbox fields.",
       "Update when the following issue is resolved:",
       "https://github.com/final-form/react-final-form/issues/683"
+    ],
+    "graphql-playground-html@1.6.13": [
+      "A template was broken in a release.",
+      "Update when the following issue is resolved:",
+      "https://github.com/prisma-labs/graphql-playground/pull/1238"
     ]
   },
   "husky": {
@@ -429,7 +434,7 @@
     "{src/core/client/ui/theme/sharedVariables.ts,src/core/client/ui/theme/streamVariables.ts,scripts/generateCSSVariablesDocs.ts,CSS_VARIABLES.md}": [
       "npm run docs:css-variables -- --verify"
     ],
-    "{README,CLIENT_EVENTS,CONTRIBUTING,WEBHOOKS,EXTERNAL_MODERATION_PHASES}.md": [
+    "{CLIENT_EVENTS,CONTRIBUTING,WEBHOOKS,EXTERNAL_MODERATION_PHASES}.md": [
       "npm run doctoc"
     ]
   },
@@ -455,4 +460,4 @@
     "IE 11",
     "not dead"
   ]
-}
+}

src/core/client/install/App/App.css

@@ -7,7 +7,7 @@
     -webkit-font-smoothing: antialiased;
     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;
-    background-color: var(--palette-grey-300);
+    background-color: var(--palette-background-body);
     color: var(--palette-text-500);
   }
   input::-ms-clear, input::-ms-reveal {

src/core/client/install/App/Header.css

@@ -3,18 +3,16 @@
 }
 
 .headline {
-  font-size: 1.2rem;
+  font-weight: var(--font-weight-primary-regular);
 }
 
 .headlineMain {
-  font-weight: bold;
-  font-size: 1.5rem;
-}
-
-.subHeadline {
-  font-size: 1.5rem;
+  font-size: var(--font-size-7);
+  line-height: var(--line-height-7);
 }
 
 .subHeadlineMain {
-  font-size: 2rem;
+  font-size: var(--font-size-8);
+  line-height: var(--line-height-8);
+  font-weight: var(--font-weight-primary-bold);
 }

src/core/client/install/App/Header.tsx

@@ -19,17 +19,14 @@ const Header: FunctionComponent<HeaderProps> = ({ main }) => {
       className={styles.root}
     >
       <Typography
-        className={cn(styles.headline, {
-          [styles.headlineMain]: main,
-        })}
+        className={cn(styles.headline, { [styles.headlineMain]: main })}
+        variant="heading2"
       >
         Coral by Vox Media
       </Typography>
       <Localized id="install-header-title">
         <Typography
-          className={cn(styles.subHeadline, {
-            [styles.subHeadlineMain]: main,
-          })}
+          className={cn({ [styles.subHeadlineMain]: main })}
           variant="heading1"
         >
           Coral Installation Wizard

src/core/client/install/App/Wizard.css

@@ -9,5 +9,5 @@
 }
 
 .stepBar {
-  padding: var(--mini-unit) 0 calc(6 * var(--mini-unit));
+  padding: var(--mini-unit) 0 calc(8 * var(--mini-unit));
 }

src/core/client/install/App/steps/AddOrganizationStep.tsx

@@ -66,7 +66,7 @@ class AddOrganizationStep extends React.Component<Props> {
                 </Typography>
               </Localized>
               <Localized id="install-addOrganization-description">
-                <Typography variant="bodyCopy" align="center">
+                <Typography variant="bodyCopy">
                   Please tell us the name of your organization. This will appear
                   in emails when inviting new team members.
                 </Typography>

src/core/client/install/App/steps/FinalStep.tsx

@@ -1,5 +1,4 @@
 import { Localized } from "@fluent/react/compat";
-import { Link } from "found";
 import React, { Component } from "react";
 
 import { urls } from "coral-framework/helpers";
@@ -9,14 +8,10 @@ class FinalStep extends Component {
   public render() {
     return (
       <Flex direction="column" justifyContent="center" itemGutter="double">
-        <Localized
-          id="install-finalStep-description"
-          $url={<Link to={urls.admin.moderate}>{urls.admin.moderate}</Link>}
-        >
+        <Localized id="install-finalStep-description">
           <Typography variant="bodyCopy">
-            Thanks for installing Coral! We sent an email to verify your email
-            address. While you finish setting up the account, you can start
-            engaging with your readers now.
+            Continue to Coral Admin to complete the setup of your organization
+            and site.
           </Typography>
         </Localized>
         <Flex direction="row" itemGutter justifyContent="center">

src/core/client/install/App/steps/PermittedDomainsStep.tsx

@@ -68,7 +68,7 @@ class PermittedDomainsStep extends Component<Props> {
                 </Typography>
               </Localized>
               <Localized id="install-permittedDomains-description-with-scheme">
-                <Typography variant="bodyCopy" align="center">
+                <Typography variant="bodyCopy">
                   Enter the domains you would like to permit for Coral, e.g.
                   your local, staging and production environments including the
                   scheme (ex. http://localhost:3000, https://staging.domain.com,

src/core/client/install/App/steps/SelectLanguageStep.tsx

@@ -57,7 +57,7 @@ const SelectLanguageStep: FunctionComponent<Props> = (props) => {
             </Localized>
 
             <Localized id="install-selectLanguage-description">
-              <Typography variant="bodyCopy" align="center">
+              <Typography variant="bodyCopy">
                 Choose the language to be used during the installation process.
                 This will also be the default language for your Coral community.
               </Typography>

src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentDisagreeMutation.ts

@@ -6,39 +6,60 @@ import {
   createMutation,
   MutationInput,
 } from "coral-framework/lib/relay";
+import { ReportCommentEvent } from "coral-stream/events";
 
 import { CreateCommentDisagreeMutation as MutationTypes } from "coral-stream/__generated__/CreateCommentDisagreeMutation.graphql";
 
 let clientMutationId = 0;
 
 const CreateCommentDisagreeMutation = createMutation(
   "createCommentDisagree",
-  (environment: Environment, input: MutationInput<MutationTypes>) =>
-    commitMutationPromiseNormalized<MutationTypes>(environment, {
-      mutation: graphql`
-        mutation CreateCommentDisagreeMutation(
-          $input: CreateCommentDontAgreeInput!
-        ) {
-          createCommentDontAgree(input: $input) {
-            comment {
-              id
-              viewerActionPresence {
-                dontAgree
+  (
+    environment: Environment,
+    input: MutationInput<MutationTypes>,
+    { eventEmitter }
+  ) => {
+    const reportCommentEvent = ReportCommentEvent.begin(eventEmitter, {
+      reason: "DONT_AGREE",
+      additionalDetails: input.additionalDetails || undefined,
+      commentID: input.commentID,
+    });
+    try {
+      const result = commitMutationPromiseNormalized<MutationTypes>(
+        environment,
+        {
+          mutation: graphql`
+            mutation CreateCommentDisagreeMutation(
+              $input: CreateCommentDontAgreeInput!
+            ) {
+              createCommentDontAgree(input: $input) {
+                comment {
+                  id
+                  viewerActionPresence {
+                    dontAgree
+                  }
+                }
+                clientMutationId
               }
             }
-            clientMutationId
-          }
+          `,
+          variables: {
+            input: {
+              commentID: input.commentID,
+              commentRevisionID: input.commentRevisionID,
+              additionalDetails: input.additionalDetails,
+              clientMutationId: (clientMutationId++).toString(),
+            },
+          },
         }
-      `,
-      variables: {
-        input: {
-          commentID: input.commentID,
-          commentRevisionID: input.commentRevisionID,
-          additionalDetails: input.additionalDetails,
-          clientMutationId: (clientMutationId++).toString(),
-        },
-      },
-    })
+      );
+      reportCommentEvent.success();
+      return result;
+    } catch (error) {
+      reportCommentEvent.error({ message: error.message, code: error.code });
+      throw error;
+    }
+  }
 );
 
 export default CreateCommentDisagreeMutation;