From 4ee8cf7c968c5f073df9548b553490ec57ac2e9e Mon Sep 17 00:00:00 2001 From: Tessa Thornton Date: Tue, 26 Nov 2019 11:26:53 -0500 Subject: [PATCH] new admin branding (#2692) * add comment revisions * add strings * update fixtures * fix fixtures * [CORL-629] Update admin moderation containers to use new branding tokens (#2600) * Convert the moderation card components to use new styles CORL-629 * Style the details area in the moderate card using new font and color styles CORL-629 * Update FlagDetails on Moderate Card to match new branding styles CORL-629 * Remove typography from ModerateCard Username CORL-629 * Remove unnecessary new typography tokens created while experimenting CORL-629 * Update background colors of username buttons on moderate card CORL-629 * Update approve reject buttons to use new colors CORL-629 * Fix alignment of username and "Reply to" in InReplyTo component CORL-629 * Update moderated by on moderate card to match new branding CORL-629 * Create distinct admin marker and counter components with new branding styles Update moderate card components to use these distinct newly branded styles. CORL-629 * Create independent Tabs control with new styling for admin area Use it on the moderate card details area. CORL-629 * Remove letter spacing from moderate card styles CORL-629 * Update "DETAILS" tab on moderate card to be named "INFO" CORL-629 * Update some missing v2 css variables CORL-629 * Tweak the spacing of the COMMENT link and title on the moderate card CORL-629 * Update details font color on moderate card CORL-629 * Update spacing on newly styled Admin Tab component CORL-629 * Update spacing of reply to username on the moderate card CORL-629 * Update moderate card comment text area minimum width and height CORL-629 * Update vertical divider on moderate card to updated branding CORL-629 * Introduce new bold open sans font face Downgrades all existing bold's to semi-bold as they were equivalent before. CORL-629 * Update moderate card details tabs to use new bold open sans font CORL-629 * Create an admin specific timestamp control that implements new branding CORL-629 * Migrate shared moderate card styles into child component files CORL-629 * [CORL-631] Update admin side main navigation to new branding styles (#2625) * Convert the moderation card components to use new styles CORL-629 * Style the details area in the moderate card using new font and color styles CORL-629 * Update FlagDetails on Moderate Card to match new branding styles CORL-629 * Remove typography from ModerateCard Username CORL-629 * Remove unnecessary new typography tokens created while experimenting CORL-629 * Update background colors of username buttons on moderate card CORL-629 * Update approve reject buttons to use new colors CORL-629 * Fix alignment of username and "Reply to" in InReplyTo component CORL-629 * Update moderated by on moderate card to match new branding CORL-629 * Create distinct admin marker and counter components with new branding styles Update moderate card components to use these distinct newly branded styles. CORL-629 * Create independent Tabs control with new styling for admin area Use it on the moderate card details area. CORL-629 * Remove letter spacing from moderate card styles CORL-629 * Update "DETAILS" tab on moderate card to be named "INFO" CORL-629 * Update some missing v2 css variables CORL-629 * Tweak the spacing of the COMMENT link and title on the moderate card CORL-629 * Update details font color on moderate card CORL-629 * Update spacing on newly styled Admin Tab component CORL-629 * Update spacing of reply to username on the moderate card CORL-629 * Update moderate card comment text area minimum width and height CORL-629 * Update vertical divider on moderate card to updated branding CORL-629 * Introduce new bold open sans font face Downgrades all existing bold's to semi-bold as they were equivalent before. CORL-629 * Update moderate card details tabs to use new bold open sans font CORL-629 * Create an admin specific timestamp control that implements new branding CORL-629 * Migrate shared moderate card styles into child component files CORL-629 * Update main navigation admin side to use new branding styles CORL-631 * Bring in some preliminary color and font styles for the search bar This helps it match navigation, but does not update all the sub-styles of the search bar's many child components. CORL-631 * [CORL-694] use new styles for decision history (#2644) * use new styles for decision history * remove reference to nonexistent variable * update snaps * [CORL 695] admin branding - user menu (#2650) * update user menu, popover, and dropdown to new design tokens * fix feature button colours * use v2 spacing vars * admin branding: tables (#2651) * update user menu, popover, and dropdown to new design tokens * fix feature button colours * use v2 spacing vars * style stories and users table * update snap * update user status font weight * remove duplicate declaration * fix line height references * update design tokens for text inputs and selects (#2658) * use box shadow instead of outline for focus states * Update snapshots to adjust for resolved merge conflicts * Bring new branding styles to button components (#2667) * Create preliminary filled and outline buttons that match branding * Add adornment button variant to newly branded button * Add the ghost variant to the newly branded button component * Add underlined variant to the newly branded button component * Remove external Icon composes property * Convert camel-case button variables to kebab-case * [CORL-672] Configuration pages new branding (#2673) * style config side nav * general configuration tab branding * organization tab branding * moderation configuration branding * banned/suspect words config branding * email config branding * advanced settings branding * auth config branding * move helpertext and fieldset components * add textarea component * add back gutters on table search * update snaps * fix header component to accept labels * use new spacing form components * use spacing components for advanced config * fix tests * fix line height of radio buttons * update validation message branding * update snaps * fix paths casing * try lowercase then * add docs for new form components * move description component * update snaps * move components to /ui/v2 * [CORL-673] Update the moderate area search menu to use new branding styles (#2672) * Create preliminary filled and outline buttons that match branding * Add adornment button variant to newly branded button * Add the ghost variant to the newly branded button component * Add underlined variant to the newly branded button component * Remove external Icon composes property * Convert camel-case button variables to kebab-case * Preliminarily migrate raw components into v2 to prep for branding updates CORL-673 * Preliminarily update the search results bar to use new branding tokens CORL-673 * Update styles to new branding on migrated v2 client-ui components CORL-673 * Update see all and moderate all search option icons CORL-673 * style config side nav * general configuration tab branding * organization tab branding * moderation configuration branding * banned/suspect words config branding * email config branding * advanced settings branding * auth config branding * move helpertext and fieldset components * add textarea component * add back gutters on table search * update snaps * fix header component to accept labels * use new spacing form components * use spacing components for advanced config * fix tests * fix line height of radio buttons * update validation message branding * update snaps * fix paths casing * try lowercase then * add docs for new form components * move description component * update snaps * move components to /ui/v2 * Set size="md" on the Icon component and not the Localized component CORL-673 * tag component * [CORL-669] user drawer + misc branding (#2686) * tag component * top of user drawer branding * recent history in drawer * add tooltips component * use correct spacing prop * history tabs * user history and rejected comments * move callout component' * moderator notes components * account history table * table user row * swap in tabs components * remove overflow:hidden on buttons * update snaps * replace overflow scroll with auto * clean up from rebasing vs master * fix ts * sort exports * fix confusing linting errors * update snaps * clean up nav bar design * adjust nav hover colors * comment content component * update nav hover styles * fix search bar border * clean up moderate card components * more user drawer cleanup * user role switcher * update textfield vars and variants * update components in community page * move clickoutside component * clean up stories table * moderate route components * single moderate view * queue components * delay component * relative time component * decision history components * user drawer components cleanup * configure components * clean up buttons * update snaps * add all exports * [CORL-674] admin branding: modals (#2695) * update hotkeys modal components * hotkeys modal * user status change modals * user status change modals * invite users modal * fix tests * fix incorrect i18n string * resolve merge conflicts * move fonts to devdeps * Fix username props interface * fix dom nesting in components * update formatting in strings * rewrite delay component as functional component * remove tslint comments * change configure header component props --- package-lock.json | 12 + package.json | 2 + .../App/DecisionHistory/ApprovedComment.tsx | 11 +- .../App/DecisionHistory/ApprovedIcon.css | 2 +- .../App/DecisionHistory/ApprovedIcon.tsx | 6 +- .../DecisionHistory/DecisionHistoryButton.css | 4 +- .../DecisionHistory/DecisionHistoryButton.tsx | 7 +- .../DecisionHistoryLoading.tsx | 2 +- .../App/DecisionHistory/DecisionItem.css | 5 +- .../App/DecisionHistory/DecisionItem.tsx | 2 +- .../App/DecisionHistory/DecisionList.css | 2 +- .../admin/App/DecisionHistory/DotDivider.css | 8 +- .../admin/App/DecisionHistory/Empty.css | 7 + .../admin/App/DecisionHistory/Empty.tsx | 6 +- .../admin/App/DecisionHistory/Footer.css | 1 + .../admin/App/DecisionHistory/Footer.tsx | 2 +- .../App/DecisionHistory/GoToCommentLink.css | 13 +- .../App/DecisionHistory/GoToCommentLink.tsx | 2 +- .../client/admin/App/DecisionHistory/Info.css | 7 +- .../client/admin/App/DecisionHistory/Info.tsx | 4 +- .../App/DecisionHistory/RejectedComment.tsx | 11 +- .../App/DecisionHistory/RejectedIcon.css | 2 +- .../App/DecisionHistory/RejectedIcon.tsx | 6 +- .../App/DecisionHistory/ShowMoreButton.css | 17 +- .../App/DecisionHistory/ShowMoreButton.tsx | 2 +- .../admin/App/DecisionHistory/Timestamp.css | 11 +- .../admin/App/DecisionHistory/Timestamp.tsx | 2 +- .../admin/App/DecisionHistory/Title.css | 24 +- .../admin/App/DecisionHistory/Title.tsx | 10 +- .../admin/App/DecisionHistory/Username.css | 7 + .../admin/App/DecisionHistory/Username.tsx | 13 + .../ApprovedComment.spec.tsx.snap | 10 +- .../__snapshots__/ApprovedIcon.spec.tsx.snap | 3 +- .../__snapshots__/Empty.spec.tsx.snap | 6 +- .../__snapshots__/Info.spec.tsx.snap | 4 +- .../RejectedComment.spec.tsx.snap | 10 +- .../__snapshots__/RejectedIcon.spec.tsx.snap | 1 + .../__snapshots__/Title.spec.tsx.snap | 11 +- src/core/client/admin/App/Main.tsx | 2 +- .../admin/App/Navigation/Navigation.tsx | 2 +- .../admin/App/Navigation/NavigationLink.tsx | 2 +- .../client/admin/App/UserMenu/UserMenu.css | 12 +- .../client/admin/App/UserMenu/UserMenu.tsx | 11 +- .../client/admin/components/AutoLoadMore.tsx | 2 +- .../components/ModerateCard/ApproveButton.css | 16 +- .../components/ModerateCard/ApproveButton.tsx | 2 +- .../ModerateCard/BanCommentUserMutation.ts | 3 +- .../ModerateCard/CommentAuthorContainer.tsx | 5 +- .../ModerateCard/CommentContent.css | 47 +- .../ModerateCard/CommentContent.tsx | 4 +- .../ModerateCard/CommentRevisionContainer.tsx | 2 +- .../components/ModerateCard/FeatureButton.css | 27 +- .../components/ModerateCard/FeatureButton.tsx | 2 +- .../ModerateCard/FlagDetailsCategory.css | 6 +- .../ModerateCard/FlagDetailsCategory.tsx | 6 +- .../ModerateCard/FlagDetailsContainer.tsx | 2 +- .../ModerateCard/FlagDetailsEntry.css | 40 +- .../ModerateCard/FlagDetailsEntry.tsx | 2 +- .../components/ModerateCard/InReplyTo.css | 32 +- .../ModerateCard/InReplyTo.spec.tsx | 3 + .../components/ModerateCard/InReplyTo.tsx | 22 +- .../admin/components/ModerateCard/Markers.css | 17 +- .../admin/components/ModerateCard/Markers.tsx | 6 +- .../ModerateCard/MarkersContainer.tsx | 24 +- .../components/ModerateCard/ModerateCard.css | 155 +- .../components/ModerateCard/ModerateCard.tsx | 106 +- .../ModerateCard/ModerateCardContainer.tsx | 3 +- .../ModerateCardDetailsContainer.css | 6 +- .../ModerateCardDetailsContainer.tsx | 25 +- .../ModerateCard/ModeratedByContainer.css | 25 +- .../ModerateCard/ModeratedByContainer.tsx | 2 +- .../components/ModerateCard/RejectButton.css | 14 +- .../components/ModerateCard/RejectButton.tsx | 2 +- .../components/ModerateCard/ToxicityLabel.css | 10 +- .../components/ModerateCard/ToxicityLabel.tsx | 17 +- .../components/ModerateCard/Username.css | 7 +- .../components/ModerateCard/Username.tsx | 10 +- .../CommentContent.spec.tsx.snap | 6 +- .../__snapshots__/InReplyTo.spec.tsx.snap | 9 +- .../MarkersContainer.spec.tsx.snap | 46 +- .../__snapshots__/ModerateCard.spec.tsx.snap | 576 ++--- .../__snapshots__/Username.spec.tsx.snap | 2 +- .../client/admin/components/NotAvailable.css | 2 +- .../CreateModeratorNoteMutation.ts | 3 +- .../DeleteModeratorNoteMutation.ts | 3 +- .../UserHistoryDrawer/ModeratorNote.css | 46 +- .../UserHistoryDrawer/ModeratorNote.tsx | 29 +- .../UserHistoryDrawer/RecentHistory.css | 38 +- .../UserHistoryDrawer/RecentHistory.tsx | 70 +- .../components/UserHistoryDrawer/Tabs.css | 25 +- .../components/UserHistoryDrawer/Tabs.tsx | 24 +- .../UserHistoryDrawer/UserBadgesContainer.tsx | 2 +- .../UserDrawerAccountHistory.tsx | 2 +- .../UserDrawerAccountHistoryQuery.css | 4 +- .../UserDrawerAccountHistoryQuery.tsx | 2 +- .../UserDrawerNotesContainer.css | 21 +- .../UserDrawerNotesContainer.tsx | 40 +- .../UserDrawerNotesQuery.tsx | 6 +- .../UserHistoryDrawer/UserHistoryDrawer.css | 4 +- .../UserHistoryDrawer/UserHistoryDrawer.tsx | 3 +- .../UserHistoryDrawerAllComments.tsx | 10 +- .../UserHistoryDrawerAllCommentsQuery.tsx | 2 +- .../UserHistoryDrawerContainer.css | 79 +- .../UserHistoryDrawerContainer.tsx | 161 +- .../UserHistoryDrawerQuery.tsx | 2 +- .../UserHistoryDrawerRejectedComments.tsx | 8 +- ...UserHistoryDrawerRejectedCommentsQuery.tsx | 2 +- .../UserStatusDetailsContainer.css | 14 + .../UserStatusDetailsContainer.tsx | 25 +- .../components/UserRole/UserRoleChange.tsx | 6 +- .../components/UserRole/UserRoleText.css | 9 +- .../admin/components/UserStatus/BanModal.css | 13 +- .../admin/components/UserStatus/BanModal.tsx | 113 +- .../UserStatus/ChangeStatusModal.css | 5 + .../UserStatus/ChangeStatusModal.tsx | 51 + .../UserStatus/ChangeStatusModalHeader.css | 10 + .../UserStatus/ChangeStatusModalHeader.tsx | 15 + .../UserStatus/ModalHeaderUsername.css | 8 + .../UserStatus/ModalHeaderUsername.tsx | 9 + .../components/UserStatus/PremodModal.css | 12 +- .../components/UserStatus/PremodModal.tsx | 102 +- .../components/UserStatus/SuspendForm.css | 12 + .../components/UserStatus/SuspendForm.tsx | 132 +- .../components/UserStatus/SuspendModal.css | 23 +- .../components/UserStatus/SuspendModal.tsx | 147 +- .../components/UserStatus/UserStatus.css | 20 + .../components/UserStatus/UserStatus.tsx | 27 +- .../UserStatus/UserStatusChange.css | 9 +- .../UserStatus/UserStatusChange.tsx | 14 +- .../UserStatus/UserStatusChangeContainer.tsx | 11 +- .../admin/routes/Community/EmptyMessage.css | 6 +- .../admin/routes/Community/EmptyMessage.tsx | 6 +- .../Community/InviteUsers/EmailField.tsx | 15 +- .../Community/InviteUsers/InviteUsers.css | 3 + .../Community/InviteUsers/InviteUsers.tsx | 7 +- .../Community/InviteUsers/InviteUsersForm.css | 9 + .../Community/InviteUsers/InviteUsersForm.tsx | 21 +- .../InviteUsers/InviteUsersModal.css | 13 + .../InviteUsers/InviteUsersModal.tsx | 19 +- .../Community/InviteUsers/RoleField.css | 9 + .../Community/InviteUsers/RoleField.tsx | 8 +- .../routes/Community/InviteUsers/Success.css | 10 + .../routes/Community/InviteUsers/Success.tsx | 6 +- .../client/admin/routes/Community/UserRow.css | 11 +- .../client/admin/routes/Community/UserRow.tsx | 9 +- .../admin/routes/Community/UserTable.css | 4 +- .../admin/routes/Community/UserTable.tsx | 6 +- .../routes/Community/UserTableContainer.tsx | 2 +- .../routes/Community/UserTableFilter.css | 6 - .../routes/Community/UserTableFilter.tsx | 281 ++- .../admin/routes/Configure/ConfigBox.css | 16 +- .../admin/routes/Configure/ConfigBox.tsx | 33 +- .../admin/routes/Configure/Configure.tsx | 3 +- .../routes/Configure/Fields/LocaleField.tsx | 25 + .../client/admin/routes/Configure/Header.css | 15 +- .../client/admin/routes/Configure/Header.tsx | 46 +- .../admin/routes/Configure/HelperText.css | 7 + .../admin/routes/Configure/HelperText.tsx | 14 + .../admin/routes/Configure/HorizontalRule.css | 2 +- .../client/admin/routes/Configure/Layout.tsx | 2 +- .../client/admin/routes/Configure/Link.css | 36 +- .../admin/routes/Configure/OnOffField.tsx | 2 +- .../routes/Configure/PermissionField.tsx | 2 +- .../admin/routes/Configure/SectionContent.css | 4 +- .../admin/routes/Configure/SectionContent.tsx | 4 +- .../admin/routes/Configure/Subheader.css | 11 +- .../admin/routes/Configure/Subheader.tsx | 6 +- .../Configure/TextFieldWithValidation.css | 2 + .../Configure/TextFieldWithValidation.tsx | 25 + .../routes/Configure/ValidationMessage.tsx | 21 +- .../__snapshots__/ConfigBox.spec.tsx.snap | 12 +- .../__snapshots__/Header.spec.tsx.snap | 5 +- .../__snapshots__/Subheader.spec.tsx.snap | 5 +- .../sections/Advanced/AdvancedConfig.tsx | 2 +- .../sections/Advanced/AdvancedConfigRoute.tsx | 2 +- .../Advanced/CommentStreamLiveUpdates.tsx | 39 +- .../sections/Advanced/CustomCSSConfig.tsx | 87 +- .../Configure/sections/Advanced/EmbedCode.css | 3 +- .../Configure/sections/Advanced/EmbedCode.tsx | 53 +- .../Advanced/PermittedDomainsConfig.tsx | 99 +- .../sections/Advanced/StoryCreationConfig.tsx | 166 +- .../sections/Auth/AccountFeaturesConfig.tsx | 235 +- .../Configure/sections/Auth/AuthConfig.tsx | 2 +- .../sections/Auth/AuthConfigContainer.tsx | 2 +- .../sections/Auth/AuthConfigRoute.tsx | 2 +- .../sections/Auth/AuthIntegrationsConfig.tsx | 2 +- .../Configure/sections/Auth/ClientIDField.tsx | 31 +- .../sections/Auth/ClientSecretField.tsx | 6 +- .../Auth/ConfigBoxWithToggleField.tsx | 2 +- .../sections/Auth/ConfigDescription.tsx | 22 - .../sections/Auth/FacebookConfig.tsx | 15 +- .../Configure/sections/Auth/GoogleConfig.tsx | 14 +- .../sections/Auth/LocalAuthConfig.tsx | 9 +- .../Configure/sections/Auth/OIDCConfig.tsx | 177 +- .../Configure/sections/Auth/RedirectField.tsx | 6 +- .../sections/Auth/RegistrationField.tsx | 26 +- .../Configure/sections/Auth/SSOConfig.tsx | 8 +- .../Configure/sections/Auth/SSOKeyField.tsx | 18 +- .../Configure/sections/Auth/SessionConfig.tsx | 32 +- .../sections/Auth/TargetFilterField.tsx | 4 +- .../sections/Email/EmailConfigContainer.css | 1 + .../sections/Email/EmailConfigContainer.tsx | 82 +- .../sections/Email/EmailConfigRoute.tsx | 2 +- .../routes/Configure/sections/Email/From.tsx | 88 +- .../routes/Configure/sections/Email/SMTP.tsx | 104 +- .../General/ClosedStreamMessageConfig.tsx | 68 +- .../General/ClosingCommentStreamsConfig.tsx | 112 +- .../sections/General/CommentEditingConfig.tsx | 101 +- .../sections/General/CommentLengthConfig.css | 8 + .../sections/General/CommentLengthConfig.tsx | 231 +- .../sections/General/GeneralConfig.tsx | 2 +- .../sections/General/GeneralConfigRoute.tsx | 2 +- .../sections/General/GuidelinesConfig.tsx | 54 +- .../General/LocaleConfigContainer.tsx | 58 +- .../sections/General/ReactionConfig.css | 2 +- .../sections/General/ReactionConfig.tsx | 280 ++- .../General/SitewideCommentingConfig.tsx | 99 +- .../sections/General/StaffConfig.tsx | 102 +- .../sections/General/StaffConfigContainer.tsx | 3 +- .../sections/Moderation/APIKeyField.tsx | 7 +- .../sections/Moderation/AkismetConfig.tsx | 160 +- .../sections/Moderation/ModerationConfig.tsx | 2 +- .../Moderation/ModerationConfigRoute.tsx | 2 +- .../sections/Moderation/PerspectiveConfig.tsx | 322 ++- .../Moderation/PreModerationConfig.tsx | 75 +- .../Moderation/RecentCommentHistoryConfig.tsx | 166 +- .../Organization/OrganizationConfig.tsx | 2 +- .../Organization/OrganizationConfigRoute.tsx | 2 +- .../OrganizationContactEmailConfig.tsx | 85 +- .../Organization/OrganizationNameConfig.tsx | 75 +- .../Organization/OrganizationURLConfig.tsx | 75 +- .../WordList/BannedWordListConfig.tsx | 65 +- .../WordList/SuspectWordListConfig.tsx | 70 +- .../sections/WordList/WordListConfig.tsx | 2 +- .../sections/WordList/WordListConfigRoute.tsx | 2 +- .../sections/WordList/WordListTextArea.css | 1 - .../sections/WordList/WordListTextArea.tsx | 3 +- .../admin/routes/Moderate/HotkeysModal.css | 45 +- .../admin/routes/Moderate/HotkeysModal.tsx | 67 +- .../client/admin/routes/Moderate/Moderate.css | 4 +- .../client/admin/routes/Moderate/Moderate.tsx | 2 +- .../routes/Moderate/ModerateContainer.tsx | 2 +- .../ModerateNavigation/Navigation.tsx | 2 +- .../ModerateNavigation/NavigationLink.tsx | 2 +- .../routes/Moderate/ModerateSearchBar/Bar.css | 9 +- .../routes/Moderate/ModerateSearchBar/Bar.tsx | 10 +- .../Moderate/ModerateSearchBar/Field.css | 53 +- .../Moderate/ModerateSearchBar/Field.tsx | 6 +- .../ModerateSearchBar/GoToAriaInfo.tsx | 2 +- .../Moderate/ModerateSearchBar/Group.css | 18 +- .../ModerateSearchBar/ModerateAllOption.css | 14 +- .../ModerateSearchBar/ModerateAllOption.tsx | 10 +- .../ModerateSearchBarContainer.tsx | 2 +- .../Moderate/ModerateSearchBar/Option.css | 28 +- .../ModerateSearchBar/SeeAllOption.css | 19 +- .../ModerateSearchBar/SeeAllOption.tsx | 6 +- .../Moderate/ModerateSearchBar/variables.css | 25 + .../routes/Moderate/Queue/EmptyMessage.css | 6 +- .../routes/Moderate/Queue/EmptyMessage.tsx | 2 +- .../routes/Moderate/Queue/LoadingQueue.tsx | 2 +- .../admin/routes/Moderate/Queue/Queue.tsx | 3 +- .../SingleModerate/SingleModerate.css | 33 +- .../SingleModerate/SingleModerate.tsx | 2 +- src/core/client/admin/routes/NotFound.css | 6 + src/core/client/admin/routes/NotFound.tsx | 6 +- .../admin/routes/Stories/EmptyMessage.css | 6 +- .../admin/routes/Stories/EmptyMessage.tsx | 6 +- .../admin/routes/Stories/NoMatchMessage.css | 6 +- .../admin/routes/Stories/NoMatchMessage.tsx | 6 +- .../client/admin/routes/Stories/StoryRow.css | 1 - .../client/admin/routes/Stories/StoryRow.tsx | 2 +- .../Stories/StoryStatus/StoryStatusChange.tsx | 6 +- .../Stories/StoryStatus/StoryStatusText.css | 8 +- .../admin/routes/Stories/StoryTable.css | 4 +- .../admin/routes/Stories/StoryTable.tsx | 4 +- .../routes/Stories/StoryTableContainer.tsx | 2 +- .../admin/routes/Stories/StoryTableFilter.css | 6 - .../admin/routes/Stories/StoryTableFilter.tsx | 168 +- .../__snapshots__/community.spec.tsx.snap | 684 +++--- .../__snapshots__/advanced.spec.tsx.snap | 553 +++-- .../__snapshots__/auth.spec.tsx.snap | 2051 +++++++++-------- .../__snapshots__/general.spec.tsx.snap | 1763 +++++++------- .../__snapshots__/moderation.spec.tsx.snap | 1454 ++++++------ .../__snapshots__/organization.spec.tsx.snap | 199 +- .../__snapshots__/wordList.spec.tsx.snap | 140 +- .../decisionHistory.spec.tsx.snap | 167 +- .../__snapshots__/regularQueue.spec.tsx.snap | 725 +++--- .../__snapshots__/rejectedQueue.spec.tsx.snap | 414 ++-- .../__snapshots__/searchBar.spec.tsx.snap | 6 +- .../__snapshots__/singleComment.spec.tsx.snap | 204 +- .../__snapshots__/stories.spec.tsx.snap | 352 +-- src/core/client/admin/ui/components/index.ts | 0 .../framework/components/CopyButton.tsx | 7 +- .../stream/tabs/Configure/Configure.tsx | 2 +- .../client/ui/components/Dropdown/Button.css | 8 +- .../client/ui/components/Marker/Marker.css | 1 + .../ui/components/Typography/Typography.css | 8 +- .../ui/components/Typography/Typography.tsx | 10 +- .../client/ui/components/v2/AppBar/AppBar.css | 18 + .../client/ui/components/v2/AppBar/AppBar.mdx | 37 + .../ui/components/v2/AppBar/AppBar.spec.tsx | 18 + .../client/ui/components/v2/AppBar/AppBar.tsx | 38 + .../client/ui/components/v2/AppBar/Begin.css | 3 + .../ui/components/v2/AppBar/Begin.spec.tsx | 17 + .../client/ui/components/v2/AppBar/Begin.tsx | 27 + .../ui/components/v2/AppBar/Divider.css | 4 + .../ui/components/v2/AppBar/Divider.spec.tsx | 10 + .../ui/components/v2/AppBar/Divider.tsx | 17 + .../client/ui/components/v2/AppBar/End.css | 4 + .../ui/components/v2/AppBar/End.spec.tsx | 17 + .../client/ui/components/v2/AppBar/End.tsx | 27 + .../ui/components/v2/AppBar/Navigation.css | 11 + .../components/v2/AppBar/Navigation.spec.tsx | 15 + .../ui/components/v2/AppBar/Navigation.tsx | 24 + .../components/v2/AppBar/NavigationItem.css | 45 + .../v2/AppBar/NavigationItem.spec.tsx | 20 + .../components/v2/AppBar/NavigationItem.tsx | 41 + .../AppBar/__snapshots__/AppBar.spec.tsx.snap | 19 + .../AppBar/__snapshots__/Begin.spec.tsx.snap | 15 + .../__snapshots__/Divider.spec.tsx.snap | 11 + .../v2/AppBar/__snapshots__/End.spec.tsx.snap | 15 + .../__snapshots__/Navigation.spec.tsx.snap | 14 + .../NavigationItem.spec.tsx.snap | 19 + .../client/ui/components/v2/AppBar/index.ts | 6 + .../ui/components/v2/AriaInfo/AriaInfo.css | 10 + .../ui/components/v2/AriaInfo/AriaInfo.mdx | 18 + .../components/v2/AriaInfo/AriaInfo.spec.tsx | 14 + .../ui/components/v2/AriaInfo/AriaInfo.tsx | 36 + .../__snapshots__/AriaInfo.spec.tsx.snap | 9 + .../client/ui/components/v2/AriaInfo/index.ts | 1 + .../ui/components/v2/Backdrop/Backdrop.css | 15 + .../ui/components/v2/Backdrop/Backdrop.mdx | 32 + .../components/v2/Backdrop/Backdrop.spec.tsx | 16 + .../ui/components/v2/Backdrop/Backdrop.tsx | 35 + .../__snapshots__/Backdrop.spec.tsx.snap | 24 + .../client/ui/components/v2/Backdrop/index.ts | 1 + .../components/v2/BaseButton/BaseButton.css | 43 + .../components/v2/BaseButton/BaseButton.mdx | 28 + .../v2/BaseButton/BaseButton.spec.tsx | 24 + .../components/v2/BaseButton/BaseButton.tsx | 99 + .../__snapshots__/BaseButton.spec.tsx.snap | 29 + .../ui/components/v2/BaseButton/index.ts | 1 + src/core/client/ui/components/v2/Box/Box.css | 240 ++ src/core/client/ui/components/v2/Box/Box.mdx | 30 + src/core/client/ui/components/v2/Box/Box.tsx | 164 ++ src/core/client/ui/components/v2/Box/index.ts | 1 + .../client/ui/components/v2/Button/Button.css | 508 ++++ .../client/ui/components/v2/Button/Button.mdx | 206 ++ .../ui/components/v2/Button/Button.spec.tsx | 62 + .../client/ui/components/v2/Button/Button.tsx | 118 + .../ui/components/v2/Button/ButtonIcon.css | 8 + .../components/v2/Button/ButtonIcon.spec.tsx | 30 + .../ui/components/v2/Button/ButtonIcon.tsx | 38 + .../Button/__snapshots__/Button.spec.tsx.snap | 51 + .../__snapshots__/ButtonIcon.spec.tsx.snap | 19 + .../client/ui/components/v2/Button/index.ts | 2 + .../ui/components/v2/CallOut/CallOut.css | 51 + .../ui/components/v2/CallOut/CallOut.mdx | 23 + .../ui/components/v2/CallOut/CallOut.spec.tsx | 16 + .../ui/components/v2/CallOut/CallOut.tsx | 73 + .../__snapshots__/CallOut.spec.tsx.snap | 11 + .../client/ui/components/v2/CallOut/index.ts | 1 + .../client/ui/components/v2/Card/Card.css | 18 + .../client/ui/components/v2/Card/Card.mdx | 37 + .../ui/components/v2/Card/Card.spec.tsx | 15 + .../client/ui/components/v2/Card/Card.tsx | 39 + .../ui/components/v2/Card/CloseButton.css | 8 + .../ui/components/v2/Card/CloseButton.tsx | 41 + .../v2/Card/__snapshots__/Card.spec.tsx.snap | 9 + .../client/ui/components/v2/Card/index.ts | 2 + .../ui/components/v2/CheckBox/CheckBox.css | 91 + .../ui/components/v2/CheckBox/CheckBox.mdx | 19 + .../components/v2/CheckBox/CheckBox.spec.tsx | 17 + .../ui/components/v2/CheckBox/CheckBox.tsx | 90 + .../__snapshots__/CheckBox.spec.tsx.snap | 26 + .../client/ui/components/v2/CheckBox/index.ts | 2 + .../v2/ClickOutside/ClickOutside.mdx | 30 + .../v2/ClickOutside/ClickOutside.spec.tsx | 122 + .../v2/ClickOutside/ClickOutside.tsx | 78 + .../__snapshots__/ClickOutside.spec.tsx.snap | 3 + .../ui/components/v2/ClickOutside/index.ts | 1 + .../ui/components/v2/Counter/Counter.css | 56 + .../ui/components/v2/Counter/Counter.mdx | 34 + .../ui/components/v2/Counter/Counter.spec.tsx | 10 + .../ui/components/v2/Counter/Counter.tsx | 65 + .../__snapshots__/Counter.spec.tsx.snap | 24 + .../client/ui/components/v2/Counter/index.ts | 1 + .../client/ui/components/v2/Delay/Delay.mdx | 22 + .../ui/components/v2/Delay/Delay.spec.tsx | 22 + .../client/ui/components/v2/Delay/Delay.tsx | 28 + .../Delay/__snapshots__/Delay.spec.tsx.snap | 5 + .../client/ui/components/v2/Delay/index.ts | 1 + .../ui/components/v2/Divider/Divider.css | 23 + .../ui/components/v2/Divider/Divider.tsx | 23 + .../client/ui/components/v2/Divider/index.ts | 1 + .../ui/components/v2/Dropdown/Button.css | 55 + .../ui/components/v2/Dropdown/Button.spec.tsx | 32 + .../ui/components/v2/Dropdown/Button.tsx | 78 + .../ui/components/v2/Dropdown/Divider.css | 6 + .../components/v2/Dropdown/Divider.spec.tsx | 10 + .../ui/components/v2/Dropdown/Divider.tsx | 17 + .../ui/components/v2/Dropdown/Dropdown.css | 3 + .../ui/components/v2/Dropdown/Dropdown.mdx | 58 + .../components/v2/Dropdown/Dropdown.spec.tsx | 30 + .../ui/components/v2/Dropdown/Dropdown.tsx | 27 + .../__snapshots__/Button.spec.tsx.snap | 44 + .../__snapshots__/Divider.spec.tsx.snap | 11 + .../__snapshots__/Dropdown.spec.tsx.snap | 32 + .../client/ui/components/v2/Dropdown/index.ts | 3 + .../v2/DurationField/DurationField.css | 15 + .../v2/DurationField/DurationField.spec.tsx | 71 + .../v2/DurationField/DurationField.tsx | 176 ++ .../__snapshots__/DurationField.spec.tsx.snap | 325 +++ .../ui/components/v2/DurationField/index.ts | 1 + .../ui/components/v2/FieldSet/FieldSet.css | 5 + .../ui/components/v2/FieldSet/FieldSet.mdx | 10 + .../components/v2/FieldSet/FieldSet.spec.tsx | 14 + .../ui/components/v2/FieldSet/FieldSet.tsx | 26 + .../__snapshots__/FieldSet.spec.tsx.snap | 9 + .../client/ui/components/v2/FieldSet/index.ts | 1 + .../client/ui/components/v2/Flex/Flex.css | 574 +++++ .../client/ui/components/v2/Flex/Flex.mdx | 60 + .../ui/components/v2/Flex/Flex.spec.tsx | 68 + .../client/ui/components/v2/Flex/Flex.tsx | 119 + .../v2/Flex/__snapshots__/Flex.spec.tsx.snap | 51 + .../client/ui/components/v2/Flex/index.ts | 1 + .../ui/components/v2/FormField/FormField.css | 2 + .../ui/components/v2/FormField/FormField.mdx | 65 + .../v2/FormField/FormField.spec.tsx | 27 + .../ui/components/v2/FormField/FormField.tsx | 32 + .../__snapshots__/FormField.spec.tsx.snap | 35 + .../ui/components/v2/FormField/index.ts | 1 + .../FormFieldDescription.css | 7 + .../FormFieldDescription.tsx | 17 + .../v2/FormFieldDescription/index.ts | 1 + .../v2/FormFieldHeader/FormFieldHeader.css | 2 + .../v2/FormFieldHeader/FormFieldHeader.tsx | 32 + .../ui/components/v2/FormFieldHeader/index.ts | 1 + .../components/v2/HelperText/HelperText.css | 7 + .../components/v2/HelperText/HelperText.tsx | 14 + .../ui/components/v2/HelperText/index.ts | 1 + .../v2/HorizontalGutter/HorizontalGutter.css | 85 + .../v2/HorizontalGutter/HorizontalGutter.mdx | 36 + .../HorizontalGutter.spec.tsx | 22 + .../v2/HorizontalGutter/HorizontalGutter.tsx | 72 + .../HorizontalGutter.spec.tsx.snap | 13 + .../components/v2/HorizontalGutter/index.ts | 1 + .../client/ui/components/v2/Icon/Icon.css | 58 + .../client/ui/components/v2/Icon/Icon.mdx | 21 + .../ui/components/v2/Icon/Icon.spec.tsx | 23 + .../client/ui/components/v2/Icon/Icon.tsx | 60 + .../v2/Icon/__snapshots__/Icon.spec.tsx.snap | 19 + .../client/ui/components/v2/Icon/index.ts | 1 + .../client/ui/components/v2/Label/Label.css | 9 + .../client/ui/components/v2/Label/Label.tsx | 19 + .../client/ui/components/v2/Label/index.ts | 1 + .../client/ui/components/v2/Marker/Count.css | 14 + .../ui/components/v2/Marker/Count.spec.tsx | 15 + .../client/ui/components/v2/Marker/Count.tsx | 29 + .../client/ui/components/v2/Marker/Marker.css | 33 + .../client/ui/components/v2/Marker/Marker.mdx | 43 + .../ui/components/v2/Marker/Marker.spec.tsx | 17 + .../client/ui/components/v2/Marker/Marker.tsx | 46 + .../Marker/__snapshots__/Count.spec.tsx.snap | 9 + .../Marker/__snapshots__/Marker.spec.tsx.snap | 9 + .../client/ui/components/v2/Marker/index.ts | 2 + .../ui/components/v2/Message/Message.css | 43 + .../ui/components/v2/Message/Message.mdx | 38 + .../ui/components/v2/Message/Message.spec.tsx | 25 + .../ui/components/v2/Message/Message.tsx | 59 + .../ui/components/v2/Message/MessageIcon.css | 8 + .../ui/components/v2/Message/MessageIcon.tsx | 37 + .../__snapshots__/Message.spec.tsx.snap | 23 + .../client/ui/components/v2/Message/index.ts | 2 + .../client/ui/components/v2/Modal/Modal.css | 32 + .../client/ui/components/v2/Modal/Modal.mdx | 66 + .../ui/components/v2/Modal/Modal.mdx.css | 3 + .../ui/components/v2/Modal/Modal.spec.tsx | 90 + .../client/ui/components/v2/Modal/Modal.tsx | 132 ++ .../Modal/__snapshots__/Modal.spec.tsx.snap | 46 + .../client/ui/components/v2/Modal/index.ts | 1 + .../ui/components/v2/NoScroll/NoScroll.css | 3 + .../ui/components/v2/NoScroll/NoScroll.mdx | 35 + .../components/v2/NoScroll/NoScroll.spec.tsx | 52 + .../ui/components/v2/NoScroll/NoScroll.tsx | 41 + .../client/ui/components/v2/NoScroll/index.ts | 1 + .../v2/PasswordField/PasswordField.css | 69 + .../v2/PasswordField/PasswordField.mdx | 25 + .../v2/PasswordField/PasswordField.spec.tsx | 18 + .../v2/PasswordField/PasswordField.tsx | 162 ++ .../__snapshots__/PasswordField.spec.tsx.snap | 73 + .../ui/components/v2/PasswordField/index.ts | 2 + .../client/ui/components/v2/Popover/Arrow.css | 142 ++ .../client/ui/components/v2/Popover/Arrow.tsx | 26 + .../ui/components/v2/Popover/Popover.css | 30 + .../ui/components/v2/Popover/Popover.mdx | 88 + .../ui/components/v2/Popover/Popover.tsx | 202 ++ .../client/ui/components/v2/Popover/index.ts | 1 + .../components/v2/RadioButton/RadioButton.css | 80 + .../components/v2/RadioButton/RadioButton.mdx | 20 + .../v2/RadioButton/RadioButton.spec.tsx | 18 + .../components/v2/RadioButton/RadioButton.tsx | 89 + .../__snapshots__/RadioButton.spec.tsx.snap | 23 + .../ui/components/v2/RadioButton/index.ts | 2 + .../v2/RelativeTime/RelativeTime.css | 2 + .../v2/RelativeTime/RelativeTime.mdx | 17 + .../v2/RelativeTime/RelativeTime.spec.tsx | 42 + .../v2/RelativeTime/RelativeTime.tsx | 43 + .../__snapshots__/RelativeTime.spec.tsx.snap | 31 + .../ui/components/v2/RelativeTime/index.ts | 1 + .../v2/SelectField/OptGroup.spec.tsx | 14 + .../ui/components/v2/SelectField/OptGroup.tsx | 12 + .../components/v2/SelectField/Option.spec.tsx | 16 + .../ui/components/v2/SelectField/Option.tsx | 14 + .../components/v2/SelectField/SelectField.css | 63 + .../components/v2/SelectField/SelectField.mdx | 52 + .../v2/SelectField/SelectField.spec.tsx | 21 + .../components/v2/SelectField/SelectField.tsx | 86 + .../__snapshots__/OptGroup.spec.tsx.snap | 9 + .../__snapshots__/Option.spec.tsx.snap | 11 + .../__snapshots__/SelectField.spec.tsx.snap | 30 + .../ui/components/v2/SelectField/index.ts | 3 + .../ui/components/v2/Spinner/Spinner.css | 63 + .../ui/components/v2/Spinner/Spinner.mdx | 15 + .../ui/components/v2/Spinner/Spinner.spec.tsx | 9 + .../ui/components/v2/Spinner/Spinner.tsx | 68 + .../__snapshots__/Spinner.spec.tsx.snap | 21 + .../client/ui/components/v2/Spinner/index.ts | 1 + .../ui/components/v2/SubBar/Navigation.css | 20 + .../components/v2/SubBar/Navigation.spec.tsx | 15 + .../ui/components/v2/SubBar/Navigation.tsx | 24 + .../components/v2/SubBar/NavigationItem.css | 36 + .../v2/SubBar/NavigationItem.spec.tsx | 20 + .../components/v2/SubBar/NavigationItem.tsx | 41 + .../client/ui/components/v2/SubBar/SubBar.css | 22 + .../client/ui/components/v2/SubBar/SubBar.mdx | 40 + .../ui/components/v2/SubBar/SubBar.spec.tsx | 18 + .../client/ui/components/v2/SubBar/SubBar.tsx | 44 + .../__snapshots__/Navigation.spec.tsx.snap | 14 + .../NavigationItem.spec.tsx.snap | 19 + .../SubBar/__snapshots__/SubBar.spec.tsx.snap | 19 + .../client/ui/components/v2/SubBar/index.ts | 3 + .../client/ui/components/v2/Table/Table.css | 8 + .../client/ui/components/v2/Table/Table.mdx | 36 + .../ui/components/v2/Table/Table.spec.tsx | 32 + .../client/ui/components/v2/Table/Table.tsx | 36 + .../ui/components/v2/Table/TableBody.css | 2 + .../ui/components/v2/Table/TableBody.tsx | 31 + .../ui/components/v2/Table/TableCell.css | 32 + .../ui/components/v2/Table/TableCell.tsx | 45 + .../ui/components/v2/Table/TableHead.css | 4 + .../ui/components/v2/Table/TableHead.tsx | 35 + .../ui/components/v2/Table/TableRow.css | 11 + .../ui/components/v2/Table/TableRow.tsx | 36 + .../Table/__snapshots__/Table.spec.tsx.snap | 51 + .../client/ui/components/v2/Table/index.ts | 5 + src/core/client/ui/components/v2/Tabs/Tab.css | 72 + .../client/ui/components/v2/Tabs/Tab.spec.tsx | 9 + src/core/client/ui/components/v2/Tabs/Tab.tsx | 80 + .../client/ui/components/v2/Tabs/TabBar.css | 17 + .../ui/components/v2/Tabs/TabBar.spec.tsx | 34 + .../client/ui/components/v2/Tabs/TabBar.tsx | 83 + .../ui/components/v2/Tabs/TabContent.spec.tsx | 31 + .../ui/components/v2/Tabs/TabContent.tsx | 33 + .../ui/components/v2/Tabs/TabPane.spec.tsx | 9 + .../client/ui/components/v2/Tabs/TabPane.tsx | 30 + .../v2/Tabs/__snapshots__/Tab.spec.tsx.snap | 24 + .../Tabs/__snapshots__/TabBar.spec.tsx.snap | 72 + .../__snapshots__/TabContent.spec.tsx.snap | 12 + .../Tabs/__snapshots__/TabPane.spec.tsx.snap | 11 + .../client/ui/components/v2/Tabs/index.ts | 4 + .../client/ui/components/v2/Tabs/tabs.mdx | 63 + src/core/client/ui/components/v2/Tag/Tag.css | 64 + src/core/client/ui/components/v2/Tag/Tag.mdx | 35 + .../client/ui/components/v2/Tag/Tag.spec.tsx | 15 + src/core/client/ui/components/v2/Tag/Tag.tsx | 45 + .../v2/Tag/__snapshots__/Tag.spec.tsx.snap | 9 + src/core/client/ui/components/v2/Tag/index.ts | 1 + .../ui/components/v2/TextField/TextField.css | 97 + .../ui/components/v2/TextField/TextField.mdx | 43 + .../v2/TextField/TextField.spec.tsx | 16 + .../ui/components/v2/TextField/TextField.tsx | 119 + .../__snapshots__/TextField.spec.tsx.snap | 19 + .../ui/components/v2/TextField/index.ts | 2 + .../TextFieldAdornment/TextFieldAdornment.css | 7 + .../TextFieldAdornment/TextFieldAdornment.tsx | 17 + .../components/v2/TextFieldAdornment/index.ts | 1 + .../ui/components/v2/TextLink/TextLink.css | 10 + .../ui/components/v2/TextLink/TextLink.mdx | 19 + .../components/v2/TextLink/TextLink.spec.tsx | 14 + .../ui/components/v2/TextLink/TextLink.tsx | 38 + .../__snapshots__/TextLink.spec.tsx.snap | 10 + .../client/ui/components/v2/TextLink/index.ts | 1 + .../ui/components/v2/Textarea/Textarea.css | 28 + .../ui/components/v2/Textarea/Textarea.tsx | 31 + .../client/ui/components/v2/Textarea/index.ts | 1 + .../ui/components/v2/Timestamp/Timestamp.css | 11 + .../v2/Timestamp/Timestamp.spec.tsx | 15 + .../ui/components/v2/Timestamp/Timestamp.tsx | 42 + .../__snapshots__/Timestamp.spec.tsx.snap | 13 + .../ui/components/v2/Timestamp/index.ts | 1 + .../ui/components/v2/Tooltip/Tooltip.css | 29 + .../ui/components/v2/Tooltip/Tooltip.tsx | 53 + .../components/v2/Tooltip/TooltipButton.css | 7 + .../components/v2/Tooltip/TooltipButton.tsx | 39 + .../client/ui/components/v2/Tooltip/index.ts | 2 + .../ui/components/v2/TrapFocus/TrapFocus.mdx | 27 + .../v2/TrapFocus/TrapFocus.spec.tsx | 94 + .../ui/components/v2/TrapFocus/TrapFocus.tsx | 59 + .../__snapshots__/TrapFocus.spec.tsx.snap | 23 + .../ui/components/v2/TrapFocus/index.ts | 1 + .../ui/components/v2/UIContext/UIContext.ts | 21 + .../ui/components/v2/UIContext/index.ts | 1 + .../ValidationMessage/ValidationMessage.mdx | 20 + .../ValidationMessage.spec.tsx | 15 + .../ValidationMessage/ValidationMessage.tsx | 41 + .../ValidationMessage.spec.tsx.snap | 15 + .../components/v2/ValidationMessage/index.ts | 1 + src/core/client/ui/components/v2/index.ts | 65 + src/core/client/ui/shared/typography.css | 62 + src/core/client/ui/theme/mixins.css | 10 + src/core/client/ui/theme/variables.css.ts | 13 +- src/core/client/ui/theme/variables2.ts | 320 +++ src/locales/en-US/admin.ftl | 7 +- src/locales/pt-BR/admin.ftl | 2 +- 625 files changed, 20631 insertions(+), 7766 deletions(-) create mode 100644 src/core/client/admin/App/DecisionHistory/Username.css create mode 100644 src/core/client/admin/App/DecisionHistory/Username.tsx create mode 100644 src/core/client/admin/components/UserStatus/ChangeStatusModal.css create mode 100644 src/core/client/admin/components/UserStatus/ChangeStatusModal.tsx create mode 100644 src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.css create mode 100644 src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.tsx create mode 100644 src/core/client/admin/components/UserStatus/ModalHeaderUsername.css create mode 100644 src/core/client/admin/components/UserStatus/ModalHeaderUsername.tsx create mode 100644 src/core/client/admin/components/UserStatus/SuspendForm.css create mode 100644 src/core/client/admin/components/UserStatus/UserStatus.css create mode 100644 src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css create mode 100644 src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.css create mode 100644 src/core/client/admin/routes/Community/InviteUsers/RoleField.css create mode 100644 src/core/client/admin/routes/Configure/Fields/LocaleField.tsx create mode 100644 src/core/client/admin/routes/Configure/HelperText.css create mode 100644 src/core/client/admin/routes/Configure/HelperText.tsx create mode 100644 src/core/client/admin/routes/Configure/TextFieldWithValidation.css create mode 100644 src/core/client/admin/routes/Configure/TextFieldWithValidation.tsx delete mode 100644 src/core/client/admin/routes/Configure/sections/Auth/ConfigDescription.tsx create mode 100644 src/core/client/admin/routes/Moderate/ModerateSearchBar/variables.css create mode 100644 src/core/client/admin/routes/NotFound.css create mode 100644 src/core/client/admin/ui/components/index.ts create mode 100644 src/core/client/ui/components/v2/AppBar/AppBar.css create mode 100644 src/core/client/ui/components/v2/AppBar/AppBar.mdx create mode 100644 src/core/client/ui/components/v2/AppBar/AppBar.spec.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/AppBar.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/Begin.css create mode 100644 src/core/client/ui/components/v2/AppBar/Begin.spec.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/Begin.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/Divider.css create mode 100644 src/core/client/ui/components/v2/AppBar/Divider.spec.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/Divider.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/End.css create mode 100644 src/core/client/ui/components/v2/AppBar/End.spec.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/End.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/Navigation.css create mode 100644 src/core/client/ui/components/v2/AppBar/Navigation.spec.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/Navigation.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/NavigationItem.css create mode 100644 src/core/client/ui/components/v2/AppBar/NavigationItem.spec.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/NavigationItem.tsx create mode 100644 src/core/client/ui/components/v2/AppBar/__snapshots__/AppBar.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/AppBar/__snapshots__/Begin.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/AppBar/__snapshots__/Divider.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/AppBar/__snapshots__/End.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/AppBar/__snapshots__/Navigation.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/AppBar/__snapshots__/NavigationItem.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/AppBar/index.ts create mode 100644 src/core/client/ui/components/v2/AriaInfo/AriaInfo.css create mode 100644 src/core/client/ui/components/v2/AriaInfo/AriaInfo.mdx create mode 100644 src/core/client/ui/components/v2/AriaInfo/AriaInfo.spec.tsx create mode 100644 src/core/client/ui/components/v2/AriaInfo/AriaInfo.tsx create mode 100644 src/core/client/ui/components/v2/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/AriaInfo/index.ts create mode 100644 src/core/client/ui/components/v2/Backdrop/Backdrop.css create mode 100644 src/core/client/ui/components/v2/Backdrop/Backdrop.mdx create mode 100644 src/core/client/ui/components/v2/Backdrop/Backdrop.spec.tsx create mode 100644 src/core/client/ui/components/v2/Backdrop/Backdrop.tsx create mode 100644 src/core/client/ui/components/v2/Backdrop/__snapshots__/Backdrop.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Backdrop/index.ts create mode 100644 src/core/client/ui/components/v2/BaseButton/BaseButton.css create mode 100644 src/core/client/ui/components/v2/BaseButton/BaseButton.mdx create mode 100644 src/core/client/ui/components/v2/BaseButton/BaseButton.spec.tsx create mode 100644 src/core/client/ui/components/v2/BaseButton/BaseButton.tsx create mode 100644 src/core/client/ui/components/v2/BaseButton/__snapshots__/BaseButton.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/BaseButton/index.ts create mode 100644 src/core/client/ui/components/v2/Box/Box.css create mode 100644 src/core/client/ui/components/v2/Box/Box.mdx create mode 100644 src/core/client/ui/components/v2/Box/Box.tsx create mode 100644 src/core/client/ui/components/v2/Box/index.ts create mode 100644 src/core/client/ui/components/v2/Button/Button.css create mode 100644 src/core/client/ui/components/v2/Button/Button.mdx create mode 100644 src/core/client/ui/components/v2/Button/Button.spec.tsx create mode 100644 src/core/client/ui/components/v2/Button/Button.tsx create mode 100644 src/core/client/ui/components/v2/Button/ButtonIcon.css create mode 100644 src/core/client/ui/components/v2/Button/ButtonIcon.spec.tsx create mode 100644 src/core/client/ui/components/v2/Button/ButtonIcon.tsx create mode 100644 src/core/client/ui/components/v2/Button/__snapshots__/Button.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Button/__snapshots__/ButtonIcon.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Button/index.ts create mode 100644 src/core/client/ui/components/v2/CallOut/CallOut.css create mode 100644 src/core/client/ui/components/v2/CallOut/CallOut.mdx create mode 100644 src/core/client/ui/components/v2/CallOut/CallOut.spec.tsx create mode 100644 src/core/client/ui/components/v2/CallOut/CallOut.tsx create mode 100644 src/core/client/ui/components/v2/CallOut/__snapshots__/CallOut.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/CallOut/index.ts create mode 100644 src/core/client/ui/components/v2/Card/Card.css create mode 100644 src/core/client/ui/components/v2/Card/Card.mdx create mode 100644 src/core/client/ui/components/v2/Card/Card.spec.tsx create mode 100644 src/core/client/ui/components/v2/Card/Card.tsx create mode 100644 src/core/client/ui/components/v2/Card/CloseButton.css create mode 100644 src/core/client/ui/components/v2/Card/CloseButton.tsx create mode 100644 src/core/client/ui/components/v2/Card/__snapshots__/Card.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Card/index.ts create mode 100644 src/core/client/ui/components/v2/CheckBox/CheckBox.css create mode 100644 src/core/client/ui/components/v2/CheckBox/CheckBox.mdx create mode 100644 src/core/client/ui/components/v2/CheckBox/CheckBox.spec.tsx create mode 100644 src/core/client/ui/components/v2/CheckBox/CheckBox.tsx create mode 100644 src/core/client/ui/components/v2/CheckBox/__snapshots__/CheckBox.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/CheckBox/index.ts create mode 100644 src/core/client/ui/components/v2/ClickOutside/ClickOutside.mdx create mode 100644 src/core/client/ui/components/v2/ClickOutside/ClickOutside.spec.tsx create mode 100644 src/core/client/ui/components/v2/ClickOutside/ClickOutside.tsx create mode 100644 src/core/client/ui/components/v2/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/ClickOutside/index.ts create mode 100644 src/core/client/ui/components/v2/Counter/Counter.css create mode 100644 src/core/client/ui/components/v2/Counter/Counter.mdx create mode 100644 src/core/client/ui/components/v2/Counter/Counter.spec.tsx create mode 100644 src/core/client/ui/components/v2/Counter/Counter.tsx create mode 100644 src/core/client/ui/components/v2/Counter/__snapshots__/Counter.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Counter/index.ts create mode 100644 src/core/client/ui/components/v2/Delay/Delay.mdx create mode 100644 src/core/client/ui/components/v2/Delay/Delay.spec.tsx create mode 100644 src/core/client/ui/components/v2/Delay/Delay.tsx create mode 100644 src/core/client/ui/components/v2/Delay/__snapshots__/Delay.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Delay/index.ts create mode 100644 src/core/client/ui/components/v2/Divider/Divider.css create mode 100644 src/core/client/ui/components/v2/Divider/Divider.tsx create mode 100644 src/core/client/ui/components/v2/Divider/index.ts create mode 100644 src/core/client/ui/components/v2/Dropdown/Button.css create mode 100644 src/core/client/ui/components/v2/Dropdown/Button.spec.tsx create mode 100644 src/core/client/ui/components/v2/Dropdown/Button.tsx create mode 100644 src/core/client/ui/components/v2/Dropdown/Divider.css create mode 100644 src/core/client/ui/components/v2/Dropdown/Divider.spec.tsx create mode 100644 src/core/client/ui/components/v2/Dropdown/Divider.tsx create mode 100644 src/core/client/ui/components/v2/Dropdown/Dropdown.css create mode 100644 src/core/client/ui/components/v2/Dropdown/Dropdown.mdx create mode 100644 src/core/client/ui/components/v2/Dropdown/Dropdown.spec.tsx create mode 100644 src/core/client/ui/components/v2/Dropdown/Dropdown.tsx create mode 100644 src/core/client/ui/components/v2/Dropdown/__snapshots__/Button.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Dropdown/__snapshots__/Divider.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Dropdown/__snapshots__/Dropdown.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Dropdown/index.ts create mode 100644 src/core/client/ui/components/v2/DurationField/DurationField.css create mode 100644 src/core/client/ui/components/v2/DurationField/DurationField.spec.tsx create mode 100644 src/core/client/ui/components/v2/DurationField/DurationField.tsx create mode 100644 src/core/client/ui/components/v2/DurationField/__snapshots__/DurationField.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/DurationField/index.ts create mode 100644 src/core/client/ui/components/v2/FieldSet/FieldSet.css create mode 100644 src/core/client/ui/components/v2/FieldSet/FieldSet.mdx create mode 100644 src/core/client/ui/components/v2/FieldSet/FieldSet.spec.tsx create mode 100644 src/core/client/ui/components/v2/FieldSet/FieldSet.tsx create mode 100644 src/core/client/ui/components/v2/FieldSet/__snapshots__/FieldSet.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/FieldSet/index.ts create mode 100644 src/core/client/ui/components/v2/Flex/Flex.css create mode 100644 src/core/client/ui/components/v2/Flex/Flex.mdx create mode 100644 src/core/client/ui/components/v2/Flex/Flex.spec.tsx create mode 100644 src/core/client/ui/components/v2/Flex/Flex.tsx create mode 100644 src/core/client/ui/components/v2/Flex/__snapshots__/Flex.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Flex/index.ts create mode 100644 src/core/client/ui/components/v2/FormField/FormField.css create mode 100644 src/core/client/ui/components/v2/FormField/FormField.mdx create mode 100644 src/core/client/ui/components/v2/FormField/FormField.spec.tsx create mode 100644 src/core/client/ui/components/v2/FormField/FormField.tsx create mode 100644 src/core/client/ui/components/v2/FormField/__snapshots__/FormField.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/FormField/index.ts create mode 100644 src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.css create mode 100644 src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.tsx create mode 100644 src/core/client/ui/components/v2/FormFieldDescription/index.ts create mode 100644 src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.css create mode 100644 src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.tsx create mode 100644 src/core/client/ui/components/v2/FormFieldHeader/index.ts create mode 100644 src/core/client/ui/components/v2/HelperText/HelperText.css create mode 100644 src/core/client/ui/components/v2/HelperText/HelperText.tsx create mode 100644 src/core/client/ui/components/v2/HelperText/index.ts create mode 100644 src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.css create mode 100644 src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.mdx create mode 100644 src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.spec.tsx create mode 100644 src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.tsx create mode 100644 src/core/client/ui/components/v2/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/HorizontalGutter/index.ts create mode 100644 src/core/client/ui/components/v2/Icon/Icon.css create mode 100644 src/core/client/ui/components/v2/Icon/Icon.mdx create mode 100644 src/core/client/ui/components/v2/Icon/Icon.spec.tsx create mode 100644 src/core/client/ui/components/v2/Icon/Icon.tsx create mode 100644 src/core/client/ui/components/v2/Icon/__snapshots__/Icon.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Icon/index.ts create mode 100644 src/core/client/ui/components/v2/Label/Label.css create mode 100644 src/core/client/ui/components/v2/Label/Label.tsx create mode 100644 src/core/client/ui/components/v2/Label/index.ts create mode 100644 src/core/client/ui/components/v2/Marker/Count.css create mode 100644 src/core/client/ui/components/v2/Marker/Count.spec.tsx create mode 100644 src/core/client/ui/components/v2/Marker/Count.tsx create mode 100644 src/core/client/ui/components/v2/Marker/Marker.css create mode 100644 src/core/client/ui/components/v2/Marker/Marker.mdx create mode 100644 src/core/client/ui/components/v2/Marker/Marker.spec.tsx create mode 100644 src/core/client/ui/components/v2/Marker/Marker.tsx create mode 100644 src/core/client/ui/components/v2/Marker/__snapshots__/Count.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Marker/__snapshots__/Marker.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Marker/index.ts create mode 100644 src/core/client/ui/components/v2/Message/Message.css create mode 100644 src/core/client/ui/components/v2/Message/Message.mdx create mode 100644 src/core/client/ui/components/v2/Message/Message.spec.tsx create mode 100644 src/core/client/ui/components/v2/Message/Message.tsx create mode 100644 src/core/client/ui/components/v2/Message/MessageIcon.css create mode 100644 src/core/client/ui/components/v2/Message/MessageIcon.tsx create mode 100644 src/core/client/ui/components/v2/Message/__snapshots__/Message.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Message/index.ts create mode 100644 src/core/client/ui/components/v2/Modal/Modal.css create mode 100644 src/core/client/ui/components/v2/Modal/Modal.mdx create mode 100644 src/core/client/ui/components/v2/Modal/Modal.mdx.css create mode 100644 src/core/client/ui/components/v2/Modal/Modal.spec.tsx create mode 100644 src/core/client/ui/components/v2/Modal/Modal.tsx create mode 100644 src/core/client/ui/components/v2/Modal/__snapshots__/Modal.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Modal/index.ts create mode 100644 src/core/client/ui/components/v2/NoScroll/NoScroll.css create mode 100644 src/core/client/ui/components/v2/NoScroll/NoScroll.mdx create mode 100644 src/core/client/ui/components/v2/NoScroll/NoScroll.spec.tsx create mode 100644 src/core/client/ui/components/v2/NoScroll/NoScroll.tsx create mode 100644 src/core/client/ui/components/v2/NoScroll/index.ts create mode 100644 src/core/client/ui/components/v2/PasswordField/PasswordField.css create mode 100644 src/core/client/ui/components/v2/PasswordField/PasswordField.mdx create mode 100644 src/core/client/ui/components/v2/PasswordField/PasswordField.spec.tsx create mode 100644 src/core/client/ui/components/v2/PasswordField/PasswordField.tsx create mode 100644 src/core/client/ui/components/v2/PasswordField/__snapshots__/PasswordField.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/PasswordField/index.ts create mode 100644 src/core/client/ui/components/v2/Popover/Arrow.css create mode 100644 src/core/client/ui/components/v2/Popover/Arrow.tsx create mode 100644 src/core/client/ui/components/v2/Popover/Popover.css create mode 100644 src/core/client/ui/components/v2/Popover/Popover.mdx create mode 100644 src/core/client/ui/components/v2/Popover/Popover.tsx create mode 100644 src/core/client/ui/components/v2/Popover/index.ts create mode 100644 src/core/client/ui/components/v2/RadioButton/RadioButton.css create mode 100644 src/core/client/ui/components/v2/RadioButton/RadioButton.mdx create mode 100644 src/core/client/ui/components/v2/RadioButton/RadioButton.spec.tsx create mode 100644 src/core/client/ui/components/v2/RadioButton/RadioButton.tsx create mode 100644 src/core/client/ui/components/v2/RadioButton/__snapshots__/RadioButton.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/RadioButton/index.ts create mode 100644 src/core/client/ui/components/v2/RelativeTime/RelativeTime.css create mode 100644 src/core/client/ui/components/v2/RelativeTime/RelativeTime.mdx create mode 100644 src/core/client/ui/components/v2/RelativeTime/RelativeTime.spec.tsx create mode 100644 src/core/client/ui/components/v2/RelativeTime/RelativeTime.tsx create mode 100644 src/core/client/ui/components/v2/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/RelativeTime/index.ts create mode 100644 src/core/client/ui/components/v2/SelectField/OptGroup.spec.tsx create mode 100644 src/core/client/ui/components/v2/SelectField/OptGroup.tsx create mode 100644 src/core/client/ui/components/v2/SelectField/Option.spec.tsx create mode 100644 src/core/client/ui/components/v2/SelectField/Option.tsx create mode 100644 src/core/client/ui/components/v2/SelectField/SelectField.css create mode 100644 src/core/client/ui/components/v2/SelectField/SelectField.mdx create mode 100644 src/core/client/ui/components/v2/SelectField/SelectField.spec.tsx create mode 100644 src/core/client/ui/components/v2/SelectField/SelectField.tsx create mode 100644 src/core/client/ui/components/v2/SelectField/__snapshots__/OptGroup.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/SelectField/__snapshots__/Option.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/SelectField/__snapshots__/SelectField.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/SelectField/index.ts create mode 100644 src/core/client/ui/components/v2/Spinner/Spinner.css create mode 100644 src/core/client/ui/components/v2/Spinner/Spinner.mdx create mode 100644 src/core/client/ui/components/v2/Spinner/Spinner.spec.tsx create mode 100644 src/core/client/ui/components/v2/Spinner/Spinner.tsx create mode 100644 src/core/client/ui/components/v2/Spinner/__snapshots__/Spinner.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Spinner/index.ts create mode 100644 src/core/client/ui/components/v2/SubBar/Navigation.css create mode 100644 src/core/client/ui/components/v2/SubBar/Navigation.spec.tsx create mode 100644 src/core/client/ui/components/v2/SubBar/Navigation.tsx create mode 100644 src/core/client/ui/components/v2/SubBar/NavigationItem.css create mode 100644 src/core/client/ui/components/v2/SubBar/NavigationItem.spec.tsx create mode 100644 src/core/client/ui/components/v2/SubBar/NavigationItem.tsx create mode 100644 src/core/client/ui/components/v2/SubBar/SubBar.css create mode 100644 src/core/client/ui/components/v2/SubBar/SubBar.mdx create mode 100644 src/core/client/ui/components/v2/SubBar/SubBar.spec.tsx create mode 100644 src/core/client/ui/components/v2/SubBar/SubBar.tsx create mode 100644 src/core/client/ui/components/v2/SubBar/__snapshots__/Navigation.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/SubBar/__snapshots__/NavigationItem.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/SubBar/__snapshots__/SubBar.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/SubBar/index.ts create mode 100644 src/core/client/ui/components/v2/Table/Table.css create mode 100644 src/core/client/ui/components/v2/Table/Table.mdx create mode 100644 src/core/client/ui/components/v2/Table/Table.spec.tsx create mode 100644 src/core/client/ui/components/v2/Table/Table.tsx create mode 100644 src/core/client/ui/components/v2/Table/TableBody.css create mode 100644 src/core/client/ui/components/v2/Table/TableBody.tsx create mode 100644 src/core/client/ui/components/v2/Table/TableCell.css create mode 100644 src/core/client/ui/components/v2/Table/TableCell.tsx create mode 100644 src/core/client/ui/components/v2/Table/TableHead.css create mode 100644 src/core/client/ui/components/v2/Table/TableHead.tsx create mode 100644 src/core/client/ui/components/v2/Table/TableRow.css create mode 100644 src/core/client/ui/components/v2/Table/TableRow.tsx create mode 100644 src/core/client/ui/components/v2/Table/__snapshots__/Table.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Table/index.ts create mode 100644 src/core/client/ui/components/v2/Tabs/Tab.css create mode 100644 src/core/client/ui/components/v2/Tabs/Tab.spec.tsx create mode 100644 src/core/client/ui/components/v2/Tabs/Tab.tsx create mode 100644 src/core/client/ui/components/v2/Tabs/TabBar.css create mode 100644 src/core/client/ui/components/v2/Tabs/TabBar.spec.tsx create mode 100644 src/core/client/ui/components/v2/Tabs/TabBar.tsx create mode 100644 src/core/client/ui/components/v2/Tabs/TabContent.spec.tsx create mode 100644 src/core/client/ui/components/v2/Tabs/TabContent.tsx create mode 100644 src/core/client/ui/components/v2/Tabs/TabPane.spec.tsx create mode 100644 src/core/client/ui/components/v2/Tabs/TabPane.tsx create mode 100644 src/core/client/ui/components/v2/Tabs/__snapshots__/Tab.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Tabs/__snapshots__/TabBar.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Tabs/__snapshots__/TabContent.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Tabs/__snapshots__/TabPane.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Tabs/index.ts create mode 100644 src/core/client/ui/components/v2/Tabs/tabs.mdx create mode 100644 src/core/client/ui/components/v2/Tag/Tag.css create mode 100644 src/core/client/ui/components/v2/Tag/Tag.mdx create mode 100644 src/core/client/ui/components/v2/Tag/Tag.spec.tsx create mode 100644 src/core/client/ui/components/v2/Tag/Tag.tsx create mode 100644 src/core/client/ui/components/v2/Tag/__snapshots__/Tag.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Tag/index.ts create mode 100644 src/core/client/ui/components/v2/TextField/TextField.css create mode 100644 src/core/client/ui/components/v2/TextField/TextField.mdx create mode 100644 src/core/client/ui/components/v2/TextField/TextField.spec.tsx create mode 100644 src/core/client/ui/components/v2/TextField/TextField.tsx create mode 100644 src/core/client/ui/components/v2/TextField/__snapshots__/TextField.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/TextField/index.ts create mode 100644 src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.css create mode 100644 src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.tsx create mode 100644 src/core/client/ui/components/v2/TextFieldAdornment/index.ts create mode 100644 src/core/client/ui/components/v2/TextLink/TextLink.css create mode 100644 src/core/client/ui/components/v2/TextLink/TextLink.mdx create mode 100644 src/core/client/ui/components/v2/TextLink/TextLink.spec.tsx create mode 100644 src/core/client/ui/components/v2/TextLink/TextLink.tsx create mode 100644 src/core/client/ui/components/v2/TextLink/__snapshots__/TextLink.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/TextLink/index.ts create mode 100644 src/core/client/ui/components/v2/Textarea/Textarea.css create mode 100644 src/core/client/ui/components/v2/Textarea/Textarea.tsx create mode 100644 src/core/client/ui/components/v2/Textarea/index.ts create mode 100644 src/core/client/ui/components/v2/Timestamp/Timestamp.css create mode 100644 src/core/client/ui/components/v2/Timestamp/Timestamp.spec.tsx create mode 100644 src/core/client/ui/components/v2/Timestamp/Timestamp.tsx create mode 100644 src/core/client/ui/components/v2/Timestamp/__snapshots__/Timestamp.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/Timestamp/index.ts create mode 100644 src/core/client/ui/components/v2/Tooltip/Tooltip.css create mode 100644 src/core/client/ui/components/v2/Tooltip/Tooltip.tsx create mode 100644 src/core/client/ui/components/v2/Tooltip/TooltipButton.css create mode 100644 src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx create mode 100644 src/core/client/ui/components/v2/Tooltip/index.ts create mode 100644 src/core/client/ui/components/v2/TrapFocus/TrapFocus.mdx create mode 100644 src/core/client/ui/components/v2/TrapFocus/TrapFocus.spec.tsx create mode 100644 src/core/client/ui/components/v2/TrapFocus/TrapFocus.tsx create mode 100644 src/core/client/ui/components/v2/TrapFocus/__snapshots__/TrapFocus.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/TrapFocus/index.ts create mode 100644 src/core/client/ui/components/v2/UIContext/UIContext.ts create mode 100644 src/core/client/ui/components/v2/UIContext/index.ts create mode 100644 src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.mdx create mode 100644 src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.spec.tsx create mode 100644 src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.tsx create mode 100644 src/core/client/ui/components/v2/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap create mode 100644 src/core/client/ui/components/v2/ValidationMessage/index.ts create mode 100644 src/core/client/ui/components/v2/index.ts create mode 100644 src/core/client/ui/theme/variables2.ts diff --git a/package-lock.json b/package-lock.json index 6d1a9a28c..c9823ebb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34509,6 +34509,18 @@ "integrity": "sha512-oaqDlrGz0dhBvNlt6iEtWWs6zFSodhxPlYzK3gDoEBTAQvImWipOqeb4u2XI77sY+UZkS1wu6kAxJYUMySJ+iQ==", "dev": true }, + "typeface-nunito": { + "version": "0.0.72", + "resolved": "https://registry.npmjs.org/typeface-nunito/-/typeface-nunito-0.0.72.tgz", + "integrity": "sha512-id43vYQiM9emQ6sbysLDRp8fb39Dk5yW/q6uSPHJnE1XVDSfrxYWFg/YiSoiaK+kO7wbuWb2HSjCAfH96Mabvg==", + "dev": true + }, + "typeface-open-sans": { + "version": "0.0.75", + "resolved": "https://registry.npmjs.org/typeface-open-sans/-/typeface-open-sans-0.0.75.tgz", + "integrity": "sha512-0lLmB7pfj113OP4T78SbpSmC4OCdFQ0vUxdSXQccsSb6qF76F92iEuC/DghFgmPswTyidk8+Hwf+PS/htiJoRQ==", + "dev": true + }, "typeface-source-sans-pro": { "version": "0.0.54", "resolved": "https://registry.npmjs.org/typeface-source-sans-pro/-/typeface-source-sans-pro-0.0.54.tgz", diff --git a/package.json b/package.json index 415595e35..776c8bb13 100644 --- a/package.json +++ b/package.json @@ -365,6 +365,8 @@ "typeface-source-sans-pro": "^0.0.54", "typescript": "3.3.4000", "typescript-snapshots-plugin": "^1.6.0", + "typeface-nunito": "0.0.72", + "typeface-open-sans": "0.0.75", "wait-for-expect": "^1.1.1", "webpack": "^4.30.0", "webpack-assets-manifest": "^3.1.1", diff --git a/src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx b/src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx index a8f3cf3f8..a23651f5d 100644 --- a/src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx +++ b/src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx @@ -1,8 +1,6 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; -import { Typography } from "coral-ui/components"; - import ApprovedIcon from "./ApprovedIcon"; import DecisionItem from "./DecisionItem"; import DotDivider from "./DotDivider"; @@ -10,6 +8,7 @@ import Footer from "./Footer"; import GoToCommentLink from "./GoToCommentLink"; import Info from "./Info"; import Timestamp from "./Timestamp"; +import Username from "./Username"; interface Props { href: string; @@ -18,10 +17,6 @@ interface Props { onGotoComment?: React.EventHandler; } -const Username: FunctionComponent<{ username: string }> = ({ username }) => ( - {username} -); - const ApprovedComment: FunctionComponent = props => ( }> = props => ( {"Approved comment by "}
- - {props.date} - + {props.date}
diff --git a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css index 50efdc1dc..f9cae42f2 100644 --- a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css +++ b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css @@ -1,3 +1,3 @@ .root { - color: var(--palette-success-main); + color: var(--v2-palette-success-main); } diff --git a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx index 03f80790b..3c6b1b255 100644 --- a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx +++ b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx @@ -1,11 +1,13 @@ import React, { FunctionComponent } from "react"; -import { Icon } from "coral-ui/components"; +import { Icon } from "coral-ui/components/v2"; import styles from "./ApprovedIcon.css"; const ApprovedIcon: FunctionComponent = () => ( - check + + check_circled + ); export default ApprovedIcon; diff --git a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css index 84f602e5d..91a29eff9 100644 --- a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css +++ b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css @@ -3,6 +3,6 @@ } .historyIcon { - color: var(--palette-text-secondary); - margin-right: calc(1.5 * var(--mini-unit)); + color: var(--v2-palette-text-secondary); + margin-right: 10px; } diff --git a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx index e712722c9..15dfc595c 100644 --- a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx +++ b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx @@ -1,7 +1,12 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; -import { BaseButton, ClickOutside, Icon, Popover } from "coral-ui/components"; +import { + BaseButton, + ClickOutside, + Icon, + Popover, +} from "coral-ui/components/v2"; import DecisionHistoryQuery from "./DecisionHistoryQuery"; diff --git a/src/core/client/admin/App/DecisionHistory/DecisionHistoryLoading.tsx b/src/core/client/admin/App/DecisionHistory/DecisionHistoryLoading.tsx index 61f3dacf7..939bf45db 100644 --- a/src/core/client/admin/App/DecisionHistory/DecisionHistoryLoading.tsx +++ b/src/core/client/admin/App/DecisionHistory/DecisionHistoryLoading.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; -import { Delay, Flex, Spinner } from "coral-ui/components"; +import { Delay, Flex, Spinner } from "coral-ui/components/v2"; import Main from "./Main"; import Title from "./Title"; diff --git a/src/core/client/admin/App/DecisionHistory/DecisionItem.css b/src/core/client/admin/App/DecisionHistory/DecisionItem.css index ceb23e4be..de4a66b9f 100644 --- a/src/core/client/admin/App/DecisionHistory/DecisionItem.css +++ b/src/core/client/admin/App/DecisionHistory/DecisionItem.css @@ -1,6 +1,5 @@ .root { - padding: calc(0.5 * var(--mini-unit)) calc(0.5 * var(--mini-unit)) - calc(0.5 * var(--mini-unit)) 0; + padding: var(--v2-spacing-2) var(--v2-spacing-1); } .leftCol { @@ -8,6 +7,6 @@ justify-content: center; flex-grow: 0; flex-shrink: 0; - width: calc(3 * var(--mini-unit)); padding-top: 3px; + margin-right: var(--v2-spacing-2); } diff --git a/src/core/client/admin/App/DecisionHistory/DecisionItem.tsx b/src/core/client/admin/App/DecisionHistory/DecisionItem.tsx index 562e2da39..04476663c 100644 --- a/src/core/client/admin/App/DecisionHistory/DecisionItem.tsx +++ b/src/core/client/admin/App/DecisionHistory/DecisionItem.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; -import { Flex } from "coral-ui/components"; +import { Flex } from "coral-ui/components/v2"; import styles from "./DecisionItem.css"; diff --git a/src/core/client/admin/App/DecisionHistory/DecisionList.css b/src/core/client/admin/App/DecisionHistory/DecisionList.css index 92219280f..388876150 100644 --- a/src/core/client/admin/App/DecisionHistory/DecisionList.css +++ b/src/core/client/admin/App/DecisionHistory/DecisionList.css @@ -4,7 +4,7 @@ list-style-type: none; & > * { - border-bottom: 1px solid var(--palette-divider); + border-bottom: 1px solid var(--v2-palette-decision-history-border); } & > *:last-child { border-bottom: 0; diff --git a/src/core/client/admin/App/DecisionHistory/DotDivider.css b/src/core/client/admin/App/DecisionHistory/DotDivider.css index 8df5fc9aa..090adbdbb 100644 --- a/src/core/client/admin/App/DecisionHistory/DotDivider.css +++ b/src/core/client/admin/App/DecisionHistory/DotDivider.css @@ -1,7 +1,7 @@ .root { height: 100%; - font-size: calc(12rem / var(--rem-base)); - line-height: calc(12em / 12); - color: var(--palette-divider); - padding: 0 calc(0.5 * var(--mini-unit)); + font-size: var(--v2-font-size-1); + line-height: var(--v2-line-height-reset); + color: var(--v2-palette-timestamp); + padding: 0 var(--v2-spacing-1); } diff --git a/src/core/client/admin/App/DecisionHistory/Empty.css b/src/core/client/admin/App/DecisionHistory/Empty.css index e50019701..79dc92187 100644 --- a/src/core/client/admin/App/DecisionHistory/Empty.css +++ b/src/core/client/admin/App/DecisionHistory/Empty.css @@ -1,3 +1,10 @@ .root { padding: calc(1.5 * var(--mini-unit)) calc(2 * var(--mini-unit)); } + +.text { + font-family: var(--v2-font-family-primary); + font-weight: var(--v2-font-weight-primary-regular); + font-size: var(--v2-font-size-2); + line-height: var(--v2-line-height-body-short); +} diff --git a/src/core/client/admin/App/DecisionHistory/Empty.tsx b/src/core/client/admin/App/DecisionHistory/Empty.tsx index 1c3b83a98..d88e7e268 100644 --- a/src/core/client/admin/App/DecisionHistory/Empty.tsx +++ b/src/core/client/admin/App/DecisionHistory/Empty.tsx @@ -1,16 +1,16 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; -import { Flex, Typography } from "coral-ui/components"; +import { Flex } from "coral-ui/components/v2"; import styles from "./Empty.css"; const Empty: FunctionComponent<{}> = () => ( - +
You will see a list of your post moderation actions here. - +
); diff --git a/src/core/client/admin/App/DecisionHistory/Footer.css b/src/core/client/admin/App/DecisionHistory/Footer.css index c3a2af639..0dbf825ea 100644 --- a/src/core/client/admin/App/DecisionHistory/Footer.css +++ b/src/core/client/admin/App/DecisionHistory/Footer.css @@ -1,2 +1,3 @@ .root { + margin-top: var(--v2-spacing-1); } diff --git a/src/core/client/admin/App/DecisionHistory/Footer.tsx b/src/core/client/admin/App/DecisionHistory/Footer.tsx index c1e50a899..a83a1f2d6 100644 --- a/src/core/client/admin/App/DecisionHistory/Footer.tsx +++ b/src/core/client/admin/App/DecisionHistory/Footer.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; -import { Flex } from "coral-ui/components"; +import { Flex } from "coral-ui/components/v2"; import styles from "./Footer.css"; diff --git a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css index 519ed50fb..38e560e48 100644 --- a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css +++ b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css @@ -1,9 +1,8 @@ .root { - font-size: calc(12rem / var(--rem-base)); - font-weight: var(--font-weight-regular); - font-family: var(--font-family-sans-serif); - line-height: calc(14em / 12); - letter-spacing: calc(0.2em / 12); - color: var(--palette-primary-main); - text-decoration: none; + line-height: var(--v2-line-height-reset); + font-weight: var(--v2-font-weight-primary-bold); + font-family: var(--v2-font-family-primary); + font-size: var(--v2-font-size-1); + color: var(--v2-palette-link-text); + font-style: var(--v2-font-style-underline); } diff --git a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx index edb689e99..aeed3bac1 100644 --- a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx +++ b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx @@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat"; import { Link } from "found"; import React, { FunctionComponent } from "react"; -import { Icon, TextLink } from "coral-ui/components"; +import { Icon, TextLink } from "coral-ui/components/v2"; import styles from "./GoToCommentLink.css"; diff --git a/src/core/client/admin/App/DecisionHistory/Info.css b/src/core/client/admin/App/DecisionHistory/Info.css index daa3c0e8f..942637a82 100644 --- a/src/core/client/admin/App/DecisionHistory/Info.css +++ b/src/core/client/admin/App/DecisionHistory/Info.css @@ -1,6 +1,4 @@ .root { - font-size: calc(14rem / var(--rem-base)); - line-height: calc(16em / 12); /* Fallback begin @@ -10,4 +8,9 @@ word-break: break-all; /* Fallback end */ word-break: break-word; + color: var(--v2-palette-text-primary); + font-weight: var(--v2-font-weight-primary-semi-bold); + font-family: var(--v2-font-family-primary); + line-height: var(--v2-line-height-body-short); + font-size: var(--v2-font-size-2); } diff --git a/src/core/client/admin/App/DecisionHistory/Info.tsx b/src/core/client/admin/App/DecisionHistory/Info.tsx index 452eda05f..d4832915f 100644 --- a/src/core/client/admin/App/DecisionHistory/Info.tsx +++ b/src/core/client/admin/App/DecisionHistory/Info.tsx @@ -1,7 +1,5 @@ import React, { FunctionComponent } from "react"; -import { Typography } from "coral-ui/components"; - import styles from "./Info.css"; interface Props { @@ -9,7 +7,7 @@ interface Props { } const Info: FunctionComponent = props => ( - {props.children} + {props.children} ); export default Info; diff --git a/src/core/client/admin/App/DecisionHistory/RejectedComment.tsx b/src/core/client/admin/App/DecisionHistory/RejectedComment.tsx index 017698356..f2fc6f6c8 100644 --- a/src/core/client/admin/App/DecisionHistory/RejectedComment.tsx +++ b/src/core/client/admin/App/DecisionHistory/RejectedComment.tsx @@ -1,8 +1,6 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; -import { Typography } from "coral-ui/components"; - import DecisionItem from "./DecisionItem"; import DotDivider from "./DotDivider"; import Footer from "./Footer"; @@ -10,6 +8,7 @@ import GoToCommentLink from "./GoToCommentLink"; import Info from "./Info"; import RejectedIcon from "./RejectedIcon"; import Timestamp from "./Timestamp"; +import Username from "./Username"; interface Props { href: string; @@ -18,10 +17,6 @@ interface Props { onGotoComment?: React.EventHandler; } -const Username: FunctionComponent<{ username: string }> = ({ username }) => ( - {username} -); - const RejectedComment: FunctionComponent = props => ( }> = props => ( {"Rejected comment by "}
- - {props.date} - + {props.date}
diff --git a/src/core/client/admin/App/DecisionHistory/RejectedIcon.css b/src/core/client/admin/App/DecisionHistory/RejectedIcon.css index 488befa65..c5bddba45 100644 --- a/src/core/client/admin/App/DecisionHistory/RejectedIcon.css +++ b/src/core/client/admin/App/DecisionHistory/RejectedIcon.css @@ -1,3 +1,3 @@ .root { - color: var(--palette-error-main); + color: var(--v2-palette-error-main); } diff --git a/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx b/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx index 1dde0162f..38f0818f5 100644 --- a/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx +++ b/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx @@ -1,11 +1,13 @@ import React, { FunctionComponent } from "react"; -import { Icon } from "coral-ui/components"; +import { Icon } from "coral-ui/components/v2"; import styles from "./RejectedIcon.css"; const RejectedIcon: FunctionComponent = () => ( - cancel + + cancel + ); export default RejectedIcon; diff --git a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css index 87c94f276..81935a4d1 100644 --- a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css +++ b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css @@ -1,16 +1,17 @@ .root { + font-size: var(--v2-font-size-2); + font-weight: var(--v2-font-weight-primary-bold); + font-family: var(--v2-font-family-primary); + line-height: var(--v2-line-height-reset); text-transform: uppercase; - font-size: calc(12rem / var(--rem-base)); - font-weight: var(--font-weight-medium); - font-family: var(--font-family-sans-serif); - line-height: calc(2 * var(--mini-unit)); - letter-spacing: calc(0.2em / 12); - color: var(--palette-grey-main); + color: var(--v2-palette-link-text); width: 100%; - border-top: 1px solid var(--palette-divider); + border-top: 1px solid var(--v2-palette-decision-history-border); text-align: center; + padding-top: var(--v2-spacing-1); + padding-bottom: var(--v2-spacing-1); &:disabled { - color: var(--palette-grey-lighter); + color: var(--v2-palette-grey-lighter); } } diff --git a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.tsx b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.tsx index 4cdf8bc7e..646244f57 100644 --- a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.tsx +++ b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.tsx @@ -1,7 +1,7 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; -import { BaseButton } from "coral-ui/components"; +import { BaseButton } from "coral-ui/components/v2"; import styles from "./ShowMoreButton.css"; diff --git a/src/core/client/admin/App/DecisionHistory/Timestamp.css b/src/core/client/admin/App/DecisionHistory/Timestamp.css index 45c88b4cf..1035d2ee9 100644 --- a/src/core/client/admin/App/DecisionHistory/Timestamp.css +++ b/src/core/client/admin/App/DecisionHistory/Timestamp.css @@ -1,8 +1,7 @@ .root { - color: var(--palette-text-secondary); - font-family: var(--font-family-sans-serif); - font-weight: var(--font-weight-medium); - font-size: calc(12rem / var(--rem-base)); - line-height: calc(14em / 12); - letter-spacing: 0; + color: var(--v2-palette-timestamp); + font-family: var(--v2-font-family-primary); + font-weight: var(--v2-font-weight-primary-bold); + font-size: var(--v2-font-size-1); + line-height: var(--v2-line-height-reset); } diff --git a/src/core/client/admin/App/DecisionHistory/Timestamp.tsx b/src/core/client/admin/App/DecisionHistory/Timestamp.tsx index 881e41ca8..a476021e8 100644 --- a/src/core/client/admin/App/DecisionHistory/Timestamp.tsx +++ b/src/core/client/admin/App/DecisionHistory/Timestamp.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; -import { RelativeTime } from "coral-ui/components"; +import { RelativeTime } from "coral-ui/components/v2"; import styles from "./Timestamp.css"; diff --git a/src/core/client/admin/App/DecisionHistory/Title.css b/src/core/client/admin/App/DecisionHistory/Title.css index 48e9ebba3..abe310699 100644 --- a/src/core/client/admin/App/DecisionHistory/Title.css +++ b/src/core/client/admin/App/DecisionHistory/Title.css @@ -1,16 +1,20 @@ .root { - padding: 0 calc(0.5 * var(--mini-unit)); - background-color: #f2f2f2; - color: var(--palette-text-primary); - border-bottom: 1px solid var(--palette-grey-lighter); + background: var(--v2-palette-decision-history-title-background); + padding: var(--v2-spacing-1); + color: var(--v2-palette-text-primary); + border-bottom: 1px solid var(--v2-palette-decision-history-border); + font-size: var(--v2-font-size-icon-medium); +} + +.icon { + margin-right: var(--v2-spacing-2); } .text { text-transform: uppercase; - font-size: calc(12rem / var(--rem-base)); - font-weight: var(--font-weight-medium); - font-family: var(--font-family-sans-serif); - line-height: calc(12em / 12); - letter-spacing: calc(0.2em / 12); - color: var(--palette-text-primary); + font-weight: var(--v2-font-weight-primary-bold); + color: var(--v2-palette-text-primary); + font-size: var(--v2-font-size-2); + line-height: 1; + font-family: var(--v2-font-family-primary); } diff --git a/src/core/client/admin/App/DecisionHistory/Title.tsx b/src/core/client/admin/App/DecisionHistory/Title.tsx index d56a34daf..f72cfc295 100644 --- a/src/core/client/admin/App/DecisionHistory/Title.tsx +++ b/src/core/client/admin/App/DecisionHistory/Title.tsx @@ -1,17 +1,17 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; -import { Flex, Icon, Typography } from "coral-ui/components"; +import { Flex, Icon } from "coral-ui/components/v2"; import styles from "./Title.css"; const Title: FunctionComponent = () => ( - history{" "} + + history + - - Your Decision History - + Your Decision History ); diff --git a/src/core/client/admin/App/DecisionHistory/Username.css b/src/core/client/admin/App/DecisionHistory/Username.css new file mode 100644 index 000000000..fa7603d5d --- /dev/null +++ b/src/core/client/admin/App/DecisionHistory/Username.css @@ -0,0 +1,7 @@ +.root { + color: var(--v2-palette-username-emphasis); + font-weight: var(--v2-font-weight-secondary-bold); + font-family: var(--v2-font-family-secondary); + line-height: var(--v2-line-height-body-short); + font-size: var(--v2-font-size-3); +} diff --git a/src/core/client/admin/App/DecisionHistory/Username.tsx b/src/core/client/admin/App/DecisionHistory/Username.tsx new file mode 100644 index 000000000..9e98a5839 --- /dev/null +++ b/src/core/client/admin/App/DecisionHistory/Username.tsx @@ -0,0 +1,13 @@ +import React, { FunctionComponent } from "react"; + +import styles from "./Username.css"; + +interface Props { + username: string; +} + +const Username: FunctionComponent = ({ username }) => ( + {username} +); + +export default Username; diff --git a/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedComment.spec.tsx.snap b/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedComment.spec.tsx.snap index 41e70e055..bcd6da0b9 100644 --- a/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedComment.spec.tsx.snap +++ b/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedComment.spec.tsx.snap @@ -17,13 +17,9 @@ exports[`renders correctly 1`] = `