[CORL-218] In Stream Approve and Reject (#2340)

* feat: instream moderation

* fix: tests

* test: add tests for in stream moderation

* fix: lint

* fix: snapshots

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

@@ -3,25 +3,46 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: calc(0.5 * var(--mini-unit)) var(--mini-unit);
+  padding: var(--spacing-2);
   width: 100%;
   text-align: left;
+  line-height: 1;
 }
 
-.root:active {
-  background-color: var(--palette-grey-lighter);
+.anchor {
+  color: var(--palette-primary-main);
+  text-decoration: underline;
+  &:visited {
+    color: var(--palette-primary-main);
+  }
+}
+
+.root:not(:disabled):active {
+  background-color: var(--palette-primary-lightest);
 }
 
 .mouseHover {
-  background-color: var(--palette-grey-lightest);
+  background-color: var(--palette-primary-lightest);
 }
 
-.icon {
+.iconBefore {
+  display: flex;
+  justify-content: baseline;
+  align-items: center;
   color: var(--palette-grey-main);
-  margin-left: var(--mini-unit);
+  margin-right: var(--spacing-2);
   padding-top: 1px;
 }
+.iconAfter {
+  display: flex;
+  align-items: center;
+  justify-content: baseline;
+  margin-left: var(--spacing-2);
+  padding-top: 1px;
+  color: var(--palette-primary-main);
+  text-decoration: unset;
+}
 
 .blankAdornment {
-  padding-right: calc(3.5 * var(--mini-unit));
+  padding-right: var(--spacing-6);
 }

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

@@ -7,10 +7,12 @@ import { withStyles } from "coral-ui/hocs";
 import BaseButton, { BaseButtonProps } from "../BaseButton";
 import Icon from "../Icon";
 
+import { Flex } from "..";
 import styles from "./Button.css";
 
 interface Props extends Omit<BaseButtonProps, "ref"> {
   children: React.ReactNode;
+  icon?: React.ReactNode;
   href?: string;
   className?: string;
   onClick?: React.EventHandler<React.MouseEvent>;
@@ -30,6 +32,8 @@ const Button: FunctionComponent<Props> = ({
   onClick,
   children,
   classes,
+  icon,
+  disabled,
   ...rest
 }) => {
   return (
@@ -38,16 +42,26 @@ const Button: FunctionComponent<Props> = ({
         root: cn(classes.root, className, {
           [classes.blankAdornment]: blankAdornment,
         }),
-        mouseHover: classes.mouseHover,
+        mouseHover: cn({ [classes.mouseHover]: !disabled }),
       }}
       href={href}
       onClick={onClick}
       anchor={Boolean(href)}
+      disabled={disabled}
       {...rest}
     >
-      {children}
+      <Flex>
+        {icon && <div className={classes.iconBefore}>{icon}</div>}
+        <div
+          className={cn({
+            [classes.anchor]: Boolean(href),
+          })}
+        >
+          {children}
+        </div>
+      </Flex>
       {rest.target === "_blank" && (
-        <Icon className={classes.icon}>open_in_new</Icon>
+        <Icon className={classes.iconAfter}>open_in_new</Icon>
       )}
     </BaseButton>
   );

src/core/client/ui/components/Dropdown/Divider.css

@@ -1,6 +1,5 @@
 .root {
   border: 0;
   border-bottom: 1px solid var(--palette-divider);
-  padding-top: 1px;
-  margin: calc(0.5 * var(--mini-unit)) 0;
+  margin: 0;
 }

src/core/client/ui/components/Dropdown/__snapshots__/Button.spec.tsx.snap

@@ -5,8 +5,10 @@ exports[`renders anchor button 1`] = `
   className="custom"
   classes={
     Object {
+      "anchor": "Button-anchor",
       "blankAdornment": "Button-blankAdornment",
-      "icon": "Button-icon",
+      "iconAfter": "Button-iconAfter",
+      "iconBefore": "Button-iconBefore",
       "mouseHover": "Button-mouseHover",
       "root": "Button-root",
     }
@@ -25,8 +27,10 @@ exports[`renders button 1`] = `
   className="custom"
   classes={
     Object {
+      "anchor": "Button-anchor",
       "blankAdornment": "Button-blankAdornment",
-      "icon": "Button-icon",
+      "iconAfter": "Button-iconAfter",
+      "iconBefore": "Button-iconBefore",
       "mouseHover": "Button-mouseHover",
       "root": "Button-root",
     }

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

@@ -8,6 +8,7 @@
   box-shadow: var(--elevation-main);
   border-radius: var(--round-corners);
   z-index: var(--zindex-popover);
+  margin: 2px;
 }
 
 .top {

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

@@ -7,8 +7,6 @@ import { withStyles } from "coral-ui/hocs";
 import styles from "./TextLink.css";
 
 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** external if set to true will show a little icon that indicates an external link */
-  external?: boolean;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -16,7 +14,7 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
 const TextLinkProps: StatelessComponent<Props> = props => {
-  const { className, children, classes, external, ...rest } = props;
+  const { className, children, classes, target, ...rest } = props;
 
   const rootClassName = cn(classes.root, className);
 
@@ -24,12 +22,13 @@ const TextLinkProps: StatelessComponent<Props> = props => {
     <a
       className={rootClassName}
       href={props.href || (children as string)}
+      target={target}
       {...rest}
     >
       {children}
-      {external && (
-        <Icon className={styles.icon} size="xs">
-          launch
+      {target === "_blank" && (
+        <Icon className={classes.icon} size="xs">
+          open_in_new
         </Icon>
       )}
     </a>