From 745fb4056cff172df80abaaf7e85d0fda707d093 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Fri, 10 Jan 2020 18:32:15 +0000
Subject: [PATCH] fix: fixed tag styling due to localization (#2785)

---
 .../ModerateCard/CommentAuthorContainer.tsx   |   8 +-
 .../components/ModerateCard/ModerateCard.tsx  |  16 +-
 .../__snapshots__/ModerateCard.spec.tsx.snap  | 168 ++++++++++--------
 3 files changed, 104 insertions(+), 88 deletions(-)

diff --git a/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.tsx b/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.tsx
index 37a3ed4a0..ca006db7c 100644
--- a/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.tsx
@@ -18,11 +18,11 @@ const CommentAuthorContainer: FunctionComponent<Props> = ({ comment }) => {
   }
   return (
     <>
-      <Localized id="commentAuthor-status-banned">
-        <div className={styles.authorStatus}>
+      <div className={styles.authorStatus}>
+        <Localized id="commentAuthor-status-banned">
           <Tag color="error">BANNED</Tag>
-        </div>
-      </Localized>
+        </Localized>
+      </div>
     </>
   );
 };
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
index aef8d309b..d45f13a1d 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
@@ -185,14 +185,16 @@ const ModerateCard: FunctionComponent<Props> = ({
           >
             <Flex alignItems="center">
               {!hideUsername && username && (
-                <BaseButton
-                  onClick={commentAuthorClick}
-                  className={styles.usernameButton}
-                >
-                  <Username>{username}</Username>
-                </BaseButton>
+                <>
+                  <BaseButton
+                    onClick={commentAuthorClick}
+                    className={styles.usernameButton}
+                  >
+                    <Username>{username}</Username>
+                  </BaseButton>
+                  <CommentAuthorContainer comment={comment} />
+                </>
               )}
-              <CommentAuthorContainer comment={comment} />
               <Timestamp>{createdAt}</Timestamp>
               {edited && (
                 <Localized id="moderate-comment-edited">
diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
index 2e84ef2d2..88fd87c7a 100644
--- a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
+++ b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
@@ -18,17 +18,19 @@ exports[`renders approved correctly 1`] = `
         <ForwardRef(forwardRef)
           alignItems="center"
         >
-          <ForwardRef(forwardRef)
-            className="ModerateCard-usernameButton"
-            onClick={[Function]}
-          >
-            <Username>
-              Theon
-            </Username>
-          </ForwardRef(forwardRef)>
-          <Relay(CommentAuthorContainer)
-            comment={Object {}}
-          />
+          <React.Fragment>
+            <ForwardRef(forwardRef)
+              className="ModerateCard-usernameButton"
+              onClick={[Function]}
+            >
+              <Username>
+                Theon
+              </Username>
+            </ForwardRef(forwardRef)>
+            <Relay(CommentAuthorContainer)
+              comment={Object {}}
+            />
+          </React.Fragment>
           <Timestamp
             toggleAbsolute={true}
           >
@@ -146,17 +148,19 @@ exports[`renders correctly 1`] = `
         <ForwardRef(forwardRef)
           alignItems="center"
         >
-          <ForwardRef(forwardRef)
-            className="ModerateCard-usernameButton"
-            onClick={[Function]}
-          >
-            <Username>
-              Theon
-            </Username>
-          </ForwardRef(forwardRef)>
-          <Relay(CommentAuthorContainer)
-            comment={Object {}}
-          />
+          <React.Fragment>
+            <ForwardRef(forwardRef)
+              className="ModerateCard-usernameButton"
+              onClick={[Function]}
+            >
+              <Username>
+                Theon
+              </Username>
+            </ForwardRef(forwardRef)>
+            <Relay(CommentAuthorContainer)
+              comment={Object {}}
+            />
+          </React.Fragment>
           <Timestamp
             toggleAbsolute={true}
           >
@@ -274,17 +278,19 @@ exports[`renders dangling correctly 1`] = `
         <ForwardRef(forwardRef)
           alignItems="center"
         >
-          <ForwardRef(forwardRef)
-            className="ModerateCard-usernameButton"
-            onClick={[Function]}
-          >
-            <Username>
-              Theon
-            </Username>
-          </ForwardRef(forwardRef)>
-          <Relay(CommentAuthorContainer)
-            comment={Object {}}
-          />
+          <React.Fragment>
+            <ForwardRef(forwardRef)
+              className="ModerateCard-usernameButton"
+              onClick={[Function]}
+            >
+              <Username>
+                Theon
+              </Username>
+            </ForwardRef(forwardRef)>
+            <Relay(CommentAuthorContainer)
+              comment={Object {}}
+            />
+          </React.Fragment>
           <Timestamp
             toggleAbsolute={true}
           >
@@ -402,17 +408,19 @@ exports[`renders rejected correctly 1`] = `
         <ForwardRef(forwardRef)
           alignItems="center"
         >
-          <ForwardRef(forwardRef)
-            className="ModerateCard-usernameButton"
-            onClick={[Function]}
-          >
-            <Username>
-              Theon
-            </Username>
-          </ForwardRef(forwardRef)>
-          <Relay(CommentAuthorContainer)
-            comment={Object {}}
-          />
+          <React.Fragment>
+            <ForwardRef(forwardRef)
+              className="ModerateCard-usernameButton"
+              onClick={[Function]}
+            >
+              <Username>
+                Theon
+              </Username>
+            </ForwardRef(forwardRef)>
+            <Relay(CommentAuthorContainer)
+              comment={Object {}}
+            />
+          </React.Fragment>
           <Timestamp
             toggleAbsolute={true}
           >
@@ -530,17 +538,19 @@ exports[`renders reply correctly 1`] = `
         <ForwardRef(forwardRef)
           alignItems="center"
         >
-          <ForwardRef(forwardRef)
-            className="ModerateCard-usernameButton"
-            onClick={[Function]}
-          >
-            <Username>
-              Theon
-            </Username>
-          </ForwardRef(forwardRef)>
-          <Relay(CommentAuthorContainer)
-            comment={Object {}}
-          />
+          <React.Fragment>
+            <ForwardRef(forwardRef)
+              className="ModerateCard-usernameButton"
+              onClick={[Function]}
+            >
+              <Username>
+                Theon
+              </Username>
+            </ForwardRef(forwardRef)>
+            <Relay(CommentAuthorContainer)
+              comment={Object {}}
+            />
+          </React.Fragment>
           <Timestamp
             toggleAbsolute={true}
           >
@@ -667,17 +677,19 @@ exports[`renders story info 1`] = `
         <ForwardRef(forwardRef)
           alignItems="center"
         >
-          <ForwardRef(forwardRef)
-            className="ModerateCard-usernameButton"
-            onClick={[Function]}
-          >
-            <Username>
-              Theon
-            </Username>
-          </ForwardRef(forwardRef)>
-          <Relay(CommentAuthorContainer)
-            comment={Object {}}
-          />
+          <React.Fragment>
+            <ForwardRef(forwardRef)
+              className="ModerateCard-usernameButton"
+              onClick={[Function]}
+            >
+              <Username>
+                Theon
+              </Username>
+            </ForwardRef(forwardRef)>
+            <Relay(CommentAuthorContainer)
+              comment={Object {}}
+            />
+          </React.Fragment>
           <Timestamp
             toggleAbsolute={true}
           >
@@ -829,17 +841,19 @@ exports[`renders tombstoned when comment is deleted 1`] = `
         <ForwardRef(forwardRef)
           alignItems="center"
         >
-          <ForwardRef(forwardRef)
-            className="ModerateCard-usernameButton"
-            onClick={[Function]}
-          >
-            <Username>
-              Theon
-            </Username>
-          </ForwardRef(forwardRef)>
-          <Relay(CommentAuthorContainer)
-            comment={Object {}}
-          />
+          <React.Fragment>
+            <ForwardRef(forwardRef)
+              className="ModerateCard-usernameButton"
+              onClick={[Function]}
+            >
+              <Username>
+                Theon
+              </Username>
+            </ForwardRef(forwardRef)>
+            <Relay(CommentAuthorContainer)
+              comment={Object {}}
+            />
+          </React.Fragment>
           <Timestamp
             toggleAbsolute={true}
           >