Merge branch 'develop' into fix/separate-client-server

# Conflicts: # client/src/core/client/account/routes/download/Download/Sorry.css # client/src/core/client/admin/routes/Configure/sections/Organization/SiteRowContainer.css # client/src/core/client/admin/routes/Configure/sections/Sites/AllowedOriginsTextarea.css # client/src/core/client/admin/routes/Configure/sections/Sites/AllowedOriginsTextarea.tsx # client/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.css # client/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/ListItem.tsx # client/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.css # client/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/UnorderedList.tsx # client/src/core/client/admin/routes/Login/views/AddEmailAddress/UnorderedList/index.ts # client/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.css # client/src/core/client/stream/tabs/Comments/Comment/FeaturedTag.css # client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx # client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/twitter.png # client/src/core/client/stream/tabs/Comments/Comment/setSpamBanned.ts # client/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx # client/src/core/client/stream/test/comments/stream/moderation.spec.tsx # client/src/core/client/ui/components/v2/Button/ButtonIcon.css # client/src/core/client/ui/components/v2/Button/ButtonIcon.tsx # client/src/core/client/ui/components/v2/Icon/Icon.css # client/src/core/client/ui/components/v2/Icon/Icon.tsx # client/src/core/client/ui/components/v2/Icon/README.mdx # client/src/core/client/ui/components/v2/Icon/index.ts # server/package-lock.json # src/core/client/ui/components/icons/ButtonSvgIcon/ButtonSvgIcon.css # src/core/client/ui/components/icons/ButtonSvgIcon/ButtonSvgIcon.tsx # src/core/client/ui/components/v2/Button/ButtonIcon.css # src/core/client/ui/components/v2/Button/ButtonIcon.tsx
coralproject · Jul 25, 2023 · 7e8f964 · 7e8f964
2 parents e227498 + 727beba
commit 7e8f964
Show file tree

Hide file tree

Showing 376 changed files with 5,978 additions and 1,738 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "8.3.1",
+  "version": "8.4.2",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [
@@ -257,6 +257,7 @@
     "@typescript-eslint/eslint-plugin": "^3.4.0",
     "@typescript-eslint/eslint-plugin-tslint": "^3.4.0",
     "@typescript-eslint/parser": "^3.4.0",
+    "address": "^1.2.2",
     "autoprefixer": "^9.8.6",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.3.0",

diff --git a/client/src/core/client/account/routes/download/Download/DownloadDescription.css b/client/src/core/client/account/routes/download/Download/DownloadDescription.css
@@ -47,4 +47,5 @@
   display: inline-block;
   min-width: 16px;
   margin-right: var(--spacing-2);
+  padding-top: var(--spacing-1);
 }
diff --git a/client/src/core/client/account/routes/download/Download/DownloadDescription.tsx b/client/src/core/client/account/routes/download/Download/DownloadDescription.tsx
@@ -2,7 +2,8 @@ import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
-import { Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
+import { CheckIcon, SvgIcon } from "coral-ui/components/icons";
+import { Flex, HorizontalGutter } from "coral-ui/components/v2";
 
 import styles from "./DownloadDescription.css";
 
@@ -33,9 +34,7 @@ const DownloadDescription: FunctionComponent = () => {
           <ul className={styles.list}>
             <li>
               <Flex alignItems="flex-start">
-                <Icon size="md" className={styles.bullet}>
-                  check
-                </Icon>
+                <SvgIcon Icon={CheckIcon} className={styles.bullet} />
                 <Localized id="download-landingPage-contentsDate">
                   <div className={cn(styles.sectionText, styles.listContent)}>
                     When you wrote the comment
@@ -45,9 +44,7 @@ const DownloadDescription: FunctionComponent = () => {
             </li>
             <li>
               <Flex alignItems="flex-start">
-                <Icon size="md" className={styles.bullet}>
-                  check
-                </Icon>
+                <SvgIcon Icon={CheckIcon} className={styles.bullet} />
                 <Localized id="download-landingPage-contentsUrl">
                   <div className={cn(styles.sectionText, styles.listContent)}>
                     The permalink URL for the comment
@@ -57,9 +54,7 @@ const DownloadDescription: FunctionComponent = () => {
             </li>
             <li>
               <Flex alignItems="flex-start">
-                <Icon size="md" className={styles.bullet}>
-                  check
-                </Icon>
+                <SvgIcon Icon={CheckIcon} className={styles.bullet} />
                 <Localized id="download-landingPage-contentsText">
                   <div className={cn(styles.sectionText, styles.listContent)}>
                     The comment text
@@ -69,9 +64,7 @@ const DownloadDescription: FunctionComponent = () => {
             </li>
             <li>
               <Flex alignItems="flex-start">
-                <Icon size="md" className={styles.bullet}>
-                  check
-                </Icon>
+                <SvgIcon Icon={CheckIcon} className={styles.bullet} />
                 <Localized id="download-landingPage-contentsStoryUrl">
                   <div className={cn(styles.sectionText, styles.listContent)}>
                     The URL on the article or story where the comment appears

diff --git a/client/src/core/client/account/routes/download/Download/Sorry.css b/client/src/core/client/account/routes/download/Download/Sorry.css
@@ -0,0 +1,3 @@
+.alertIcon {
+  display: inline-block !important;
+}
diff --git a/client/src/core/client/account/routes/download/Download/Sorry.tsx b/client/src/core/client/account/routes/download/Download/Sorry.tsx
@@ -1,14 +1,16 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Icon } from "coral-ui/components/v2";
+import { AlertCircleIcon, SvgIcon } from "coral-ui/components/icons";
 import { CallOut } from "coral-ui/components/v3";
 
+import styles from "./Sorry.css";
+
 const Sorry: FunctionComponent = () => {
   return (
     <CallOut
       color="error"
-      icon={<Icon>error</Icon>}
+      icon={<SvgIcon Icon={AlertCircleIcon} className={styles.alertIcon} />}
       titleWeight="semiBold"
       title={
         <Localized id="download-landingPage-sorry">

diff --git a/client/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx b/client/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx
@@ -1,13 +1,16 @@
 import React, { FunctionComponent } from "react";
 
-import { Icon } from "coral-ui/components/v2";
+import { CheckCircleIcon, SvgIcon } from "coral-ui/components/icons";
 
 import styles from "./ApprovedIcon.css";
 
 const ApprovedIcon: FunctionComponent = () => (
-  <Icon size="md" className={styles.root} data-testid="approved-icon">
-    check_circled
-  </Icon>
+  <SvgIcon
+    size="md"
+    className={styles.root}
+    data-testid="approved-icon"
+    Icon={CheckCircleIcon}
+  />
 );
 
 export default ApprovedIcon;
diff --git a/client/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css b/client/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css
@@ -6,3 +6,7 @@
   color: var(--palette-text-100);
   margin-right: 10px;
 }
+
+.historyIcon span {
+  display: flex;
+}
diff --git a/client/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx b/client/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx
@@ -1,12 +1,8 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
-import {
-  BaseButton,
-  ClickOutside,
-  Icon,
-  Popover,
-} from "coral-ui/components/v2";
+import { SvgIcon, TimeReverseIcon } from "coral-ui/components/icons";
+import { BaseButton, ClickOutside, Popover } from "coral-ui/components/v2";
 
 import DecisionHistoryQuery from "./DecisionHistoryQuery";
 
@@ -39,7 +35,7 @@ const DecisionHistoryButton: FunctionComponent = () => (
           className={styles.historyIcon}
           data-testid="decisionHistory-toggle"
         >
-          <Icon size="lg">history</Icon>
+          <SvgIcon size="lg" Icon={TimeReverseIcon} />
         </BaseButton>
       )}
     </Popover>

diff --git a/client/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css b/client/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css
@@ -7,4 +7,10 @@ $moderateCardDecisionHistoryLinkTextColor: $colors-teal-700;
   line-height: 1.33;
   color: $moderateCardDecisionHistoryLinkTextColor;
   font-style: var(--font-style-underline);
+  display: flex;
+  align-items: center;
+}
+
+.arrow {
+  margin-left: var(--spacing-1);
 }
diff --git a/client/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx b/client/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx
@@ -2,7 +2,8 @@ import { Localized } from "@fluent/react/compat";
 import { Link } from "found";
 import React, { FunctionComponent } from "react";
 
-import { Icon, TextLink } from "coral-ui/components/v2";
+import { ArrowRightIcon, SvgIcon } from "coral-ui/components/icons";
+import { TextLink } from "coral-ui/components/v2";
 
 import styles from "./GoToCommentLink.css";
 
@@ -22,7 +23,7 @@ const GoToCommentLink: FunctionComponent<Props> = (props) => {
       <Localized id="decisionHistory-goToComment">
         <span>Go to comment</span>
       </Localized>{" "}
-      <Icon>chevron_right</Icon>
+      <SvgIcon className={styles.arrow} size="xs" Icon={ArrowRightIcon} />
     </Link>
   );
 };

diff --git a/client/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx b/client/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx
@@ -1,13 +1,16 @@
 import React, { FunctionComponent } from "react";
 
-import { Icon } from "coral-ui/components/v2";
+import { RemoveCircleIcon, SvgIcon } from "coral-ui/components/icons";
 
 import styles from "./RejectedIcon.css";
 
 const RejectedIcon: FunctionComponent = () => (
-  <Icon size="md" className={styles.root} data-testid="rejected-icon">
-    cancel
-  </Icon>
+  <SvgIcon
+    size="md"
+    className={styles.root}
+    data-testid="rejected-icon"
+    Icon={RemoveCircleIcon}
+  />
 );
 
 export default RejectedIcon;
diff --git a/client/src/core/client/admin/App/DecisionHistory/Title.tsx b/client/src/core/client/admin/App/DecisionHistory/Title.tsx
@@ -1,15 +1,14 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Flex, Icon } from "coral-ui/components/v2";
+import { SvgIcon, TimeReverseIcon } from "coral-ui/components/icons";
+import { Flex } from "coral-ui/components/v2";
 
 import styles from "./Title.css";
 
 const Title: FunctionComponent = () => (
   <Flex className={styles.root} alignItems="center">
-    <Icon className={styles.icon} size="md">
-      history
-    </Icon>
+    <SvgIcon className={styles.icon} size="md" Icon={TimeReverseIcon} />
     <Localized id="decisionHistory-yourDecisionHistory">
       <span className={styles.text}>Your Decision History</span>
     </Localized>

diff --git a/client/src/core/client/admin/App/UserMenu/UserMenu.css b/client/src/core/client/admin/App/UserMenu/UserMenu.css
@@ -15,5 +15,5 @@ $userMenuButtonColor: var(--palette-text-100);
   color: $userMenuButtonColor;
   font-size: var(--font-size-4);
   margin-left: 2px;
-  margin-right: 1px;
+  margin-right: var(--spacing-1);
 }
diff --git a/client/src/core/client/admin/App/UserMenu/UserMenu.tsx b/client/src/core/client/admin/App/UserMenu/UserMenu.tsx
@@ -1,9 +1,14 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
+import {
+  ArrowsDownIcon,
+  ArrowsUpIcon,
+  ButtonSvgIcon,
+  SingleNeutralCircleIcon,
+} from "coral-ui/components/icons";
 import {
   Button,
-  ButtonIcon,
   ClickOutside,
   Dropdown,
   DropdownButton,
@@ -63,14 +68,19 @@ const UserMenu: FunctionComponent<Props> = (props) => (
           variant="text"
           uppercase={false}
         >
-          <ButtonIcon className={styles.icon} size="lg">
-            account_circle
-          </ButtonIcon>
+          <ButtonSvgIcon
+            className={styles.icon}
+            size="lg"
+            Icon={SingleNeutralCircleIcon}
+          />
           <span className={styles.buttonText}>{props.username}</span>
           {
-            <ButtonIcon className={styles.icon} size="lg">
-              {visible ? "arrow_drop_up" : "arrow_drop_down"}
-            </ButtonIcon>
+            <ButtonSvgIcon
+              className={styles.icon}
+              Icon={visible ? ArrowsUpIcon : ArrowsDownIcon}
+              size="xs"
+              strokeWidth="semibold"
+            />
           }
         </Button>
       )}

diff --git a/client/src/core/client/admin/components/BanModal.css b/client/src/core/client/admin/components/BanModal.css
@@ -35,3 +35,7 @@ $ban-modal-text: var(--palette-text-500);
 .customizeMessage {
   align-self: flex-start;
 }
+
+.customizeMessageArrowsIcon {
+  padding-left: var(--spacing-1);
+}