fix: various ui fixes

coralproject · Jul 23, 2020 · 9b39ed9 · 9b39ed9
1 parent fe19ffd
commit 9b39ed9
Show file tree

Hide file tree

Showing 22 changed files with 56 additions and 46 deletions.
diff --git 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
@@ -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
@@ -18,15 +18,17 @@ 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 (
     <div className={CLASSES.viewerBox.$root}>
       <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
@@ -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
@@ -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
@@ -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,31 +55,25 @@ 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>
               ) : (
                 <Localized id="qa-reaction-vote">Vote</Localized>
               )}
             </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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,16 +1,16 @@
 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";
 
 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
@@ -113,6 +113,7 @@ export class Button extends React.Component<Props> {
         href={href}
         anchor={href ? true : false}
         ref={forwardRef}
+        aria-pressed={active}
         {...rest}
       >
         {children}