From 9b39ed9df904590998ec31e9d59cbc5f5ffb7f17 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@vinh.tech>
Date: Thu, 23 Jul 2020 19:15:00 +0200
Subject: [PATCH] fix: various ui fixes

---
 src/core/client/stream/classes.ts             |  7 +++++++
 .../common/UserBox/UserBoxAuthenticated.css   |  2 +-
 .../common/UserBox/UserBoxAuthenticated.tsx   |  6 ++++--
 .../stream/tabs/Comments/Comment/Comment.tsx  |  1 +
 .../PermalinkButton/PermalinkButton.tsx       |  2 ++
 .../Comment/ReactionButton/ReactionButton.tsx | 21 +++++++++----------
 .../ReplyCommentForm/ReplyCommentForm.css     | 15 -------------
 .../Comment/ReplyCommentForm/ReplyTo.css      |  4 ++--
 .../Comment/ReportFlow/ReportButton.tsx       |  1 +
 .../Comments/Comment/ShowConversationLink.css |  6 +++---
 .../Comments/Comment/ShowConversationLink.tsx |  1 +
 .../tabs/Comments/Comment/TopBarLeft.tsx      |  2 +-
 .../client/stream/tabs/Comments/RTE/RTE.css   |  2 --
 .../client/stream/tabs/Comments/RTE/RTE.tsx   |  2 +-
 .../Comments/ReplyList/ReplyListContainer.tsx |  2 +-
 .../Stream/FeaturedCommentTooltip.tsx         |  2 +-
 .../tabs/Comments/Stream/StreamContainer.tsx  |  3 +++
 .../ChangeEmail/ChangeEmailContainer.css      |  5 +++++
 .../comments/permalink/permalinkView.spec.tsx |  1 +
 .../client/ui/components/v2/Button/Button.tsx |  1 +
 .../components/v2/Tooltip/TooltipButton.tsx   | 15 +++++++------
 .../client/ui/components/v3/Button/Button.tsx |  1 +
 22 files changed, 56 insertions(+), 46 deletions(-)
 delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css

diff --git a/src/core/client/stream/classes.ts b/src/core/client/stream/classes.ts
index ab24d3aadf5..b11153a0537 100644
--- a/src/core/client/stream/classes.ts
+++ b/src/core/client/stream/classes.ts
@@ -277,6 +277,12 @@ const CLASSES = {
      */
     $root: "coral coral-comment",
 
+    /**
+     * highlight is attached to the comment container if the single
+     * conversation view is shown for this comment.
+     */
+    highlight: "coral coral-comment-highlight",
+
     /**
      * reacted signifies the number of reactions of the comment.
      * The no of reactions is appended: e.g. `coral-reacted-1`.
@@ -614,6 +620,7 @@ const CLASSES = {
     logoutButton: "coral coral-viewerBox-logoutButton",
     signInButton: "coral coral-viewerBox-signInButton",
     registerButton: "coral coral-viewerBox-registerButton",
+    username: "coral coral-viewerBox-username",
   },
 
   /**
diff --git a/src/core/client/stream/common/UserBox/UserBoxAuthenticated.css b/src/core/client/stream/common/UserBox/UserBoxAuthenticated.css
index 260a3e689eb..cc8abd530a2 100644
--- a/src/core/client/stream/common/UserBox/UserBoxAuthenticated.css
+++ b/src/core/client/stream/common/UserBox/UserBoxAuthenticated.css
@@ -17,7 +17,7 @@
   font-family: var(--font-family-secondary);
   font-weight: var(--font-weight-secondary-bold);
   font-size: var(--font-size-4);
-  line-height: var(--line-height-4);
+  line-height: var(--line-height-3);
 
   color: var(--palette-text-900);
 
diff --git a/src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx b/src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx
index f3dd4396325..4484db21346 100644
--- a/src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/common/UserBox/UserBoxAuthenticated.tsx
@@ -18,7 +18,9 @@ const UserBoxAuthenticated: FunctionComponent<UserBoxAuthenticatedProps> = (
   props
 ) => {
   const Username = () => (
-    <div className={styles.username}>{props.username}</div>
+    <div className={cn(CLASSES.viewerBox.username, styles.username)}>
+      {props.username}
+    </div>
   );
 
   return (
@@ -26,7 +28,7 @@ const UserBoxAuthenticated: FunctionComponent<UserBoxAuthenticatedProps> = (
       <Localized id="general-userBoxAuthenticated-signedIn">
         <div className={styles.text}>Signed in as</div>
       </Localized>
-      <Flex alignItems="center" wrap>
+      <Flex alignItems="flex-end" wrap>
         <Username />
         {props.showLogoutButton && (
           <Localized
diff --git a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx
index 0eb316adf83..298f8c655e5 100644
--- a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx
@@ -34,6 +34,7 @@ const Comment: FunctionComponent<CommentProps> = (props) => {
       size="half"
       className={cn(styles.root, {
         [styles.highlight]: props.highlight,
+        [CLASSES.comment.highlight]: props.highlight,
       })}
     >
       <Flex
diff --git a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx
index bd302bd3273..7359b71b45c 100644
--- a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.tsx
@@ -1,6 +1,7 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
+import CLASSES from "coral-stream/classes";
 import {
   ClickOutside,
   Flex,
@@ -62,6 +63,7 @@ const Permalink: FunctionComponent<PermalinkProps> = ({
               fontSize="small"
               fontWeight="semiBold"
               paddingSize="extraSmall"
+              className={CLASSES.comment.actionBar.shareButton}
             >
               <Flex alignItems="center" container="span">
                 <Icon className={styles.icon}>share</Icon>
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx
index b772319240e..df0994c1369 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx
@@ -37,8 +37,13 @@ function render(props: ReactionButtonProps) {
     <Button
       onClick={onClick}
       disabled={readOnly}
-      className={cn({ [styles.readOnly]: readOnly }, className, styles.button)}
+      className={cn(
+        { [styles.readOnly]: readOnly, [styles.reacted]: reacted },
+        className,
+        styles.button
+      )}
       aria-label={reacted ? labelActive : label}
+      active={Boolean(reacted)}
       data-testid={"comment-reaction-button"}
       variant="flat"
       color="secondary"
@@ -50,13 +55,13 @@ function render(props: ReactionButtonProps) {
         {props.isQA ? (
           <Icon className={styles.icon}>arrow_upward</Icon>
         ) : (
-          <Icon className={cn(styles.icon, { [styles.reacted]: reacted })}>
+          <Icon className={styles.icon}>
             {reacted ? (iconActive ? iconActive : icon) : icon}
           </Icon>
         )}
         <MatchMedia gtWidth="xs">
           {props.isQA ? (
-            <span className={reacted ? styles.reacted : ""}>
+            <span>
               {reacted ? (
                 <Localized id="qa-reaction-voted">Voted</Localized>
               ) : (
@@ -64,17 +69,11 @@ function render(props: ReactionButtonProps) {
               )}
             </span>
           ) : (
-            <span className={reacted ? styles.reacted : ""}>
-              {reacted ? labelActive : label}
-            </span>
+            <span>{reacted ? labelActive : label}</span>
           )}
         </MatchMedia>
         {!!totalReactions && (
-          <span
-            className={cn(styles.totalReactions, { [styles.reacted]: reacted })}
-          >
-            {totalReactions}
-          </span>
+          <span className={styles.totalReactions}>{totalReactions}</span>
         )}
       </Flex>
     </Button>
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css
deleted file mode 100644
index 1bd06c88642..00000000000
--- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css
+++ /dev/null
@@ -1,15 +0,0 @@
-$commentsBorder: var(--palette-grey-300);
-
-.rteContent {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-}
-
-.warnIcon {
-  color: var(--palette-text-500);
-}
-
-.commentFormBox {
-  border: 1px solid $commentsBorder;
-  border-radius: var(--round-corners);
-}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.css b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.css
index 819efbf362c..d7ed69565b1 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.css
+++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.css
@@ -11,8 +11,8 @@ $commentsReplyToBorderColor: var(--palette-grey-500);
   background-color: $commentsReplyToBackground;
   color: $commentsReplyToColor;
 
-  border-top-left-radius: var(--round-corners);
-  border-top-right-radius: var(--round-corners);
+  border-top-left-radius: calc(var(--round-corners) - 1px);
+  border-top-right-radius: calc(var(--round-corners) - 1px);
 }
 
 .text {
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx
index 2a0cad51521..22a5ac1b2ee 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx
@@ -76,6 +76,7 @@ const ReportButton: FunctionComponent<Props> = ({
     <Button
       className={cn(CLASSES.comment.actionBar.reportButton)}
       variant={open ? "filled" : "flat"}
+      active={Boolean(open)}
       color="secondary"
       fontSize="small"
       fontWeight="semiBold"
diff --git a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css
index e2cf2f59476..ca67cdc19ff 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css
+++ b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css
@@ -3,6 +3,9 @@ $commentsConversationLinkColorHovered: var(--palette-primary-700);
 $commentsConversationLinkColorActive: var(--palette-primary-800);
 
 .conversationLink {
+  &.sizeRegular {
+    padding: 0;
+  }
   &.colorRegular {
     color: $commentsConversationLinkColor;
   }
@@ -11,9 +14,6 @@ $commentsConversationLinkColorActive: var(--palette-primary-800);
     &.colorRegular {
       &.mouseHover {
         color: $commentsConversationLinkColorHovered;
-        & > span {
-          text-decoration: underline;
-        }
       }
       &.active,
       &:active {
diff --git a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx
index effdadd5daf..926c6b0dae4 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.tsx
@@ -23,6 +23,7 @@ const ShowConversationLink: FunctionComponent<ShowConversationLinkProps> = (
 ) => {
   const classesOverride = useMemo(
     () => ({
+      sizeRegular: styles.sizeRegular,
       colorRegular: styles.colorRegular,
       active: styles.active,
       mouseHover: styles.mouseHover,
diff --git a/src/core/client/stream/tabs/Comments/Comment/TopBarLeft.tsx b/src/core/client/stream/tabs/Comments/Comment/TopBarLeft.tsx
index 97c0846568d..a89a615cbec 100644
--- a/src/core/client/stream/tabs/Comments/Comment/TopBarLeft.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/TopBarLeft.tsx
@@ -15,7 +15,7 @@ const TopBarLeft: FunctionComponent<TopBarLeftProps> = (props) => {
       {(matches) => (
         <Flex
           className={rootClassName}
-          alignItems={matches ? "flex-end" : "baseline"}
+          alignItems={matches ? "center" : "baseline"}
           direction={matches ? "row" : "column"}
           itemGutter={matches ? true : "half"}
         >
diff --git a/src/core/client/stream/tabs/Comments/RTE/RTE.css b/src/core/client/stream/tabs/Comments/RTE/RTE.css
index 86d654eefcd..72454a6f143 100644
--- a/src/core/client/stream/tabs/Comments/RTE/RTE.css
+++ b/src/core/client/stream/tabs/Comments/RTE/RTE.css
@@ -32,8 +32,6 @@ $commentsRTEPlaceholder: var(--palette-text-placeholder);
 .placeholder {
   margin: 10px 0 0 calc(10px);
 
-  border-radius: var(--rounded-corners);
-
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-primary-regular);
   font-size: var(--font-size-3);
diff --git a/src/core/client/stream/tabs/Comments/RTE/RTE.tsx b/src/core/client/stream/tabs/Comments/RTE/RTE.tsx
index 6487e68da8f..2a66ce66989 100644
--- a/src/core/client/stream/tabs/Comments/RTE/RTE.tsx
+++ b/src/core/client/stream/tabs/Comments/RTE/RTE.tsx
@@ -249,7 +249,7 @@ const RTE: FunctionComponent<Props> = (props) => {
     <div>
       <CoralRTE
         inputID={inputID}
-        className={cn(CLASSES.rte, className)}
+        className={cn(CLASSES.rte.$root, className)}
         contentClassName={cn(
           CLASSES.rte.content,
           contentClassName,
diff --git a/src/core/client/stream/tabs/Comments/ReplyList/ReplyListContainer.tsx b/src/core/client/stream/tabs/Comments/ReplyList/ReplyListContainer.tsx
index 46cdf9241b4..8ad9edf4011 100644
--- a/src/core/client/stream/tabs/Comments/ReplyList/ReplyListContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/ReplyList/ReplyListContainer.tsx
@@ -206,7 +206,7 @@ function createReplyListContainer(
  */
 const LastReplyList: FunctionComponent<PropTypesOf<
   typeof LocalReplyListContainer
->> = (props) => <LocalReplyListContainer {...props} indentLevel={3} />;
+>> = (props) => <LocalReplyListContainer {...props} indentLevel={4} />;
 
 const ReplyListContainer3 = createReplyListContainer(
   3,
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.tsx b/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.tsx
index d214823ee12..dad262b9dc2 100644
--- a/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.tsx
@@ -97,7 +97,7 @@ export const FeaturedCommentTooltip: FunctionComponent<TooltipProps> = (
               button: styles.button,
             }}
             active={props.active}
-            activeColor="stream"
+            activeColor="primary"
             ariaLabel="Toggle featured comments tooltip"
             aria-label="Toggle featured comments tooltip"
             title="Toggle featured comments tooltip"
diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
index a09e52d7640..b895600ca95 100644
--- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
@@ -240,6 +240,7 @@ export const StreamContainer: FunctionComponent<Props> = (props) => {
                     <Counter
                       data-testid="comments-featuredCount"
                       size="sm"
+                      className={CLASSES.counter}
                       color={
                         local.commentsTab === "FEATURED_COMMENTS"
                           ? "inherit"
@@ -273,6 +274,7 @@ export const StreamContainer: FunctionComponent<Props> = (props) => {
                     </Localized>
                     <Counter
                       size="sm"
+                      className={CLASSES.counter}
                       color={
                         local.commentsTab === "UNANSWERED_COMMENTS"
                           ? "inherit"
@@ -309,6 +311,7 @@ export const StreamContainer: FunctionComponent<Props> = (props) => {
 
                   <Counter
                     size="sm"
+                    className={CLASSES.counter}
                     color={
                       local.commentsTab === "ALL_COMMENTS" ? "inherit" : "grey"
                     }
diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.css b/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.css
index 0669921478b..f8ae0e93f4e 100644
--- a/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.css
+++ b/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.css
@@ -72,6 +72,11 @@
 
 .verifyTitle {
   margin-bottom: var(--spacing-2);
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-5);
+  color: var(--palette-text-900);
 }
 
 .resendButton {
diff --git a/src/core/client/stream/test/comments/permalink/permalinkView.spec.tsx b/src/core/client/stream/test/comments/permalink/permalinkView.spec.tsx
index ae02804086c..b0075abd3eb 100644
--- a/src/core/client/stream/test/comments/permalink/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/comments/permalink/permalinkView.spec.tsx
@@ -89,6 +89,7 @@ beforeEach(() => {
   }));
 });
 
+/* TODO (cvle) - flaky */
 it("renders permalink view", async () => {
   const tabPane = await waitForElement(() =>
     within(testRenderer.root).getByTestID("current-tab-pane")
diff --git a/src/core/client/ui/components/v2/Button/Button.tsx b/src/core/client/ui/components/v2/Button/Button.tsx
index 1d5c5b572ac..679324b79fc 100644
--- a/src/core/client/ui/components/v2/Button/Button.tsx
+++ b/src/core/client/ui/components/v2/Button/Button.tsx
@@ -138,6 +138,7 @@ export class Button extends React.Component<Props> {
         data-color={color}
         to={to}
         data-active={active}
+        aria-pressed={active}
         {...rest}
       >
         {children}
diff --git a/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx b/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx
index 8964b1ff405..91066f91738 100644
--- a/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx
+++ b/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx
@@ -1,8 +1,8 @@
 import cn from "classnames";
 import React, { ButtonHTMLAttributes, FunctionComponent, Ref } from "react";
 
-import { BaseButton, Icon } from "coral-ui/components/v2";
-import { IconColor } from "coral-ui/components/v2/Icon/Icon";
+import { Icon } from "coral-ui/components/v2";
+import Button from "coral-ui/components/v3/Button";
 import { withForwardRef } from "coral-ui/hocs";
 import { PropTypesOf } from "coral-ui/types";
 
@@ -10,7 +10,7 @@ import styles from "./TooltipButton.css";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
-  activeColor?: IconColor;
+  activeColor?: PropTypesOf<typeof Button>["color"];
   className?: string;
   classes?: typeof styles;
   toggleVisibility: () => void;
@@ -31,7 +31,7 @@ const TooltipButton: FunctionComponent<Props> = ({
   ariaLabel,
   title,
 }) => (
-  <BaseButton
+  <Button
     className={cn(classes ? classes.button : styles.button, className)}
     onClick={(evt) => {
       evt.stopPropagation();
@@ -40,9 +40,12 @@ const TooltipButton: FunctionComponent<Props> = ({
     ref={forwardRef}
     aria-label={ariaLabel}
     title={title}
+    color={active ? activeColor : "none"}
+    variant="flat"
+    paddingSize="none"
   >
-    <Icon color={active ? activeColor : "inherit"}>info</Icon>
-  </BaseButton>
+    <Icon>info</Icon>
+  </Button>
 );
 
 const enhanced = withForwardRef(TooltipButton);
diff --git a/src/core/client/ui/components/v3/Button/Button.tsx b/src/core/client/ui/components/v3/Button/Button.tsx
index ea691cf8891..7e62ad70e74 100644
--- a/src/core/client/ui/components/v3/Button/Button.tsx
+++ b/src/core/client/ui/components/v3/Button/Button.tsx
@@ -113,6 +113,7 @@ export class Button extends React.Component<Props> {
         href={href}
         anchor={href ? true : false}
         ref={forwardRef}
+        aria-pressed={active}
         {...rest}
       >
         {children}