From 98795d161db572ac9239b0c5c2242d56fc3fbcf9 Mon Sep 17 00:00:00 2001 From: Kiwi Date: Fri, 3 May 2019 22:01:34 +0200 Subject: [PATCH] [CORL-263, CORL-225] Story Titles, Moderate Story, Mini Unit (#2294) * feat: show story title + moderate this story link * feat: introduce mini unit * test: add tests for moderate story link * fix: snapshot * fix: lint / test * fix: unwanted margin --- src/core/client/admin/components/AuthBox.css | 6 +- .../components/DecisionHistoryButton.css | 2 +- .../client/admin/components/MainLayout.css | 2 +- .../routes/community/components/Community.css | 4 +- .../community/components/UserTableFilter.css | 6 +- .../routes/configure/components/ConfigBox.css | 4 +- .../routes/configure/components/Header.css | 4 +- .../routes/configure/components/Layout.css | 4 +- .../routes/configure/components/Main.css | 2 +- .../configure/components/Navigation/Link.css | 8 +- .../routes/configure/components/SideBar.css | 6 +- .../routes/configure/components/Subheader.css | 4 +- .../components/ValidationMessage.css | 2 +- .../auth/components/ConfigDescription.css | 2 +- .../sections/auth/components/SSOKeyField.css | 2 +- .../components/BannedWordListConfig.css | 2 +- .../components/SuspectWordListConfig.css | 2 +- .../wordList/components/WordListTextArea.css | 4 +- .../login/components/CompleteAccountBox.css | 8 +- .../UnorderedList/UnorderedList.css | 2 +- .../signIn/components/HorizontalSeparator.css | 2 +- .../login/views/signIn/components/Version.css | 2 +- .../moderate/components/AcceptButton.tsx | 2 +- .../routes/moderate/components/InReplyTo.tsx | 2 +- .../routes/moderate/components/Moderate.css | 2 +- .../moderate/components/ModerateCard.css | 38 +- .../moderate/components/ModerateCard.spec.tsx | 14 + .../moderate/components/ModerateCard.tsx | 61 +- .../routes/moderate/components/Queue.css | 2 +- .../routes/moderate/components/Queue.tsx | 3 + .../moderate/components/RejectButton.tsx | 2 +- .../routes/moderate/components/Search/Bar.css | 4 +- .../moderate/components/Search/Field.css | 18 +- .../moderate/components/Search/Group.css | 4 +- .../components/Search/ModerateAllOption.css | 2 +- .../moderate/components/Search/Option.css | 4 +- .../components/Search/SeeAllOption.css | 4 +- .../moderate/components/SingleModerate.css | 4 +- .../routes/moderate/components/Username.tsx | 2 +- .../__snapshots__/AcceptButton.spec.tsx.snap | 4 +- .../__snapshots__/InReplyTo.spec.tsx.snap | 2 +- .../__snapshots__/ModerateCard.spec.tsx.snap | 302 ++-- .../__snapshots__/RejectButton.spec.tsx.snap | 4 +- .../__snapshots__/Username.spec.tsx.snap | 2 +- .../moderate/containers/MarkersContainer.tsx | 8 +- .../containers/ModerateCardContainer.tsx | 28 +- .../moderate/containers/QueueContainer.tsx | 5 +- .../containers/RejectedQueueContainer.tsx | 6 +- .../MarkersContainer.spec.tsx.snap | 44 +- .../routes/stories/components/Stories.css | 4 +- .../stories/components/StoryTableFilter.css | 4 +- src/core/client/admin/test/fixtures.ts | 105 +- .../__snapshots__/moderate.spec.tsx.snap | 1288 +++++++++++------ .../admin/test/moderate/moderate.spec.tsx | 140 +- .../components/DecisionHistoryLoading.css | 2 +- .../components/DecisionItem.css | 6 +- .../decisionHistory/components/DotDivider.css | 2 +- .../decisionHistory/components/Empty.css | 2 +- .../views/decisionHistory/components/Main.css | 2 +- .../components/ShowMoreButton.css | 2 +- .../decisionHistory/components/Title.css | 2 +- .../client/auth/components/Header/Bar.css | 2 +- .../client/auth/components/Header/SubBar.css | 2 +- .../auth/components/HorizontalSeparator.css | 2 +- src/core/client/auth/components/Main.css | 2 +- .../UnorderedList/UnorderedList.css | 2 +- .../framework/components/DurationField.css | 4 +- .../client/framework/components/Markdown.css | 6 +- .../MarkdownEditor/MarkdownEditor.css | 6 +- src/core/client/install/components/App.css | 4 +- src/core/client/install/components/Header.css | 2 +- .../client/install/components/MainBar.css | 2 +- src/core/client/install/components/Wizard.css | 2 +- src/core/client/stream/components/App.css | 2 +- .../components/MessageBox/MessageBox.css | 2 +- .../components/MessageBox/MessageBoxIcon.css | 2 +- .../components/UserBoxUnauthenticated.css | 2 +- src/core/client/stream/shared/htmlContent.css | 6 +- .../comments/components/Comment/Comment.css | 6 +- .../tabs/comments/components/Divider.css | 2 +- .../tabs/comments/components/Indent.css | 22 +- .../PermalinkButton/PermalinkPopover.css | 2 +- .../comments/components/PostCommentForm.css | 2 +- .../components/PostCommentFormFake.css | 2 +- .../stream/tabs/comments/components/RTE.css | 2 +- .../components/ReplyEditSubmitStatus.css | 2 +- .../tabs/comments/components/ReplyTo.css | 2 +- .../components/ConversationThread.css | 4 +- .../permalink/components/PermalinkView.css | 2 +- .../permalink/components/Timeline/Circle.css | 8 +- .../permalink/components/Timeline/Line.css | 4 +- .../components/ReportCommentForm.css | 2 +- .../components/ReportPopover.css | 6 +- .../reportComment/components/ThankYou.css | 2 +- .../tabs/configure/components/CloseStream.css | 2 +- .../configure/components/ConfigureStream.css | 2 +- .../configure/components/HorizontalRule.css | 4 +- .../tabs/configure/components/OpenStream.css | 2 +- .../profile/components/HistoryComment.css | 7 +- .../profile/components/HistoryComment.tsx | 24 +- .../HistoryComment.spec.tsx.snap | 26 +- .../__snapshots__/loadMore.spec.tsx.snap | 36 +- .../__snapshots__/renderProfile.spec.tsx.snap | 36 +- .../client/ui/components/AppBar/AppBar.css | 6 +- .../ui/components/AppBar/NavigationItem.css | 2 +- src/core/client/ui/components/Brand/Logo.css | 2 +- .../client/ui/components/Button/Button.css | 2 +- .../client/ui/components/Button/Button.mdx | 56 + .../client/ui/components/CallOut/CallOut.css | 2 +- src/core/client/ui/components/Card/Card.css | 2 +- .../client/ui/components/Card/CloseButton.css | 4 +- .../client/ui/components/Dropdown/Button.css | 6 +- .../client/ui/components/Dropdown/Divider.css | 2 +- .../ui/components/Dropdown/Dropdown.css | 2 +- src/core/client/ui/components/Flex/Flex.css | 56 +- .../HorizontalGutter/HorizontalGutter.css | 10 +- src/core/client/ui/components/Icon/Icon.css | 5 + src/core/client/ui/components/Icon/Icon.tsx | 2 +- .../client/ui/components/Marker/Count.css | 6 +- .../client/ui/components/Marker/Marker.css | 2 +- .../client/ui/components/Message/Message.css | 8 +- .../ui/components/Message/MessageIcon.css | 2 +- .../PasswordField/PasswordField.css | 8 +- .../client/ui/components/Popover/Popover.css | 8 +- .../ui/components/SelectField/SelectField.css | 6 +- .../client/ui/components/Steps/StepBar.css | 2 +- .../ui/components/SubBar/Navigation.css | 4 +- .../ui/components/SubBar/NavigationItem.css | 2 +- .../client/ui/components/SubBar/SubBar.css | 6 +- .../client/ui/components/Table/TableCell.css | 4 +- src/core/client/ui/components/Tabs/Tab.css | 8 +- .../ui/components/TextField/TextField.css | 6 +- .../ui/components/TextLink/TextLink.css | 6 + .../ui/components/TextLink/TextLink.tsx | 10 +- .../ui/components/TileSelector/TileOption.css | 2 +- .../ui/components/Typography/Typography.css | 2 +- src/core/client/ui/theme/variables.css | 4 +- src/core/client/ui/theme/variables.ts | 4 +- src/locales/en-US/admin.ftl | 12 +- 139 files changed, 1757 insertions(+), 985 deletions(-) diff --git a/src/core/client/admin/components/AuthBox.css b/src/core/client/admin/components/AuthBox.css index 19701d1bc..f59de9db9 100644 --- a/src/core/client/admin/components/AuthBox.css +++ b/src/core/client/admin/components/AuthBox.css @@ -3,15 +3,15 @@ background-color: #f5f5f5; border: 1px solid var(--palette-grey-lighter); margin-top: 70px; - padding: 0 calc(3 * var(--spacing-unit)) calc(4 * var(--spacing-unit)) - calc(3 * var(--spacing-unit)); + padding: 0 calc(3 * var(--mini-unit)) calc(4 * var(--mini-unit)) + calc(3 * var(--mini-unit)); box-sizing: border-box; } .brandIcon { display: inline-flex; background: var(--palette-common-white); - padding: calc(0.5 * var(--spacing-unit)); + padding: calc(0.5 * var(--mini-unit)); border: 1px solid var(--palette-grey-lighter); margin-top: -42px; } diff --git a/src/core/client/admin/components/DecisionHistoryButton.css b/src/core/client/admin/components/DecisionHistoryButton.css index fce678540..84f602e5d 100644 --- a/src/core/client/admin/components/DecisionHistoryButton.css +++ b/src/core/client/admin/components/DecisionHistoryButton.css @@ -4,5 +4,5 @@ .historyIcon { color: var(--palette-text-secondary); - margin-right: calc(1.5 * var(--spacing-unit)); + margin-right: calc(1.5 * var(--mini-unit)); } diff --git a/src/core/client/admin/components/MainLayout.css b/src/core/client/admin/components/MainLayout.css index 0ed70d627..a3e2487a6 100644 --- a/src/core/client/admin/components/MainLayout.css +++ b/src/core/client/admin/components/MainLayout.css @@ -1,6 +1,6 @@ .root { max-width: 1280px; margin: 0 auto; - padding: 0 var(--spacing-unit); + padding: 0 var(--mini-unit); box-sizing: border-box; } diff --git a/src/core/client/admin/routes/community/components/Community.css b/src/core/client/admin/routes/community/components/Community.css index f27e73931..8b8d682c3 100644 --- a/src/core/client/admin/routes/community/components/Community.css +++ b/src/core/client/admin/routes/community/components/Community.css @@ -1,5 +1,5 @@ .root { max-width: 950px; - margin-top: calc(3 * var(--spacing-unit)); - margin-bottom: calc(3 * var(--spacing-unit)); + margin-top: calc(3 * var(--mini-unit)); + margin-bottom: calc(3 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/community/components/UserTableFilter.css b/src/core/client/admin/routes/community/components/UserTableFilter.css index 7d1b3255b..e2a77900e 100644 --- a/src/core/client/admin/routes/community/components/UserTableFilter.css +++ b/src/core/client/admin/routes/community/components/UserTableFilter.css @@ -5,13 +5,13 @@ .textField { height: 31px; - width: calc(36 * var(--spacing-unit)); + width: calc(45 * var(--mini-unit)); } .adornment { - padding: 0 var(--spacing-unit); + padding: 0 var(--mini-unit); } .selectField { - min-width: calc(13 * var(--spacing-unit)); + min-width: calc(16 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/configure/components/ConfigBox.css b/src/core/client/admin/routes/configure/components/ConfigBox.css index e975d330f..ab1a6fa2c 100644 --- a/src/core/client/admin/routes/configure/components/ConfigBox.css +++ b/src/core/client/admin/routes/configure/components/ConfigBox.css @@ -3,7 +3,7 @@ } .title { - padding: calc(0.5 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit)); + padding: calc(0.5 * var(--mini-unit)) calc(1.5 * var(--mini-unit)); background-color: var(--palette-text-primary); @@ -16,5 +16,5 @@ } .content { - padding: calc(2 * var(--spacing-unit)) calc(3 * var(--spacing-unit)); + padding: calc(2 * var(--mini-unit)) calc(3 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/configure/components/Header.css b/src/core/client/admin/routes/configure/components/Header.css index f520676fc..625823009 100644 --- a/src/core/client/admin/routes/configure/components/Header.css +++ b/src/core/client/admin/routes/configure/components/Header.css @@ -1,7 +1,7 @@ .root { - padding-bottom: calc(0.5 * var(--spacing-unit)); + padding-bottom: calc(0.5 * var(--mini-unit)); border-bottom: 1px solid var(--palette-text-primary); - margin-bottom: calc(1.5 * var(--spacing-unit)); + margin-bottom: calc(1.5 * var(--mini-unit)); display: block; width: 100%; } diff --git a/src/core/client/admin/routes/configure/components/Layout.css b/src/core/client/admin/routes/configure/components/Layout.css index 60dc8a113..bc28e71ba 100644 --- a/src/core/client/admin/routes/configure/components/Layout.css +++ b/src/core/client/admin/routes/configure/components/Layout.css @@ -1,4 +1,4 @@ .root { - padding: calc(3 * var(--spacing-unit)) calc(5 * var(--spacing-unit)) - calc(5 * var(--spacing-unit)) calc(5 * var(--spacing-unit)); + padding: calc(3 * var(--mini-unit)) calc(5 * var(--mini-unit)) + calc(5 * var(--mini-unit)) calc(5 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/configure/components/Main.css b/src/core/client/admin/routes/configure/components/Main.css index 85fb0e12e..a73c1ff8b 100644 --- a/src/core/client/admin/routes/configure/components/Main.css +++ b/src/core/client/admin/routes/configure/components/Main.css @@ -1,4 +1,4 @@ .root { width: 100%; - max-width: calc(67 * var(--spacing-unit)); + max-width: calc(84 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/configure/components/Navigation/Link.css b/src/core/client/admin/routes/configure/components/Navigation/Link.css index f3c70f0fc..4f12294da 100644 --- a/src/core/client/admin/routes/configure/components/Navigation/Link.css +++ b/src/core/client/admin/routes/configure/components/Navigation/Link.css @@ -1,8 +1,8 @@ .link { composes: sideNavigationItem from "talk-ui/shared/typography.css"; display: inline-block; - padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit) - calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) + 2px); + padding: calc(0.5 * var(--mini-unit)) var(--mini-unit) + calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) + 2px); margin-left: 2px; border-left: 1px solid var(--palette-grey-lighter); @@ -14,6 +14,6 @@ .linkActive { composes: sideNavigationActive from "talk-ui/shared/typography.css"; margin-left: 0px; - border-left: calc(0.5 * var(--spacing-unit)) solid var(--palette-brand-main); - padding-left: var(--spacing-unit); + border-left: calc(0.5 * var(--mini-unit)) solid var(--palette-brand-main); + padding-left: var(--mini-unit); } diff --git a/src/core/client/admin/routes/configure/components/SideBar.css b/src/core/client/admin/routes/configure/components/SideBar.css index 56773400b..98f4e66f6 100644 --- a/src/core/client/admin/routes/configure/components/SideBar.css +++ b/src/core/client/admin/routes/configure/components/SideBar.css @@ -1,7 +1,7 @@ .root { - width: calc(25 * var(--spacing-unit)); - padding-top: calc(0.5 * var(--spacing-unit)); - padding-right: calc(3 * var(--spacing-unit)); + width: calc(31 * var(--mini-unit)); + padding-top: calc(0.5 * var(--mini-unit)); + padding-right: calc(3 * var(--mini-unit)); position: sticky; top: 0; align-self: flex-start; diff --git a/src/core/client/admin/routes/configure/components/Subheader.css b/src/core/client/admin/routes/configure/components/Subheader.css index cb8b2e057..584c8c946 100644 --- a/src/core/client/admin/routes/configure/components/Subheader.css +++ b/src/core/client/admin/routes/configure/components/Subheader.css @@ -1,5 +1,5 @@ .root { - padding-bottom: calc(0.25 * var(--spacing-unit)); + padding-bottom: calc(0.25 * var(--mini-unit)); border-bottom: 1px solid var(--palette-divider); - margin-bottom: calc(0.75 * var(--spacing-unit)); + margin-bottom: calc(0.75 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/configure/components/ValidationMessage.css b/src/core/client/admin/routes/configure/components/ValidationMessage.css index 1ff2ae13c..0cc9dfa81 100644 --- a/src/core/client/admin/routes/configure/components/ValidationMessage.css +++ b/src/core/client/admin/routes/configure/components/ValidationMessage.css @@ -1,3 +1,3 @@ .root { - min-width: calc(29 * var(--spacing-unit)); + min-width: calc(29 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/configure/sections/auth/components/ConfigDescription.css b/src/core/client/admin/routes/configure/sections/auth/components/ConfigDescription.css index c28dbafe5..babc907bd 100644 --- a/src/core/client/admin/routes/configure/sections/auth/components/ConfigDescription.css +++ b/src/core/client/admin/routes/configure/sections/auth/components/ConfigDescription.css @@ -1,3 +1,3 @@ .description { - width: calc(30 * var(--spacing-unit)); + width: calc(30 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/configure/sections/auth/components/SSOKeyField.css b/src/core/client/admin/routes/configure/sections/auth/components/SSOKeyField.css index 0e072efc3..cc3665d27 100644 --- a/src/core/client/admin/routes/configure/sections/auth/components/SSOKeyField.css +++ b/src/core/client/admin/routes/configure/sections/auth/components/SSOKeyField.css @@ -1,7 +1,7 @@ .keyGenerated { composes: button from "talk-ui/shared/typography.css"; color: var(--palette-text-secondary); - width: calc(29 * var(--spacing-unit)); + width: calc(29 * var(--mini-unit)); flex-shrink: 0; } diff --git a/src/core/client/admin/routes/configure/sections/wordList/components/BannedWordListConfig.css b/src/core/client/admin/routes/configure/sections/wordList/components/BannedWordListConfig.css index f1ee4a568..3dba34c82 100644 --- a/src/core/client/admin/routes/configure/sections/wordList/components/BannedWordListConfig.css +++ b/src/core/client/admin/routes/configure/sections/wordList/components/BannedWordListConfig.css @@ -1,3 +1,3 @@ .textArea { - margin-top: var(--spacing-unit); + margin-top: var(--mini-unit); } diff --git a/src/core/client/admin/routes/configure/sections/wordList/components/SuspectWordListConfig.css b/src/core/client/admin/routes/configure/sections/wordList/components/SuspectWordListConfig.css index f1ee4a568..3dba34c82 100644 --- a/src/core/client/admin/routes/configure/sections/wordList/components/SuspectWordListConfig.css +++ b/src/core/client/admin/routes/configure/sections/wordList/components/SuspectWordListConfig.css @@ -1,3 +1,3 @@ .textArea { - margin-top: var(--spacing-unit); + margin-top: var(--mini-unit); } diff --git a/src/core/client/admin/routes/configure/sections/wordList/components/WordListTextArea.css b/src/core/client/admin/routes/configure/sections/wordList/components/WordListTextArea.css index 29c4b32fa..ca9506664 100644 --- a/src/core/client/admin/routes/configure/sections/wordList/components/WordListTextArea.css +++ b/src/core/client/admin/routes/configure/sections/wordList/components/WordListTextArea.css @@ -1,6 +1,6 @@ .textArea { width: 100%; box-sizing: border-box; - height: calc(23 * var(--spacing-unit)); - padding: calc(0.5 * var(--spacing-unit)); + height: calc(23 * var(--mini-unit)); + padding: calc(0.5 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/login/components/CompleteAccountBox.css b/src/core/client/admin/routes/login/components/CompleteAccountBox.css index 3b95ee2e8..287f3ef14 100644 --- a/src/core/client/admin/routes/login/components/CompleteAccountBox.css +++ b/src/core/client/admin/routes/login/components/CompleteAccountBox.css @@ -9,15 +9,15 @@ .header { background-color: var(--palette-text-primary); - padding: calc(1.5 * var(--spacing-unit)); + padding: calc(1.5 * var(--mini-unit)); color: var(--palette-text-light); } .heading3 { - margin-bottom: calc(0.25 * var(--spacing-unit)); + margin-bottom: calc(0.25 * var(--mini-unit)); } .main { - padding: calc(2.5 * var(--spacing-unit)) calc(2 * var(--spacing-unit)) - calc(2 * var(--spacing-unit)) calc(2 * var(--spacing-unit)); + padding: calc(2.5 * var(--mini-unit)) calc(2 * var(--mini-unit)) + calc(2 * var(--mini-unit)) calc(2 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/login/views/addEmailAddress/components/UnorderedList/UnorderedList.css b/src/core/client/admin/routes/login/views/addEmailAddress/components/UnorderedList/UnorderedList.css index 220361f29..9361c5761 100644 --- a/src/core/client/admin/routes/login/views/addEmailAddress/components/UnorderedList/UnorderedList.css +++ b/src/core/client/admin/routes/login/views/addEmailAddress/components/UnorderedList/UnorderedList.css @@ -3,7 +3,7 @@ padding: 0; & > * { - margin: 0 0 calc(1 * var(--spacing-unit)) 0 !important; + margin: 0 0 calc(1 * var(--mini-unit)) 0 !important; } & > *:last-child { margin: 0 !important; diff --git a/src/core/client/admin/routes/login/views/signIn/components/HorizontalSeparator.css b/src/core/client/admin/routes/login/views/signIn/components/HorizontalSeparator.css index 70f1733a1..0ded7b742 100644 --- a/src/core/client/admin/routes/login/views/signIn/components/HorizontalSeparator.css +++ b/src/core/client/admin/routes/login/views/signIn/components/HorizontalSeparator.css @@ -12,5 +12,5 @@ composes: heading3 from "talk-ui/shared/typography.css"; position: relative; background-color: #f5f5f5; - padding: 0 var(--spacing-unit); + padding: 0 var(--mini-unit); } diff --git a/src/core/client/admin/routes/login/views/signIn/components/Version.css b/src/core/client/admin/routes/login/views/signIn/components/Version.css index d66b90d5d..0d26da191 100644 --- a/src/core/client/admin/routes/login/views/signIn/components/Version.css +++ b/src/core/client/admin/routes/login/views/signIn/components/Version.css @@ -3,6 +3,6 @@ background-color: #f5f5f5; border: 1px solid var(--palette-grey-lighter); border-top: 0; - padding: var(--spacing-unit); + padding: var(--mini-unit); box-sizing: border-box; } diff --git a/src/core/client/admin/routes/moderate/components/AcceptButton.tsx b/src/core/client/admin/routes/moderate/components/AcceptButton.tsx index c77a7a083..939944c63 100644 --- a/src/core/client/admin/routes/moderate/components/AcceptButton.tsx +++ b/src/core/client/admin/routes/moderate/components/AcceptButton.tsx @@ -16,7 +16,7 @@ const AcceptButton: StatelessComponent = ({ className, ...rest }) => ( - + = ({ children }) => { return ( reply{" "} - }> + }> = { bannedWords: ["fuck"], onAccept: noop, onReject: noop, + showStory: false, }; it("renders correctly", () => { @@ -72,3 +73,16 @@ it("renders dangling correctly", () => { renderer.render(); expect(renderer.getRenderOutput()).toMatchSnapshot(); }); + +it("renders story info", () => { + const props: PropTypesOf = { + ...baseProps, + showStory: true, + storyTitle: "Cancer cured!", + storyHref: "/story", + onModerateStory: noop, + }; + const renderer = createRenderer(); + renderer.render(); + expect(renderer.getRenderOutput()).toMatchSnapshot(); +}); diff --git a/src/core/client/admin/routes/moderate/components/ModerateCard.tsx b/src/core/client/admin/routes/moderate/components/ModerateCard.tsx index d82d34967..617d1a072 100644 --- a/src/core/client/admin/routes/moderate/components/ModerateCard.tsx +++ b/src/core/client/admin/routes/moderate/components/ModerateCard.tsx @@ -3,7 +3,7 @@ import { Localized } from "fluent-react/compat"; import React, { StatelessComponent } from "react"; import { PropTypesOf } from "talk-framework/types"; -import { Button, Card, Flex, Icon } from "talk-ui/components"; +import { Card, Flex, HorizontalGutter, TextLink } from "talk-ui/components"; import MarkersContainer from "../containers/MarkersContainer"; import AcceptButton from "./AcceptButton"; @@ -26,6 +26,10 @@ interface Props { viewContextHref: string; suspectWords: ReadonlyArray; bannedWords: ReadonlyArray; + showStory: boolean; + storyTitle?: React.ReactNode; + storyHref?: string; + onModerateStory?: React.EventHandler; onAccept: () => void; onReject: () => void; /** @@ -50,6 +54,10 @@ const ModerateCard: StatelessComponent = ({ onAccept, onReject, dangling, + showStory, + storyTitle, + storyHref, + onModerateStory, }) => ( = ({ {body}
- - - - + +
+ + + View Context + + +
+ {showStory && ( +
+ + Story + + {": "} + {storyTitle}{" "} + + + Moderate Story + + +
+ )} - +
@@ -104,7 +129,7 @@ const ModerateCard: StatelessComponent = ({ direction="column" itemGutter > - +
DECISION
 diff --git a/src/core/client/admin/routes/moderate/components/Queue.css b/src/core/client/admin/routes/moderate/components/Queue.css index 3422f301c..d671aef7c 100644 --- a/src/core/client/admin/routes/moderate/components/Queue.css +++ b/src/core/client/admin/routes/moderate/components/Queue.css @@ -1,5 +1,5 @@ .root { - width: calc(75 * var(--spacing-unit)); + width: calc(94 * var(--mini-unit)); } .exitTransition { diff --git a/src/core/client/admin/routes/moderate/components/Queue.tsx b/src/core/client/admin/routes/moderate/components/Queue.tsx index 3c7f3c9f1..1538afe5c 100644 --- a/src/core/client/admin/routes/moderate/components/Queue.tsx +++ b/src/core/client/admin/routes/moderate/components/Queue.tsx @@ -19,6 +19,7 @@ interface Props { disableLoadMore: boolean; danglingLogic: PropTypesOf["danglingLogic"]; emptyElement?: React.ReactElement; + allStories?: boolean; } const Queue: StatelessComponent = ({ @@ -29,6 +30,7 @@ const Queue: StatelessComponent = ({ onLoadMore, danglingLogic, emptyElement, + allStories, }) => ( @@ -46,6 +48,7 @@ const Queue: StatelessComponent = ({ settings={settings} comment={c} danglingLogic={danglingLogic} + showStoryInfo={Boolean(allStories)} /> ))} diff --git a/src/core/client/admin/routes/moderate/components/RejectButton.tsx b/src/core/client/admin/routes/moderate/components/RejectButton.tsx index 88d4b4aa0..50efa5b38 100644 --- a/src/core/client/admin/routes/moderate/components/RejectButton.tsx +++ b/src/core/client/admin/routes/moderate/components/RejectButton.tsx @@ -16,7 +16,7 @@ const RejectButton: StatelessComponent = ({ className, ...rest }) => ( - + = props => { return ( diff --git a/src/core/client/admin/routes/moderate/components/__snapshots__/AcceptButton.spec.tsx.snap b/src/core/client/admin/routes/moderate/components/__snapshots__/AcceptButton.spec.tsx.snap index f5e86fb88..8839b592b 100644 --- a/src/core/client/admin/routes/moderate/components/__snapshots__/AcceptButton.spec.tsx.snap +++ b/src/core/client/admin/routes/moderate/components/__snapshots__/AcceptButton.spec.tsx.snap @@ -7,7 +7,7 @@ exports[`renders correctly 1`] = ` "aria-label": true, } } - id="moderate-acceptButton" + id="moderate-comment-acceptButton" > } > - - + +
- + View Context - + - - - arrow_forward - - - - +
@@ -83,7 +72,7 @@ exports[`renders accepted correctly 1`] = ` itemGutter={true} >
- - + +
- + View Context - + - - - arrow_forward - - - - +
@@ -192,7 +170,7 @@ exports[`renders correctly 1`] = ` itemGutter={true} >
- - + +
- + View Context - + - - - arrow_forward - - - - +
@@ -300,7 +267,7 @@ exports[`renders dangling correctly 1`] = ` itemGutter={true} >
- - + +
- + View Context - + - - - arrow_forward - - - - +
@@ -410,7 +366,7 @@ exports[`renders rejected correctly 1`] = ` itemGutter={true} >
- - + +
- + View Context - + - - - arrow_forward - - - - +
@@ -524,7 +469,134 @@ exports[`renders reply correctly 1`] = ` itemGutter={true} > +
+ DECISION +
+ + + + + + + + +`; + +exports[`renders story info 1`] = ` + + +
+
+
+ + Theon + + + 2018-11-29T16:01:51.897Z + +
+
+ + content + +
+ +
+ + + View Context + + +
+
+ + + Story + + + : + + Cancer cured! + + + + + Moderate Story + + +
+ + +
+
+
+ +
Marvin diff --git a/src/core/client/admin/routes/moderate/containers/MarkersContainer.tsx b/src/core/client/admin/routes/moderate/containers/MarkersContainer.tsx index 3ab6bd600..6e337bb40 100644 --- a/src/core/client/admin/routes/moderate/containers/MarkersContainer.tsx +++ b/src/core/client/admin/routes/moderate/containers/MarkersContainer.tsx @@ -4,7 +4,7 @@ import { graphql } from "react-relay"; import { MarkersContainer_comment as CommentData } from "talk-admin/__generated__/MarkersContainer_comment.graphql"; import { withFragmentContainer } from "talk-framework/lib/relay"; -import { Marker, MarkerCount } from "talk-ui/components"; +import { Flex, Marker, MarkerCount } from "talk-ui/components"; interface MarkersContainerProps { comment: CommentData; @@ -91,7 +91,11 @@ const markers: Array<(c: CommentData) => React.ReactElement | null> = [ export class MarkersContainer extends React.Component { public render() { - return markers.map(cb => cb(this.props.comment)); + const elements = markers.map(cb => cb(this.props.comment)).filter(m => m); + if (elements.length) { + return {elements}; + } + return null; } } diff --git a/src/core/client/admin/routes/moderate/containers/ModerateCardContainer.tsx b/src/core/client/admin/routes/moderate/containers/ModerateCardContainer.tsx index 7140a82ec..4b6c90855 100644 --- a/src/core/client/admin/routes/moderate/containers/ModerateCardContainer.tsx +++ b/src/core/client/admin/routes/moderate/containers/ModerateCardContainer.tsx @@ -7,6 +7,7 @@ import { ModerateCardContainer_comment as CommentData, } from "talk-admin/__generated__/ModerateCardContainer_comment.graphql"; import { ModerateCardContainer_settings as SettingsData } from "talk-admin/__generated__/ModerateCardContainer_settings.graphql"; +import NotAvailable from "talk-admin/components/NotAvailable"; import { AcceptCommentMutation } from "talk-admin/mutations"; import { RejectCommentMutation } from "talk-admin/mutations"; import { @@ -15,6 +16,7 @@ import { withMutation, } from "talk-framework/lib/relay"; +import { getModerationLink } from "talk-admin/helpers"; import ModerateCard from "../components/ModerateCard"; interface Props { @@ -25,6 +27,7 @@ interface Props { danglingLogic: (status: COMMENT_STATUS) => boolean; match: Match; router: Router; + showStoryInfo: boolean; } function getStatus(comment: CommentData) { @@ -55,8 +58,17 @@ class ModerateCardContainer extends React.Component { }); }; + private handleModerateStory = (e: React.MouseEvent) => { + this.props.router.push( + getModerationLink("default", this.props.comment.story.id) + ); + if (e.preventDefault) { + e.preventDefault(); + } + }; + public render() { - const { comment, settings, danglingLogic } = this.props; + const { comment, settings, danglingLogic, showStoryInfo } = this.props; return ( { onAccept={this.handleAccept} onReject={this.handleReject} dangling={danglingLogic(comment.status)} + showStory={showStoryInfo} + storyTitle={ + (comment.story.metadata && comment.story.metadata.title) || ( + + ) + } + storyHref={getModerationLink("default", comment.story.id)} + onModerateStory={this.handleModerateStory} /> ); } @@ -95,6 +115,12 @@ const enhanced = withFragmentContainer({ username } } + story { + id + metadata { + title + } + } permalink ...MarkersContainer_comment } diff --git a/src/core/client/admin/routes/moderate/containers/QueueContainer.tsx b/src/core/client/admin/routes/moderate/containers/QueueContainer.tsx index 4f186a4e7..b0e302137 100644 --- a/src/core/client/admin/routes/moderate/containers/QueueContainer.tsx +++ b/src/core/client/admin/routes/moderate/containers/QueueContainer.tsx @@ -18,6 +18,7 @@ interface QueueContainerProps { settings: SettingsData; relay: RelayPaginationProp; emptyElement: React.ReactElement; + storyID?: string; } // TODO: use generated types @@ -43,6 +44,7 @@ export class QueueContainer extends React.Component { disableLoadMore={this.state.disableLoadMore} danglingLogic={danglingLogic} emptyElement={this.props.emptyElement} + allStories={!Boolean(this.props.storyID)} /> ); @@ -131,7 +133,7 @@ const createQueueContainer = ( Component: enhanced, query: queueQuery, cacheConfig: { force: true }, - render: ({ Component, props }) => { + render: ({ Component, props, match }) => { const anyProps = props as any; if (Component && props) { const queue = @@ -141,6 +143,7 @@ const createQueueContainer = ( queue={queue} settings={anyProps.settings} emptyElement={emptyElement} + storyID={match.params.storyID} /> ); } diff --git a/src/core/client/admin/routes/moderate/containers/RejectedQueueContainer.tsx b/src/core/client/admin/routes/moderate/containers/RejectedQueueContainer.tsx index fac1f699e..3fe059499 100644 --- a/src/core/client/admin/routes/moderate/containers/RejectedQueueContainer.tsx +++ b/src/core/client/admin/routes/moderate/containers/RejectedQueueContainer.tsx @@ -15,6 +15,7 @@ import Queue from "../components/Queue"; interface RejectedQueueContainerProps { query: QueryData; relay: RelayPaginationProp; + storyID?: string; } // TODO: use generated types @@ -45,6 +46,7 @@ export class RejectedQueueContainer extends React.Component< There are no rejected comments. } + allStories={!Boolean(this.props.storyID)} /> ); @@ -145,9 +147,9 @@ enhanced.routeConfig = { } `, cacheConfig: { force: true }, - render: ({ Component, props }) => { + render: ({ Component, props, match }) => { if (Component && props) { - return ; + return ; } return ; }, diff --git a/src/core/client/admin/routes/moderate/containers/__snapshots__/MarkersContainer.spec.tsx.snap b/src/core/client/admin/routes/moderate/containers/__snapshots__/MarkersContainer.spec.tsx.snap index 353728d15..3ed66f6a8 100644 --- a/src/core/client/admin/routes/moderate/containers/__snapshots__/MarkersContainer.spec.tsx.snap +++ b/src/core/client/admin/routes/moderate/containers/__snapshots__/MarkersContainer.spec.tsx.snap @@ -1,7 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders all markers 1`] = ` -Array [ + @@ -10,7 +12,7 @@ Array [ > Pre-Mod - , + @@ -19,7 +21,7 @@ Array [ > Link - , + @@ -28,7 +30,7 @@ Array [ > Banned Word - , + @@ -38,7 +40,7 @@ Array [ > Suspect Word - , + @@ -47,7 +49,7 @@ Array [ > Spam - , + @@ -56,7 +58,7 @@ Array [ > Toxic - , + @@ -65,7 +67,7 @@ Array [ > Karma - , + @@ -80,7 +82,7 @@ Array [ 2 - , + @@ -95,12 +97,14 @@ Array [ 3 - , -] + + `; exports[`renders some markers 1`] = ` -Array [ + @@ -109,8 +113,7 @@ Array [ > Pre-Mod - , - null, + @@ -119,9 +122,7 @@ Array [ > Banned Word - , - null, - null, + @@ -130,7 +131,7 @@ Array [ > Toxic - , + @@ -139,7 +140,7 @@ Array [ > Karma - , + @@ -154,7 +155,6 @@ Array [ 2 - , - null, -] + + `; diff --git a/src/core/client/admin/routes/stories/components/Stories.css b/src/core/client/admin/routes/stories/components/Stories.css index f27e73931..8b8d682c3 100644 --- a/src/core/client/admin/routes/stories/components/Stories.css +++ b/src/core/client/admin/routes/stories/components/Stories.css @@ -1,5 +1,5 @@ .root { max-width: 950px; - margin-top: calc(3 * var(--spacing-unit)); - margin-bottom: calc(3 * var(--spacing-unit)); + margin-top: calc(3 * var(--mini-unit)); + margin-bottom: calc(3 * var(--mini-unit)); } diff --git a/src/core/client/admin/routes/stories/components/StoryTableFilter.css b/src/core/client/admin/routes/stories/components/StoryTableFilter.css index 2bb04a279..a187c6ee9 100644 --- a/src/core/client/admin/routes/stories/components/StoryTableFilter.css +++ b/src/core/client/admin/routes/stories/components/StoryTableFilter.css @@ -5,9 +5,9 @@ .textField { height: 31px; - width: calc(36 * var(--spacing-unit)); + width: calc(45 * var(--mini-unit)); } .adornment { - padding: 0 var(--spacing-unit); + padding: 0 var(--mini-unit); } diff --git a/src/core/client/admin/test/fixtures.ts b/src/core/client/admin/test/fixtures.ts index d926e8a0b..05daf8235 100644 --- a/src/core/client/admin/test/fixtures.ts +++ b/src/core/client/admin/test/fixtures.ts @@ -353,6 +353,58 @@ export const users = { ), }; +export const stories = createFixtures([ + { + id: "story-1", + closedAt: null, + isClosed: false, + status: GQLSTORY_STATUS.OPEN, + createdAt: "2018-11-29T16:01:51.897Z", + metadata: { + author: "Vin Hoa", + title: "Finally a Cure for Cancer", + publishedAt: "2018-11-29T16:01:51.897Z", + }, + }, + { + id: "story-2", + closedAt: null, + isClosed: false, + status: GQLSTORY_STATUS.OPEN, + createdAt: "2018-11-29T16:01:51.897Z", + metadata: { + author: "Linh Nguyen", + title: "First Colony on Mars", + publishedAt: "2018-11-29T16:01:51.897Z", + }, + }, + { + id: "story-3", + closedAt: "2018-11-29T16:01:51.897Z", + createdAt: "2018-11-29T16:01:51.897Z", + isClosed: true, + status: GQLSTORY_STATUS.CLOSED, + metadata: { + author: undefined, + title: "World hunger has been defeated", + publishedAt: "2018-11-29T16:01:51.897Z", + }, + }, +]); + +export const storyConnection = createFixture({ + edges: [ + { node: stories[0], cursor: stories[0].createdAt }, + { node: stories[1], cursor: stories[1].createdAt }, + ], + pageInfo: { endCursor: null, hasNextPage: false }, +}); + +export const emptyStories = createFixture({ + edges: [], + pageInfo: { endCursor: null, hasNextPage: false }, +}); + export const baseComment = createFixture({ author: users.commenters[0], body: "Comment Body", @@ -372,6 +424,7 @@ export const baseComment = createFixture({ }, }, }, + story: stories[0], }); export const reportedComments = createFixtures( @@ -473,55 +526,3 @@ export const emptyCommunityUsers = createFixture({ edges: [], pageInfo: { endCursor: null, hasNextPage: false }, }); - -export const stories = createFixtures([ - { - id: "story-1", - closedAt: null, - isClosed: false, - status: GQLSTORY_STATUS.OPEN, - createdAt: "2018-11-29T16:01:51.897Z", - metadata: { - author: "Vin Hoa", - title: "Finally a Cure for Cancer", - publishedAt: "2018-11-29T16:01:51.897Z", - }, - }, - { - id: "story-2", - closedAt: null, - isClosed: false, - status: GQLSTORY_STATUS.OPEN, - createdAt: "2018-11-29T16:01:51.897Z", - metadata: { - author: "Linh Nguyen", - title: "First Colony on Mars", - publishedAt: "2018-11-29T16:01:51.897Z", - }, - }, - { - id: "story-3", - closedAt: "2018-11-29T16:01:51.897Z", - createdAt: "2018-11-29T16:01:51.897Z", - isClosed: true, - status: GQLSTORY_STATUS.CLOSED, - metadata: { - author: undefined, - title: "World hunger has been defeated", - publishedAt: "2018-11-29T16:01:51.897Z", - }, - }, -]); - -export const storyConnection = createFixture({ - edges: [ - { node: stories[0], cursor: stories[0].createdAt }, - { node: stories[1], cursor: stories[1].createdAt }, - ], - pageInfo: { endCursor: null, hasNextPage: false }, -}); - -export const emptyStories = createFixture({ - edges: [], - pageInfo: { endCursor: null, hasNextPage: false }, -}); diff --git a/src/core/client/admin/test/moderate/__snapshots__/moderate.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/moderate.spec.tsx.snap index 820b7dbd7..98dfb1e5e 100644 --- a/src/core/client/admin/test/moderate/__snapshots__/moderate.spec.tsx.snap +++ b/src/core/client/admin/test/moderate/__snapshots__/moderate.spec.tsx.snap @@ -29,7 +29,7 @@ exports[`rejected queue accepts comment in rejected queue: dangling 1`] = ` >
Isabelle @@ -54,47 +54,62 @@ exports[`rejected queue accepts comment in rejected queue: dangling 1`] = ` className="ModerateCard-footer" >
- - + +
+ + Story + + : + + Finally a Cure for Cancer - - -
-
- +
+
- - Spam - - - 2 + + Spam + + + + 2 + - +
@@ -182,7 +197,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = ` >
Isabelle @@ -207,47 +222,62 @@ exports[`rejected queue renders rejected queue with comments 1`] = ` className="ModerateCard-footer" >
- - + +
+ + Story + + : + + Finally a Cure for Cancer - - -
-
- +
+
- - Spam - - - 2 + + Spam + + + + 2 + - +
@@ -322,7 +352,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = ` >
Ngoc @@ -347,47 +377,62 @@ exports[`rejected queue renders rejected queue with comments 1`] = ` className="ModerateCard-footer" >
- - + +
+ + Story + + : + + Finally a Cure for Cancer - - -
-
- +
+
- - Offensive - - - 3 + + Offensive + + + + 3 + - +
@@ -468,7 +513,7 @@ exports[`rejected queue renders rejected queue with comments and load more 1`] = >
Max @@ -493,60 +538,75 @@ exports[`rejected queue renders rejected queue with comments and load more 1`] = className="ModerateCard-footer" >
- - + +
+ + Story + + : + + Finally a Cure for Cancer - - -
-
- +
+
- - Offensive - - - 1 + + Offensive + + + + 1 + - - - - Spam - - - 1 + + Spam + + + + 1 + - +
@@ -637,7 +697,7 @@ exports[`reported queue accepts comment in reported queue: dangling 1`] = ` >
Isabelle @@ -662,47 +722,62 @@ exports[`reported queue accepts comment in reported queue: dangling 1`] = ` className="ModerateCard-footer" >
- - + +
+ + Story + + : + + Finally a Cure for Cancer - - -
-
- +
+
- - Spam - - - 2 + + Spam + + + + 2 + - +
@@ -793,7 +868,7 @@ exports[`reported queue rejects comment in reported queue: dangling 1`] = ` >
Isabelle @@ -818,47 +893,62 @@ exports[`reported queue rejects comment in reported queue: dangling 1`] = ` className="ModerateCard-footer" >
- - + +
+ + Story + + : + + Finally a Cure for Cancer - - -
-
- +
+
- - Spam - - - 2 + + Spam + + + + 2 + - +
@@ -967,7 +1057,7 @@ exports[`reported queue renders reported queue with comments 1`] = ` >
Isabelle @@ -992,47 +1082,62 @@ exports[`reported queue renders reported queue with comments 1`] = ` className="ModerateCard-footer" >
- - + +
+ + Story + + : + + Finally a Cure for Cancer - - -
-
- +
+
- - Spam - - - 2 + + Spam + + + + 2 + - +
@@ -1107,7 +1212,7 @@ exports[`reported queue renders reported queue with comments 1`] = ` >
Ngoc @@ -1132,47 +1237,388 @@ exports[`reported queue renders reported queue with comments 1`] = ` className="ModerateCard-footer" >
- - + +
+ + Story + + : + + Finally a Cure for Cancer -
+
+ + + Offensive + + + + 3 + - +
-
+
+
+
+
+ Decision +
+
+ + +
+
+
+
+ + + +`; + +exports[`reported queue renders reported queue with comments 2`] = ` +
+
+
+
+
+
+
+
+ + Isabelle + + +
+
+
+
+
+ +
+ + Story + + : + + Finally a Cure for Cancer - - 3 + Moderate Story + +
+
+ + + Spam + + + + 2 + +
+
+
+
+
+
+
+ Decision +
+
+ + +
+
+
+
+
+
+
+
+
+ + Ngoc + + +
+
+
+
+
+ +
+ + Story + + : + + Finally a Cure for Cancer + + + + Moderate Story + +
+
+ + + Offensive + + + + 3 + + +
@@ -1253,7 +1699,7 @@ exports[`reported queue renders reported queue with comments and load more 1`] = >
Max @@ -1278,65 +1724,80 @@ exports[`reported queue renders reported queue with comments and load more 1`] = className="ModerateCard-footer" >
- - + +
+ + Story + + : + + Finally a Cure for Cancer - - -
-
- +
+
- Pre-Mod - - - - Offensive - - - 1 + Pre-Mod - - - - Spam - - - 1 + + Offensive + + + + 1 + - + + + Spam + + + + 1 + + +
@@ -1668,7 +2129,7 @@ exports[`single comment view accepts single comment 1`] = ` >
Isabelle @@ -1693,47 +2154,40 @@ exports[`single comment view accepts single comment 1`] = ` className="ModerateCard-footer" >
- - + -
- + +
+
- - Spam - - - 2 + + Spam + + + + 2 + - +
@@ -1811,7 +2265,7 @@ exports[`single comment view rejects single comment 1`] = ` >
Isabelle @@ -1836,47 +2290,40 @@ exports[`single comment view rejects single comment 1`] = ` className="ModerateCard-footer" >
- - + -
- + +
+
- - Spam - - - 2 + + Spam + + + + 2 + - +
@@ -1989,7 +2436,7 @@ exports[`single comment view renders single comment view 1`] = ` >
Isabelle @@ -2014,47 +2461,40 @@ exports[`single comment view renders single comment view 1`] = ` className="ModerateCard-footer" >
- - + -
- + +
+
- - Spam - - - 2 + + Spam + + + + 2 + - +
diff --git a/src/core/client/admin/test/moderate/moderate.spec.tsx b/src/core/client/admin/test/moderate/moderate.spec.tsx index 1b30c4d44..0963f6fbf 100644 --- a/src/core/client/admin/test/moderate/moderate.spec.tsx +++ b/src/core/client/admin/test/moderate/moderate.spec.tsx @@ -1,3 +1,6 @@ +import { noop } from "lodash"; +import { ReactTestRenderer } from "react-test-renderer"; + import { pureMerge } from "talk-common/utils"; import { GQLCOMMENT_STATUS, @@ -21,8 +24,6 @@ import { within, } from "talk-framework/testHelpers"; -import { noop } from "lodash"; -import { ReactTestRenderer } from "react-test-renderer"; import create from "../create"; import { emptyModerationQueues, @@ -270,6 +271,12 @@ describe("tab bar", () => { await waitForElement(() => getByTestID("moderate-container")); expect(toJSON(getByTestID("moderate-tabBar-container"))).toMatchSnapshot(); }); + it("should not show moderate story link in comment cards", async () => { + const { testRenderer } = await createTestRenderer(); + const { getByTestID } = within(testRenderer.root); + await waitForElement(() => getByTestID("moderate-container")); + expect(within(testRenderer.root).queryByText("Moderate Story")).toBeNull(); + }); }); describe("moderating specific story", () => { @@ -365,6 +372,91 @@ describe("reported queue", () => { expect(toJSON(getByTestID("moderate-main-container"))).toMatchSnapshot(); }); + it("renders reported queue with comments", async () => { + const { testRenderer } = await createTestRenderer({ + resolvers: createResolversStub({ + Query: { + moderationQueues: () => + pureMerge(emptyModerationQueues, { + reported: { + count: 2, + comments: createQueryResolverStub< + ModerationQueueToCommentsResolver + >(({ variables }) => { + expectAndFail(variables).toEqual({ first: 5 }); + return { + edges: [ + { + node: reportedComments[0], + cursor: reportedComments[0].createdAt, + }, + { + node: reportedComments[1], + cursor: reportedComments[1].createdAt, + }, + ], + pageInfo: { + endCursor: reportedComments[1].createdAt, + hasNextPage: false, + }, + }; + }) as any, + }, + }), + }, + }), + }); + const { getByTestID } = within(testRenderer.root); + await waitForElement(() => getByTestID("moderate-container")); + expect(toJSON(getByTestID("moderate-main-container"))).toMatchSnapshot(); + }); + it("shows a moderate story", async () => { + const { + testRenderer, + context: { transitionControl }, + } = await createTestRenderer({ + resolvers: createResolversStub({ + Query: { + moderationQueues: () => + pureMerge(emptyModerationQueues, { + reported: { + count: 2, + comments: createQueryResolverStub< + ModerationQueueToCommentsResolver + >(({ variables }) => { + expectAndFail(variables).toEqual({ first: 5 }); + return { + edges: [ + { + node: reportedComments[0], + cursor: reportedComments[0].createdAt, + }, + { + node: reportedComments[1], + cursor: reportedComments[1].createdAt, + }, + ], + pageInfo: { + endCursor: reportedComments[1].createdAt, + hasNextPage: false, + }, + }; + }) as any, + }, + }), + }, + }), + }); + const moderateStory = await waitForElement( + () => within(testRenderer.root).getAllByText("Moderate Story")[0] + ); + transitionControl.allowTransition = false; + moderateStory.props.onClick({}); + // Expect a routing request was made to the right url. + expect(transitionControl.history[0].pathname).toBe( + `/admin/moderate/${reportedComments[0].story.id}` + ); + }); it("renders reported queue with comments and load more", async () => { const moderationQueuesStub = pureMerge(emptyModerationQueues, { reported: { @@ -656,6 +748,50 @@ describe("rejected queue", () => { expect(toJSON(getByTestID("moderate-main-container"))).toMatchSnapshot(); }); + it("shows a moderate story", async () => { + const { + testRenderer, + context: { transitionControl }, + } = await createTestRenderer({ + resolvers: createResolversStub({ + Query: { + comments: ({ variables }) => { + expectAndFail(variables).toEqual({ + first: 5, + status: "REJECTED", + storyID: null, + }); + return { + edges: [ + { + node: rejectedComments[0], + cursor: rejectedComments[0].createdAt, + }, + { + node: rejectedComments[1], + cursor: rejectedComments[1].createdAt, + }, + ], + pageInfo: { + endCursor: rejectedComments[1].createdAt, + hasNextPage: false, + }, + }; + }, + }, + }), + }); + const moderateStory = await waitForElement( + () => within(testRenderer.root).getAllByText("Moderate Story")[0] + ); + transitionControl.allowTransition = false; + moderateStory.props.onClick({}); + // Expect a routing request was made to the right url. + expect(transitionControl.history[0].pathname).toBe( + `/admin/moderate/${reportedComments[0].story.id}` + ); + }); + it("renders rejected queue with comments and load more", async () => { const { testRenderer } = await createTestRenderer({ resolvers: createResolversStub({ diff --git a/src/core/client/admin/views/decisionHistory/components/DecisionHistoryLoading.css b/src/core/client/admin/views/decisionHistory/components/DecisionHistoryLoading.css index 7b77839a1..2578c1550 100644 --- a/src/core/client/admin/views/decisionHistory/components/DecisionHistoryLoading.css +++ b/src/core/client/admin/views/decisionHistory/components/DecisionHistoryLoading.css @@ -1,4 +1,4 @@ .container { - padding: var(--spacing-unit); + padding: var(--mini-unit); min-height: 30px; } diff --git a/src/core/client/admin/views/decisionHistory/components/DecisionItem.css b/src/core/client/admin/views/decisionHistory/components/DecisionItem.css index 5216bdf50..ceb23e4be 100644 --- a/src/core/client/admin/views/decisionHistory/components/DecisionItem.css +++ b/src/core/client/admin/views/decisionHistory/components/DecisionItem.css @@ -1,6 +1,6 @@ .root { - padding: calc(0.5 * var(--spacing-unit)) calc(0.5 * var(--spacing-unit)) - calc(0.5 * var(--spacing-unit)) 0; + padding: calc(0.5 * var(--mini-unit)) calc(0.5 * var(--mini-unit)) + calc(0.5 * var(--mini-unit)) 0; } .leftCol { @@ -8,6 +8,6 @@ justify-content: center; flex-grow: 0; flex-shrink: 0; - width: calc(3 * var(--spacing-unit)); + width: calc(3 * var(--mini-unit)); padding-top: 3px; } diff --git a/src/core/client/admin/views/decisionHistory/components/DotDivider.css b/src/core/client/admin/views/decisionHistory/components/DotDivider.css index 2c8a678ff..8df5fc9aa 100644 --- a/src/core/client/admin/views/decisionHistory/components/DotDivider.css +++ b/src/core/client/admin/views/decisionHistory/components/DotDivider.css @@ -3,5 +3,5 @@ font-size: calc(12rem / var(--rem-base)); line-height: calc(12em / 12); color: var(--palette-divider); - padding: 0 calc(0.5 * var(--spacing-unit)); + padding: 0 calc(0.5 * var(--mini-unit)); } diff --git a/src/core/client/admin/views/decisionHistory/components/Empty.css b/src/core/client/admin/views/decisionHistory/components/Empty.css index e9b985a5f..e50019701 100644 --- a/src/core/client/admin/views/decisionHistory/components/Empty.css +++ b/src/core/client/admin/views/decisionHistory/components/Empty.css @@ -1,3 +1,3 @@ .root { - padding: calc(1.5 * var(--spacing-unit)) calc(2 * var(--spacing-unit)); + padding: calc(1.5 * var(--mini-unit)) calc(2 * var(--mini-unit)); } diff --git a/src/core/client/admin/views/decisionHistory/components/Main.css b/src/core/client/admin/views/decisionHistory/components/Main.css index 062a053aa..d6e2b5561 100644 --- a/src/core/client/admin/views/decisionHistory/components/Main.css +++ b/src/core/client/admin/views/decisionHistory/components/Main.css @@ -1,5 +1,5 @@ .root { - max-height: calc(26 * var(--spacing-unit)); + max-height: calc(26 * var(--mini-unit)); overflow: hidden; overflow-y: scroll; } diff --git a/src/core/client/admin/views/decisionHistory/components/ShowMoreButton.css b/src/core/client/admin/views/decisionHistory/components/ShowMoreButton.css index 3ce579659..87c94f276 100644 --- a/src/core/client/admin/views/decisionHistory/components/ShowMoreButton.css +++ b/src/core/client/admin/views/decisionHistory/components/ShowMoreButton.css @@ -3,7 +3,7 @@ font-size: calc(12rem / var(--rem-base)); font-weight: var(--font-weight-medium); font-family: var(--font-family-sans-serif); - line-height: calc(2 * var(--spacing-unit)); + line-height: calc(2 * var(--mini-unit)); letter-spacing: calc(0.2em / 12); color: var(--palette-grey-main); width: 100%; diff --git a/src/core/client/admin/views/decisionHistory/components/Title.css b/src/core/client/admin/views/decisionHistory/components/Title.css index 60df8148b..48e9ebba3 100644 --- a/src/core/client/admin/views/decisionHistory/components/Title.css +++ b/src/core/client/admin/views/decisionHistory/components/Title.css @@ -1,5 +1,5 @@ .root { - padding: 0 calc(0.5 * var(--spacing-unit)); + padding: 0 calc(0.5 * var(--mini-unit)); background-color: #f2f2f2; color: var(--palette-text-primary); border-bottom: 1px solid var(--palette-grey-lighter); diff --git a/src/core/client/auth/components/Header/Bar.css b/src/core/client/auth/components/Header/Bar.css index 8f20fe4ad..3c3dd1c4e 100644 --- a/src/core/client/auth/components/Header/Bar.css +++ b/src/core/client/auth/components/Header/Bar.css @@ -1,4 +1,4 @@ .root { - min-height: calc(var(--spacing-unit) * 8); + min-height: calc(var(--mini-unit) * 8); background-color: var(--palette-text-primary); } diff --git a/src/core/client/auth/components/Header/SubBar.css b/src/core/client/auth/components/Header/SubBar.css index 3b39fe5c6..db1e68a78 100644 --- a/src/core/client/auth/components/Header/SubBar.css +++ b/src/core/client/auth/components/Header/SubBar.css @@ -1,4 +1,4 @@ .root { - min-height: calc(var(--spacing-unit) * 4); + min-height: calc(var(--mini-unit) * 4); border-bottom: 1px solid var(--palette-divider); } diff --git a/src/core/client/auth/components/HorizontalSeparator.css b/src/core/client/auth/components/HorizontalSeparator.css index a82c0c7ba..9c6c7bd51 100644 --- a/src/core/client/auth/components/HorizontalSeparator.css +++ b/src/core/client/auth/components/HorizontalSeparator.css @@ -12,5 +12,5 @@ composes: heading3 from "talk-ui/shared/typography.css"; position: relative; background-color: var(--palette-common-white); - padding: 0 var(--spacing-unit); + padding: 0 var(--mini-unit); } diff --git a/src/core/client/auth/components/Main.css b/src/core/client/auth/components/Main.css index a377df34f..757bd27d9 100644 --- a/src/core/client/auth/components/Main.css +++ b/src/core/client/auth/components/Main.css @@ -1,5 +1,5 @@ .root { width: 100%; - padding: calc(2.5 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit)); + padding: calc(2.5 * var(--mini-unit)) calc(1.5 * var(--mini-unit)); box-sizing: border-box; } diff --git a/src/core/client/auth/views/addEmailAddress/components/UnorderedList/UnorderedList.css b/src/core/client/auth/views/addEmailAddress/components/UnorderedList/UnorderedList.css index 220361f29..9361c5761 100644 --- a/src/core/client/auth/views/addEmailAddress/components/UnorderedList/UnorderedList.css +++ b/src/core/client/auth/views/addEmailAddress/components/UnorderedList/UnorderedList.css @@ -3,7 +3,7 @@ padding: 0; & > * { - margin: 0 0 calc(1 * var(--spacing-unit)) 0 !important; + margin: 0 0 calc(1 * var(--mini-unit)) 0 !important; } & > *:last-child { margin: 0 !important; diff --git a/src/core/client/framework/components/DurationField.css b/src/core/client/framework/components/DurationField.css index 95b37cbf2..53226f7f5 100644 --- a/src/core/client/framework/components/DurationField.css +++ b/src/core/client/framework/components/DurationField.css @@ -1,8 +1,8 @@ .value { - width: calc(6 * var(--spacing-unit)); + width: calc(6 * var(--mini-unit)); } .unit { height: 100%; - min-width: calc(17 * var(--spacing-unit)); + min-width: calc(17 * var(--mini-unit)); } diff --git a/src/core/client/framework/components/Markdown.css b/src/core/client/framework/components/Markdown.css index 27ab178cb..44869f50c 100644 --- a/src/core/client/framework/components/Markdown.css +++ b/src/core/client/framework/components/Markdown.css @@ -27,9 +27,9 @@ } blockquote { background-color: rgba(255, 255, 255, 0.66); - padding: var(--spacing-unit); - margin: calc(2 * var(--spacing-unit)) 0 calc(2 * var(--spacing-unit)) - var(--spacing-unit); + padding: var(--mini-unit); + margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit)) + var(--mini-unit); border-radius: var(--round-corners); &::after { content: none; diff --git a/src/core/client/framework/components/loadables/MarkdownEditor/MarkdownEditor.css b/src/core/client/framework/components/loadables/MarkdownEditor/MarkdownEditor.css index 0f342f3ab..2c30cf836 100644 --- a/src/core/client/framework/components/loadables/MarkdownEditor/MarkdownEditor.css +++ b/src/core/client/framework/components/loadables/MarkdownEditor/MarkdownEditor.css @@ -30,9 +30,9 @@ $fullscreenZIndex: 10; } blockquote { background-color: rgba(0, 0, 0, 0.075); - padding: var(--spacing-unit); - margin: calc(2 * var(--spacing-unit)) 0 calc(2 * var(--spacing-unit)) - var(--spacing-unit); + padding: var(--mini-unit); + margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit)) + var(--mini-unit); border-radius: var(--round-corners); &::after { content: none; diff --git a/src/core/client/install/components/App.css b/src/core/client/install/components/App.css index d832c85e3..1d565ea86 100644 --- a/src/core/client/install/components/App.css +++ b/src/core/client/install/components/App.css @@ -18,8 +18,8 @@ } .container { - padding: var(--spacing-unit) var(--spacing-unit) calc(2 * var(--spacing-unit)) - var(--spacing-unit); + padding: var(--mini-unit) var(--mini-unit) calc(2 * var(--mini-unit)) + var(--mini-unit); max-width: 1080px; margin: 0 auto; } diff --git a/src/core/client/install/components/Header.css b/src/core/client/install/components/Header.css index ab66ab18e..12fc62536 100644 --- a/src/core/client/install/components/Header.css +++ b/src/core/client/install/components/Header.css @@ -1,5 +1,5 @@ .root { - padding: calc(4 * var(--spacing-unit)) 0; + padding: calc(4 * var(--mini-unit)) 0; } .headline { diff --git a/src/core/client/install/components/MainBar.css b/src/core/client/install/components/MainBar.css index 56dd0b79a..c3688d99c 100644 --- a/src/core/client/install/components/MainBar.css +++ b/src/core/client/install/components/MainBar.css @@ -1,7 +1,7 @@ .root { width: 100%; border-bottom: 2px solid var(--palette-grey-main); - padding: var(--spacing-unit); + padding: var(--mini-unit); box-sizing: border-box; background: var(--palette-text-primary); background: linear-gradient( diff --git a/src/core/client/install/components/Wizard.css b/src/core/client/install/components/Wizard.css index e63953fa0..0e4c6049c 100644 --- a/src/core/client/install/components/Wizard.css +++ b/src/core/client/install/components/Wizard.css @@ -9,5 +9,5 @@ } .stepBar { - padding: var(--spacing-unit) 0 calc(6 * var(--spacing-unit)); + padding: var(--mini-unit) 0 calc(6 * var(--mini-unit)); } diff --git a/src/core/client/stream/components/App.css b/src/core/client/stream/components/App.css index 021a9a6ff..2c62bf6d9 100644 --- a/src/core/client/stream/components/App.css +++ b/src/core/client/stream/components/App.css @@ -16,5 +16,5 @@ } .tabContent { - padding-top: var(--spacing-unit); + padding-top: var(--mini-unit); } diff --git a/src/core/client/stream/components/MessageBox/MessageBox.css b/src/core/client/stream/components/MessageBox/MessageBox.css index 77a960aa2..db6e8d7cc 100644 --- a/src/core/client/stream/components/MessageBox/MessageBox.css +++ b/src/core/client/stream/components/MessageBox/MessageBox.css @@ -3,7 +3,7 @@ position: relative; justify-content: flex-start; align-items: center; - padding: calc(0.5 * var(--spacing-unit) + 1px) var(--spacing-unit); + padding: calc(0.5 * var(--mini-unit) + 1px) var(--mini-unit); box-sizing: border-box; width: 100%; background-color: var(--palette-text-primary); diff --git a/src/core/client/stream/components/MessageBox/MessageBoxIcon.css b/src/core/client/stream/components/MessageBox/MessageBoxIcon.css index a8b8502da..b637850ce 100644 --- a/src/core/client/stream/components/MessageBox/MessageBoxIcon.css +++ b/src/core/client/stream/components/MessageBox/MessageBoxIcon.css @@ -4,6 +4,6 @@ flex-shrink: 0; color: var(--palette-text-light); &:first-child { - margin-right: calc(0.5 * var(--spacing-unit)); + margin-right: calc(0.5 * var(--mini-unit)); } } diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.css b/src/core/client/stream/components/UserBoxUnauthenticated.css index 272b33bdb..744ca0556 100644 --- a/src/core/client/stream/components/UserBoxUnauthenticated.css +++ b/src/core/client/stream/components/UserBoxUnauthenticated.css @@ -1,3 +1,3 @@ .joinText { - margin-right: var(--spacing-unit); + margin-right: var(--mini-unit); } diff --git a/src/core/client/stream/shared/htmlContent.css b/src/core/client/stream/shared/htmlContent.css index 542fa9a54..6ea9be50e 100644 --- a/src/core/client/stream/shared/htmlContent.css +++ b/src/core/client/stream/shared/htmlContent.css @@ -12,9 +12,9 @@ } blockquote { background-color: var(--palette-grey-lightest); - padding: var(--spacing-unit); - margin: calc(2 * var(--spacing-unit)) 0 calc(2 * var(--spacing-unit)) - var(--spacing-unit); + padding: var(--mini-unit); + margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit)) + var(--mini-unit); border-radius: var(--round-corners); &::after { content: none; diff --git a/src/core/client/stream/tabs/comments/components/Comment/Comment.css b/src/core/client/stream/tabs/comments/components/Comment/Comment.css index 642206f36..efcaee621 100644 --- a/src/core/client/stream/tabs/comments/components/Comment/Comment.css +++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.css @@ -2,11 +2,11 @@ } .highlight { background-color: var(--palette-primary-lightest); - padding: var(--spacing-unit); + padding: var(--mini-unit); } .subBar { - margin-bottom: calc(0.5 * var(--spacing-unit)); + margin-bottom: calc(0.5 * var(--mini-unit)); } .footer:not(:empty) { - margin-top: var(--spacing-unit); + margin-top: var(--mini-unit); } diff --git a/src/core/client/stream/tabs/comments/components/Divider.css b/src/core/client/stream/tabs/comments/components/Divider.css index 35b5ca13b..97eb716b9 100644 --- a/src/core/client/stream/tabs/comments/components/Divider.css +++ b/src/core/client/stream/tabs/comments/components/Divider.css @@ -1,5 +1,5 @@ .root { border: 0; border-top: 1px solid var(--palette-divider); - margin: var(--spacing-unit) 0; + margin: var(--mini-unit) 0; } diff --git a/src/core/client/stream/tabs/comments/components/Indent.css b/src/core/client/stream/tabs/comments/components/Indent.css index 87f598224..9b07bb0db 100644 --- a/src/core/client/stream/tabs/comments/components/Indent.css +++ b/src/core/client/stream/tabs/comments/components/Indent.css @@ -2,37 +2,37 @@ } .level1 { - padding-left: var(--spacing-unit); + padding-left: var(--mini-unit); border-left: 3px solid var(--palette-grey-darkest); } .level2 { - padding-left: var(--spacing-unit); - margin-left: var(--spacing-unit); + padding-left: var(--mini-unit); + margin-left: var(--mini-unit); border-left: 3px solid var(--palette-grey-dark); } .level3 { - padding-left: var(--spacing-unit); - margin-left: calc(2 * var(--spacing-unit)); + padding-left: var(--mini-unit); + margin-left: calc(2 * var(--mini-unit)); border-left: 3px solid var(--palette-grey-main); } .level4 { - padding-left: var(--spacing-unit); - margin-left: calc(3 * var(--spacing-unit)); + padding-left: var(--mini-unit); + margin-left: calc(3 * var(--mini-unit)); border-left: 3px solid var(--palette-grey-light); } .level5 { - padding-left: var(--spacing-unit); - margin-left: calc(4 * var(--spacing-unit)); + padding-left: var(--mini-unit); + margin-left: calc(4 * var(--mini-unit)); border-left: 3px solid var(--palette-grey-lighter); } .level6 { - padding-left: var(--spacing-unit); - margin-left: calc(5 * var(--spacing-unit)); + padding-left: var(--mini-unit); + margin-left: calc(5 * var(--mini-unit)); border-left: 3px solid var(--palette-grey-lightest); } diff --git a/src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkPopover.css b/src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkPopover.css index 85c883743..ccfbb0f64 100644 --- a/src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkPopover.css +++ b/src/core/client/stream/tabs/comments/components/PermalinkButton/PermalinkPopover.css @@ -1,5 +1,5 @@ .root { - padding: calc(0.5 * var(--spacing-unit)); + padding: calc(0.5 * var(--mini-unit)); } .textField { diff --git a/src/core/client/stream/tabs/comments/components/PostCommentForm.css b/src/core/client/stream/tabs/comments/components/PostCommentForm.css index d31a783e1..b9cdcbf1e 100644 --- a/src/core/client/stream/tabs/comments/components/PostCommentForm.css +++ b/src/core/client/stream/tabs/comments/components/PostCommentForm.css @@ -3,5 +3,5 @@ } .poweredBy { - margin-top: calc(-0.5 * var(--spacing-unit)); + margin-top: calc(-0.5 * var(--mini-unit)); } diff --git a/src/core/client/stream/tabs/comments/components/PostCommentFormFake.css b/src/core/client/stream/tabs/comments/components/PostCommentFormFake.css index 5af67eb0a..b3962220c 100644 --- a/src/core/client/stream/tabs/comments/components/PostCommentFormFake.css +++ b/src/core/client/stream/tabs/comments/components/PostCommentFormFake.css @@ -11,7 +11,7 @@ height: 150px; width: 100%; box-sizing: border-box; - padding: var(--spacing-unit); + padding: var(--mini-unit); border-radius: var(--round-corners); resize: vertical; } diff --git a/src/core/client/stream/tabs/comments/components/RTE.css b/src/core/client/stream/tabs/comments/components/RTE.css index 1cbb04e08..f6f4be121 100644 --- a/src/core/client/stream/tabs/comments/components/RTE.css +++ b/src/core/client/stream/tabs/comments/components/RTE.css @@ -10,5 +10,5 @@ .placeholder { composes: placeholder from "talk-ui/shared/typography.css"; - margin: var(--spacing-unit) 0 0 calc(1px + var(--spacing-unit)); + margin: var(--mini-unit) 0 0 calc(1px + var(--mini-unit)); } diff --git a/src/core/client/stream/tabs/comments/components/ReplyEditSubmitStatus.css b/src/core/client/stream/tabs/comments/components/ReplyEditSubmitStatus.css index c81599100..54cc14d34 100644 --- a/src/core/client/stream/tabs/comments/components/ReplyEditSubmitStatus.css +++ b/src/core/client/stream/tabs/comments/components/ReplyEditSubmitStatus.css @@ -1,3 +1,3 @@ .callout { - min-height: calc(10 * var(--spacing-unit)); + min-height: calc(10 * var(--mini-unit)); } diff --git a/src/core/client/stream/tabs/comments/components/ReplyTo.css b/src/core/client/stream/tabs/comments/components/ReplyTo.css index 2b831bcf2..c2916ff35 100644 --- a/src/core/client/stream/tabs/comments/components/ReplyTo.css +++ b/src/core/client/stream/tabs/comments/components/ReplyTo.css @@ -1,5 +1,5 @@ .root { - padding: calc(0.5 * var(--spacing-unit)); + padding: calc(0.5 * var(--mini-unit)); color: var(--palette-grey-dark); background-color: var(--palette-grey-lightest); border: 1px solid var(--palette-grey-main); diff --git a/src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.css b/src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.css index 4fc79ebc4..48b669c4e 100644 --- a/src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.css +++ b/src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.css @@ -2,8 +2,8 @@ } .loadMore { - padding-left: var(--spacing-unit); - padding-bottom: var(--spacing-unit); + padding-left: var(--mini-unit); + padding-bottom: var(--mini-unit); } .showMoreButton { diff --git a/src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.css b/src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.css index ef94e4f5a..0a489ef25 100644 --- a/src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.css +++ b/src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.css @@ -3,7 +3,7 @@ } .replyList { - padding-left: calc(2 * var(--spacing-unit)); + padding-left: calc(2 * var(--mini-unit)); } .title1 { diff --git a/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.css b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.css index 0611ee52b..dc8871712 100644 --- a/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.css +++ b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.css @@ -7,9 +7,9 @@ display: flex; justify-content: center; align-items: center; - left: calc(-1 * var(--spacing-unit) - var(--spacing-unit) - 1px); + left: calc(-1 * var(--mini-unit) - var(--mini-unit) - 1px); background-color: var(--palette-common-white); - width: calc(2 * var(--spacing-unit)); + width: calc(2 * var(--mini-unit)); height: 23px; color: var(--palette-grey-main); } @@ -24,8 +24,8 @@ } .circle { - width: var(--spacing-unit); - height: var(--spacing-unit); + width: var(--mini-unit); + height: var(--mini-unit); fill: currentColor; stroke: currentColor; } diff --git a/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.css b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.css index 6a6b7bdc9..4814310c3 100644 --- a/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.css +++ b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.css @@ -1,7 +1,7 @@ .root { border-left: 2px solid var(--palette-grey-main); - padding-left: var(--spacing-unit); - margin-left: calc(0.5 * var(--spacing-unit)); + padding-left: var(--mini-unit); + margin-left: calc(0.5 * var(--mini-unit)); } .dotted { diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.css b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.css index f6c6fc92f..344ee6132 100644 --- a/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.css +++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.css @@ -3,7 +3,7 @@ } .title { - padding-right: calc(2 * var(--spacing-unit)); + padding-right: calc(2 * var(--mini-unit)); } .list { diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.css b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.css index 00b172137..e2002d3f1 100644 --- a/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.css +++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.css @@ -1,9 +1,9 @@ .root { - padding: calc(1 * var(--spacing-unit)); + padding: calc(1 * var(--mini-unit)); } .close { position: absolute; - top: calc(0.5 * var(--spacing-unit)); - right: calc(0.5 * var(--spacing-unit)); + top: calc(0.5 * var(--mini-unit)); + right: calc(0.5 * var(--mini-unit)); } diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.css b/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.css index 469fbcaf4..4a8c62909 100644 --- a/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.css +++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.css @@ -3,7 +3,7 @@ } .title { - padding-right: calc(2 * var(--spacing-unit)); + padding-right: calc(2 * var(--mini-unit)); } .dismiss { diff --git a/src/core/client/stream/tabs/configure/components/CloseStream.css b/src/core/client/stream/tabs/configure/components/CloseStream.css index 6d38a289e..44759a6ca 100644 --- a/src/core/client/stream/tabs/configure/components/CloseStream.css +++ b/src/core/client/stream/tabs/configure/components/CloseStream.css @@ -1,5 +1,5 @@ .heading { - padding-bottom: calc(1.5 * var(--spacing-unit)); + padding-bottom: calc(1.5 * var(--mini-unit)); } .button { diff --git a/src/core/client/stream/tabs/configure/components/ConfigureStream.css b/src/core/client/stream/tabs/configure/components/ConfigureStream.css index 97b9aaf94..0d8f16aeb 100644 --- a/src/core/client/stream/tabs/configure/components/ConfigureStream.css +++ b/src/core/client/stream/tabs/configure/components/ConfigureStream.css @@ -1,3 +1,3 @@ .heading { - padding-bottom: calc(2 * var(--spacing-unit)); + padding-bottom: calc(2 * var(--mini-unit)); } diff --git a/src/core/client/stream/tabs/configure/components/HorizontalRule.css b/src/core/client/stream/tabs/configure/components/HorizontalRule.css index c9bbbec97..ea2c1a3df 100644 --- a/src/core/client/stream/tabs/configure/components/HorizontalRule.css +++ b/src/core/client/stream/tabs/configure/components/HorizontalRule.css @@ -2,6 +2,6 @@ border: 0; border-bottom: 1px solid var(--palette-divider); padding-top: 1px; - margin-top: calc(3 * var(--spacing-unit)); - margin-bottom: calc(2 * var(--spacing-unit)); + margin-top: calc(3 * var(--mini-unit)); + margin-bottom: calc(2 * var(--mini-unit)); } diff --git a/src/core/client/stream/tabs/configure/components/OpenStream.css b/src/core/client/stream/tabs/configure/components/OpenStream.css index 6d38a289e..44759a6ca 100644 --- a/src/core/client/stream/tabs/configure/components/OpenStream.css +++ b/src/core/client/stream/tabs/configure/components/OpenStream.css @@ -1,5 +1,5 @@ .heading { - padding-bottom: calc(1.5 * var(--spacing-unit)); + padding-bottom: calc(1.5 * var(--mini-unit)); } .button { diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.css b/src/core/client/stream/tabs/profile/components/HistoryComment.css index a21fd7855..19577119d 100644 --- a/src/core/client/stream/tabs/profile/components/HistoryComment.css +++ b/src/core/client/stream/tabs/profile/components/HistoryComment.css @@ -1,8 +1,13 @@ .icon { color: var(--palette-text-secondary); - margin-right: calc(0.5 * var(--spacing-unit)); + margin-right: calc(0.5 * var(--mini-unit)); } .replies { composes: button from "talk-ui/shared/typography.css"; } + +.viewConversation { + composes: button from "talk-ui/shared/typography.css"; + color: var(--palette-grey-main); +} diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx index d63f68977..7939cada2 100644 --- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx +++ b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx @@ -3,10 +3,10 @@ import * as React from "react"; import { StatelessComponent } from "react"; import Timestamp from "talk-stream/components/Timestamp"; import { - Button, Flex, HorizontalGutter, Icon, + TextLink, Typography, } from "talk-ui/components"; @@ -53,18 +53,16 @@ const HistoryComment: StatelessComponent = props => {
)} - + + + View Conversation + + ); diff --git a/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap b/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap index 61946cb91..9fc14bec9 100644 --- a/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap +++ b/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap @@ -47,24 +47,18 @@ exports[`renders correctly 1`] = `
- - - launch - - - - View Conversation - - - + View Conversation + + `; diff --git a/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap index 995892c5f..9155a6bdc 100644 --- a/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap +++ b/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap @@ -42,26 +42,12 @@ exports[`renders profile 1`] = ` className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow" > - - - View Conversation - + View Conversation
@@ -97,26 +83,12 @@ exports[`renders profile 1`] = ` className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow" > - - - View Conversation - + View Conversation diff --git a/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap index ac9df043b..bad437591 100644 --- a/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap +++ b/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap @@ -90,26 +90,12 @@ exports[`renders profile 1`] = ` className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow" > - - - View Conversation - + View Conversation @@ -145,26 +131,12 @@ exports[`renders profile 1`] = ` className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow" > - - - View Conversation - + View Conversation diff --git a/src/core/client/ui/components/AppBar/AppBar.css b/src/core/client/ui/components/AppBar/AppBar.css index b0d90269e..cab7f3420 100644 --- a/src/core/client/ui/components/AppBar/AppBar.css +++ b/src/core/client/ui/components/AppBar/AppBar.css @@ -6,13 +6,13 @@ .container { max-width: 1280px; margin: 0 auto; - height: calc(5 * var(--spacing-unit)); + height: calc(7 * var(--mini-unit)); box-sizing: border-box; } .gutterBegin { - padding-left: calc(2 * var(--spacing-unit)); + padding-left: calc(2 * var(--mini-unit)); } .gutterEnd { - padding-right: calc(2 * var(--spacing-unit)); + padding-right: calc(2 * var(--mini-unit)); } diff --git a/src/core/client/ui/components/AppBar/NavigationItem.css b/src/core/client/ui/components/AppBar/NavigationItem.css index d291397a2..389ae284c 100644 --- a/src/core/client/ui/components/AppBar/NavigationItem.css +++ b/src/core/client/ui/components/AppBar/NavigationItem.css @@ -7,7 +7,7 @@ height: 100%; display: inline-flex; align-items: center; - padding: 0 var(--spacing-unit); + padding: 0 var(--mini-unit); text-transform: uppercase; text-decoration: none; &:hover { diff --git a/src/core/client/ui/components/Brand/Logo.css b/src/core/client/ui/components/Brand/Logo.css index 18643cc2a..465bfa40c 100644 --- a/src/core/client/ui/components/Brand/Logo.css +++ b/src/core/client/ui/components/Brand/Logo.css @@ -2,5 +2,5 @@ } .icon { - margin-right: var(--spacing-unit); + margin-right: var(--mini-unit); } diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css index 2ee6da3c8..773cc4d3d 100644 --- a/src/core/client/ui/components/Button/Button.css +++ b/src/core/client/ui/components/Button/Button.css @@ -9,7 +9,7 @@ border: 0px solid transparent; & > * { - margin: 0 calc(0.5 * var(--spacing-unit)) 0 0; + margin: 0 calc(0.5 * var(--mini-unit)) 0 0; /* convince safari */ align-self: center; } diff --git a/src/core/client/ui/components/Button/Button.mdx b/src/core/client/ui/components/Button/Button.mdx index ffb1a629d..6abcd8ed0 100644 --- a/src/core/client/ui/components/Button/Button.mdx +++ b/src/core/client/ui/components/Button/Button.mdx @@ -7,6 +7,7 @@ import { Playground } from "docz"; import Button from "./Button"; import ButtonIcon from "./ButtonIcon"; import Icon from "../Icon"; +import TextField from "../TextField"; import Flex from "../Flex"; # Button @@ -148,3 +149,58 @@ import Flex from "../Flex"; + +## Underlined Button + + + + + + + + + + + + + + + + + +## TextField Adornment + + + + + search + + } + /> + + diff --git a/src/core/client/ui/components/CallOut/CallOut.css b/src/core/client/ui/components/CallOut/CallOut.css index 61cd24855..6ec47f320 100644 --- a/src/core/client/ui/components/CallOut/CallOut.css +++ b/src/core/client/ui/components/CallOut/CallOut.css @@ -4,7 +4,7 @@ display: inline-flex; justify-content: center; align-items: center; - padding: var(--spacing-unit); + padding: var(--mini-unit); box-sizing: border-box; border-width: 1px; border-style: solid; diff --git a/src/core/client/ui/components/Card/Card.css b/src/core/client/ui/components/Card/Card.css index cf06ab623..1d8d78776 100644 --- a/src/core/client/ui/components/Card/Card.css +++ b/src/core/client/ui/components/Card/Card.css @@ -1,6 +1,6 @@ .root { position: relative; - padding: calc(2 * var(--spacing-unit)); + padding: calc(2 * var(--mini-unit)); box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25); diff --git a/src/core/client/ui/components/Card/CloseButton.css b/src/core/client/ui/components/Card/CloseButton.css index fa5123937..8b1b081ff 100644 --- a/src/core/client/ui/components/Card/CloseButton.css +++ b/src/core/client/ui/components/Card/CloseButton.css @@ -1,7 +1,7 @@ .root { min-height: 0px; - padding: calc(0.5 * var(--spacing-unit)); - margin-left: calc(2 * var(--spacing-unit)); + padding: calc(0.5 * var(--mini-unit)); + margin-left: calc(2 * var(--mini-unit)); float: right; position: relative; top: -5px; diff --git a/src/core/client/ui/components/Dropdown/Button.css b/src/core/client/ui/components/Dropdown/Button.css index 3c8038320..e1735c5e0 100644 --- a/src/core/client/ui/components/Dropdown/Button.css +++ b/src/core/client/ui/components/Dropdown/Button.css @@ -3,7 +3,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit); + padding: calc(0.5 * var(--mini-unit)) var(--mini-unit); width: 100%; text-align: left; } @@ -18,10 +18,10 @@ .icon { color: var(--palette-grey-main); - margin-left: var(--spacing-unit); + margin-left: var(--mini-unit); padding-top: 1px; } .blankAdornment { - padding-right: calc(3.5 * var(--spacing-unit)); + padding-right: calc(3.5 * var(--mini-unit)); } diff --git a/src/core/client/ui/components/Dropdown/Divider.css b/src/core/client/ui/components/Dropdown/Divider.css index 5de385fcf..fbcd936e1 100644 --- a/src/core/client/ui/components/Dropdown/Divider.css +++ b/src/core/client/ui/components/Dropdown/Divider.css @@ -2,5 +2,5 @@ border: 0; border-bottom: 1px solid var(--palette-divider); padding-top: 1px; - margin: calc(0.5 * var(--spacing-unit)) 0; + margin: calc(0.5 * var(--mini-unit)) 0; } diff --git a/src/core/client/ui/components/Dropdown/Dropdown.css b/src/core/client/ui/components/Dropdown/Dropdown.css index 52acb9c9c..660ced0b0 100644 --- a/src/core/client/ui/components/Dropdown/Dropdown.css +++ b/src/core/client/ui/components/Dropdown/Dropdown.css @@ -1,3 +1,3 @@ .root { - padding: calc(0.5 * var(--spacing-unit)) 0; + padding: calc(0.5 * var(--mini-unit)) 0; } diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css index 2618ec2e4..79e4c2b0a 100644 --- a/src/core/client/ui/components/Flex/Flex.css +++ b/src/core/client/ui/components/Flex/Flex.css @@ -7,21 +7,21 @@ .halfItemGutter { & > * { - margin: 0 calc(0.5 * var(--spacing-unit)) 0 0 !important; + margin: 0 calc(0.5 * var(--mini-unit)) 0 0 !important; } &.directionRowReverse { & > * { - margin: 0 0 0 calc(0.5 * var(--spacing-unit)) !important; + margin: 0 0 0 calc(0.5 * var(--mini-unit)) !important; } } &.directionColumn { & > * { - margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important; + margin: 0 0 calc(0.5 * var(--mini-unit)) 0 !important; } } &.directionColumnReverese { & > * { - margin: calc(0.5 * var(--spacing-unit)) 0 0 0 !important; + margin: calc(0.5 * var(--mini-unit)) 0 0 0 !important; } } & > *:last-child { @@ -31,21 +31,21 @@ .doubleItemGutter { & > * { - margin: 0 calc(2 * var(--spacing-unit)) 0 0 !important; + margin: 0 calc(2 * var(--mini-unit)) 0 0 !important; } &.directionRowReverse { & > * { - margin: 0 0 0 calc(2 * var(--spacing-unit)) !important; + margin: 0 0 0 calc(2 * var(--mini-unit)) !important; } } &.directionColumn { & > * { - margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important; + margin: 0 0 calc(2 * var(--mini-unit)) 0 !important; } } &.directionColumnReverese { & > * { - margin: calc(2 * var(--spacing-unit)) 0 0 0 !important; + margin: calc(2 * var(--mini-unit)) 0 0 0 !important; } } & > *:last-child { @@ -55,21 +55,21 @@ .itemGutter { & > * { - margin: 0 var(--spacing-unit) 0 0 !important; + margin: 0 var(--mini-unit) 0 0 !important; } &.directionRowReverse { & > * { - margin: 0 0 0 var(--spacing-unit) !important; + margin: 0 0 0 var(--mini-unit) !important; } } &.directionColumn { & > * { - margin: 0 0 var(--spacing-unit) 0 !important; + margin: 0 0 var(--mini-unit) 0 !important; } } &.directionColumnReverese { & > * { - margin: var(--spacing-unit) 0 0 0 !important; + margin: var(--mini-unit) 0 0 0 !important; } } & > *:last-child { @@ -89,69 +89,69 @@ .wrapReverse { &:not(.directionColumn).itemGutter { &:not(:empty) { - margin-top: calc(-1 * var(--spacing-unit)) !important; + margin-top: calc(-1 * var(--mini-unit)) !important; } & > * { - margin-top: var(--spacing-unit) !important; + margin-top: var(--mini-unit) !important; } } &.directionColumn.itemGutter { &:not(:empty) { - margin-left: calc(-1 * var(--spacing-unit)) !important; + margin-left: calc(-1 * var(--mini-unit)) !important; } &.itemGutter > * { - margin-left: var(--spacing-unit) !important; + margin-left: var(--mini-unit) !important; } } &:not(.directionColumn).halfItemGutter { &:not(:empty) { - margin-top: calc(-0.5 * var(--spacing-unit)) !important; + margin-top: calc(-0.5 * var(--mini-unit)) !important; } & > * { - margin-top: calc(0.5 * var(--spacing-unit)) !important; + margin-top: calc(0.5 * var(--mini-unit)) !important; } } &.directionColumn.halfItemGutter { &:not(:empty) { - margin-left: calc(-0.5 * var(--spacing-unit)) !important; + margin-left: calc(-0.5 * var(--mini-unit)) !important; } &.halfItemGutter > * { - margin-left: calc(0.5 * var(--spacing-unit)) !important; + margin-left: calc(0.5 * var(--mini-unit)) !important; } } &:not(.directionColumn).doubleItemGutter { &:not(:empty) { - margin-top: calc(-2 * var(--spacing-unit)) !important; + margin-top: calc(-2 * var(--mini-unit)) !important; } & > * { - margin-top: calc(2 * var(--spacing-unit)) !important; + margin-top: calc(2 * var(--mini-unit)) !important; } } &.directionColumn.doubleItemGutter { &:not(:empty) { - margin-left: calc(-2 * var(--spacing-unit)) !important; + margin-left: calc(-2 * var(--mini-unit)) !important; } &.doubleItemGutter > * { - margin-left: calc(2 * var(--spacing-unit)) !important; + margin-left: calc(2 * var(--mini-unit)) !important; } } &:not(.directionColumn).tripleItemGutter { &:not(:empty) { - margin-top: calc(-3 * var(--spacing-unit)) !important; + margin-top: calc(-3 * var(--mini-unit)) !important; } & > * { - margin-top: calc(3 * var(--spacing-unit)) !important; + margin-top: calc(3 * var(--mini-unit)) !important; } } &.directionColumn.tripleItemGutter { &:not(:empty) { - margin-left: calc(-3 * var(--spacing-unit)) !important; + margin-left: calc(-3 * var(--mini-unit)) !important; } &.tripleItemGutter > * { - margin-left: calc(3 * var(--spacing-unit)) !important; + margin-left: calc(3 * var(--mini-unit)) !important; } } } diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css index dfaabe567..b6d677cc3 100644 --- a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css +++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css @@ -6,7 +6,7 @@ .half { & > * { - margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important; + margin: 0 0 calc(0.5 * var(--mini-unit)) 0 !important; } & > *:last-child { margin: 0 !important; @@ -14,7 +14,7 @@ } .full { & > * { - margin: 0 0 var(--spacing-unit) 0 !important; + margin: 0 0 var(--mini-unit) 0 !important; } & > *:last-child { margin: 0 !important; @@ -22,7 +22,7 @@ } .oneAndAHalf { & > * { - margin: 0 0 calc(1.5 * var(--spacing-unit)) 0 !important; + margin: 0 0 calc(1.5 * var(--mini-unit)) 0 !important; } & > *:last-child { margin: 0 !important; @@ -30,7 +30,7 @@ } .double { & > * { - margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important; + margin: 0 0 calc(2 * var(--mini-unit)) 0 !important; } & > *:last-child { margin: 0 !important; @@ -38,7 +38,7 @@ } .triple { & > * { - margin: 0 0 calc(3 * var(--spacing-unit)) 0 !important; + margin: 0 0 calc(3 * var(--mini-unit)) 0 !important; } & > *:last-child { margin: 0 !important; diff --git a/src/core/client/ui/components/Icon/Icon.css b/src/core/client/ui/components/Icon/Icon.css index 893d0858c..18e63a1b5 100644 --- a/src/core/client/ui/components/Icon/Icon.css +++ b/src/core/client/ui/components/Icon/Icon.css @@ -25,6 +25,11 @@ -moz-osx-font-smoothing: grayscale; } +.xs { + font-size: 10px; + width: 10px; +} + .sm { font-size: 14px; width: 14px; diff --git a/src/core/client/ui/components/Icon/Icon.tsx b/src/core/client/ui/components/Icon/Icon.tsx index 576395e54..ff6bf938f 100644 --- a/src/core/client/ui/components/Icon/Icon.tsx +++ b/src/core/client/ui/components/Icon/Icon.tsx @@ -13,7 +13,7 @@ interface Props extends HTMLAttributes { */ classes: typeof styles; - size?: "sm" | "md" | "lg" | "xl"; + size?: "xs" | "sm" | "md" | "lg" | "xl"; /** * The color of the component. It supports those theme colors that make sense for this component. diff --git a/src/core/client/ui/components/Marker/Count.css b/src/core/client/ui/components/Marker/Count.css index 0aeb517e5..32c1fd43b 100644 --- a/src/core/client/ui/components/Marker/Count.css +++ b/src/core/client/ui/components/Marker/Count.css @@ -1,10 +1,10 @@ .root { composes: markerText from "talk-ui/shared/typography.css"; border-left: 1px solid currentColor; - margin-left: calc(0.5 * var(--spacing-unit)); - margin-right: calc(-0.5 * var(--spacing-unit)); + margin-left: calc(0.5 * var(--mini-unit)); + margin-right: calc(-0.5 * var(--mini-unit)); padding-top: 2px; padding-bottom: 2px; - padding-left: calc(0.5 * var(--spacing-unit)); + padding-left: calc(0.5 * var(--mini-unit)); white-space: nowrap; } diff --git a/src/core/client/ui/components/Marker/Marker.css b/src/core/client/ui/components/Marker/Marker.css index eb06136c4..c37b4da05 100644 --- a/src/core/client/ui/components/Marker/Marker.css +++ b/src/core/client/ui/components/Marker/Marker.css @@ -3,7 +3,7 @@ color: var(--palette-error-main); border: 1px solid currentColor; border-radius: 4px; - padding: 1px var(--spacing-unit); + padding: 1px var(--mini-unit); white-space: nowrap; } diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css index 2c484e8fa..968f711b4 100644 --- a/src/core/client/ui/components/Message/Message.css +++ b/src/core/client/ui/components/Message/Message.css @@ -4,12 +4,12 @@ display: inline-flex; justify-content: flex-start; align-items: center; - padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit); + padding: calc(0.5 * var(--mini-unit)) var(--mini-unit); box-sizing: border-box; border-radius: var(--round-corners); border-width: 1px; border-style: solid; - border-left-width: calc(0.5 * var(--spacing-unit)); + border-left-width: calc(0.5 * var(--mini-unit)); } .colorGrey { @@ -28,7 +28,7 @@ background-color: var(--palette-error-light); border-color: var(--palette-error-darkest); border-width: 0px; - border-left-width: calc(0.5 * var(--spacing-unit)); + border-left-width: calc(0.5 * var(--mini-unit)); color: var(--palette-text-light); } @@ -36,7 +36,7 @@ background-color: var(--palette-primary-light); border-color: var(--palette-primary-darkest); border-width: 0px; - border-left-width: calc(0.5 * var(--spacing-unit)); + border-left-width: calc(0.5 * var(--mini-unit)); color: var(--palette-text-light); } diff --git a/src/core/client/ui/components/Message/MessageIcon.css b/src/core/client/ui/components/Message/MessageIcon.css index 8f05b08d4..a6ebb20be 100644 --- a/src/core/client/ui/components/Message/MessageIcon.css +++ b/src/core/client/ui/components/Message/MessageIcon.css @@ -3,6 +3,6 @@ margin-top: 1px; flex-shrink: 0; &:first-child { - margin-right: calc(0.5 * var(--spacing-unit)); + margin-right: calc(0.5 * var(--mini-unit)); } } diff --git a/src/core/client/ui/components/PasswordField/PasswordField.css b/src/core/client/ui/components/PasswordField/PasswordField.css index 7c2c5edb9..fa71ce6c9 100644 --- a/src/core/client/ui/components/PasswordField/PasswordField.css +++ b/src/core/client/ui/components/PasswordField/PasswordField.css @@ -1,5 +1,5 @@ .root { - width: calc(29 * var(--spacing-unit)); + width: calc(29 * var(--mini-unit)); height: 36px; width: 100%; line-height: 36px; @@ -35,7 +35,7 @@ position: absolute; display: inline-block; right: 0px; - padding: 4px calc(1 * var(--spacing-unit)); + padding: 4px calc(1 * var(--mini-unit)); cursor: pointer; line-height: 0; } @@ -43,8 +43,8 @@ .input { composes: inputText placeholderPseudo from "talk-ui/shared/typography.css"; display: block; - padding: calc(0.5 * var(--spacing-unit)) calc(3 * var(--spacing-unit)) - calc(0.5 * var(--spacing-unit)) calc(0.5 * var(--spacing-unit)); + padding: calc(0.5 * var(--mini-unit)) calc(3 * var(--mini-unit)) + calc(0.5 * var(--mini-unit)) calc(0.5 * var(--mini-unit)); border-radius: var(--round-corners); width: 100%; height: 100%; diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css index 85b24c5a2..003d8a305 100644 --- a/src/core/client/ui/components/Popover/Popover.css +++ b/src/core/client/ui/components/Popover/Popover.css @@ -11,14 +11,14 @@ } .top { - margin: calc(0.5 * var(--spacing-unit)) 0; + margin: calc(0.5 * var(--mini-unit)) 0; } .left { - margin: 0 calc(0.5 * var(--spacing-unit)); + margin: 0 calc(0.5 * var(--mini-unit)); } .right { - margin: 0 calc(0.5 * var(--spacing-unit)); + margin: 0 calc(0.5 * var(--mini-unit)); } .bottom { - margin: calc(0.5 * var(--spacing-unit)) 0; + margin: calc(0.5 * var(--mini-unit)) 0; } diff --git a/src/core/client/ui/components/SelectField/SelectField.css b/src/core/client/ui/components/SelectField/SelectField.css index ab22e9f15..cd5fd9811 100644 --- a/src/core/client/ui/components/SelectField/SelectField.css +++ b/src/core/client/ui/components/SelectField/SelectField.css @@ -8,7 +8,7 @@ display: inline-flex; justify-content: center; align-items: center; - right: calc(0.5 * var(--spacing-unit)); + right: calc(0.5 * var(--mini-unit)); height: 100%; user-select: none; pointer-events: none; @@ -46,8 +46,8 @@ border-radius: var(--round-corners); background-color: var(--palette-common-white); - padding: calc(0.5 * var(--spacing-unit)) calc(2 * var(--spacing-unit)) - calc(0.5 * var(--spacing-unit)) var(--spacing-unit); + padding: calc(0.5 * var(--mini-unit)) calc(2 * var(--mini-unit)) + calc(0.5 * var(--mini-unit)) var(--mini-unit); &::-ms-expand { display: none; diff --git a/src/core/client/ui/components/Steps/StepBar.css b/src/core/client/ui/components/Steps/StepBar.css index ad8508ea7..536b516c7 100644 --- a/src/core/client/ui/components/Steps/StepBar.css +++ b/src/core/client/ui/components/Steps/StepBar.css @@ -2,5 +2,5 @@ width: 100%; position: relative; display: block; - padding: calc(2 * var(--spacing-unit)) 0; + padding: calc(2 * var(--mini-unit)) 0; } diff --git a/src/core/client/ui/components/SubBar/Navigation.css b/src/core/client/ui/components/SubBar/Navigation.css index 2ee8227af..2f1eb37ab 100644 --- a/src/core/client/ui/components/SubBar/Navigation.css +++ b/src/core/client/ui/components/SubBar/Navigation.css @@ -1,7 +1,7 @@ .root { height: 100%; border-bottom: 1px solid var(--palette-divider); - padding: 0 calc(1.5 * var(--spacing-unit)); + padding: 0 calc(1.5 * var(--mini-unit)); } .ul { @@ -13,7 +13,7 @@ align-items: flex-end; & > * { - margin: 0 calc(3 * var(--spacing-unit)) 0 0; + margin: 0 calc(3 * var(--mini-unit)) 0 0; } & > *:last-child { margin: 0; diff --git a/src/core/client/ui/components/SubBar/NavigationItem.css b/src/core/client/ui/components/SubBar/NavigationItem.css index 43784ec6d..094a24725 100644 --- a/src/core/client/ui/components/SubBar/NavigationItem.css +++ b/src/core/client/ui/components/SubBar/NavigationItem.css @@ -16,7 +16,7 @@ cursor: pointer; } & > * { - margin: 0 calc(0.5 * var(--spacing-unit)) 0 0; + margin: 0 calc(0.5 * var(--mini-unit)) 0 0; } & > *:last-child { margin: 0; diff --git a/src/core/client/ui/components/SubBar/SubBar.css b/src/core/client/ui/components/SubBar/SubBar.css index b590228de..98b5742ef 100644 --- a/src/core/client/ui/components/SubBar/SubBar.css +++ b/src/core/client/ui/components/SubBar/SubBar.css @@ -1,6 +1,6 @@ .root { background-color: var(--palette-common-white); - height: calc(5 * var(--spacing-unit)); + height: calc(6 * var(--mini-unit)); } .container { @@ -12,8 +12,8 @@ } .gutterBegin { - padding-left: calc(2 * var(--spacing-unit)); + padding-left: calc(2 * var(--mini-unit)); } .gutterEnd { - padding-right: calc(2 * var(--spacing-unit)); + padding-right: calc(2 * var(--mini-unit)); } diff --git a/src/core/client/ui/components/Table/TableCell.css b/src/core/client/ui/components/Table/TableCell.css index 138480e84..2715f92e6 100644 --- a/src/core/client/ui/components/Table/TableCell.css +++ b/src/core/client/ui/components/Table/TableCell.css @@ -1,8 +1,8 @@ .root { /* acts like min-width in a cell */ - height: calc(4.5 * var(--spacing-unit)); + height: calc(4.5 * var(--mini-unit)); text-align: left; - padding: var(--spacing-unit) calc(1.5 * var(--spacing-unit)); + padding: var(--mini-unit) calc(1.5 * var(--mini-unit)); box-sizing: border-box; } diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css index ead948a36..42566aec3 100644 --- a/src/core/client/ui/components/Tabs/Tab.css +++ b/src/core/client/ui/components/Tabs/Tab.css @@ -10,7 +10,7 @@ box-sizing: border-box; border-bottom: 0; list-style: none; - padding: var(--spacing-unit); + padding: var(--mini-unit); font-weight: var(--font-weight-regular); font-family: var(--font-family-serif); @@ -32,12 +32,12 @@ background: var(--palette-grey-lightest); color: var(--palette-grey-main); border: 1px solid var(--palette-grey-lighter); - padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2); + padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2); &.active { background-color: var(--palette-common-white); color: var(--palette-common-black); border-bottom: 0; - border-top-width: calc(0.5 * var(--spacing-unit)); + border-top-width: calc(0.5 * var(--mini-unit)); border-top-color: var(--palette-primary-main); border-radius: 0; z-index: 10; @@ -45,7 +45,7 @@ } .secondary { - padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2); + padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2); &.active { font-weight: var(--font-weight-medium); diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css index 95bcac14c..ce57dca86 100644 --- a/src/core/client/ui/components/TextField/TextField.css +++ b/src/core/client/ui/components/TextField/TextField.css @@ -1,6 +1,6 @@ .root { display: flex; - width: calc(29 * var(--spacing-unit)); + width: calc(29 * var(--mini-unit)); align-items: center; height: 36px; } @@ -9,7 +9,7 @@ composes: inputText placeholderPseudo from "talk-ui/shared/typography.css"; position: relative; display: block; - padding: calc(0.5 * var(--spacing-unit)); + padding: calc(0.5 * var(--mini-unit)); box-sizing: border-box; border-radius: var(--round-corners); width: 100%; @@ -26,7 +26,7 @@ } .adornment { - margin-left: calc(0.5 * var(--spacing-unit)); + margin-left: calc(0.5 * var(--mini-unit)); } .colorRegular { diff --git a/src/core/client/ui/components/TextLink/TextLink.css b/src/core/client/ui/components/TextLink/TextLink.css index b097ef9d8..f3e13f030 100644 --- a/src/core/client/ui/components/TextLink/TextLink.css +++ b/src/core/client/ui/components/TextLink/TextLink.css @@ -2,3 +2,9 @@ color: var(--palette-primary-main); text-decoration: underline; } + +.icon { + padding-left: calc(0.5 * var(--mini-unit)); + padding-bottom: 2px; + text-decoration: none; +} diff --git a/src/core/client/ui/components/TextLink/TextLink.tsx b/src/core/client/ui/components/TextLink/TextLink.tsx index 6c7b6885e..437f39e6f 100644 --- a/src/core/client/ui/components/TextLink/TextLink.tsx +++ b/src/core/client/ui/components/TextLink/TextLink.tsx @@ -1,11 +1,14 @@ import cn from "classnames"; import React, { AnchorHTMLAttributes, StatelessComponent } from "react"; +import { Icon } from "talk-ui/components"; import { withStyles } from "talk-ui/hocs"; import styles from "./TextLink.css"; interface Props extends AnchorHTMLAttributes { + /** 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. */ @@ -13,7 +16,7 @@ interface Props extends AnchorHTMLAttributes { } const TextLinkProps: StatelessComponent = props => { - const { className, children, classes, ...rest } = props; + const { className, children, classes, external, ...rest } = props; const rootClassName = cn(classes.root, className); @@ -24,6 +27,11 @@ const TextLinkProps: StatelessComponent = props => { {...rest} > {children} + {external && ( + + launch + + )} ); }; diff --git a/src/core/client/ui/components/TileSelector/TileOption.css b/src/core/client/ui/components/TileSelector/TileOption.css index 4737bb9a8..22ed1f79b 100644 --- a/src/core/client/ui/components/TileSelector/TileOption.css +++ b/src/core/client/ui/components/TileSelector/TileOption.css @@ -14,7 +14,7 @@ border: 1px solid var(--palette-grey-dark); border-radius: 2px; color: var(--palette-grey-dark); - padding: calc(0.5 * var(--spacing-unit)); + padding: calc(0.5 * var(--mini-unit)); line-height: 1; box-sizing: border-box; height: 100%; diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css index 4a1318741..76b71593e 100644 --- a/src/core/client/ui/components/Typography/Typography.css +++ b/src/core/client/ui/components/Typography/Typography.css @@ -99,7 +99,7 @@ } .paragraph { - margin-bottom: var(--spacing-unit); + margin-bottom: var(--mini-unit); } .colorPrimary { diff --git a/src/core/client/ui/theme/variables.css b/src/core/client/ui/theme/variables.css index ad0215b77..e8c5d54fe 100644 --- a/src/core/client/ui/theme/variables.css +++ b/src/core/client/ui/theme/variables.css @@ -6,11 +6,11 @@ */ :root { - --spacing-unit: calc(1px * var(--spacing-unit-small)); + --mini-unit: calc(1px * var(--mini-unit-small)); } @media (min-width: $breakpoints-xs) { :root { - --spacing-unit: calc(1px * var(--spacing-unit-large)); + --mini-unit: calc(1px * var(--mini-unit-large)); } } diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts index 6444b6ddb..1b86d5435 100644 --- a/src/core/client/ui/theme/variables.ts +++ b/src/core/client/ui/theme/variables.ts @@ -73,8 +73,8 @@ const variables = { }, }, /* gitter and spacing */ - spacingUnitSmall: 5, - spacingUnitLarge: 10, + miniUnitSmall: 4, + miniUnitLarge: 8, /* Borders */ roundCorners: "2px", /* Typography */ diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl index 1c0d8a4d4..f62898109 100644 --- a/src/locales/en-US/admin.ftl +++ b/src/locales/en-US/admin.ftl @@ -324,13 +324,15 @@ moderate-emptyQueue-reported = Nicely done! There are no more reported comments moderate-emptyQueue-unmoderated = Nicely done! All comments have been moderated. moderate-emptyQueue-rejected = There are no rejected comments. -moderate-inReplyTo = Reply to -moderate-viewContext = View Context -moderate-rejectButton = +moderate-comment-inReplyTo = Reply to +moderate-comment-viewContext = View Context +moderate-comment-rejectButton = .aria-label = Reject -moderate-acceptButton = +moderate-comment-acceptButton = .aria-label = Accept -moderate-decision = Decision +moderate-comment-decision = Decision +moderate-comment-story = Story +moderate-comment-moderateStory = Moderate Story moderate-single-goToModerationQueues = Go to moderation queues moderate-single-singleCommentView = Single Comment View