[CORL-561, CORL-562] Comment stream and account profile styling cleanup (#2517)

* update styles for comment stream

* more comment styling fixes

* reconfigure settings tab and account settings in stream

* add new button variant

* style settings tab

* style change username/email/password

* clean up settings tab

* integrate account deletion to account settings

* update comment history styles

* more history comment styles

* update snaps

* move userbox

* fix tests

* fix delete account tests

* update message box styling

* update snap

* update snaps

* fix lints

* update snaps again

* userbox styles

* history comment styling

* update snaps

* fix ts

* Integrate notifications settings

* clean up account setting styles

* update snaps and tests

* fix lints

* fix: PENDING_DELETION permissions

* chore: sync stable classnames, rename settings to account

* simplify css

* update snaps

src/core/client/ui/components/Button/Button.css

@@ -131,7 +131,7 @@
   }
 }
 
-.variantFilled {
+.variantFilled, .variantOutlineFilled.mouseHover {
   color: var(--palette-text-light);
   &.colorRegular {
     background-color: var(--palette-grey-main);
@@ -151,7 +151,13 @@
   &.colorDark {
     background-color: var(--palette-text-primary);
   }
+} 
 
+.variantOutlineFilled.mouseHover {
+  border: 1px solid transparent; /* prevent jumping between outlined and filled on hover */
+}
+
+.variantFilled {
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
@@ -211,7 +217,7 @@
   }
 }
 
-.variantOutlined {
+.variantOutlined, .variantOutlineFilled:not(.mouseHover) {
   border: 1px solid transparent;
   &.colorRegular {
     color: var(--palette-grey-main);
@@ -237,7 +243,8 @@
     color: var(--palette-text-primary);
     border: 1px solid currentColor;
   }
-
+}
+.variantOutlined {
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
@@ -573,3 +580,33 @@
     }
   }
 }
+
+.variantTextUnderlined {
+  font-weight: 700;
+  &:not(.disabled) {
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-main);
+        & > span {
+          text-decoration: underline;
+        }
+      }
+      &.active,
+      &:active {
+        color: var(--palette-primary-main);
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-main);
+        & > span {
+          text-decoration: underline;
+        }
+      }
+      &.active,
+      &:active {
+        color: var(--palette-error-main);
+      }
+    }
+  }
+}

src/core/client/ui/components/Button/Button.tsx

@@ -40,7 +40,9 @@ interface Props extends Omit<BaseButtonProps, "ref"> {
     | "outlined"
     | "ghost"
     | "underlined"
-    | "adornment";
+    | "adornment"
+    | "textUnderlined"
+    | "outlineFilled";
 
   /** If set renders a full width button */
   fullWidth?: boolean;
@@ -94,6 +96,8 @@ export class Button extends React.Component<Props> {
         [classes.variantGhost]: variant === "ghost",
         [classes.variantAdornment]: variant === "adornment",
         [classes.variantUnderlined]: variant === "underlined",
+        [classes.variantTextUnderlined]: variant === "textUnderlined",
+        [classes.variantOutlineFilled]: variant === "outlineFilled",
         [classes.fullWidth]: fullWidth,
         [classes.active]: active,
         [classes.disabled]: disabled,

src/core/client/ui/components/CallOut/CallOut.css

@@ -11,6 +11,10 @@
   word-break: break-word;
 }
 
+.borderless {
+  border-style: none;
+}
+
 .colorRegular {
   background-color: var(--palette-grey-lightest);
   border-color: var(--palette-grey-light);

src/core/client/ui/components/CallOut/CallOut.tsx

@@ -27,10 +27,23 @@ export interface CallOutProps {
    * If set renders a full width CallOut
    */
   fullWidth?: boolean;
+
+  /*
+   * If set removes border
+   */
+  borderless?: boolean;
 }
 
 const CallOut: FunctionComponent<CallOutProps> = props => {
-  const { className, classes, color, fullWidth, children, ...rest } = props;
+  const {
+    borderless,
+    className,
+    classes,
+    color,
+    fullWidth,
+    children,
+    ...rest
+  } = props;
 
   const rootClassName = cn(
     classes.root,
@@ -39,6 +52,7 @@ const CallOut: FunctionComponent<CallOutProps> = props => {
       [classes.colorError]: color === "error",
       [classes.colorPrimary]: color === "primary",
       [classes.colorSuccess]: color === "success",
+      [classes.borderless]: borderless,
       [classes.fullWidth]: fullWidth,
     },
     className

src/core/client/ui/components/Dropdown/Dropdown.tsx

@@ -1,3 +1,4 @@
+import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import { withStyles } from "coral-ui/hocs";
@@ -17,7 +18,7 @@ const Dropdown: FunctionComponent<Props> = ({
   ...rest
 }) => {
   return (
-    <div className={classes.root} {...rest}>
+    <div className={cn(classes.root, className)} {...rest}>
       {children}
     </div>
   );

src/core/client/ui/components/Tag/Tag.css

@@ -4,7 +4,7 @@
   line-height: 1;
   padding: var(--spacing-1);
   white-space: nowrap;
-  border-radius: 1px;
+  border-radius: 2px;
   display: inline-block;
 }
 
@@ -44,3 +44,7 @@
     color: var(--palette-error-dark);
   }
 }
+
+.uppercase {
+  text-transform: uppercase;
+}

src/core/client/ui/components/Tag/Tag.tsx

@@ -26,6 +26,7 @@ const Tag: FunctionComponent<Props> = props => {
     [classes.colorError]: color === "error",
     [classes.colorGrey]: color === "grey",
     [classes.colorDarkest]: color === "dark",
+    [classes.uppercase]: variant !== "pill",
   });
 
   return (

src/core/client/ui/components/Tag/__snapshots__/Tag.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <span
-  className="Tag-root custom Tag-colorGrey"
+  className="Tag-root custom Tag-colorGrey Tag-uppercase"
 >
   Staff
 </span>

src/core/client/ui/components/Typography/Typography.css

@@ -60,10 +60,6 @@
   composes: buttonLarge from "coral-ui/shared/typography.css";
 }
 
-.inputLabel {
-  composes: inputLabel from "coral-ui/shared/typography.css";
-}
-
 .detail {
   composes: detail from "coral-ui/shared/typography.css";
 }
@@ -114,6 +110,10 @@
   color: var(--palette-text-secondary);
 }
 
+.colorTextDark {
+  color: var(--palette-text-dark);
+}
+
 .colorTextLight {
   color: var(--palette-text-light);
 }
@@ -133,3 +133,7 @@
 .colorSuccess {
   color: var(--palette-success-darkest);
 }
+
+.inputLabel {
+  composes: inputLabel from "coral-ui/shared/typography.css";
+}

src/core/client/ui/components/Typography/Typography.tsx

@@ -60,6 +60,7 @@ interface Props extends PropTypesOf<typeof Box> {
     | "warning"
     | "error"
     | "errorDark"
+    | "textDark"
     | "success";
   /**
    * The container used for the root node.
@@ -118,6 +119,7 @@ const Typography: FunctionComponent<Props> = props => {
       [classes.colorTextSecondary]: color === "textSecondary",
       [classes.colorTextLight]: color === "textLight",
       [classes.colorPrimary]: color === "primary",
+      [classes.colorTextDark]: color === "textDark",
       [classes.colorError]: color === "error",
       [classes.colorErrorDark]: color === "errorDark",
       [classes.colorSuccess]: color === "success",

src/core/client/ui/hocs/withStyles.ts

@@ -18,6 +18,8 @@ function withStyles<T>(
       Object.keys(props.classes).forEach(k => {
         if (classes[k]) {
           resolvedClasses[k] += ` ${props.classes[k]}`;
+        } else if (process.env.NODE_ENV === "test") {
+          throw new Error(`Extending non existent className ${k}`);
         } else if (process.env.NODE_ENV !== "production") {
           // tslint:disable:next-line: no-console
           console.warn("Extending non existent className", k);

src/core/client/ui/shared/typography.css

@@ -164,7 +164,7 @@
 .timestamp {
   color: var(--palette-text-secondary);
   font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
   font-size: calc(14rem / var(--rem-base));
   line-height: calc(18em / 14);
   letter-spacing: 0;
@@ -188,15 +188,6 @@
   color: var(--palette-text-primary);
 }
 
-.inputLabel {
-  font-size: calc(18rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-serif);
-  line-height: calc(18em / 18);
-  letter-spacing: calc(0.2em / 18);
-  color: var(--palette-text-primary);
-}
-
 .detail {
   font-size: calc(14rem / var(--rem-base));
   font-weight: var(--font-weight-regular);
@@ -274,9 +265,9 @@
 
 .tagText {
   font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-regular);
-  font-size: calc(14rem / var(--rem-base));
-  letter-spacing: calc(-0.2em / 14);
+  font-weight: var(--font-weight-medium);
+  font-size: calc(12rem / var(--rem-base));
+  letter-spacing: calc(-0.2em / 12);
 }
 
 .sideNavigationItem {
@@ -312,3 +303,12 @@
   line-height: calc(14em / 14);
   color: var(--palette-grey-dark);
 }
+
+.inputLabel {
+  font-size: calc(18rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-serif);
+  line-height: calc(18em / 18);
+  letter-spacing: calc(0.2em / 18);
+  color: var(--palette-text-dark);
+}

src/core/client/ui/theme/mixins.css

@@ -2,7 +2,7 @@
   font-size: calc(16rem / var(--rem-base));
   font-weight: var(--font-weight-regular);
   font-family: var(--font-family-sans-serif);
-  line-height: calc(20em / 16);
+  line-height: calc(22em / 16);
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-primary);
 }

src/core/client/ui/theme/variables.ts

@@ -56,6 +56,7 @@ const variables = {
       primary: "#3B4A53",
       secondary: "#787D80",
       light: "#fff",
+      dark: "#14171A",
     },
     /* Background colors */
     background: {