From ebe77312227a5dc2be478d8b63ddf241a7133d85 Mon Sep 17 00:00:00 2001 From: Nick Funk Date: Fri, 12 Jun 2020 09:23:28 -0600 Subject: [PATCH] Stream Rebranding (#2926) * [CORL-901] Rebrand comment actions and body (#2889) * [ADR] Use Relay over Apollo (#2881) * chore: ADR on Relay and Apollo * chore: typo * chore: add neg cons * chore: add another pos * chore: remove neg, because apollo needed an introspection query as a build step too.. * chore: fix number * chore: deco * chore: typo * chore: clarification Co-authored-by: Wyatt Johnson * chore: bump 6.0.0 (#2891) * fix: added more checks to migration (#2894) * Update stream username to new branding variables CORL-901 * Update badges/tags to use new v2 controls CORL-901 * Update timestamps to use new branding stream side CORL-901 * Update stream edit action to new branding CORL-901 * Update comment html body to new branding CORL-901 * Update comment action buttons to new branding CORL-901 * Update responsive styles for action buttons CORL-901 * Set comment link colors to new branding blue CORL-901 * Add children prop on ButtonsBar to align with tests CORL-901 * Make Reported button text bolded and vivid red CORL-901 * Make reaction buttons stream blue when reacted CORL-901 * Make user badges bold text CORL-901 * Set margins on comment action buttons CORL-901 * Set aria-labels on reaction buttons Ensures that we always have a usable aria even when the reaction button is just an icon. CORL-901 * Set aria-label's on Reply and Share button's CORL-901 * Update tests to match stream branding changes CORL-901 * Update color of "Read More of this conversation" CORL-901 Co-authored-by: Vinh Co-authored-by: Wyatt Johnson * [CORL-942] In-Stream Mod rebranding (#2902) * [ADR] Use Relay over Apollo (#2881) * chore: ADR on Relay and Apollo * chore: typo * chore: add neg cons * chore: add another pos * chore: remove neg, because apollo needed an introspection query as a build step too.. * chore: fix number * chore: deco * chore: typo * chore: clarification Co-authored-by: Wyatt Johnson * chore: bump 6.0.0 (#2891) * fix: added more checks to migration (#2894) * Update stream username to new branding variables CORL-901 * Update badges/tags to use new v2 controls CORL-901 * Update timestamps to use new branding stream side CORL-901 * Update stream edit action to new branding CORL-901 * Update comment html body to new branding CORL-901 * Update comment action buttons to new branding CORL-901 * Update responsive styles for action buttons CORL-901 * Set comment link colors to new branding blue CORL-901 * Add children prop on ButtonsBar to align with tests CORL-901 * Make Reported button text bolded and vivid red CORL-901 * Make reaction buttons stream blue when reacted CORL-901 * Make user badges bold text CORL-901 * Set margins on comment action buttons CORL-901 * Set aria-labels on reaction buttons Ensures that we always have a usable aria even when the reaction button is just an icon. CORL-901 * Set aria-label's on Reply and Share button's CORL-901 * Update tests to match stream branding changes CORL-901 * Update color of "Read More of this conversation" CORL-901 * Update caret container to new branding CORL-942 * Update moderation menu buttons to new branding CORL-942 * Update in-stream ban popover to new branding CORL-942 * Update reject tombstone to new branding CORL-942 Co-authored-by: Vinh Co-authored-by: Wyatt Johnson * [CORL-939] Rebrand RTE and reply (#2904) * [ADR] Use Relay over Apollo (#2881) * chore: ADR on Relay and Apollo * chore: typo * chore: add neg cons * chore: add another pos * chore: remove neg, because apollo needed an introspection query as a build step too.. * chore: fix number * chore: deco * chore: typo * chore: clarification Co-authored-by: Wyatt Johnson * chore: bump 6.0.0 (#2891) * fix: added more checks to migration (#2894) * Update stream username to new branding variables CORL-901 * Update badges/tags to use new v2 controls CORL-901 * Update timestamps to use new branding stream side CORL-901 * Update stream edit action to new branding CORL-901 * Update comment html body to new branding CORL-901 * Update comment action buttons to new branding CORL-901 * Update responsive styles for action buttons CORL-901 * Set comment link colors to new branding blue CORL-901 * Add children prop on ButtonsBar to align with tests CORL-901 * Make Reported button text bolded and vivid red CORL-901 * Make reaction buttons stream blue when reacted CORL-901 * Make user badges bold text CORL-901 * Set margins on comment action buttons CORL-901 * Set aria-labels on reaction buttons Ensures that we always have a usable aria even when the reaction button is just an icon. CORL-901 * Set aria-label's on Reply and Share button's CORL-901 * Update tests to match stream branding changes CORL-901 * Update color of "Read More of this conversation" CORL-901 * Update caret container to new branding CORL-942 * Update moderation menu buttons to new branding CORL-942 * Update in-stream ban popover to new branding CORL-942 * Update reject tombstone to new branding CORL-942 * Update replyTo and rte to new branding CORL-939 Co-authored-by: Vinh Co-authored-by: Wyatt Johnson * Update message box to new branding CORL-981 * Update user profile comment history to new branding CORL-983 * Update stream tabs to new branding CORL-982 * Update my profile tab bar to new branding CORL-902 * Update download comments to new branding CORL-902 * The Lord of the Buttons: Return of the Buttons * Update the notification settings area to new branding CORL-984 * Update the ignored users area to new branding CORL-984 * Update change username to new branding CORL-984 * Fixing snaps after rebase * Use label instead of div for InputLabel's Root element is now a label so that axe will stop complaining that it can't find the 'for' id on the label elements. CORL-984 * More spacing tweaks for change username CORL-903 * Update change email address to new branding CORL-984 * Update change password to new branding CORL-984 * Flesh out colour styles for v3 buttons CORL-984 * Preliminarily update delete account to new branding CORL-984 * Ensure client CSS style compatibility CORL-984 * Update delete flow to new branding CORL-984 * Add client classes to the delete account modal CORL-984 * Further tweaks to the delete account modal Modal callouts updated to new branding. Deletion request callout updated to new branding. Fixing up tests that somehow were passing before? Fixing some margins and spacing around deletion section. * Move the account deletion callout to top Puts it at the top of the my profile tab so that it's clearly visible you are deleting your account. CORL-998 * Add first-class icon and title support to callouts CORL-969 * Bold checkbox text when checked CORL-984 * Finalize v3 buttons to match spec This should be the last major change to v3 buttons as the spec seems to have solidified. CORL-969 * Add in new stream red to colours Use it for the negative v3 callouts CORL-969 * Touch up some spacing on delete account CORL-984 * Create tombstone component Use it for ignored and deleted account tombstones instead of the old callout. CORL-969 * Use new tombstones in comment stream CORL-969 * Update banned callout to new branding CORL-969 * Set callout body text to regular font weight CORL-969 * Update suspended callout to new branding CORL-969 * Update closed stream callouts to new branding CORL-969 * Update in-moderation callouts to new branding CORL-969 * Update stream validation message to v3 CORL-969 * Improve ignored commenter management Show "you are no longer ignoring" a commenter when you choose to no longer ignore them. CORL-457 * Prettier cleanup after rebase off master Somehow this was missed, probably needed to kill and reload VSCode before I committed the rebase. * Switch previous callouts to use icon and title CORL-969 * Update configure checkboxes to new branding CORL-903 * Update Config > Q&A to new branding CORL-903 * Update Config > Open/Close Stream to new branding CORL-903 * Add validation message to config stream checkboxes CORL-903 * Remove double list handling for Pref>Ignored CORL-969 * Show experimental tag beside Q&A config CORL-1051 * Move live update setting to its own section CORL-903 * Remove moderation link from config area CORL-903 * De-capitalize all the labels in configure CORL-903 * Update message box config to new branding Also moves it to new location in config. CORL-903 * Re-brand the sign in/out field on the stream CORL-1042 * Update tests for add message flow CORl-903 * Rebrand Sign In/Up modals CORL-999 * Re-brand SSO sign in/up modals CORL-999 * Re-brand stream sorting controls CORL-1043 * Create new stream focused colorFromMeta variant * Rebrand go to moderation buttons CORL-799 * Rebrand stream moderation drop-down CORL-799 * Rebrand the report comment flow Expands the report comment dialogs under the comment instead of as a popover. Also adds in the new branding styles. CORL-941 * Rebrand the main stream tab bar CORL-799 * Add new abusive reporting options CORL-1009 * Rebrand featured comments CORL-968 * Rebrand the community guidelines CORL-1041 * Rebrand the share button CORL-940 * Update style names on buttons marginSize -> paddingSize textSize -> fontSize * Rebrand single conversation view CORL-904 * Make indented comments grey coloured CORL-904 * Make indented comment borders thinner CORL-904 * Tweak colours/margins on single conversation view CORL-904 * Add show comment on single conversation tombstones CORL-412 * Rebrand single conversation view title CORL-904 * Add clean target to package.json Allows us to direct call gulp clean easily. * Rebrand client side not found page CORL-1025 * Rebrand password reset flow CORL-1025 * Rebrand unsubscribe from notifications flow CORL-1025 * Rebrand email confirmation flow CORL-1025 * Rebrand download comments flow CORL-1025 * Fix up account tests after rebrand CORL-1025 * Add COMMENT_REPORTED_ABUSIVE to moderate card fragment * Rebrand user ignore flow Somehow this slipped through the cracks, fixed it up now * [CORL 1010] Collapse comment threads (#2976) * toggle open and closed comment + replies * show username and date for collapsed comment * toggle comments and replies open and closed * keep collapsed state of comments in reply list * style collapsed comment toggle * add css class overrides * style answered comments when collapsed * adjust spacing on collapse button: * add hover styles * add aria labels and update snapshots * Fix tests and snaps after rebase * Make main stream tabs visible on mobile (iPhone 5) * Remove double horizontal rule under My Comments Horizontal rule wasn't conditionally showing when we toggled ability to let users download comments on and off. * Add aria labelling to main stream tabs Can now pass in a localization id to assign aria-label/title to the tab. * Add localization to account not found * Update snapshots Co-authored-by: Vinh Co-authored-by: Wyatt Johnson Co-authored-by: Tessa Thornton --- package-lock.json | 134 +- package.json | 1 + src/core/client/account/routes/NotFound.css | 11 + src/core/client/account/routes/NotFound.tsx | 11 +- .../download/Download/DownloadDescription.css | 40 +- .../download/Download/DownloadDescription.tsx | 56 +- .../routes/download/Download/DownloadForm.css | 5 - .../routes/download/Download/DownloadForm.tsx | 10 +- .../download/Download/DownloadRoute.css | 6 +- .../routes/download/Download/Sorry.css | 7 - .../routes/download/Download/Sorry.tsx | 19 +- .../account/routes/email/Confirm/Confirm.css | 52 + .../routes/email/Confirm/ConfirmForm.tsx | 26 +- .../account/routes/email/Confirm/Sorry.tsx | 38 +- .../account/routes/email/Confirm/Success.tsx | 12 +- .../notifications/Unsubscribe/Sorry.tsx | 38 +- .../notifications/Unsubscribe/Success.tsx | 17 +- .../notifications/Unsubscribe/Unsubscribe.css | 52 + .../Unsubscribe/UnsubscribeForm.tsx | 35 +- .../account/routes/password/Reset/Reset.css | 52 + .../password/Reset/ResetPasswordForm.tsx | 53 +- .../account/routes/password/Reset/Sorry.tsx | 38 +- .../account/routes/password/Reset/Success.tsx | 12 +- .../__snapshots__/confirmEmail.spec.tsx.snap | 63 +- .../__snapshots__/resetPassword.spec.tsx.snap | 72 +- .../unsubscribeNotifications.spec.tsx.snap | 54 +- .../client/account/test/confirmEmail.spec.tsx | 8 +- .../ModerateCard/FlagDetailsContainer.tsx | 23 + .../ModerateCard/MarkersContainer.spec.tsx | 2 + .../ModerateCard/MarkersContainer.tsx | 14 + .../ModerateCardDetailsContainer.tsx | 2 + .../MarkersContainer.spec.tsx.snap | 2 + .../signInWithEmail.spec.tsx.snap | 48 +- .../__snapshots__/community.spec.tsx.snap | 8 +- .../__snapshots__/auth.spec.tsx.snap | 122 +- .../__snapshots__/general.spec.tsx.snap | 54 +- src/core/client/admin/test/fixtures.ts | 1 + .../__snapshots__/stories.spec.tsx.snap | 4 +- .../auth/components/ConfirmEmailField.tsx | 9 +- .../client/auth/components/EmailField.tsx | 9 +- src/core/client/auth/components/Main.tsx | 1 + .../client/auth/components/OrSeparator.css | 14 + .../client/auth/components/OrSeparator.tsx | 7 +- .../auth/components/SetPasswordField.css | 8 + .../auth/components/SetPasswordField.tsx | 20 +- .../client/auth/components/UsernameField.css | 8 + .../client/auth/components/UsernameField.tsx | 18 +- src/core/client/auth/dom/resizePopup.ts | 5 +- .../addEmailAddress.spec.tsx.snap | 971 +++---- .../createPassword.spec.tsx.snap | 267 +- .../createUsername.spec.tsx.snap | 257 +- .../forgotPassword.spec.tsx.snap | 80 +- .../__snapshots__/linkAccount.spec.tsx.snap | 179 +- .../test/__snapshots__/signIn.spec.tsx.snap | 732 +++--- .../test/__snapshots__/signUp.spec.tsx.snap | 822 +++--- .../client/auth/test/addEmailAddress.spec.tsx | 4 +- .../client/auth/test/forgotPassword.spec.tsx | 2 +- src/core/client/auth/test/navigation.spec.tsx | 4 +- src/core/client/auth/test/signIn.spec.tsx | 12 +- src/core/client/auth/test/signUp.spec.tsx | 8 +- .../views/AddEmailAddress/AddEmailAddress.css | 58 + .../views/AddEmailAddress/AddEmailAddress.tsx | 114 +- .../views/CreatePassword/CreatePassword.css | 38 + .../views/CreatePassword/CreatePassword.tsx | 62 +- .../views/CreateUsername/CreateUsername.css | 38 + .../views/CreateUsername/CreateUsername.tsx | 62 +- .../auth/views/ForgotPassword/CheckEmail.css | 50 + .../auth/views/ForgotPassword/CheckEmail.tsx | 41 +- .../ForgotPassword/ForgotPasswordForm.css | 54 + .../ForgotPassword/ForgotPasswordForm.tsx | 95 +- .../LinkAccount/LinkAccountContainer.css | 58 + .../LinkAccount/LinkAccountContainer.tsx | 180 +- src/core/client/auth/views/SignIn/SignIn.css | 49 + src/core/client/auth/views/SignIn/SignIn.tsx | 111 +- .../auth/views/SignIn/SignInWithEmail.css | 20 + .../auth/views/SignIn/SignInWithEmail.tsx | 91 +- .../SignIn/__snapshots__/SignIn.spec.tsx.snap | 327 ++- src/core/client/auth/views/SignUp/SignUp.css | 49 + src/core/client/auth/views/SignUp/SignUp.tsx | 97 +- .../auth/views/SignUp/SignUpWithEmail.css | 11 + .../auth/views/SignUp/SignUpWithEmail.tsx | 44 +- .../SignUp/__snapshots__/SignUp.spec.tsx.snap | 189 +- .../framework/components/CopyButton.tsx | 104 +- .../framework/components/FacebookButton.css | 43 +- .../framework/components/FacebookButton.tsx | 21 +- .../framework/components/GoogleButton.css | 44 +- .../framework/components/GoogleButton.tsx | 24 +- .../client/framework/components/Markdown.css | 13 +- .../framework/components/OIDCButton.css | 36 +- .../framework/components/OIDCButton.tsx | 12 +- .../FacebookButton.spec.tsx.snap | 58 +- .../__snapshots__/GoogleButton.spec.tsx.snap | 58 +- .../__snapshots__/OIDCButton.spec.tsx.snap | 20 +- .../framework/lib/bootstrap/CoralContext.tsx | 2 +- .../client/framework/lib/form/helpers.tsx | 3 + src/core/client/stream/App/TabBar.css | 14 + src/core/client/stream/App/TabBar.tsx | 140 +- src/core/client/stream/classes.ts | 75 +- .../stream/common/MessageBox/MessageBox.css | 16 +- .../common/MessageBox/MessageBoxContent.css | 6 +- .../ModerateStreamContainer.tsx | 36 +- src/core/client/stream/common/Timestamp.tsx | 11 +- .../common/UserBox/UserBoxAuthenticated.css | 37 +- .../common/UserBox/UserBoxAuthenticated.tsx | 74 +- .../common/UserBox/UserBoxContainer.tsx | 6 +- .../common/UserBox/UserBoxUnauthenticated.css | 18 +- .../common/UserBox/UserBoxUnauthenticated.tsx | 64 +- .../UserBoxAuthenticated.spec.tsx.snap | 90 +- .../UserBoxUnauthenticated.spec.tsx.snap | 134 +- .../client/stream/common/ValidationMessage.ts | 2 +- src/core/client/stream/permissions.tsx | 4 + src/core/client/stream/shared/htmlContent.css | 24 +- .../tabs/Comments/Comment/AnsweredTag.css | 16 + .../tabs/Comments/Comment/AnsweredTag.tsx | 27 + .../Comment/AuthorBadgesContainer.tsx | 2 +- .../tabs/Comments/Comment/ButtonsBar.tsx | 19 +- .../Comments/Comment/CollapsableComment.tsx | 20 + .../stream/tabs/Comments/Comment/Comment.css | 12 + .../stream/tabs/Comments/Comment/Comment.tsx | 7 +- .../Comments/Comment/CommentContainer.css | 37 +- .../Comment/CommentContainer.spec.tsx | 6 + .../Comments/Comment/CommentContainer.tsx | 150 +- .../tabs/Comments/Comment/CommentToggle.css | 27 + .../tabs/Comments/Comment/CommentToggle.tsx | 67 + .../EditCommentForm/EditCommentForm.tsx | 18 +- .../tabs/Comments/Comment/EditedMarker.css | 9 +- .../tabs/Comments/Comment/FeaturedTag.css | 3 + .../tabs/Comments/Comment/FeaturedTag.tsx | 31 + .../tabs/Comments/Comment/InReplyTo.css | 23 +- .../tabs/Comments/Comment/InReplyTo.tsx | 19 +- .../tabs/Comments/Comment/IndentedComment.css | 18 + .../Comments/Comment/IndentedComment.spec.tsx | 2 + .../tabs/Comments/Comment/IndentedComment.tsx | 63 +- .../ModerationDropdown/CaretContainer.css | 10 + .../ModerationDropdown/CaretContainer.tsx | 20 +- .../ModerationActionBanContainer.css | 22 +- .../ModerationActionBanContainer.tsx | 16 +- .../ModerationActionsContainer.css | 60 +- .../ModerationActionsContainer.tsx | 67 +- .../ModerationDropdownContainer.tsx | 2 +- .../RejectedTombstoneContainer.css | 3 + .../RejectedTombstoneContainer.tsx | 47 +- .../PermalinkButton/PermalinkButton.css | 4 - .../PermalinkButton/PermalinkButton.tsx | 53 +- .../PermalinkButton/PermalinkPopover.css | 38 +- .../PermalinkButton/PermalinkPopover.tsx | 91 +- .../Comment/ReactionButton/ReactionButton.css | 7 +- .../Comment/ReactionButton/ReactionButton.tsx | 101 +- .../tabs/Comments/Comment/ReplyButton.tsx | 37 +- .../ReplyCommentForm/ReplyCommentForm.css | 4 + .../ReplyCommentForm/ReplyCommentForm.tsx | 20 +- .../Comment/ReplyCommentForm/ReplyTo.css | 29 +- .../Comment/ReplyCommentForm/ReplyTo.tsx | 17 +- .../__snapshots__/ReplyTo.spec.tsx.snap | 9 +- .../Comment/ReplyEditSubmitStatus.css | 3 - .../Comment/ReplyEditSubmitStatus.tsx | 52 +- .../Comment/ReportButton/ReportButton.css | 6 - .../ReportButton/ReportButton.spec.tsx | 24 - .../Comment/ReportButton/ReportButton.tsx | 62 - .../ReportButton/ReportButtonContainer.tsx | 74 - .../ReportButton/ReportButtonWithPopover.tsx | 58 - .../__snapshots__/ReportButton.spec.tsx.snap | 15 - .../Comments/Comment/ReportButton/index.ts | 4 - .../CreateCommentDisagreeMutation.ts | 44 + .../CreateCommentDontAgreeMutation.ts | 0 .../ReportFlow/CreateCommentFlagMutation.ts | 43 + .../PropagateMount.tsx | 0 .../Comment/ReportFlow/ReportButton.css | 12 + .../Comment/ReportFlow/ReportButton.tsx | 115 + .../Comment/ReportFlow/ReportCommentForm.css | 81 + .../Comment/ReportFlow/ReportCommentForm.tsx | 234 ++ .../ReportFlow/ReportCommentFormContainer.tsx | 101 + .../ReportFlow/ReportFlowContainer.tsx | 51 + .../tabs/Comments/Comment/ReportFlow/index.ts | 2 + .../CreateCommentFlagMutation.ts | 76 - .../ReportPopover/ReportCommentForm.css | 30 - .../ReportPopover/ReportCommentForm.tsx | 229 -- .../ReportCommentFormContainer.tsx | 120 - .../Comment/ReportPopover/ReportPopover.css | 9 - .../ReportPopover/ReportPopover.spec.tsx | 21 - .../Comment/ReportPopover/ReportPopover.tsx | 41 - .../Comment/ReportPopover/ThankYou.css | 11 - .../Comment/ReportPopover/ThankYou.spec.tsx | 16 - .../Comment/ReportPopover/ThankYou.tsx | 52 - .../__snapshots__/ReportPopover.spec.tsx.snap | 22 - .../__snapshots__/ThankYou.spec.tsx.snap | 27 - .../Comments/Comment/ReportPopover/index.ts | 1 - .../Comments/Comment/ShowConversationLink.css | 24 + .../Comments/Comment/ShowConversationLink.tsx | 29 +- .../UserBanPopoverContainer.css | 26 +- .../UserBanPopoverContainer.tsx | 26 +- .../UserIgnorePopoverContainer.css | 20 + .../UserIgnorePopoverContainer.tsx | 21 +- .../UserPopoverOverviewContainer.css | 10 +- .../UserPopoverOverviewContainer.tsx | 17 +- .../Comments/Comment/UserTagsContainer.css | 1 + .../Comments/Comment/UserTagsContainer.tsx | 2 +- .../Comments/Comment/Username/Username.css | 7 + .../Comments/Comment/Username/Username.tsx | 11 +- .../Comment/Username/UsernameContainer.tsx | 37 + .../Username/UsernameWithPopoverContainer.tsx | 7 +- .../tabs/Comments/Comment/Username/index.ts | 1 + .../__snapshots__/ButtonsBar.spec.tsx.snap | 1 + .../__snapshots__/Comment.spec.tsx.snap | 2 +- .../CommentContainer.spec.tsx.snap | 1520 +++++++++-- .../__snapshots__/InReplyTo.spec.tsx.snap | 6 +- .../IndentedComment.spec.tsx.snap | 36 +- .../__snapshots__/ReplyButton.spec.tsx.snap | 46 +- .../ShowConversationLink.spec.tsx.snap | 13 +- .../IgnoredTombstoneOrHideContainer.css | 33 + .../IgnoredTombstoneOrHideContainer.tsx | 100 +- .../client/stream/tabs/Comments/Indent.css | 36 +- .../client/stream/tabs/Comments/Indent.tsx | 3 + .../ConversationThreadContainer.css | 32 +- .../ConversationThreadContainer.tsx | 170 +- .../Comments/PermalinkView/PermalinkView.css | 40 +- .../Comments/PermalinkView/PermalinkView.tsx | 41 +- .../PermalinkView/Timeline/Circle.css | 12 +- .../Comments/PermalinkView/Timeline/Line.css | 6 +- .../__snapshots__/PermalinkView.spec.tsx.snap | 71 +- .../client/stream/tabs/Comments/RTE/RTE.css | 27 +- .../client/stream/tabs/Comments/RTE/RTE.tsx | 11 + .../RTE/__snapshots__/RTE.spec.tsx.snap | 4 +- .../ReplyList/LocalReplyListContainer.tsx | 2 + .../tabs/Comments/ReplyList/ReplyList.css | 7 + .../tabs/Comments/ReplyList/ReplyList.tsx | 47 +- .../Comments/ReplyList/ReplyListContainer.tsx | 2 + .../__snapshots__/ReplyList.spec.tsx.snap | 170 +- .../AllCommentsTabContainer.css | 17 +- .../AllCommentsTabContainer.tsx | 46 +- .../tabs/Comments/Stream/BannedInfo.css | 3 + .../tabs/Comments/Stream/BannedInfo.tsx | 39 +- .../CommunityGuidelines.css | 9 + .../CommunityGuidelines.tsx | 8 +- .../CommunityGuidelines.spec.tsx.snap | 8 +- .../StreamDeletionRequestCalloutContainer.css | 3 +- .../StreamDeletionRequestCalloutContainer.tsx | 59 +- .../Stream/FeaturedCommentTooltip.css | 7 + .../Stream/FeaturedCommentTooltip.tsx | 20 +- .../FeaturedCommentContainer.css | 38 +- .../FeaturedCommentContainer.tsx | 53 +- .../PostCommentForm/PostCommentForm.css | 2 +- .../PostCommentForm/PostCommentForm.tsx | 19 +- .../PostCommentForm/PostCommentFormClosed.tsx | 13 +- .../PostCommentFormClosedSitewide.css | 8 - .../PostCommentFormClosedSitewide.tsx | 14 +- .../PostCommentInReviewMessage.css | 7 - .../PostCommentInReviewMessage.tsx | 34 +- .../stream/tabs/Comments/Stream/SortMenu.css | 37 +- .../stream/tabs/Comments/Stream/SortMenu.tsx | 100 +- .../tabs/Comments/Stream/StreamContainer.css | 32 +- .../tabs/Comments/Stream/StreamContainer.tsx | 72 +- .../Stream/SuspendedInfo/SuspendedInfo.css | 12 + .../Stream/SuspendedInfo/SuspendedInfo.tsx | 53 +- .../__snapshots__/SortMenu.spec.tsx.snap | 20 +- .../__snapshots__/Indent.spec.tsx.snap | 6 +- .../Configure/AddMessage/AddMessageClosed.tsx | 47 + .../AddMessage/AddMessageContainer.css | 8 + .../AddMessage/AddMessageContainer.tsx | 86 + .../Configure/AddMessage/AddMessageOpen.css | 16 + .../Configure/AddMessage/AddMessageOpen.tsx | 189 ++ .../MessageBoxConfig.css | 0 .../Configure/AddMessage/MessageBoxConfig.tsx | 165 ++ .../AddMessage/UpdateMessageBoxMutation.ts | 51 + .../stream/tabs/Configure/AddMessage/index.ts | 1 + .../tabs/Configure/AddMessage/shared.css | 28 + .../stream/tabs/Configure/Configure.tsx | 32 +- .../tabs/Configure/ConfigureContainer.tsx | 2 + .../ConfigureStream/ConfigureStream.css | 23 +- .../ConfigureStream/ConfigureStream.tsx | 114 +- .../ConfigureStreamContainer.tsx | 4 - .../LiveUpdatesConfig/LiveUpdatesConfig.tsx | 48 - .../LiveUpdatesConfigContainer.tsx | 42 - .../ConfigureStream/MessageBoxConfig.tsx | 211 -- .../ConfigureStream/PremodConfig.tsx | 4 +- .../ConfigureStream/PremodLinksConfig.tsx | 4 +- .../ConfigureStream/ToggleConfig.css | 8 + .../ConfigureStream/ToggleConfig.tsx | 8 +- .../WidthLimitedDescription.css | 9 +- .../WidthLimitedDescription.tsx | 8 +- .../LiveUpdatesConfig/DisableLiveUpdates.css | 28 + .../LiveUpdatesConfig/DisableLiveUpdates.tsx | 45 + .../LiveUpdatesConfig/EnableLiveUpdates.css | 28 + .../LiveUpdatesConfig/EnableLiveUpdates.tsx | 45 + .../LiveUpdatesConfigContainer.css | 8 + .../LiveUpdatesConfigContainer.tsx | 159 ++ .../SetLiveUpdateMutation.ts | 50 + .../LiveUpdatesConfig/index.ts | 0 .../OpenOrCloseStream/CloseStream.css | 21 +- .../OpenOrCloseStream/CloseStream.tsx | 48 +- .../OpenOrCloseStreamContainer.css | 8 + .../OpenOrCloseStreamContainer.tsx | 100 +- .../OpenOrCloseStream/OpenStream.css | 21 +- .../OpenOrCloseStream/OpenStream.tsx | 44 +- .../stream/tabs/Configure/Q&A/DisableQA.css | 27 +- .../stream/tabs/Configure/Q&A/DisableQA.tsx | 68 +- .../stream/tabs/Configure/Q&A/EnableQA.css | 27 +- .../stream/tabs/Configure/Q&A/EnableQA.tsx | 57 +- .../tabs/Configure/Q&A/ExpertListItem.css | 38 +- .../tabs/Configure/Q&A/ExpertListItem.tsx | 27 +- .../tabs/Configure/Q&A/ExpertSearchItem.css | 24 +- .../tabs/Configure/Q&A/ExpertSearchItem.tsx | 10 +- .../tabs/Configure/Q&A/ExpertSearchList.css | 2 +- .../tabs/Configure/Q&A/ExpertSearchList.tsx | 3 +- .../Q&A/ExpertSelectionContainer.css | 57 +- .../Q&A/ExpertSelectionContainer.tsx | 124 +- .../tabs/Configure/Q&A/NoLongerAnExpert.css | 27 + .../tabs/Configure/Q&A/NoLongerAnExpert.tsx | 21 + .../tabs/Configure/Q&A/QAConfigContainer.css | 8 + .../tabs/Configure/Q&A/QAConfigContainer.tsx | 64 +- .../DeletionRequestCalloutContainer.css | 17 +- .../DeletionRequestCalloutContainer.tsx | 58 +- .../Profile/MyComments/CommentHistory.css | 67 +- .../Profile/MyComments/CommentHistory.tsx | 26 +- .../MyComments/DownloadCommentsContainer.css | 42 +- .../MyComments/DownloadCommentsContainer.tsx | 135 +- .../Profile/MyComments/HistoryComment.css | 105 +- .../Profile/MyComments/HistoryComment.tsx | 74 +- .../MyComments/MyCommentsContainer.css | 3 + .../MyComments/MyCommentsContainer.tsx | 24 +- .../CommentHistory.spec.tsx.snap | 24 +- .../HistoryComment.spec.tsx.snap | 65 +- .../Preferences/IgnoreUserListItem.css | 47 + .../Preferences/IgnoreUserListItem.tsx | 73 + .../IgnoreUserSettingsContainer.css | 51 +- .../IgnoreUserSettingsContainer.tsx | 163 +- .../NotificationSettingsContainer.css | 52 + .../NotificationSettingsContainer.tsx | 295 ++- .../Preferences/RemoveUserIgnoreMutation.ts | 16 - .../client/stream/tabs/Profile/Profile.tsx | 9 +- .../Settings/AccountSettingsContainer.tsx | 6 +- .../ChangeEmail/ChangeEmailContainer.css | 87 +- .../ChangeEmail/ChangeEmailContainer.tsx | 488 ++-- .../tabs/Profile/Settings/ChangePassword.css | 46 +- .../tabs/Profile/Settings/ChangePassword.tsx | 346 +-- .../ChangeUsernameContainer.css | 88 +- .../ChangeUsernameContainer.tsx | 454 ++-- .../DeleteAccount/DeleteAccountContainer.css | 27 +- .../DeleteAccount/DeleteAccountContainer.tsx | 68 +- .../DeleteAccount/Pages/Common/Page.css | 75 +- .../Pages/Common/PageStepBar.tsx | 9 +- .../DeleteAccount/Pages/CompletionPage.tsx | 79 +- .../DeleteAccount/Pages/ConfirmPage.css | 10 +- .../DeleteAccount/Pages/ConfirmPage.tsx | 103 +- .../DeleteAccount/Pages/DescriptionPage.tsx | 39 +- .../Pages/DownloadCommentsPage.tsx | 55 +- .../Settings/DeleteAccount/Pages/WhenPage.tsx | 73 +- .../renderFeaturedStream.spec.tsx.snap | 319 ++- .../__snapshots__/permalinkView.spec.tsx.snap | 2091 ++++++++------- ...permalinkViewCommentNotFound.spec.tsx.snap | 99 +- ...permalinkViewLoadMoreParents.spec.tsx.snap | 2090 +++++++++------ .../comments/permalink/permalinkView.spec.tsx | 2 +- .../permalinkViewCommentNotFound.spec.tsx | 2 +- .../permalink/permalinkViewPostReply.spec.tsx | 2 +- .../__snapshots__/editComment.spec.tsx.snap | 1634 ++++++------ .../__snapshots__/loadMore.spec.tsx.snap | 664 +++-- .../__snapshots__/postComment.spec.tsx.snap | 383 +-- .../postLocalReply.spec.tsx.snap | 2326 +++++++++-------- .../__snapshots__/postReply.spec.tsx.snap | 796 +++--- .../__snapshots__/reaction.spec.tsx.snap | 38 +- .../renderCommunityGuidelines.spec.tsx.snap | 856 +++--- .../renderMessageBox.spec.tsx.snap | 735 +++--- .../__snapshots__/renderReplies.spec.tsx.snap | 1629 +++++++----- .../__snapshots__/renderStream.spec.tsx.snap | 894 ++++--- .../__snapshots__/reportComment.spec.tsx.snap | 1147 ++++---- .../showAllReplies.spec.tsx.snap | 334 ++- .../showConversation.spec.tsx.snap | 403 +-- .../__snapshots__/sortStream.spec.tsx.snap | 664 +++-- .../test/comments/stream/banned.spec.tsx | 14 +- .../stream/charCountEditComment.spec.tsx | 2 +- .../stream/charCountReplyComment.spec.tsx | 2 +- .../test/comments/stream/editComment.spec.tsx | 12 +- .../test/comments/stream/loadMore.spec.tsx | 6 +- .../test/comments/stream/moderation.spec.tsx | 26 +- .../test/comments/stream/postComment.spec.tsx | 2 +- .../comments/stream/postLocalReply.spec.tsx | 4 +- .../test/comments/stream/postReply.spec.tsx | 8 +- .../test/comments/stream/reaction.spec.tsx | 3 +- .../comments/stream/reportComment.spec.tsx | 101 +- .../comments/stream/showAllReplies.spec.tsx | 11 +- .../comments/stream/showConversation.spec.tsx | 7 +- .../test/comments/stream/sortStream.spec.tsx | 2 +- .../test/comments/stream/suspended.spec.tsx | 16 +- .../renderConfigure.spec.tsx.snap | 533 ++-- .../test/configure/openOrCloseStream.spec.tsx | 15 +- .../configure/streamConfiguration.spec.tsx | 54 +- .../__snapshots__/account.spec.tsx.snap | 260 +- .../__snapshots__/myComments.spec.tsx.snap | 88 +- .../stream/test/profile/account.spec.tsx | 2 +- .../stream/test/profile/changeEmail.spec.tsx | 14 +- .../test/profile/changeUsername.spec.tsx | 28 +- .../test/profile/deleteAccount.spec.tsx | 35 +- .../stream/test/profile/preferences.spec.tsx | 25 +- src/core/client/test/helpers/fixture.ts | 2 + .../client/ui/components/Button/Button.css | 2 +- .../v2/AbsoluteTime/AbsoluteTime.css | 2 + .../v2/AbsoluteTime/AbsoluteTime.tsx | 34 + .../ui/components/v2/AbsoluteTime/index.ts | 1 + .../components/v2/BaseButton/BaseButton.tsx | 9 + .../client/ui/components/v2/Button/Button.css | 168 +- .../client/ui/components/v2/Button/Button.tsx | 13 +- .../ui/components/v2/CheckBox/CheckBox.css | 13 +- .../ui/components/v2/CheckBox/CheckBox.tsx | 19 +- .../__snapshots__/CheckBox.spec.tsx.snap | 6 +- .../ui/components/v2/Dropdown/Button.css | 4 +- .../ui/components/v2/Dropdown/Button.tsx | 4 +- .../v2/HorizontalRule/HorizontalRule.css | 5 + .../v2/HorizontalRule/HorizontalRule.tsx | 14 + .../ui/components/v2/HorizontalRule/index.ts | 1 + .../client/ui/components/v2/Icon/Icon.css | 4 + .../client/ui/components/v2/Icon/Icon.tsx | 5 +- .../components/v2/InputLabel/InputLabel.tsx | 4 +- .../__snapshots__/InputLabel.spec.tsx.snap | 4 +- .../components/v2/MatchMedia/MatchMedia.mdx | 40 + .../v2/MatchMedia/MatchMedia.spec.tsx | 60 + .../components/v2/MatchMedia/MatchMedia.tsx | 65 + .../__snapshots__/MatchMedia.spec.tsx.snap | 35 + .../ui/components/v2/MatchMedia/index.ts | 1 + .../v2/PasswordField/PasswordField.css | 15 +- .../v2/PasswordField/PasswordField.tsx | 3 +- .../components/v2/SelectField/SelectField.css | 15 +- .../components/v2/SelectField/SelectField.tsx | 12 +- .../__snapshots__/SelectField.spec.tsx.snap | 2 +- .../client/ui/components/v2/Steps/Circle.css | 23 + .../client/ui/components/v2/Steps/Circle.tsx | 25 + .../client/ui/components/v2/Steps/Line.css | 12 + .../client/ui/components/v2/Steps/Line.tsx | 22 + .../client/ui/components/v2/Steps/Step.css | 18 + .../client/ui/components/v2/Steps/Step.tsx | 49 + .../client/ui/components/v2/Steps/StepBar.css | 6 + .../client/ui/components/v2/Steps/StepBar.tsx | 43 + .../client/ui/components/v2/Steps/index.ts | 2 + .../client/ui/components/v2/Steps/steps.mdx | 19 + src/core/client/ui/components/v2/Tabs/Tab.css | 93 +- src/core/client/ui/components/v2/Tabs/Tab.tsx | 69 +- .../client/ui/components/v2/Tabs/TabBar.css | 8 + .../client/ui/components/v2/Tabs/TabBar.tsx | 9 +- src/core/client/ui/components/v2/Tag/Tag.css | 8 + src/core/client/ui/components/v2/Tag/Tag.tsx | 3 +- .../ui/components/v2/TextField/TextField.css | 13 +- .../ui/components/v2/TextField/TextField.tsx | 3 +- .../ui/components/v2/Timestamp/Timestamp.tsx | 9 +- .../components/v2/Tooltip/TooltipButton.tsx | 16 +- .../ui/components/v2/UIContext/UIContext.ts | 4 + .../ui/components/v2/UIContext/index.ts | 2 +- src/core/client/ui/components/v2/index.ts | 10 +- .../client/ui/components/v3/Button/Button.css | 394 +++ .../client/ui/components/v3/Button/Button.tsx | 118 + .../client/ui/components/v3/Button/index.ts | 1 + .../ui/components/v3/CallOut/CallOut.css | 104 + .../ui/components/v3/CallOut/CallOut.tsx | 116 + .../client/ui/components/v3/CallOut/index.ts | 1 + .../v3/ExperimentalTag/ExperimentalTag.css | 22 + .../v3/ExperimentalTag/ExperimentalTag.tsx | 54 + .../ui/components/v3/ExperimentalTag/index.ts | 1 + .../ui/components/v3/Tombstone/Tombstone.css | 17 + .../ui/components/v3/Tombstone/Tombstone.tsx | 33 + .../ui/components/v3/Tombstone/index.ts | 1 + .../ValidationMessage/ValidationMessage.css | 13 + .../ValidationMessage/ValidationMessage.tsx | 52 + .../components/v3/ValidationMessage/index.ts | 1 + src/core/client/ui/components/v3/index.ts | 5 + src/core/client/ui/theme/variables2.ts | 46 +- src/core/server/graph/schema/schema.graphql | 8 + src/core/server/locales/en-US/common.ftl | 3 + .../action/__snapshots__/comment.spec.ts.snap | 1 + src/locales/en-US/account.ftl | 26 +- src/locales/en-US/admin.ftl | 2 + src/locales/en-US/auth.ftl | 50 +- src/locales/en-US/stream.ftl | 215 +- 470 files changed, 24856 insertions(+), 15481 deletions(-) create mode 100644 src/core/client/account/routes/NotFound.css delete mode 100644 src/core/client/account/routes/download/Download/Sorry.css create mode 100644 src/core/client/account/routes/email/Confirm/Confirm.css create mode 100644 src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css create mode 100644 src/core/client/account/routes/password/Reset/Reset.css create mode 100644 src/core/client/auth/components/OrSeparator.css create mode 100644 src/core/client/auth/components/SetPasswordField.css create mode 100644 src/core/client/auth/components/UsernameField.css create mode 100644 src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css create mode 100644 src/core/client/auth/views/CreatePassword/CreatePassword.css create mode 100644 src/core/client/auth/views/CreateUsername/CreateUsername.css create mode 100644 src/core/client/auth/views/ForgotPassword/CheckEmail.css create mode 100644 src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.css create mode 100644 src/core/client/auth/views/LinkAccount/LinkAccountContainer.css create mode 100644 src/core/client/auth/views/SignIn/SignIn.css create mode 100644 src/core/client/auth/views/SignIn/SignInWithEmail.css create mode 100644 src/core/client/auth/views/SignUp/SignUp.css create mode 100644 src/core/client/auth/views/SignUp/SignUpWithEmail.css create mode 100644 src/core/client/stream/App/TabBar.css rename src/core/client/stream/{tabs/Configure => common/ModerateStream}/ModerateStreamContainer.tsx (70%) create mode 100644 src/core/client/stream/tabs/Comments/Comment/AnsweredTag.css create mode 100644 src/core/client/stream/tabs/Comments/Comment/AnsweredTag.tsx create mode 100644 src/core/client/stream/tabs/Comments/Comment/CollapsableComment.tsx create mode 100644 src/core/client/stream/tabs/Comments/Comment/CommentToggle.css create mode 100644 src/core/client/stream/tabs/Comments/Comment/CommentToggle.tsx create mode 100644 src/core/client/stream/tabs/Comments/Comment/FeaturedTag.css create mode 100644 src/core/client/stream/tabs/Comments/Comment/FeaturedTag.tsx create mode 100644 src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/RejectedTombstoneContainer.css delete mode 100644 src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.css create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReplyEditSubmitStatus.css delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.css delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.spec.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButton.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonContainer.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportButton/ReportButtonWithPopover.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportButton/__snapshots__/ReportButton.spec.tsx.snap delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportButton/index.ts create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentDisagreeMutation.ts rename src/core/client/stream/tabs/Comments/Comment/{ReportPopover => ReportFlow}/CreateCommentDontAgreeMutation.ts (100%) create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentFlagMutation.ts rename src/core/client/stream/tabs/Comments/Comment/{ReportPopover => ReportFlow}/PropagateMount.tsx (100%) create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.css create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.css create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentFormContainer.tsx create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportFlowContainer.tsx create mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportFlow/index.ts delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/CreateCommentFlagMutation.ts delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.css delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentFormContainer.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.css delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.spec.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportPopover.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/ThankYou.css delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/ThankYou.spec.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/ThankYou.tsx delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ReportPopover.spec.tsx.snap delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/__snapshots__/ThankYou.spec.tsx.snap delete mode 100644 src/core/client/stream/tabs/Comments/Comment/ReportPopover/index.ts create mode 100644 src/core/client/stream/tabs/Comments/Comment/ShowConversationLink.css create mode 100644 src/core/client/stream/tabs/Comments/Comment/Username/UsernameContainer.tsx create mode 100644 src/core/client/stream/tabs/Comments/IgnoredTombstoneOrHideContainer.css create mode 100644 src/core/client/stream/tabs/Comments/ReplyList/ReplyList.css create mode 100644 src/core/client/stream/tabs/Comments/Stream/BannedInfo.css create mode 100644 src/core/client/stream/tabs/Comments/Stream/CommunityGuidelines/CommunityGuidelines.css create mode 100644 src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.css delete mode 100644 src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormClosedSitewide.css delete mode 100644 src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentInReviewMessage.css create mode 100644 src/core/client/stream/tabs/Comments/Stream/SuspendedInfo/SuspendedInfo.css create mode 100644 src/core/client/stream/tabs/Configure/AddMessage/AddMessageClosed.tsx create mode 100644 src/core/client/stream/tabs/Configure/AddMessage/AddMessageContainer.css create mode 100644 src/core/client/stream/tabs/Configure/AddMessage/AddMessageContainer.tsx create mode 100644 src/core/client/stream/tabs/Configure/AddMessage/AddMessageOpen.css create mode 100644 src/core/client/stream/tabs/Configure/AddMessage/AddMessageOpen.tsx rename src/core/client/stream/tabs/Configure/{ConfigureStream => AddMessage}/MessageBoxConfig.css (100%) create mode 100644 src/core/client/stream/tabs/Configure/AddMessage/MessageBoxConfig.tsx create mode 100644 src/core/client/stream/tabs/Configure/AddMessage/UpdateMessageBoxMutation.ts create mode 100644 src/core/client/stream/tabs/Configure/AddMessage/index.ts create mode 100644 src/core/client/stream/tabs/Configure/AddMessage/shared.css delete mode 100644 src/core/client/stream/tabs/Configure/ConfigureStream/LiveUpdatesConfig/LiveUpdatesConfig.tsx delete mode 100644 src/core/client/stream/tabs/Configure/ConfigureStream/LiveUpdatesConfig/LiveUpdatesConfigContainer.tsx delete mode 100644 src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.tsx create mode 100644 src/core/client/stream/tabs/Configure/LiveUpdatesConfig/DisableLiveUpdates.css create mode 100644 src/core/client/stream/tabs/Configure/LiveUpdatesConfig/DisableLiveUpdates.tsx create mode 100644 src/core/client/stream/tabs/Configure/LiveUpdatesConfig/EnableLiveUpdates.css create mode 100644 src/core/client/stream/tabs/Configure/LiveUpdatesConfig/EnableLiveUpdates.tsx create mode 100644 src/core/client/stream/tabs/Configure/LiveUpdatesConfig/LiveUpdatesConfigContainer.css create mode 100644 src/core/client/stream/tabs/Configure/LiveUpdatesConfig/LiveUpdatesConfigContainer.tsx create mode 100644 src/core/client/stream/tabs/Configure/LiveUpdatesConfig/SetLiveUpdateMutation.ts rename src/core/client/stream/tabs/Configure/{ConfigureStream => }/LiveUpdatesConfig/index.ts (100%) create mode 100644 src/core/client/stream/tabs/Configure/OpenOrCloseStream/OpenOrCloseStreamContainer.css create mode 100644 src/core/client/stream/tabs/Configure/Q&A/NoLongerAnExpert.css create mode 100644 src/core/client/stream/tabs/Configure/Q&A/NoLongerAnExpert.tsx create mode 100644 src/core/client/stream/tabs/Configure/Q&A/QAConfigContainer.css create mode 100644 src/core/client/stream/tabs/Profile/MyComments/MyCommentsContainer.css create mode 100644 src/core/client/stream/tabs/Profile/Preferences/IgnoreUserListItem.css create mode 100644 src/core/client/stream/tabs/Profile/Preferences/IgnoreUserListItem.tsx create mode 100644 src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.css create mode 100644 src/core/client/ui/components/v2/AbsoluteTime/AbsoluteTime.css create mode 100644 src/core/client/ui/components/v2/AbsoluteTime/AbsoluteTime.tsx create mode 100644 src/core/client/ui/components/v2/AbsoluteTime/index.ts create mode 100644 src/core/client/ui/components/v2/HorizontalRule/HorizontalRule.css create mode 100644 src/core/client/ui/components/v2/HorizontalRule/HorizontalRule.tsx create mode 100644 src/core/client/ui/components/v2/HorizontalRule/index.ts create mode 100644 src/core/client/ui/components/v2/MatchMedia/MatchMedia.mdx create mode 100644 src/core/client/ui/components/v2/MatchMedia/MatchMedia.spec.tsx create mode 100644 src/core/client/ui/components/v2/MatchMedia/MatchMedia.tsx create mode 100644 src/core/client/ui/components/v2/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/MatchMedia/index.ts create mode 100644 src/core/client/ui/components/v2/Steps/Circle.css create mode 100644 src/core/client/ui/components/v2/Steps/Circle.tsx create mode 100644 src/core/client/ui/components/v2/Steps/Line.css create mode 100644 src/core/client/ui/components/v2/Steps/Line.tsx create mode 100644 src/core/client/ui/components/v2/Steps/Step.css create mode 100644 src/core/client/ui/components/v2/Steps/Step.tsx create mode 100644 src/core/client/ui/components/v2/Steps/StepBar.css create mode 100644 src/core/client/ui/components/v2/Steps/StepBar.tsx create mode 100644 src/core/client/ui/components/v2/Steps/index.ts create mode 100644 src/core/client/ui/components/v2/Steps/steps.mdx create mode 100644 src/core/client/ui/components/v3/Button/Button.css create mode 100644 src/core/client/ui/components/v3/Button/Button.tsx create mode 100644 src/core/client/ui/components/v3/Button/index.ts create mode 100644 src/core/client/ui/components/v3/CallOut/CallOut.css create mode 100644 src/core/client/ui/components/v3/CallOut/CallOut.tsx create mode 100644 src/core/client/ui/components/v3/CallOut/index.ts create mode 100644 src/core/client/ui/components/v3/ExperimentalTag/ExperimentalTag.css create mode 100644 src/core/client/ui/components/v3/ExperimentalTag/ExperimentalTag.tsx create mode 100644 src/core/client/ui/components/v3/ExperimentalTag/index.ts create mode 100644 src/core/client/ui/components/v3/Tombstone/Tombstone.css create mode 100644 src/core/client/ui/components/v3/Tombstone/Tombstone.tsx create mode 100644 src/core/client/ui/components/v3/Tombstone/index.ts create mode 100644 src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.css create mode 100644 src/core/client/ui/components/v3/ValidationMessage/ValidationMessage.tsx create mode 100644 src/core/client/ui/components/v3/ValidationMessage/index.ts create mode 100644 src/core/client/ui/components/v3/index.ts diff --git a/package-lock.json b/package-lock.json index efa8fe118..ea9e37e73 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15059,7 +15059,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -21485,28 +21485,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "resolved": false, "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "resolved": false, "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", + "resolved": false, "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, @@ -21517,14 +21517,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -21535,42 +21535,42 @@ }, "chownr": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz", + "resolved": false, "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", + "resolved": false, "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true }, "debug": { "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "resolved": false, "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "dev": true, "optional": true, @@ -21580,28 +21580,28 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "resolved": false, "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "resolved": false, "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz", + "resolved": false, "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "dev": true, "optional": true, @@ -21611,14 +21611,14 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "resolved": false, "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "resolved": false, "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -21635,7 +21635,7 @@ }, "glob": { "version": "7.1.3", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", + "resolved": false, "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "dev": true, "optional": true, @@ -21650,14 +21650,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "resolved": false, "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "resolved": false, "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, @@ -21667,7 +21667,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", + "resolved": false, "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -21677,7 +21677,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "resolved": false, "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -21688,21 +21688,21 @@ }, "inherits": { "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", + "resolved": false, "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", + "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, @@ -21712,14 +21712,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "resolved": false, "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, @@ -21729,14 +21729,14 @@ }, "minimist": { "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true, "optional": true }, "minipass": { "version": "2.3.5", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", + "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, "optional": true, @@ -21747,7 +21747,7 @@ }, "minizlib": { "version": "1.2.1", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz", + "resolved": false, "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==", "dev": true, "optional": true, @@ -21757,7 +21757,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "optional": true, @@ -21767,7 +21767,7 @@ }, "ms": { "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "resolved": false, "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "dev": true, "optional": true @@ -21781,7 +21781,7 @@ }, "needle": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz", + "resolved": false, "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==", "dev": true, "optional": true, @@ -21793,7 +21793,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz", + "resolved": false, "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "dev": true, "optional": true, @@ -21812,7 +21812,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", + "resolved": false, "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -21823,14 +21823,14 @@ }, "npm-bundled": { "version": "1.0.6", - "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz", + "resolved": false, "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.4.1", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz", + "resolved": false, "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==", "dev": true, "optional": true, @@ -21841,7 +21841,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "resolved": false, "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -21854,21 +21854,21 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "resolved": false, "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -21878,21 +21878,21 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "resolved": false, "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": false, "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", + "resolved": false, "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -21903,21 +21903,21 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": false, "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true }, "process-nextick-args": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", + "resolved": false, "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true, "optional": true }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, @@ -21930,7 +21930,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": false, "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -21939,7 +21939,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": false, "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "optional": true, @@ -21955,7 +21955,7 @@ }, "rimraf": { "version": "2.6.3", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", + "resolved": false, "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "dev": true, "optional": true, @@ -21965,49 +21965,49 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "resolved": false, "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "resolved": false, "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", + "resolved": false, "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.7.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", + "resolved": false, "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "resolved": false, "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", + "resolved": false, "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, @@ -22019,7 +22019,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": false, "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, @@ -22029,7 +22029,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, @@ -22039,14 +22039,14 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", + "resolved": false, "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "tar": { "version": "4.4.8", - "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz", + "resolved": false, "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", "dev": true, "optional": true, @@ -22062,14 +22062,14 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "resolved": false, "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", + "resolved": false, "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, @@ -22079,14 +22079,14 @@ }, "wrappy": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true }, "yallist": { "version": "3.0.3", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", + "resolved": false, "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", "dev": true, "optional": true diff --git a/package.json b/package.json index 5e1000f98..e19674893 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ ], "description": "A better commenting experience from Vox Media.", "scripts": { + "clean": "gulp clean", "build": "NODE_ENV=production npm-run-all generate-persist --parallel build:client build:server", "build:development": "NODE_ENV=development npm-run-all generate --parallel build:client build:server", "build:client": "ts-node --transpile-only ./scripts/build.ts", diff --git a/src/core/client/account/routes/NotFound.css b/src/core/client/account/routes/NotFound.css new file mode 100644 index 000000000..d4ff4b1ca --- /dev/null +++ b/src/core/client/account/routes/NotFound.css @@ -0,0 +1,11 @@ +.content { + font-family: var(--v2-font-family-secondary); + font-style: normal; + font-weight: var(--v2-font-weight-secondary-bold); + font-size: var(--v2-font-size-6); + line-height: var(--v2-line-height-7); + + color: var(--v2-colors-mono-500); + + text-align: center; +} diff --git a/src/core/client/account/routes/NotFound.tsx b/src/core/client/account/routes/NotFound.tsx index e6c76557f..028d44043 100644 --- a/src/core/client/account/routes/NotFound.tsx +++ b/src/core/client/account/routes/NotFound.tsx @@ -1,12 +1,15 @@ +import { Localized } from "@fluent/react/compat"; import React, { FunctionComponent } from "react"; -import { HorizontalGutter, Typography } from "coral-ui/components"; +import { HorizontalGutter } from "coral-ui/components/v2"; + +import styles from "./NotFound.css"; const NotFound: FunctionComponent = () => ( - - Not Found - + +
Not Found
+ ); diff --git a/src/core/client/account/routes/download/Download/DownloadDescription.css b/src/core/client/account/routes/download/Download/DownloadDescription.css index 69483c536..528a6529e 100644 --- a/src/core/client/account/routes/download/Download/DownloadDescription.css +++ b/src/core/client/account/routes/download/Download/DownloadDescription.css @@ -1,40 +1,42 @@ .title { - font-family: var(--font-family-serif); - font-weight: 600; + font-family: var(--v2-font-family-secondary); font-style: normal; - font-size: calc(48rem / var(--rem-base)); - line-height: calc(42em / 48); - text-align: center; + font-weight: var(--v2-font-weight-secondary-bold); + font-size: var(--v2-font-size-6); + line-height: var(--v2-line-height-7); - color: var(--palette-common-black); + color: var(--v2-colors-mono-500); + + padding-left: var(--v2-spacing-2); } .content { - padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) var(--spacing-3); + padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3) var(--v2-spacing-3); } .section { - margin-bottom: var(--spacing-4); + margin-bottom: var(--v2-spacing-4); } .sectionText { - font-family: var(--font-family-sans-serif); - font-weight: normal; + font-family: var(--v2-font-family-primary); font-style: normal; - font-size: calc(24rem / var(--rem-base)); - line-height: calc(34em / 24); - letter-spacing: 0.3px; + font-weight: var(--v2-font-weight-primary-regular); + font-size: var(--v2-font-size-3); + line-height: var(--v2-line-height-5); - color: var(--palette-text-primary); + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-3); } .list { list-style: none; - margin-left: calc(-1 * var(--spacing-5)); + margin-left: calc(-1 * var(--v2-spacing-5)); } .list li { - margin-bottom: calc(16em / 24); + margin-bottom: 0.75rem; } .listContent { @@ -43,6 +45,6 @@ .bullet { display: inline-block; - min-width: 24px; - margin-right: var(--spacing-2); -} \ No newline at end of file + min-width: 16px; + margin-right: var(--v2-spacing-2); +} diff --git a/src/core/client/account/routes/download/Download/DownloadDescription.tsx b/src/core/client/account/routes/download/Download/DownloadDescription.tsx index 354220cad..cb6e1930b 100644 --- a/src/core/client/account/routes/download/Download/DownloadDescription.tsx +++ b/src/core/client/account/routes/download/Download/DownloadDescription.tsx @@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat"; import cn from "classnames"; import React, { FunctionComponent } from "react"; -import { Flex, HorizontalGutter, Icon, Typography } from "coral-ui/components"; +import { Flex, HorizontalGutter, Icon } from "coral-ui/components/v2"; import styles from "./DownloadDescription.css"; @@ -10,84 +10,72 @@ const DownloadDescription: FunctionComponent = () => { return ( -

Download Your Comment History

+

Download your comment history
- +
Your comment history will be downloaded into a .zip file. After your comment history is unzipped you will have a comma separated value (or .csv) file that you can easily import into your favorite spreadsheet application. - +
- +
For each of your comments the following information is included: - +
  • - - + + check - +
    When you wrote the comment - +
  • - - + + check - +
    The permalink URL for the comment - +
  • - - + + check - +
    The comment text - +
  • - - + + check - +
    The URL on the article or story where the comment appears - +
    • diff --git a/src/core/client/account/routes/download/Download/DownloadForm.css b/src/core/client/account/routes/download/Download/DownloadForm.css index 0843d7904..ef7d8ac19 100644 --- a/src/core/client/account/routes/download/Download/DownloadForm.css +++ b/src/core/client/account/routes/download/Download/DownloadForm.css @@ -1,8 +1,3 @@ .form { text-align: center; } - -.downloadButton { - font-size: calc(18rem / var(--rem-base)); - line-height: calc(23em / 18); -} \ No newline at end of file diff --git a/src/core/client/account/routes/download/Download/DownloadForm.tsx b/src/core/client/account/routes/download/Download/DownloadForm.tsx index f2df363b5..45d09240a 100644 --- a/src/core/client/account/routes/download/Download/DownloadForm.tsx +++ b/src/core/client/account/routes/download/Download/DownloadForm.tsx @@ -1,7 +1,8 @@ import { Localized } from "@fluent/react/compat"; import React, { FunctionComponent, useCallback, useState } from "react"; -import { Button, HorizontalGutter } from "coral-ui/components"; +import { HorizontalGutter } from "coral-ui/components/v2"; +import { Button } from "coral-ui/components/v3"; import styles from "./DownloadForm.css"; @@ -25,15 +26,16 @@ const DownloadForm: FunctionComponent = ({ token }) => { onSubmit={onSubmit} > - + diff --git a/src/core/client/account/routes/download/Download/DownloadRoute.css b/src/core/client/account/routes/download/Download/DownloadRoute.css index 73bfbe396..c34afdecf 100644 --- a/src/core/client/account/routes/download/Download/DownloadRoute.css +++ b/src/core/client/account/routes/download/Download/DownloadRoute.css @@ -6,11 +6,11 @@ .root { display: inline-block; - max-width: calc(70 * var(--mini-unit)); + max-width: calc(70 * var(--v2-spacing-2)); @media (min-width: $breakpoints-xs) { - max-width: calc(90 * var(--mini-unit)); + max-width: calc(60 * var(--v2-spacing-2)); } text-align: left; -} \ No newline at end of file +} diff --git a/src/core/client/account/routes/download/Download/Sorry.css b/src/core/client/account/routes/download/Download/Sorry.css deleted file mode 100644 index c5f9f1de3..000000000 --- a/src/core/client/account/routes/download/Download/Sorry.css +++ /dev/null @@ -1,7 +0,0 @@ -.icon { - margin-right: var(--spacing-2); -} - -.callout { - justify-content: left; -} \ No newline at end of file diff --git a/src/core/client/account/routes/download/Download/Sorry.tsx b/src/core/client/account/routes/download/Download/Sorry.tsx index 096cebd2e..826aa3f46 100644 --- a/src/core/client/account/routes/download/Download/Sorry.tsx +++ b/src/core/client/account/routes/download/Download/Sorry.tsx @@ -1,22 +1,21 @@ import { Localized } from "@fluent/react/compat"; import React, { FunctionComponent } from "react"; -import { CallOut, Flex, Icon } from "coral-ui/components"; - -import styles from "./Sorry.css"; +import { Icon } from "coral-ui/components/v2"; +import { CallOut } from "coral-ui/components/v3"; const Sorry: FunctionComponent = () => { return ( - - - - error - + error} + titleWeight="semiBold" + title={ Your download link is invalid. - - + } + /> ); }; diff --git a/src/core/client/account/routes/email/Confirm/Confirm.css b/src/core/client/account/routes/email/Confirm/Confirm.css new file mode 100644 index 000000000..fd7f3063c --- /dev/null +++ b/src/core/client/account/routes/email/Confirm/Confirm.css @@ -0,0 +1,52 @@ +.title { + font-family: var(--v2-font-family-secondary); + font-style: normal; + font-weight: var(--v2-font-weight-secondary-bold); + font-size: var(--v2-font-size-6); + line-height: var(--v2-line-height-7); + + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-2); +} + +.description { + font-family: var(--v2-font-family-primary); + font-style: normal; + font-weight: var(--v2-font-weight-primary-regular); + font-size: var(--v2-font-size-3); + line-height: var(--v2-line-height-5); + + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-3); +} + +.label { + font-family: var(--v2-font-family-primary); + font-style: normal; + font-weight: var(--v2-font-weight-primary-bold); + font-size: var(--v2-font-size-2); + line-height: var(--v2-line-height-3); + + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-1); +} + +.labelDescription { + font-family: var(--v2-font-family-primary); + font-style: normal; + font-weight: var(--v2-font-weight-primary-regular); + font-size: var(--v2-font-size-2); + line-height: var(--v2-line-height-4); + + color: var(--v2-colors-mono-100); + + margin-bottom: var(--v2-spacing-2); +} + +.submit { + margin-top: var(--v2-spacing-5); + margin-bottom: var(--v2-spacing-1); +} diff --git a/src/core/client/account/routes/email/Confirm/ConfirmForm.tsx b/src/core/client/account/routes/email/Confirm/ConfirmForm.tsx index 9aab99083..7e2fedb4f 100644 --- a/src/core/client/account/routes/email/Confirm/ConfirmForm.tsx +++ b/src/core/client/account/routes/email/Confirm/ConfirmForm.tsx @@ -5,10 +5,12 @@ import { Form } from "react-final-form"; import { InvalidRequestError } from "coral-framework/lib/errors"; import { useMutation } from "coral-framework/lib/relay"; -import { Button, HorizontalGutter, Typography } from "coral-ui/components"; +import { Button } from "coral-ui/components/v3"; import ConfirmMutation from "./ConfirmMutation"; +import styles from "./Confirm.css"; + interface Props { token: string; disabled?: boolean; @@ -33,18 +35,18 @@ const ConfirmForm: React.FunctionComponent = ({ onSuccess, token }) => {
    {({ handleSubmit, submitting }) => ( - - - - Email Confirmation +
    +
    + +
    Confirm your email address
     - +
    Click below to confirm your email address. - +
    - - +
    +
    - - +
    +
    )} diff --git a/src/core/client/account/routes/email/Confirm/Sorry.tsx b/src/core/client/account/routes/email/Confirm/Sorry.tsx index 69465f937..af24f038e 100644 --- a/src/core/client/account/routes/email/Confirm/Sorry.tsx +++ b/src/core/client/account/routes/email/Confirm/Sorry.tsx @@ -1,7 +1,9 @@ import { Localized } from "@fluent/react/compat"; import React from "react"; -import { CallOut, HorizontalGutter, Typography } from "coral-ui/components"; +import { CallOut } from "coral-ui/components/v3"; + +import styles from "./Confirm.css"; interface Props { reason: React.ReactNode; @@ -9,23 +11,27 @@ interface Props { const Sorry: React.FunctionComponent = ({ reason }) => { return ( - +
    - Oops Sorry! +
    Oops Sorry!
     - - {reason ? ( - reason - ) : ( - - - The specified link is invalid, check to see if it was copied - correctly. - - - )} - - + + + The specified link is invalid, check to see if it was copied + correctly. + + + ) + } + /> +
    ); }; diff --git a/src/core/client/account/routes/email/Confirm/Success.tsx b/src/core/client/account/routes/email/Confirm/Success.tsx index 5f90dc358..1a3c8a59e 100644 --- a/src/core/client/account/routes/email/Confirm/Success.tsx +++ b/src/core/client/account/routes/email/Confirm/Success.tsx @@ -1,20 +1,18 @@ import { Localized } from "@fluent/react/compat"; import React from "react"; -import { HorizontalGutter, Typography } from "coral-ui/components"; +import styles from "./Confirm.css"; const Success: React.FunctionComponent = () => { return ( - +
    - Email successfully confirmed +
    Email successfully confirmed
     - - You may now close this window. - +
    You may now close this window.
     - +
    ); }; diff --git a/src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx b/src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx index fa7a77309..dfa4c2fda 100644 --- a/src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx +++ b/src/core/client/account/routes/notifications/Unsubscribe/Sorry.tsx @@ -1,7 +1,9 @@ import { Localized } from "@fluent/react/compat"; import React from "react"; -import { CallOut, HorizontalGutter, Typography } from "coral-ui/components"; +import { CallOut } from "coral-ui/components/v3"; + +import styles from "./Unsubscribe.css"; interface Props { reason: React.ReactNode; @@ -9,23 +11,27 @@ interface Props { const Sorry: React.FunctionComponent = ({ reason }) => { return ( - +
    - Oops Sorry! +
    Oops Sorry!
     - - {reason ? ( - reason - ) : ( - - - The specified link is invalid, check to see if it was copied - correctly. - - - )} - - + + + The specified link is invalid, check to see if it was copied + correctly. + + + ) + } + /> +
    ); }; diff --git a/src/core/client/account/routes/notifications/Unsubscribe/Success.tsx b/src/core/client/account/routes/notifications/Unsubscribe/Success.tsx index 5e6e34b86..b6b9328bf 100644 --- a/src/core/client/account/routes/notifications/Unsubscribe/Success.tsx +++ b/src/core/client/account/routes/notifications/Unsubscribe/Success.tsx @@ -1,17 +1,20 @@ import { Localized } from "@fluent/react/compat"; import React from "react"; -import { HorizontalGutter, Typography } from "coral-ui/components"; +import styles from "./Unsubscribe.css"; const Success: React.FunctionComponent = () => { return ( - - - - You are now unsubscribed from all notifications - +
    + +
    + Unsubscribed successfully from email notifications +
    - + +
    You may now close this window
    +     +
    ); }; diff --git a/src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css b/src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css new file mode 100644 index 000000000..fd7f3063c --- /dev/null +++ b/src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css @@ -0,0 +1,52 @@ +.title { + font-family: var(--v2-font-family-secondary); + font-style: normal; + font-weight: var(--v2-font-weight-secondary-bold); + font-size: var(--v2-font-size-6); + line-height: var(--v2-line-height-7); + + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-2); +} + +.description { + font-family: var(--v2-font-family-primary); + font-style: normal; + font-weight: var(--v2-font-weight-primary-regular); + font-size: var(--v2-font-size-3); + line-height: var(--v2-line-height-5); + + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-3); +} + +.label { + font-family: var(--v2-font-family-primary); + font-style: normal; + font-weight: var(--v2-font-weight-primary-bold); + font-size: var(--v2-font-size-2); + line-height: var(--v2-line-height-3); + + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-1); +} + +.labelDescription { + font-family: var(--v2-font-family-primary); + font-style: normal; + font-weight: var(--v2-font-weight-primary-regular); + font-size: var(--v2-font-size-2); + line-height: var(--v2-line-height-4); + + color: var(--v2-colors-mono-100); + + margin-bottom: var(--v2-spacing-2); +} + +.submit { + margin-top: var(--v2-spacing-5); + margin-bottom: var(--v2-spacing-1); +} diff --git a/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx b/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx index da4e3dc98..075033c8d 100644 --- a/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx +++ b/src/core/client/account/routes/notifications/Unsubscribe/UnsubscribeForm.tsx @@ -5,15 +5,12 @@ import { Form } from "react-final-form"; import { InvalidRequestError } from "coral-framework/lib/errors"; import { useMutation } from "coral-framework/lib/relay"; -import { - Button, - CallOut, - HorizontalGutter, - Typography, -} from "coral-ui/components"; +import { Button, CallOut } from "coral-ui/components/v3"; import UnsubscribeNotificationsMutation from "./UnsubscribeNotificationsMutation"; +import styles from "./Unsubscribe.css"; + interface Props { token: string; disabled?: boolean; @@ -42,30 +39,34 @@ const UnsubscribeForm: React.FunctionComponent = ({
    {({ handleSubmit, submitting, submitError }) => ( - +
    + +
    + Unsubscribe from email notifications +
    +     - +
    Click below to confirm that you want to unsubscribe from all notifications. - +
    - {submitError && ( - - {submitError} - - )} - + {submitError && } + - +
    )} diff --git a/src/core/client/account/routes/password/Reset/Reset.css b/src/core/client/account/routes/password/Reset/Reset.css new file mode 100644 index 000000000..fd7f3063c --- /dev/null +++ b/src/core/client/account/routes/password/Reset/Reset.css @@ -0,0 +1,52 @@ +.title { + font-family: var(--v2-font-family-secondary); + font-style: normal; + font-weight: var(--v2-font-weight-secondary-bold); + font-size: var(--v2-font-size-6); + line-height: var(--v2-line-height-7); + + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-2); +} + +.description { + font-family: var(--v2-font-family-primary); + font-style: normal; + font-weight: var(--v2-font-weight-primary-regular); + font-size: var(--v2-font-size-3); + line-height: var(--v2-line-height-5); + + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-3); +} + +.label { + font-family: var(--v2-font-family-primary); + font-style: normal; + font-weight: var(--v2-font-weight-primary-bold); + font-size: var(--v2-font-size-2); + line-height: var(--v2-line-height-3); + + color: var(--v2-colors-mono-500); + + margin-bottom: var(--v2-spacing-1); +} + +.labelDescription { + font-family: var(--v2-font-family-primary); + font-style: normal; + font-weight: var(--v2-font-weight-primary-regular); + font-size: var(--v2-font-size-2); + line-height: var(--v2-line-height-4); + + color: var(--v2-colors-mono-100); + + margin-bottom: var(--v2-spacing-2); +} + +.submit { + margin-top: var(--v2-spacing-5); + margin-bottom: var(--v2-spacing-1); +} diff --git a/src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx b/src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx index c1bf80454..047c29057 100644 --- a/src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx +++ b/src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx @@ -4,26 +4,20 @@ import React, { useCallback } from "react"; import { Field, Form } from "react-final-form"; import { InvalidRequestError } from "coral-framework/lib/errors"; -import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form"; +import { colorFromMeta } from "coral-framework/lib/form"; import { useMutation } from "coral-framework/lib/relay"; import { composeValidators, required, validatePassword, } from "coral-framework/lib/validation"; -import { - Button, - CallOut, - FormField, - HorizontalGutter, - InputDescription, - InputLabel, - PasswordField, - Typography, -} from "coral-ui/components"; +import { FormField, PasswordField } from "coral-ui/components/v2"; +import { Button, CallOut, ValidationMessage } from "coral-ui/components/v3"; import ResetPasswordMutation from "./ResetPasswordMutation"; +import styles from "./Reset.css"; + interface Props { token: string; disabled?: boolean; @@ -60,22 +54,20 @@ const ResetPasswordForm: React.FunctionComponent = ({
    {({ handleSubmit, submitting, submitError }) => ( - - +
    +
    - - Reset your password - +
    Reset your password
     - +
    Please enter a new password to use to sign in to your account. Make sure it is unique and be sure to keep it secure. - +
    - - +
    +
    = ({ {({ input, meta }) => ( - Password + - +
    {"Must be at least {$minLength} characters"} - +
    = ({ {...input} /> - +     )}     {submitError && ( - - {submitError} - + )} - - +
    +
    )} diff --git a/src/core/client/account/routes/password/Reset/Sorry.tsx b/src/core/client/account/routes/password/Reset/Sorry.tsx index 37dcbc5f6..f813501aa 100644 --- a/src/core/client/account/routes/password/Reset/Sorry.tsx +++ b/src/core/client/account/routes/password/Reset/Sorry.tsx @@ -1,7 +1,9 @@ import { Localized } from "@fluent/react/compat"; import React from "react"; -import { CallOut, HorizontalGutter, Typography } from "coral-ui/components"; +import { CallOut } from "coral-ui/components/v3"; + +import styles from "./Reset.css"; interface Props { reason: React.ReactNode; @@ -9,23 +11,27 @@ interface Props { const Sorry: React.FunctionComponent = ({ reason }) => { return ( - +
    - Oops Sorry! +
    Oops Sorry!
     - - {reason ? ( - reason - ) : ( - - - The specified link is invalid, check to see if it was copied - correctly. - - - )} - - + + + The specified link is invalid, check to see if it was copied + correctly. + + + ) + } + /> +
    ); }; diff --git a/src/core/client/account/routes/password/Reset/Success.tsx b/src/core/client/account/routes/password/Reset/Success.tsx index d72f137b5..e62f4127f 100644 --- a/src/core/client/account/routes/password/Reset/Success.tsx +++ b/src/core/client/account/routes/password/Reset/Success.tsx @@ -1,21 +1,21 @@ import { Localized } from "@fluent/react/compat"; import React from "react"; -import { HorizontalGutter, Typography } from "coral-ui/components"; +import styles from "./Reset.css"; const Success: React.FunctionComponent = () => { return ( - +
    - Password successfully reset +
    Password successfully reset
     - +
    You may now close this window and sign in to your account with your new password. - +
    - +
    ); }; diff --git a/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap b/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap index ae7517944..5eabe32fb 100644 --- a/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap +++ b/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap @@ -20,30 +20,22 @@ exports[`renders form 1`] = ` autoComplete="off" onSubmit={[Function]} > -
    -
    -

    +
    +
    - Email Confirmation -

    -

    +

    Click below to confirm your email address. -

    +
    -
    +
    diff --git a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap index 58bb89330..cedb4b4fb 100644 --- a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap +++ b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap @@ -21,41 +21,35 @@ exports[`renders form 1`] = ` autoComplete="off" onSubmit={[Function]} > -
    -
    -

    +
    +
    Reset your password -

    -

    +

    Please enter a new password to use to sign in to your account. Make sure it is unique and be sure to keep it secure. -

    +
    -
    +
    -

    Must be at least 8 characters -

    +
    @@ -67,6 +61,7 @@ Make sure it is unique and be sure to keep it secure. autoComplete="new-password" autoCorrect="off" className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input" + data-testid="password-field" disabled={false} id="password" name="password" @@ -97,9 +92,7 @@ Make sure it is unique and be sure to keep it secure.
    diff --git a/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap b/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap index aee73889b..6bbb42707 100644 --- a/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap +++ b/src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap @@ -22,18 +22,19 @@ exports[`renders form 1`] = `
    -
    -

    +
    + Unsubscribe from email notifications +
    +
    Click below to confirm that you want to unsubscribe from all notifications. -

    +
    @@ -69,25 +70,34 @@ exports[`renders missing confirm token 1`] = `
    -
    -

    +
    Oops Sorry! -

    +
    - - The specified link is invalid, check to see if it was copied correctly. - +
    + + The specified link is invalid, check to see if it was copied correctly. + +
    +
    +
    diff --git a/src/core/client/account/test/confirmEmail.spec.tsx b/src/core/client/account/test/confirmEmail.spec.tsx index 57cdae59e..099ebcec0 100644 --- a/src/core/client/account/test/confirmEmail.spec.tsx +++ b/src/core/client/account/test/confirmEmail.spec.tsx @@ -53,9 +53,7 @@ it("renders form", async () => { await act(async () => { await waitForElement(() => - within(root).getByText("Email Confirmation", { - exact: false, - }) + within(root).getByText("Confirm your email address") ); }); expect(within(root).toJSON()).toMatchSnapshot(); @@ -130,9 +128,7 @@ it("submits form", async () => { await act(async () => { await waitForElement(() => - within(root).getByText("Email Confirmation", { - exact: false, - }) + within(root).getByText("Confirm your email address") ); }); const form = within(root).getByType("form"); diff --git a/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx b/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx index 4fef82b41..9baa8669c 100644 --- a/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx +++ b/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx @@ -32,6 +32,9 @@ const FlagDetailsContainer: FunctionComponent = ({ const offensive = nodes.filter( ({ reason }) => reason === GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_OFFENSIVE ); + const abusive = nodes.filter( + ({ reason }) => reason === GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_ABUSIVE + ); const spam = nodes.filter( ({ reason }) => reason === GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_SPAM ); @@ -75,6 +78,26 @@ const FlagDetailsContainer: FunctionComponent = ({ ))} )} + {abusive.length > 0 && ( + + Abusive + + } + > + {offensive.map((flag, i) => ( + + flag.flagger ? onUsernameClick(flag.flagger.id) : null + } + user={flag.flagger ? flag.flagger.username : } + details={flag.additionalDetails} + /> + ))} + + )} {spam.length > 0 && ( { COMMENT_DETECTED_BANNED_WORD: 1, COMMENT_DETECTED_SUSPECT_WORD: 1, COMMENT_REPORTED_OFFENSIVE: 2, + COMMENT_REPORTED_ABUSIVE: 0, COMMENT_REPORTED_SPAM: 3, COMMENT_DETECTED_NEW_COMMENTER: 0, COMMENT_DETECTED_REPEAT_POST: 1, @@ -61,6 +62,7 @@ it("renders some markers", () => { COMMENT_DETECTED_BANNED_WORD: 1, COMMENT_DETECTED_SUSPECT_WORD: 0, COMMENT_REPORTED_OFFENSIVE: 2, + COMMENT_REPORTED_ABUSIVE: 0, COMMENT_REPORTED_SPAM: 0, COMMENT_DETECTED_NEW_COMMENTER: 0, COMMENT_DETECTED_REPEAT_POST: 0, diff --git a/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx b/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx index 83b26ec3c..34dc97281 100644 --- a/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx +++ b/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx @@ -97,6 +97,19 @@ const markers: Array<( )) || null, + (c) => + (c.revision && + c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_ABUSIVE && ( + + + Abusive + {" "} + + {c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_ABUSIVE} + + + )) || + null, (c) => (c.revision && c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_SPAM && ( @@ -159,6 +172,7 @@ const enhanced = withFragmentContainer({ COMMENT_DETECTED_BANNED_WORD COMMENT_DETECTED_SUSPECT_WORD COMMENT_REPORTED_OFFENSIVE + COMMENT_REPORTED_ABUSIVE COMMENT_REPORTED_SPAM COMMENT_DETECTED_NEW_COMMENTER COMMENT_DETECTED_REPEAT_POST diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx index 22988a49f..fff5b506a 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx +++ b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx @@ -36,6 +36,7 @@ type DetailsTabs = "INFO" | "HISTORY"; function hasFlagDetails(c: ModerateCardDetailsContainer_comment) { return c.revision ? c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_OFFENSIVE + + c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_ABUSIVE + c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_SPAM > 0 || c.revision.metadata.perspective : false; @@ -110,6 +111,7 @@ const enhanced = withFragmentContainer({ flag { reasons { COMMENT_REPORTED_OFFENSIVE + COMMENT_REPORTED_ABUSIVE COMMENT_REPORTED_SPAM } } diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap index 6558e155a..da7dca728 100644 --- a/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap +++ b/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap @@ -18,6 +18,7 @@ exports[`renders all markers 1`] = ` "COMMENT_DETECTED_SPAM": 1, "COMMENT_DETECTED_SUSPECT_WORD": 1, "COMMENT_DETECTED_TOXIC": 1, + "COMMENT_REPORTED_ABUSIVE": 0, "COMMENT_REPORTED_OFFENSIVE": 2, "COMMENT_REPORTED_SPAM": 3, }, @@ -163,6 +164,7 @@ exports[`renders some markers 1`] = ` "COMMENT_DETECTED_SPAM": 0, "COMMENT_DETECTED_SUSPECT_WORD": 0, "COMMENT_DETECTED_TOXIC": 1, + "COMMENT_REPORTED_ABUSIVE": 0, "COMMENT_REPORTED_OFFENSIVE": 2, "COMMENT_REPORTED_SPAM": 0, }, diff --git a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap index 3e5f30a6c..7abd63fcf 100644 --- a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap +++ b/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap @@ -14,12 +14,12 @@ exports[`accepts correct password 1`] = `
    -
    Email Address -
    +
    @@ -58,12 +58,12 @@ exports[`accepts correct password 1`] = `
    -
    Password -
    +
    @@ -157,12 +157,12 @@ exports[`accepts valid email 1`] = `
    -
    Email Address -
    +
    @@ -188,12 +188,12 @@ exports[`accepts valid email 1`] = `
    -
    Password -
    +
    @@ -300,12 +300,12 @@ exports[`checks for invalid email 1`] = `
    -
    Email Address -
    +
    @@ -344,12 +344,12 @@ exports[`checks for invalid email 1`] = `
    -
    Password -
    +
    @@ -491,12 +491,12 @@ exports[`renders sign in form 1`] = `
    -
    Email Address -
    +
    @@ -522,12 +522,12 @@ exports[`renders sign in form 1`] = `
    -
    Password -
    +
    @@ -635,12 +635,12 @@ exports[`shows error when submitting empty form 1`] = `
    -
    Email Address -
    +
    @@ -679,12 +679,12 @@ exports[`shows error when submitting empty form 1`] = `
    -
    Password -
    +
    @@ -800,12 +800,12 @@ exports[`shows server error 1`] = `
    -
    Email Address -
    +
    @@ -831,12 +831,12 @@ exports[`shows server error 1`] = `
    -
    Password -
    +
    diff --git a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap index 4930417c1..9dab380b1 100644 --- a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap +++ b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap @@ -90,7 +90,7 @@ exports[`renders community 1`] = ` >
+
- - - Please enter a valid email address. - + + + Please enter a valid email address. + +
+
+
- - - Emails do not match. Try again. - + + + Emails do not match. Try again. + +
+
+
@@ -350,157 +374,163 @@ exports[`renders addEmailAddress view 1`] = ` data-testid="addEmailAddress-container" >
-
-

- Add Email Address -

-
+
+ Add email address +
-

- For your added security, we require users to add an email address to their accounts. + For your added security, we require users to add an email address to their accounts. Your email address will be used to: -

-
    +
      +
    • -
    • - -
      -
      - Receive updates regarding any changes to your account + done + +
      +
      +
      + Receive updates regarding any changes to your account (email address, username, password, etc.) -
      -
      • -
    • +
      • +
    • +
      - +
      +
      + Allow you to download your comments.
      -
      -
      - Allow you to download your comments. -
      -
      -
      • -
    • +
      • +
    • +
      - +
      +
      + Send comment notifications that you have chosen to receive.
      -
      -
      - Send comment notifications that you have chosen to receive. -
      -
      -
      • -
    +
+ + +
+
+
+
+
@@ -525,90 +555,90 @@ exports[`shows error when submitting empty form 1`] = ` onSubmit={[Function]} >
-

- For your added security, we require users to add an email address to their accounts. + For your added security, we require users to add an email address to their accounts. Your email address will be used to: -

-
    +
      +
    • -
    • - -
      -
      - Receive updates regarding any changes to your account + done + +
      +
      +
      + Receive updates regarding any changes to your account (email address, username, password, etc.) -
      -
      • -
    • +
      • +
    • +
      - +
      +
      + Allow you to download your comments.
      -
      -
      - Allow you to download your comments. -
      -
      -
      • -
    • +
      • +
    • +
      - +
      +
      + Send comment notifications that you have chosen to receive.
      -
      -
      - Send comment notifications that you have chosen to receive. -
      -
      -
      • -
    +
+ + +
- - - This field is required. - + + + This field is required. + +
+ +
- - - This field is required. - + + + This field is required. + +
+ +
@@ -703,153 +747,184 @@ exports[`shows server error 1`] = ` onSubmit={[Function]} >
-

- For your added security, we require users to add an email address to their accounts. + For your added security, we require users to add an email address to their accounts. Your email address will be used to: -

-
    -
  • -
    - -
    -
    -
    - Receive updates regarding any changes to your account -(email address, username, password, etc.) -
    -
    -
    • -
  • -
    - -
    -
    -
    - Allow you to download your comments. -
    -
    -
    • -
  • -
    - -
    -
    -
    - Send comment notifications that you have chosen to receive. -
    -
    -
    • -
-
+
    +
  • - server error + +
    +
    +
    + Receive updates regarding any changes to your account +(email address, username, password, etc.) +
    +
    +
    • +
  • +
    + +
    +
    +
    + Allow you to download your comments. +
    +
    +
    • +
  • +
    + +
    +
    +
    + Send comment notifications that you have chosen to receive. +
    +
    +
    • +
+
+
+
+
+ +
+
+
+ server error GraphQL request:4:3 3 | ) { 4 | setEmail(input: $input) { | ^ 5 | user { +
+
+
+
+
+
+
+
+
diff --git a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap index 9ae478587..5cb362090 100644 --- a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap @@ -6,28 +6,28 @@ exports[`checks for invalid password 1`] = ` onSubmit={[Function]} >
-

- To protect against unauthorized changes to your account, + To protect against unauthorized changes to your account, we require users to create a password. -

+
+
-

Must be at least 8 characters -

+
@@ -57,7 +57,7 @@ we require users to create a password. onKeyUp={[Function]} role="button" tabIndex={0} - title="Show password" + title="Hide password" >