diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css new file mode 100644 index 000000000..a9f4d2273 --- /dev/null +++ b/src/core/client/stream/components/Comment/Comment.css @@ -0,0 +1,3 @@ +.footer { + margin: 6px 0; +} diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx index 10a6c9659..5afe6f61c 100644 --- a/src/core/client/stream/components/Comment/Comment.tsx +++ b/src/core/client/stream/components/Comment/Comment.tsx @@ -1,6 +1,7 @@ import React from "react"; import { StatelessComponent } from "react"; import { Typography } from "talk-ui/components"; +import * as styles from "./Comment.css"; import PermalinkContainer from "../../containers/PermalinkContainer"; import Timestamp from "./Timestamp"; @@ -25,7 +26,7 @@ const Comment: StatelessComponent = props => { {props.createdAt} {props.body} -
+
diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx index 20b9c3a5c..eefd8859d 100644 --- a/src/core/client/stream/components/Permalink/Permalink.tsx +++ b/src/core/client/stream/components/Permalink/Permalink.tsx @@ -1,22 +1,25 @@ import { Localized } from "fluent-react/compat"; import React from "react"; -import { Button, Popover } from "talk-ui/components"; +import { Button, ButtonIcon, Popover } from "talk-ui/components"; import PermalinkPopover from "./PermalinkPopover"; interface InnerProps { commentID: string; origin: string | null; + assetID: string | null; } class Permalink extends React.Component { public render() { - const { commentID, origin } = this.props; + const { commentID, origin, assetID } = this.props; return ( ( @@ -24,6 +27,7 @@ class Permalink extends React.Component { > {({ toggleVisibility, forwardRef }) => ( - + ); } diff --git a/src/core/client/stream/containers/PermalinkContainer.tsx b/src/core/client/stream/containers/PermalinkContainer.tsx index 46a646600..a203dedcc 100644 --- a/src/core/client/stream/containers/PermalinkContainer.tsx +++ b/src/core/client/stream/containers/PermalinkContainer.tsx @@ -11,12 +11,19 @@ interface InnerProps { } export const PermalinkContainer: StatelessComponent = props => { - return ; + return ( + + ); }; const enhanced = withLocalStateContainer( graphql` fragment PermalinkContainerLocal on Local { + assetID origin } ` diff --git a/src/core/client/stream/queries/AppQuery.tsx b/src/core/client/stream/queries/AppQuery.tsx index 07601ed1d..64a005795 100644 --- a/src/core/client/stream/queries/AppQuery.tsx +++ b/src/core/client/stream/queries/AppQuery.tsx @@ -24,7 +24,7 @@ interface WrappedProps { data: any; } -// TODO (bc) refactor this into another component. break down the needs of each component. +// TODO (bc) Break down the needs of each component into another file (maybe). // (careful porting QueryRenderer into another stateless component) export const renderWrapper = ( diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts index 0b2032cb5..ae57fd4e4 100644 --- a/src/core/client/ui/components/index.ts +++ b/src/core/client/ui/components/index.ts @@ -1,5 +1,6 @@ export { default as BaseButton } from "./BaseButton"; export { default as Button } from "./Button"; +export { default as ButtonIcon } from "./Button/ButtonIcon"; export { default as Typography } from "./Typography"; export { default as Popover } from "./Popover"; export { default as TextField } from "./TextField";