Changes

src/core/client/stream/components/Comment/Comment.css

@@ -1,3 +1,3 @@
 .footer {
-  margin: 6px 0;
+  margin-top: calc(1.5 * var(--spacing-unit));
 }

src/core/client/stream/components/Permalink/Permalink.tsx

@@ -3,21 +3,21 @@ import React from "react";
 import { Button, ButtonIcon, Popover } from "talk-ui/components";
 import PermalinkPopover from "./PermalinkPopover";
 
-interface InnerProps {
+interface PermalinkProps {
   commentID: string;
   assetURL: string | null;
 }
 
-class Permalink extends React.Component<InnerProps> {
+class Permalink extends React.Component<PermalinkProps> {
   public render() {
     const { commentID, assetURL } = this.props;
     return (
       <Popover
+        id="permalink-popover"
         placement="top"
-        body={({ toggleVisibility, forwardRef }) => (
+        body={({ toggleVisibility }) => (
           <PermalinkPopover
             permalinkUrl={`${assetURL}&commentID=${commentID}`}
-            forwardRef={forwardRef}
             toggleVisibility={toggleVisibility}
           />
         )}

src/core/client/stream/components/Permalink/PermalinkPopover.css

@@ -1,6 +0,0 @@
-.textField {
-  margin-right: 5px;
-}
-
-.root {
-}

src/core/client/stream/components/Permalink/PermalinkPopover.tsx

@@ -1,14 +1,11 @@
 import { Localized } from "fluent-react/compat";
 import React, { CSSProperties } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { RefHandler } from "react-popper";
 import { Button, ClickOutside, Flex, TextField } from "talk-ui/components";
-import * as styles from "./PermalinkPopover.css";
 
 interface InnerProps {
   permalinkUrl: string;
   style?: CSSProperties;
-  forwardRef?: RefHandler;
   toggleVisibility: () => void;
 }
 
@@ -39,8 +36,8 @@ class PermalinkPopover extends React.Component<InnerProps> {
     const { copied } = this.state;
     return (
       <ClickOutside onClickOutside={toggleVisibility}>
-        <Flex>
-          <TextField defaultValue={permalinkUrl} className={styles.textField} />
+        <Flex itemGutter="half">
+          <TextField defaultValue={permalinkUrl} />
           <CopyToClipboard text={permalinkUrl} onCopy={this.onCopy}>
             <Button color="primary" variant="filled">
               {copied ? (

src/core/client/stream/components/Permalink/PermalinkView.css

@@ -1,10 +1,10 @@
 .root {
   width: 100%;
   max-width: 400px;
-  margin: 20px auto;
+  margin: calc(0.5 * var(--spacing-unit)) auto;
 }
 
 .comment,
 .commentNotFound {
-  margin: 20px auto;
+  margin: calc(5 * var(--spacing-unit)) auto;
 }

src/core/client/stream/components/Permalink/PermalinkView.tsx

@@ -19,31 +19,30 @@ const PermalinkView: StatelessComponent<InnerProps> = props => {
     return <div>Bad url: `assetID` and `commentID` params are needed</div>;
   }
 
+  // TODO: (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
+  // returns the correct asset url
   if (query.assetID) {
-    // TODO (bc) temporary needed to pass the assetID to go back to the correct asset until the backend
-    // returns the correct asset url
-    if (query.assetID) {
-      assetURL = `${location.origin}/?assetID=${query.assetID}`;
-    }
+    assetURL = `${location.origin}/?assetID=${query.assetID}`;
   }
 
   if (props.comment) {
     return (
       <div className={styles.root}>
         <Logo />
+        {assetURL && (
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => {
+              window.location.href = assetURL;
+            }}
+            fullWidth
+          >
+            Show all Comments
+          </Button>
+        )}
         <Flex direction="column" className={styles.comment}>
           <CommentContainer data={props.comment} />
-          {assetURL && (
-            <Button
-              variant="filled"
-              color="primary"
-              onClick={() => {
-                window.location.href = assetURL;
-              }}
-            >
-              Back to the Stream
-            </Button>
-          )}
         </Flex>
       </div>
     );

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

@@ -6,7 +6,7 @@ export interface ClickOutsideProps {
   children: React.ReactNode;
 }
 
-export class ClickOutside extends React.Component<ClickOutsideProps> {
+class ClickOutside extends React.Component<ClickOutsideProps> {
   public domNode: Element | null = null;
 
   public handleClick = (e: MouseEvent) => {

src/core/client/ui/components/ClickOutside/index.ts

@@ -1 +1 @@
-export { default, ClickOutside } from "./ClickOutside";
+export { default } from "./ClickOutside";

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

@@ -1,6 +1,12 @@
 import cn from "classnames";
-import React, { CSSProperties, isValidElement } from "react";
-import { Manager, Popper, Reference, RefHandler } from "react-popper";
+import React from "react";
+import {
+  Manager,
+  Popper,
+  PopperArrowProps,
+  Reference,
+  RefHandler,
+} from "react-popper";
 import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
 
@@ -21,11 +27,11 @@ type Placement =
   | "left"
   | "left-start";
 
-interface InnerProps {
-  body: (props: RenderProps) => any | React.ReactElement<any>;
-  children: (props: RenderProps) => any;
+interface PopoverProps {
+  body: (props: RenderProps) => React.ReactNode | React.ReactElement<any>;
+  children: (props: RenderProps) => React.ReactNode;
   description?: string;
-  id?: string;
+  id: string;
   onClose?: () => void;
   className?: string;
   placement?: Placement;
@@ -35,17 +41,12 @@ interface State {
   visible: false;
 }
 
-interface Props {
-  ref: any;
-  style: CSSProperties;
-}
-
 interface RenderProps {
   toggleVisibility: () => void;
   forwardRef?: RefHandler;
 }
 
-class Popover extends React.Component<InnerProps> {
+class Popover extends React.Component<PopoverProps> {
   public state: State = {
     visible: false,
   };
@@ -92,7 +93,7 @@ class Popover extends React.Component<InnerProps> {
     return (
       <Manager>
         <Reference>
-          {(props: Props) =>
+          {(props: PopperArrowProps) =>
             children({
               forwardRef: props.ref,
               toggleVisibility: this.toggleVisibility,
@@ -105,7 +106,7 @@ class Popover extends React.Component<InnerProps> {
           eventsEnabled
           positionFixed={false}
         >
-          {(props: Props) =>
+          {(props: PopperArrowProps) =>
             visible && (
               <div
                 id={id}
@@ -119,12 +120,11 @@ class Popover extends React.Component<InnerProps> {
                   className={cn(styles.root, className)}
                   ref={props.ref}
                 >
-                  {isValidElement(body)
-                    ? body
-                    : body({
+                  {typeof body === "function"
+                    ? body({
                         toggleVisibility: this.toggleVisibility,
-                        forwardRef: props.ref,
-                      })}
+                      })
+                    : body}
                 </div>
               </div>
             )

src/core/client/ui/components/Popover/index.ts

@@ -1,2 +1 @@
-export * from "./Popover";
 export { default } from "./Popover";

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

@@ -1,3 +1,5 @@
+// TODO: (bc) move this to typograhpy!
+
 .root {
   font-family: "Source Sans Pro";
   font-weight: 400;

src/core/client/ui/components/TextField/TextField.d.ts

@@ -1 +0,0 @@
-export const root: string;

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

@@ -3,11 +3,14 @@ import React, { InputHTMLAttributes, StatelessComponent } from "react";
 
 import * as styles from "./TextField.css";
 
-interface InnerProps extends InputHTMLAttributes<HTMLInputElement> {
+interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   classes?: typeof styles;
 }
 
-const TextField: StatelessComponent<InnerProps> = ({ className, ...rest }) => {
+const TextField: StatelessComponent<TextFieldProps> = ({
+  className,
+  ...rest
+}) => {
   return <input {...rest} className={cn(styles.root, className)} />;
 };