Switch previous callouts to use icon and title

CORL-969
coralproject · Apr 21, 2020 · 04a78c9 · 04a78c9
1 parent 1f57298
commit 04a78c9
Show file tree

Hide file tree

Showing 14 changed files with 71 additions and 119 deletions.
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormClosed.tsx b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormClosed.tsx
@@ -28,6 +28,7 @@ const PostCommentFormClosed: FunctionComponent<Props> = (props) => (
       color="mono"
       icon={<Icon size="sm">feedback</Icon>}
       className={cn(CLASSES.createComment.closed)}
+      titleWeight="semiBold"
       title={<Markdown>{props.message}</Markdown>}
     />
   </div>

diff --git a/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.css b/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.css
@@ -43,18 +43,6 @@
   color: var(--v2-colors-mono-100);
 }
 
-.successIcon {
-  min-width: 22px;
-  color: var(--v2-colors-green-500);
-  margin-right: var(--v2-spacing-2);
-}
-
-.errorIcon {
-  min-width: 22px;
-  color: var(--v2-colors-red-500);
-  margin-right: var(--v2-spacing-2);
-}
-
 .callout {
   margin-top: var(--v2-spacing-1);
   margin-bottom: var(--v2-spacing-5);

diff --git a/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx b/src/core/client/stream/tabs/Profile/MyComments/DownloadCommentsContainer.tsx
@@ -123,11 +123,9 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
           )}
           visible={showSuccessMessage}
           onClose={onCloseSuccess}
-        >
-          <Flex justifyContent="flex-start" alignItems="center">
-            <Icon size="sm" className={styles.successIcon}>
-              check_circle
-            </Icon>
+          icon={<Icon size="sm">check_circle</Icon>}
+          titleWeight="semiBold"
+          title={
             <Localized
               id="profile-account-download-comments-requestSubmitted"
               $value={scaled}
@@ -138,8 +136,8 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
                 download your comment history again in {scaled} {unit}.
               </span>
             </Localized>
-          </Flex>
-        </CallOut>
+          }
+        />
       )}
       {showErrorMessage && (
         <CallOut
@@ -150,20 +148,18 @@ const DownloadCommentsContainer: FunctionComponent<Props> = ({ viewer }) => {
           )}
           visible={showErrorMessage}
           onClose={onCloseError}
-        >
-          <Flex justifyContent="flex-start" alignItems="center">
-            <Icon size="sm" className={styles.errorIcon}>
-              warning
-            </Icon>
+          icon={<Icon size="sm">warning</Icon>}
+          titleWeight="semiBold"
+          title={
             <Localized
               id="profile-account-download-comments-error"
               $value={scaled}
               $unit={unit}
             >
               <span>We were unable to complete your download request.</span>
             </Localized>
-          </Flex>
-        </CallOut>
+          }
+        />
       )}
     </div>
   );

diff --git a/src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.css b/src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.css
@@ -50,15 +50,3 @@
 .callOut {
   padding-bottom: var(--v2-spacing-2);
 }
-
-.successIcon {
-  min-width: 22px;
-  color: var(--v2-colors-green-500);
-  margin-right: var(--v2-spacing-2);
-}
-
-.errorIcon {
-  min-width: 22px;
-  color: var(--v2-colors-red-500);
-  margin-right: var(--v2-spacing-2);
-}
diff --git a/src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.tsx b/src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.tsx
@@ -12,7 +12,6 @@ import CLASSES from "coral-stream/classes";
 import {
   CheckBox,
   FieldSet,
-  Flex,
   FormField,
   HorizontalGutter,
   HorizontalRule,
@@ -226,28 +225,28 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
                 (submitSucceeded && showSuccess)) && (
                 <div className={styles.callOut}>
                   {submitError && showError && (
-                    <CallOut color="negative" onClose={closeError}>
-                      <Flex justifyContent="flex-start" alignItems="center">
-                        <Icon size="sm" className={styles.errorIcon}>
-                          warning
-                        </Icon>
-                        <span>{submitError}</span>
-                      </Flex>
-                    </CallOut>
+                    <CallOut
+                      color="negative"
+                      onClose={closeError}
+                      icon={<Icon size="sm">warning</Icon>}
+                      titleWeight="semiBold"
+                      title={<span>{submitError}</span>}
+                    />
                   )}
                   {submitSucceeded && showSuccess && (
-                    <CallOut color="positive" onClose={closeSuccess}>
-                      <Flex justifyContent="flex-start" alignItems="center">
-                        <Icon size="sm" className={styles.successIcon}>
-                          check_circle
-                        </Icon>
+                    <CallOut
+                      color="positive"
+                      onClose={closeSuccess}
+                      icon={<Icon size="sm">check_circle</Icon>}
+                      titleWeight="semiBold"
+                      title={
                         <Localized id="profile-account-notifications-updated">
                           <span>
                             Your notification settings have been updated
                           </span>
                         </Localized>
-                      </Flex>
-                    </CallOut>
+                      }
+                    />
                   )}
                 </div>
               )}

diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.css b/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.css
@@ -53,16 +53,6 @@
   color: var(--v2-colors-mono-500);
 }
 
-.successIcon {
-  min-width: 25px;
-  color: var(--v2-colors-green-500);
-}
-
-.errorIcon {
-  min-width: 25px;
-  color: var(--v2-colors-red-500);
-}
-
 .footer {
   margin-top: var(--v2-spacing-4);
   margin-bottom: var(--v2-spacing-4);

diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/ChangeEmail/ChangeEmailContainer.tsx
@@ -292,22 +292,23 @@ const changeEmailContainer: FunctionComponent<Props> = ({
       )}
       {showSuccessMessage && (
         <div className={styles.successMessage}>
-          <CallOut color="positive" onClose={onCloseSuccess}>
-            <Flex justifyContent="flex-start" alignItems="center">
-              <Icon className={styles.successIcon} size="sm">
-                check_circle
-              </Icon>
+          <CallOut
+            color="positive"
+            onClose={onCloseSuccess}
+            icon={<Icon size="sm">check_circle</Icon>}
+            titleWeight="semiBold"
+            title={
               <Localized id="profile-changeEmail-success">
                 Your email has been successfully updated
               </Localized>
-            </Flex>
-          </CallOut>
+            }
+          />
         </div>
       )}
       {confirmationResent && (
         <CallOut className={CLASSES.verifyEmail.resentMessage} color="mono">
           <Localized id="profile-changeEmail-resent">
-            <div>Your confirmation email has been re-sent.</div>
+            <span>Your confirmation email has been re-sent.</span>
           </Localized>
         </CallOut>
       )}
@@ -410,14 +411,10 @@ const changeEmailContainer: FunctionComponent<Props> = ({
                     <CallOut
                       className={CLASSES.myEmail.form.errorMessage}
                       color="negative"
-                    >
-                      <Flex justifyContent="flex-start" alignItems="center">
-                        <Icon size="sm" className={styles.errorIcon}>
-                          error
-                        </Icon>
-                        <span>{submitError}</span>
-                      </Flex>
-                    </CallOut>
+                      icon={<Icon size="sm">error</Icon>}
+                      titleWeight="semiBold"
+                      title={<span>{submitError}</span>}
+                    />
                   )}
                 </HorizontalGutter>
                 <Flex

diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangePassword.css b/src/core/client/stream/tabs/Profile/Settings/ChangePassword.css
@@ -41,8 +41,3 @@
 .successContainer {
   margin-bottom: var(--v2-spacing-3);
 }
-
-.successIcon {
-  min-width: 25px;
-  color: var(--v2-colors-green-500);
-}
diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx b/src/core/client/stream/tabs/Profile/Settings/ChangePassword.tsx
@@ -118,16 +118,14 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
             color="positive"
             onClose={onCloseSuccess}
             className={CLASSES.myPassword.form.successMessage}
-          >
-            <Flex justifyContent="flex-start" alignItems="center">
-              <Icon size="sm" className={styles.successIcon}>
-                check_circle
-              </Icon>
+            icon={<Icon size="sm">check_circle</Icon>}
+            titleWeight="semiBold"
+            title={
               <Localized id="profile-account-changePassword-updated">
                 <span>Your password has been updated</span>
               </Localized>
-            </Flex>
-          </CallOut>
+            }
+          />
         </div>
       )}
       {showForm && (
@@ -211,9 +209,10 @@ const ChangePassword: FunctionComponent<Props> = ({ onResetPassword }) => {
                       <CallOut
                         color="negative"
                         className={CLASSES.myPassword.form.errorMessage}
-                      >
-                        {submitError}
-                      </CallOut>
+                        icon={<Icon size="sm">error</Icon>}
+                        titleWeight="semiBold"
+                        title={submitError}
+                      />
                     )}
                     <div
                       className={cn(

diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.css b/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.css
@@ -78,8 +78,3 @@
 .successMessage {
   padding-bottom: var(--v2-spacing-3);
 }
-
-.successIcon {
-  min-width: 25px;
-  color: var(--v2-colors-green-500);
-}
diff --git a/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx b/src/core/client/stream/tabs/Profile/Settings/ChangeUsername/ChangeUsernameContainer.tsx
@@ -28,7 +28,6 @@ import {
 import CLASSES from "coral-stream/classes";
 import { ShowEditUsernameDialogEvent } from "coral-stream/events";
 import {
-  Flex,
   FormField,
   HorizontalGutter,
   Icon,
@@ -207,16 +206,14 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
             color="positive"
             onClose={closeSuccessMessage}
             className={cn(CLASSES.myUsername.form.successCallOut)}
-          >
-            <Flex justifyContent="flex-start" alignItems="center">
-              <Icon size="sm" className={styles.successIcon}>
-                check_circle
-              </Icon>
+            icon={<Icon size="sm">check_circle</Icon>}
+            titleWeight="semiBold"
+            title={
               <Localized id="profile-changeUsername-success">
                 <span>Your username has been successfully updated</span>
               </Localized>
-            </Flex>
-          </CallOut>
+            }
+          />
         </div>
       )}
       {!canChangeUsername && !showSuccessMessage && (
@@ -340,9 +337,10 @@ const ChangeUsernameContainer: FunctionComponent<Props> = ({
                       <CallOut
                         color="negative"
                         className={CLASSES.myUsername.form.errorMessage}
-                      >
-                        {submitError}
-                      </CallOut>
+                        icon={<Icon size="sm">error</Icon>}
+                        titleWeight="semiBold"
+                        title={submitError}
+                      />
                     )}
                   </HorizontalGutter>
                   <div

diff --git a/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx b/src/core/client/stream/tabs/Profile/Settings/DeleteAccount/Pages/ConfirmPage.tsx
@@ -17,6 +17,7 @@ import {
   Flex,
   FormField,
   HorizontalGutter,
+  Icon,
   InputLabel,
   PasswordField,
   TextField,
@@ -223,7 +224,12 @@ const ConfirmPage: FunctionComponent<Props> = ({
                 </FormField>
 
                 {submitError && (
-                  <CallOut color="negative">{submitError}</CallOut>
+                  <CallOut
+                    color="negative"
+                    icon={<Icon size="sm">error</Icon>}
+                    titleWeight="semiBold"
+                    title={submitError}
+                  />
                 )}
               </HorizontalGutter>
               <div className={styles.controls}>

diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
@@ -947,7 +947,7 @@ exports[`renders message box when story isClosed 1`] = `
             className="CallOut-content"
           >
             <div
-              className="CallOut-title CallOut-titleBold"
+              className="CallOut-title CallOut-titleSemiBold"
             >
               <div
                 className="Markdown-root"

diff --git a/src/core/client/ui/components/v2/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap b/src/core/client/ui/components/v2/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`map new speech prop to older aural prop 1`] = `
-<MediaQueryContextConsumer
+<MediaQuery
   aural={true}
 >
   <div>
     Hello World
   </div>
-</MediaQueryContextConsumer>
+</MediaQuery>
 `;
 
 exports[`renders correctly 1`] = `
-<MediaQueryContextConsumer
+<MediaQuery
   component="div"
   maxWidth={320}
   minWidth={640}
@@ -20,16 +20,16 @@ exports[`renders correctly 1`] = `
   <div>
     Hello World
   </div>
-</MediaQueryContextConsumer>
+</MediaQuery>
 `;
 
 exports[`renders less than and great than correctly 1`] = `
-<MediaQueryContextConsumer
+<MediaQuery
   maxWidth={319}
   minWidth={641}
 >
   <div>
     Hello World
   </div>
-</MediaQueryContextConsumer>
+</MediaQuery>
 `;