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>
     );