From 06a3e4e0a754d26b55d43665c00aeac4d7081026 Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Mon, 29 Jul 2019 16:45:12 -0600
Subject: [PATCH] User drawer details tweaks (#2423)

* Add alternative text titles to the user drawer icons

* Tweak padding on user status popover

* Add default alt text for user drawer icons
---
 .../UserHistoryDrawerQuery.css                |  3 +-
 .../UserHistoryDrawerQuery.tsx                | 37 ++++++++++++++-----
 src/locales/en-US/admin.ftl                   |  6 +++
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css
index 78bda03e1..315b69b61 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css
@@ -111,5 +111,6 @@ hr {
   border-width: 1px;
   border-radius: 2px;
 
-  padding-left: var(--spacing-1);
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-1);
 }
\ No newline at end of file
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx
index 6d9e70f60..7e699ed9b 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx
@@ -95,9 +95,14 @@ const UserHistoryDrawerQuery: FunctionComponent<Props> = ({
             </div>
             <div className={styles.userDetails}>
               <Flex alignItems="center" className={styles.userDetail}>
-                <Icon size="sm" className={styles.icon}>
-                  mail_outline
-                </Icon>
+                <Localized
+                  id="moderate-user-drawer-email"
+                  attrs={{ title: true }}
+                >
+                  <Icon size="sm" className={styles.icon} title="Email address">
+                    mail_outline
+                  </Icon>
+                </Localized>
                 <Typography
                   variant="bodyCopy"
                   container="span"
@@ -112,9 +117,18 @@ const UserHistoryDrawerQuery: FunctionComponent<Props> = ({
                 />
               </Flex>
               <Flex alignItems="center" className={styles.userDetail}>
-                <Icon size="sm" className={styles.icon}>
-                  date_range
-                </Icon>
+                <Localized
+                  id="moderate-user-drawer-created-at"
+                  attrs={{ title: true }}
+                >
+                  <Icon
+                    size="sm"
+                    className={styles.icon}
+                    title="Account creation date"
+                  >
+                    date_range
+                  </Icon>
+                </Localized>
                 <Typography variant="bodyCopy" container="span">
                   {new Date(user.createdAt).toLocaleDateString("en-us", {
                     month: "long",
@@ -124,9 +138,14 @@ const UserHistoryDrawerQuery: FunctionComponent<Props> = ({
                 </Typography>
               </Flex>
               <Flex alignItems="center" className={styles.userDetail}>
-                <Icon size="sm" className={styles.icon}>
-                  people_outline
-                </Icon>
+                <Localized
+                  id="moderate-user-drawer-member-id"
+                  attrs={{ title: true }}
+                >
+                  <Icon size="sm" className={styles.icon} title="Member ID">
+                    people_outline
+                  </Icon>
+                </Localized>
                 <Typography
                   variant="bodyCopy"
                   container="span"
diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl
index bf016a0d6..573d1daa6 100644
--- a/src/locales/en-US/admin.ftl
+++ b/src/locales/en-US/admin.ftl
@@ -428,6 +428,12 @@ moderate-searchBar-seeAllResults = See all results
 
 ### Moderate User History Drawer
 
+moderate-user-drawer-email =
+  .title = Email address
+moderate-user-drawer-created-at =
+  .title = Account creation date
+moderate-user-drawer-member-id =
+  .title = Member ID
 moderate-user-drawer-tab-all-comments = All Comments
 moderate-user-drawer-tab-rejected-comments = Rejected
 moderate-user-drawer-load-more = Load More