Better use flex to align callout contents (#3060)

CORL-1201

Co-authored-by: Wyatt Johnson <wyattjoh@gmail.com>

src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap

@@ -82,7 +82,7 @@ exports[`renders missing confirm token 1`] = `
             className="CallOut-root CallOut-error CallOut-leftBorder"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+              className="CallOut-container"
             >
               <div
                 className="CallOut-content"

src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap

@@ -140,7 +140,7 @@ exports[`renders missing reset token 1`] = `
             className="CallOut-root CallOut-error CallOut-leftBorder"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+              className="CallOut-container"
             >
               <div
                 className="CallOut-content"

src/core/client/account/test/__snapshots__/unsubscribeNotifications.spec.tsx.snap

@@ -81,7 +81,7 @@ exports[`renders missing confirm token 1`] = `
             className="CallOut-root CallOut-error CallOut-leftBorder"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+              className="CallOut-container"
             >
               <div
                 className="CallOut-content"

src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap

@@ -831,7 +831,7 @@ Your email address will be used to:
       className="CallOut-root CallOut-error CallOut-leftBorder coral coral-login-error"
     >
       <div
-        className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+        className="CallOut-container"
       >
         <div
           className="CallOut-icon CallOut-error CallOut-leftIcon"

src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap

@@ -346,7 +346,7 @@ we require users to create a password.
       className="CallOut-root CallOut-error CallOut-leftBorder coral coral-login-error"
     >
       <div
-        className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+        className="CallOut-container"
       >
         <div
           className="CallOut-icon CallOut-error CallOut-leftIcon"

src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap

@@ -270,7 +270,7 @@ exports[`shows server error 1`] = `
       className="CallOut-root CallOut-error CallOut-leftBorder coral coral-login-error"
     >
       <div
-        className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+        className="CallOut-container"
       >
         <div
           className="CallOut-icon CallOut-error CallOut-leftIcon"

src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap

@@ -81,7 +81,7 @@ exports[`renders permalink view with unknown comment 1`] = `
       className="CallOut-root CallOut-mono CallOut-leftBorder"
     >
       <div
-        className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+        className="CallOut-container"
       >
         <div
           className="CallOut-content"

src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap

@@ -1914,7 +1914,7 @@ exports[`shows expiry message: edit time expired 1`] = `
             className="CallOut-root CallOut-error CallOut-leftBorder coral coral-editComment-expiredTime"
           >
             <div
-              className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+              className="CallOut-container"
             >
               <div
                 className="CallOut-icon CallOut-error CallOut-leftIcon"

src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap

@@ -66,7 +66,7 @@ exports[`renders message box when commenting disabled 1`] = `
         className="CallOut-root CallOut-mono CallOut-leftBorder coral coral-createComment-closed"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+          className="CallOut-container"
         >
           <div
             className="CallOut-icon CallOut-mono CallOut-leftIcon"
@@ -990,7 +990,7 @@ exports[`renders message box when story isClosed 1`] = `
         className="CallOut-root CallOut-mono CallOut-leftBorder coral coral-createComment-closed"
       >
         <div
-          className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+          className="CallOut-container"
         >
           <div
             className="CallOut-icon CallOut-mono CallOut-leftIcon"

src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap

@@ -703,7 +703,7 @@ exports[`report comment as offensive 1`] = `
       className="CallOut-root CallOut-success CallOut-leftBorder"
     >
       <div
-        className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+        className="CallOut-container"
       >
         <div
           className="CallOut-icon CallOut-success CallOut-leftIcon"
@@ -729,24 +729,28 @@ exports[`report comment as offensive 1`] = `
             We’ve received your message. Reports from members like you keep the community safe.
           </div>
         </div>
-        <button
-          className="BaseButton-root CallOut-closeButton"
-          data-testid="callout-close-button"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
+        <div
+          className="CallOut-actions"
         >
-          <i
-            aria-hidden="true"
-            className="Icon-root Icon-sm"
+          <button
+            className="BaseButton-root"
+            data-testid="callout-close-button"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
           >
-            close
-          </i>
-        </button>
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-sm"
+            >
+              close
+            </i>
+          </button>
+        </div>
       </div>
     </div>
   </div>

src/core/client/stream/test/profile/__snapshots__/account.spec.tsx.snap

@@ -78,7 +78,7 @@ exports[`renders the empty settings pane 1`] = `
           className="CallOut-root CallOut-mono CallOut-leftBorder coral coral-verifyEmail"
         >
           <div
-            className="Box-root Flex-root Flex-flex Flex-justifyFlexStart Flex-alignFlexStart"
+            className="CallOut-container"
           >
             <div
               className="CallOut-content"

src/core/client/ui/components/v3/CallOut/CallOut.css

@@ -12,8 +12,26 @@
   border-left: 4px solid;
 }
 
+.container {
+  display: flex;
+  flex-direction: row;
+}
+
+.leftIcon {
+  flex-basis: calc(var(--spacing-3) + var(--spacing-1) + 14px);
+  margin-left: var(--spacing-1);
+  margin-top: 0.5px;
+}
+
 .content {
-  width: calc(100% - 50px);
+  flex: 1;
+}
+
+.actions {
+  display: flex;
+  flex-basis: calc(var(--spacing-2) + 14px);
+  justify-content: center;
+  align-items: start;
 }
 
 .title {
@@ -43,18 +61,6 @@
   line-height: 1.14;
 }
 
-.closeButton {
-  position: absolute;
-
-  top: var(--spacing-1);
-  right: var(--spacing-2);
-}
-
-.leftIcon {
-  margin-left: var(--spacing-1);
-  margin-right: var(--spacing-3);
-}
-
 .icon {
   &.mono {
     color: var(--palette-text-500);

src/core/client/ui/components/v3/CallOut/CallOut.tsx

@@ -1,7 +1,7 @@
 import cn from "classnames";
 import React, { FunctionComponent, useCallback } from "react";
 
-import { BaseButton, Flex, Icon } from "coral-ui/components/v2";
+import { BaseButton, Icon } from "coral-ui/components/v2";
 import { withStyles } from "coral-ui/hocs";
 
 import styles from "./CallOut.css";
@@ -89,7 +89,7 @@ const CallOut: FunctionComponent<Props> = ({
 
   return (
     <div className={rootClasses}>
-      <Flex justifyContent="flex-start" alignItems="flex-start">
+      <div className={classes.container}>
         {iconPosition === "left" && icon !== null && (
           <div className={iconClasses}>{icon}</div>
         )}
@@ -98,15 +98,16 @@ const CallOut: FunctionComponent<Props> = ({
           <div className={classes.body}>{children}</div>
         </div>
         {onClose && (
-          <BaseButton
-            className={classes.closeButton}
-            onClick={onCloseClicked}
-            data-testid="callout-close-button"
-          >
-            <Icon size="sm">close</Icon>
-          </BaseButton>
+          <div className={classes.actions}>
+            <BaseButton
+              onClick={onCloseClicked}
+              data-testid="callout-close-button"
+            >
+              <Icon size="sm">close</Icon>
+            </BaseButton>
+          </div>
         )}
-      </Flex>
+      </div>
     </div>
   );
 };