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

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);
 }

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"

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