add more admin/auth/ui components icons

coralproject · Jun 20, 2023 · b814a81 · b814a81
1 parent b5b77f0
commit b814a81
Show file tree

Hide file tree

Showing 31 changed files with 228 additions and 80 deletions.
diff --git a/src/core/client/admin/components/ExperimentalCallOut.tsx b/src/core/client/admin/components/ExperimentalCallOut.tsx
@@ -1,7 +1,8 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
-import { CallOut, Flex, Icon } from "coral-ui/components/v2";
+import { LabFlaskIcon, SvgIcon } from "coral-ui/components/icons";
+import { CallOut, Flex } from "coral-ui/components/v2";
 
 import styles from "./ExperimentalCallOut.css";
 
@@ -14,9 +15,7 @@ const ExperimentalCallOut: FunctionComponent<ExperimentalCallOutProps> = ({
 }) => (
   <CallOut color="primary" fullWidth>
     <Flex>
-      <Icon size="md" className={styles.icon}>
-        new_releases
-      </Icon>
+      <SvgIcon className={styles.icon} size="md" Icon={LabFlaskIcon} />
       <Localized id="configure-experimentalFeature">
         <span className={styles.title}>Experimental Feature</span>
       </Localized>

diff --git a/...client/admin/routes/Configure/sections/Auth/SSOSigningSecretRotation/RotationDropdown.tsx b/...client/admin/routes/Configure/sections/Auth/SSOSigningSecretRotation/RotationDropdown.tsx
@@ -1,12 +1,12 @@
 import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
+import { ArrowsDownIcon, SvgIcon } from "coral-ui/components/icons";
 import {
   Button,
   ClickOutside,
   Dropdown,
   DropdownButton,
-  Icon,
   Popover,
 } from "coral-ui/components/v2";
 
@@ -61,7 +61,7 @@ const RotationDropDown: FunctionComponent<Props> = ({
             <Localized id="configure-auth-sso-rotate-rotate">
               <span className={styles.rotate}>Rotate</span>
             </Localized>
-            <Icon>arrow_drop_down</Icon>
+            <SvgIcon size="xs" Icon={ArrowsDownIcon} />
           </Button>
         )}
       </Popover>

diff --git a/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx
@@ -11,6 +11,7 @@ import {
   withFragmentContainer,
 } from "coral-framework/lib/relay";
 import { GQLSettings } from "coral-framework/schema";
+import { CheckCircleIcon } from "coral-ui/components/icons";
 import { AppNotification, Button, CallOut, Flex } from "coral-ui/components/v2";
 
 import { EmailConfigContainer_email } from "coral-admin/__generated__/EmailConfigContainer_email.graphql";
@@ -54,7 +55,7 @@ const EmailConfigContainer: React.FunctionComponent<Props> = ({
           id="configure-smtp-test-success"
           vars={{ email: viewer.email }}
         >
-          <AppNotification icon="check_circle_outline" onClose={clearMessage}>
+          <AppNotification Icon={CheckCircleIcon} onClose={clearMessage}>
             Test email has been sent to {viewer.email}
           </AppNotification>
         </Localized>,

diff --git a/...e/sections/ModerationPhases/ConfigureExternalModerationPhase/RotateSigningSecretModal.tsx b/...e/sections/ModerationPhases/ConfigureExternalModerationPhase/RotateSigningSecretModal.tsx
@@ -7,6 +7,7 @@ import { useNotification } from "coral-admin/App/GlobalNotification";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { InvalidRequestError } from "coral-framework/lib/errors";
 import { useMutation } from "coral-framework/lib/relay";
+import { CheckCircleIcon } from "coral-ui/components/icons";
 import {
   Button,
   CallOut,
@@ -58,7 +59,7 @@ const RotateWebhookEndpointSigningSecretModal: FunctionComponent<Props> = ({
         // Post a notification about the successful change.
         setMessage(
           <Localized id="configure-moderationPhases-rotateSigningSecretSuccessUseNewSecret">
-            <AppNotification icon="check_circle_outline" onClose={clearMessage}>
+            <AppNotification Icon={CheckCircleIcon} onClose={clearMessage}>
               External moderation phase signing secret has been rotated. Please
               ensure you update your integrations to use the new secret below.
             </AppNotification>

diff --git a/src/core/client/admin/routes/Configure/sections/Sites/AddSiteRoute.tsx b/src/core/client/admin/routes/Configure/sections/Sites/AddSiteRoute.tsx
@@ -5,6 +5,7 @@ import { graphql } from "react-relay";
 
 import { useNotification } from "coral-admin/App/GlobalNotification";
 import { withRouteConfig } from "coral-framework/lib/router";
+import { CheckCircleIcon } from "coral-ui/components/icons";
 import { AppNotification } from "coral-ui/components/v2";
 
 import { AddSiteRouteQueryResponse } from "coral-admin/__generated__/AddSiteRouteQuery.graphql";
@@ -31,7 +32,7 @@ const AddSiteRoute: FunctionComponent<Props> = (props) => {
             org: (props.data && props.data.settings.organization.name) ?? "",
           }}
         >
-          <AppNotification icon="check_circle_outline" onClose={clearMessage}>
+          <AppNotification Icon={CheckCircleIcon} onClose={clearMessage}>
             {name} has been added to{" "}
             {props.data && props.data.settings.organization.name}
           </AppNotification>

diff --git a/src/core/client/admin/routes/Configure/sections/Sites/SiteRoute.tsx b/src/core/client/admin/routes/Configure/sections/Sites/SiteRoute.tsx
@@ -4,6 +4,7 @@ import { graphql } from "react-relay";
 
 import { useNotification } from "coral-admin/App/GlobalNotification";
 import { withRouteConfig } from "coral-framework/lib/router";
+import { CheckCircleIcon } from "coral-ui/components/icons";
 import { AppNotification } from "coral-ui/components/v2";
 
 import { SiteRouteQueryResponse } from "coral-admin/__generated__/SiteRouteQuery.graphql";
@@ -22,7 +23,7 @@ const AddSiteRoute: FunctionComponent<Props> = ({ data }) => {
     (name: string) => {
       setMessage(
         <Localized id="configure-sites-edit-success" vars={{ site: name }}>
-          <AppNotification icon="check_circle_outline" onClose={clearMessage}>
+          <AppNotification Icon={CheckCircleIcon} onClose={clearMessage}>
             Changes to {name} have been saved
           </AppNotification>
         </Localized>

diff --git a/...Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/RotateSigningSecretModal.tsx b/...Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/RotateSigningSecretModal.tsx
@@ -7,6 +7,7 @@ import { useNotification } from "coral-admin/App/GlobalNotification";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { InvalidRequestError } from "coral-framework/lib/errors";
 import { useMutation } from "coral-framework/lib/relay";
+import { CheckCircleIcon } from "coral-ui/components/icons";
 import {
   Button,
   CallOut,
@@ -58,7 +59,7 @@ const RotateWebhookEndpointSigningSecretModal: FunctionComponent<Props> = ({
         // Post a notification about the successful change.
         setMessage(
           <Localized id="configure-webhooks-rotateSigningSecretSuccessUseNewSecret">
-            <AppNotification icon="check_circle_outline" onClose={clearMessage}>
+            <AppNotification Icon={CheckCircleIcon} onClose={clearMessage}>
               Webhook endpoint signing secret has been rotated. Please ensure
               you update your integrations to use the new secret below.
             </AppNotification>

diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx
@@ -2,7 +2,8 @@ import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import React, { FunctionComponent, HTMLAttributes } from "react";
 
-import { Button, Icon } from "coral-ui/components/v2";
+import { ArrowRightIcon, SvgIcon } from "coral-ui/components/icons";
+import { Button } from "coral-ui/components/v2";
 
 import styles from "./ModerateAllOption.css";
 
@@ -38,9 +39,7 @@ const ModerateAllOption: FunctionComponent<Props> = ({
           <span>Moderate all stories</span>
         </Localized>
         <span>
-          <Icon className={styles.icon} size="md">
-            keyboard_arrow_right
-          </Icon>
+          <SvgIcon Icon={ArrowRightIcon} size="xs" className={styles.icon} />
         </span>
       </Button>
     </li>

diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css
@@ -1,4 +1,3 @@
-
 @import "./variables.css";
 
 .root {
@@ -33,7 +32,7 @@
   font-weight: var(--font-weight-primary-semi-bold);
   padding-left: calc(0.5 * var(--mini-unit));
   line-height: calc(16em / 13);
-  margin-top: -2px;
 
   color: $story-search-results-see-all-label;
+  display: flex;
 }
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx
@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import React, { FunctionComponent, HTMLAttributes } from "react";
 
-import { Icon } from "coral-ui/components/v2";
+import { ArrowRightIcon, SvgIcon } from "coral-ui/components/icons";
 
 import styles from "./SeeAllOption.css";
 
@@ -30,9 +30,7 @@ const SeeAllOption: FunctionComponent<Props> = ({
         <Localized id="moderate-searchBar-seeAllResults">
           <span>See all results</span>
         </Localized>
-        <Icon className={styles.icon} size="md">
-          keyboard_arrow_right
-        </Icon>
+        <SvgIcon Icon={ArrowRightIcon} size="xs" className={styles.icon} />
       </a>
     </li>
   );

diff --git a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.css
@@ -38,6 +38,10 @@
   margin-bottom: var(--spacing-4);
 }
 
+.error span {
+  display: inline-block;
+}
+
 .strong {
   display: inline;
 

diff --git a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx
@@ -16,7 +16,7 @@ import { InvalidRequestError } from "coral-framework/lib/errors";
 import { FormError, OnSubmit } from "coral-framework/lib/form";
 import { useMutation } from "coral-framework/lib/relay";
 import CLASSES from "coral-stream/classes";
-import { Icon } from "coral-ui/components/v2";
+import { AlertCircleIcon, CheckIcon, SvgIcon } from "coral-ui/components/icons";
 import { Button, CallOut } from "coral-ui/components/v3";
 
 import SetEmailMutation from "./SetEmailMutation";
@@ -75,22 +75,22 @@ const AddEmailAddressContainer: FunctionComponent = () => {
                 </div>
               </Localized>
               <UnorderedList>
-                <ListItem icon={<Icon>done</Icon>}>
+                <ListItem icon={<SvgIcon Icon={CheckIcon} size="xs" />}>
                   <Localized id="addEmailAddress-receiveUpdates">
                     <div className={styles.description}>
                       Receive updates regarding any changes to your account
                       (email address, username, password, etc.)
                     </div>
                   </Localized>
                 </ListItem>
-                <ListItem icon={<Icon>done</Icon>}>
+                <ListItem icon={<SvgIcon Icon={CheckIcon} size="xs" />}>
                   <Localized id="addEmailAddress-allowDownload">
                     <div className={styles.description}>
                       Allow you to download your comments.
                     </div>
                   </Localized>
                 </ListItem>
-                <ListItem icon={<Icon>done</Icon>}>
+                <ListItem icon={<SvgIcon Icon={CheckIcon} size="xs" />}>
                   <Localized id="addEmailAddress-sendNotifications">
                     <div className={styles.description}>
                       Send comment notifications that you have chosen to
@@ -104,7 +104,7 @@ const AddEmailAddressContainer: FunctionComponent = () => {
                   <CallOut
                     className={CLASSES.login.error}
                     color="error"
-                    icon={<Icon size="sm">error</Icon>}
+                    icon={<SvgIcon Icon={AlertCircleIcon} />}
                     title={submitError}
                   />
                 </div>

diff --git a/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.css b/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.css
@@ -7,4 +7,6 @@
   flex-grow: 0;
   flex-shrink: 0;
   width: 20px;
+  display: flex;
+  margin-top: var(--spacing-1);
 }
diff --git a/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx b/src/core/client/auth/views/AddEmailAddress/UnorderedList/ListItem.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Icon } from "coral-ui/components/v2";
+import { CheckIcon, SvgIcon } from "coral-ui/components/icons";
 
 import styles from "./ListItem.css";
 
@@ -17,7 +17,7 @@ const ListItem: FunctionComponent<Props> = (props) => (
 );
 
 ListItem.defaultProps = {
-  icon: <Icon>keyboard_arrow_right</Icon>,
+  icon: <SvgIcon Icon={CheckIcon} size="xs" />,
 };
 
 export default ListItem;
diff --git a/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx b/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx
@@ -6,7 +6,8 @@ import EmailField from "coral-auth/components/EmailField";
 import SetPasswordField from "coral-auth/components/SetPasswordField";
 import UsernameField from "coral-auth/components/UsernameField";
 import { FormError, OnSubmit } from "coral-framework/lib/form";
-import { Flex, Icon } from "coral-ui/components/v2";
+import { EmailIcon, SvgIcon } from "coral-ui/components/icons";
+import { Flex } from "coral-ui/components/v2";
 import { Button, CallOut } from "coral-ui/components/v3";
 
 import styles from "./SignUpWithEmail.css";
@@ -51,9 +52,7 @@ const SignUp: FunctionComponent<Props> = (props) => {
               upperCase
             >
               <Flex alignItems="center" justifyContent="center">
-                <Icon size="md" className={styles.icon}>
-                  email
-                </Icon>
+                <SvgIcon size="md" className={styles.icon} Icon={EmailIcon} />
                 <Localized id="signUp-signUpWithEmail">
                   <span>Sign up with Email</span>
                 </Localized>

diff --git a/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx b/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
@@ -19,6 +19,7 @@ import { PropTypesOf } from "coral-framework/types";
 import CLASSES from "coral-stream/classes";
 import {
   AddIcon,
+  AlarmClockIcon,
   AlertCircleIcon,
   ImageAddIcon,
   SvgIcon,
@@ -400,7 +401,7 @@ const CommentForm: FunctionComponent<Props> = ({
                   className={CLASSES.editComment.remainingTime}
                   fullWidth
                 >
-                  <MessageIcon>alarm</MessageIcon>
+                  <MessageIcon Icon={AlarmClockIcon} />
                   <Localized
                     id="comments-editCommentForm-editRemainingTime"
                     elems={{ time: <RelativeTime date={editableUntil} live /> }}

diff --git a/src/core/client/ui/components/icons/LabFlaskIcon.tsx b/src/core/client/ui/components/icons/LabFlaskIcon.tsx
@@ -0,0 +1,70 @@
+import React, { FunctionComponent } from "react";
+
+const LabFlaskIcon: FunctionComponent = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.25 -0.25 24.5 24.5">
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.72601 0.75H17.226"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.726 8.25V0.75H8.22603V8.25L1.48903 18.615C1.1949 19.0675 1.02828 19.5909 1.00673 20.1302C0.985172 20.6694 1.10948 21.2045 1.36655 21.679C1.62362 22.1535 2.00393 22.5499 2.4674 22.8264C2.93088 23.1029 3.46035 23.2492 4.00003 23.25H19.948C20.488 23.2499 21.018 23.1041 21.4821 22.8279C21.9461 22.5517 22.327 22.1554 22.5846 21.6808C22.8421 21.2061 22.9668 20.6708 22.9454 20.1312C22.924 19.5916 22.7573 19.0678 22.463 18.615L15.726 8.25Z"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5.30103 12.75H18.651"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M14.226 17.25H17.226"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.726 15.75V18.75"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.726 3.75H12.726"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.726 6.75H12.726"
+      ></path>
+      <path
+        stroke="currentColor"
+        d="M6.72601 19.875C6.51891 19.875 6.35101 19.7071 6.35101 19.5C6.35101 19.2929 6.51891 19.125 6.72601 19.125"
+      ></path>
+      <path
+        stroke="currentColor"
+        d="M6.72601 19.875C6.93312 19.875 7.10101 19.7071 7.10101 19.5C7.10101 19.2929 6.93312 19.125 6.72601 19.125"
+      ></path>
+      <g>
+        <path
+          stroke="currentColor"
+          d="M9.72601 16.875C9.51891 16.875 9.35101 16.7071 9.35101 16.5C9.35101 16.2929 9.51891 16.125 9.72601 16.125"
+        ></path>
+        <path
+          stroke="currentColor"
+          d="M9.72601 16.875C9.93312 16.875 10.101 16.7071 10.101 16.5C10.101 16.2929 9.93312 16.125 9.72601 16.125"
+        ></path>
+      </g>
+    </svg>
+  );
+};
+
+export default LabFlaskIcon;