design icon updates

coralproject · Jun 26, 2023 · 6d87a8f · 6d87a8f
1 parent 4849fa2
commit 6d87a8f
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 26 deletions.
diff --git a/src/core/client/admin/components/Comment/InReplyTo.tsx b/src/core/client/admin/components/Comment/InReplyTo.tsx
@@ -26,7 +26,12 @@ const InReplyTo: FunctionComponent<Props> = ({ children, onUsernameClick }) => {
 
   return (
     <Flex alignItems="center">
-      <SvgIcon className={styles.icon} Icon={EmailActionReplyIcon} />{" "}
+      <SvgIcon
+        className={styles.icon}
+        size="xs"
+        filled
+        Icon={EmailActionReplyIcon}
+      />{" "}
       <Localized
         id="moderate-comment-inReplyTo"
         elems={{ Username: <Username /> }}

diff --git a/src/core/client/admin/components/ModerateCard/Markers.css b/src/core/client/admin/components/ModerateCard/Markers.css
@@ -23,6 +23,6 @@ $moderateCardDetailsDividerColor: var(--palette-grey-100);
 }
 
 .detailsButtonIcon {
-  align-self: baseline;
+  padding-bottom: var(--spacing-1);
   padding-left: var(--spacing-1);
 }
diff --git a/src/core/client/admin/components/UserRole/UserRoleChange.tsx b/src/core/client/admin/components/UserRole/UserRoleChange.tsx
@@ -243,6 +243,7 @@ const UserRoleChange: FunctionComponent<Props> = ({
                 />
                 <ButtonSvgIcon
                   size="xxs"
+                  strokeWidth="semibold"
                   Icon={isPopoverVisible ? ArrowsUpIcon : ArrowsDownIcon}
                   className={styles.arrowsIcon}
                 />

diff --git a/src/core/client/admin/components/UserStatus/UserStatusChange.css b/src/core/client/admin/components/UserStatus/UserStatusChange.css
@@ -6,7 +6,7 @@ $status-change-button-border: var(--palette-grey-400);
 }
 
 .bordered {
-  padding: 0 var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-2);
   border: 1px solid $status-change-button-border;
 }
 
@@ -17,3 +17,7 @@ $status-change-button-border: var(--palette-grey-400);
 .dropdownButton {
   min-width: 80px;
 }
+
+.changeButtonIcon {
+  padding-bottom: var(--spacing-1);
+}
diff --git a/src/core/client/admin/components/UserStatus/UserStatusChange.tsx b/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
@@ -217,6 +217,8 @@ const UserStatusChange: FunctionComponent<Props> = ({
             {children}
             {
               <ButtonSvgIcon
+                className={styles.changeButtonIcon}
+                strokeWidth="semibold"
                 size="xxs"
                 Icon={visible ? ArrowsUpIcon : ArrowsDownIcon}
               />

diff --git a/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx b/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx
@@ -8,11 +8,11 @@ import { HOTKEYS } from "coral-admin/constants";
 import { SectionFilter } from "coral-common/section";
 import { getModerationLink } from "coral-framework/helpers";
 import {
-  CheckCircleIcon,
   CheckDoubleIcon,
+  CheckIcon,
   FlagPlainIcon,
   MessagesBubbleSquareIcon,
-  RemoveCircleIcon,
+  RemoveIcon,
   SvgIcon,
   TimeClockCircleIcon,
 } from "coral-ui/components/icons";
@@ -133,13 +133,13 @@ const Navigation: FunctionComponent<Props> = ({
         )}
       </NavigationLink>
       <NavigationLink to={moderationLinks[3]}>
-        <SvgIcon Icon={CheckCircleIcon} className={styles.icon} />
+        <SvgIcon Icon={CheckIcon} size="xs" className={styles.icon} />
         <Localized id="moderate-navigation-approved">
           <span>Approved</span>
         </Localized>
       </NavigationLink>
       <NavigationLink to={moderationLinks[4]}>
-        <SvgIcon Icon={RemoveCircleIcon} className={styles.icon} />
+        <SvgIcon Icon={RemoveIcon} className={styles.icon} />
         <Localized id="moderate-navigation-rejected">
           <span>Rejected</span>
         </Localized>

diff --git a/src/core/client/admin/routes/Stories/StoryRow.tsx b/src/core/client/admin/routes/Stories/StoryRow.tsx
@@ -110,7 +110,13 @@ const UserRow: FunctionComponent<Props> = (props) => (
             variant="text"
             uppercase={false}
           >
-            {<ButtonSvgIcon size="lg" Icon={NavigationMenuHorizontalIcon} />}
+            {
+              <ButtonSvgIcon
+                size="xs"
+                filled
+                Icon={NavigationMenuHorizontalIcon}
+              />
+            }
           </Button>
         </Localized>
       )}

diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
@@ -504,6 +504,15 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = ({
                 <Localized
                   id={refreshCommentsLocalization.id}
                   attrs={{ "aria-label": true }}
+                  elems={{
+                    icon: (
+                      <ButtonSvgIcon
+                        className={styles.refreshButtonIcon}
+                        Icon={ButtonRefreshArrowIcon}
+                        size="xs"
+                      />
+                    ),
+                  }}
                 >
                   <Button
                     aria-label={refreshCommentsLocalization.text}
@@ -526,6 +535,15 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = ({
               <Localized
                 id="comments-refreshComments-closeButton"
                 attrs={{ "aria-label": true }}
+                elems={{
+                  icon: (
+                    <ButtonSvgIcon
+                      Icon={RemoveIcon}
+                      size="xs"
+                      className={styles.closeButtonIcon}
+                    />
+                  ),
+                }}
               >
                 <Button
                   onClick={handleClickCloseRefreshButton}

diff --git a/src/core/client/ui/components/icons/EmailActionReplyIcon.tsx b/src/core/client/ui/components/icons/EmailActionReplyIcon.tsx
@@ -8,7 +8,6 @@ const EmailActionReplyIcon: FunctionComponent = () => {
       <title>email-action-reply</title>
       <path
         d="M9.709,6.837a1.5,1.5,0,0,0-2.6-1.018L1.648,11.733a1.5,1.5,0,0,0,0,2.034l5.458,5.914a1.5,1.5,0,0,0,2.6-1.018V15.75h6a7.5,7.5,0,0,1,7.5,7.5v-6a7.5,7.5,0,0,0-7.5-7.5h-6Z"
-        fill="none"
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"

diff --git a/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.css b/src/core/client/ui/components/v3/ArchivedMarker/ArchivedMarker.css
@@ -1,4 +1,7 @@
 .icon {
   padding-right: var(--spacing-1);
-  padding-bottom: var(--spacing-1);
+}
+
+.icon svg {
+  vertical-align: middle;
 }
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
@@ -314,13 +314,13 @@ comments-mobileToolbar-closeButton =
 comments-mobileToolbar-unmarkAll = Mark all as read
 comments-mobileToolbar-nextUnread = Next unread
 
-comments-refreshComments-closeButton = Close
+comments-refreshComments-closeButton = Close <icon></icon>
   .aria-label = Close
-comments-refreshComments-refreshButton = Refresh comments
+comments-refreshComments-refreshButton = <icon></icon> Refresh comments
   .aria-label = Refresh comments
-comments-refreshQuestions-refreshButton = Refresh questions
+comments-refreshQuestions-refreshButton = <icon></icon> Refresh questions
   .aria-label = Refresh questions
-comments-refreshReviews-refreshButton = Refresh reviews
+comments-refreshReviews-refreshButton = <icon></icon> Refresh reviews
   .aria-label = Refresh reviews
 
 comments-replyChangedWarning-theCommentHasJust =

diff --git a/src/locales/es/stream.ftl b/src/locales/es/stream.ftl
@@ -151,13 +151,13 @@ comments-rejectedTombstone =
 
 comments-featuredTag = Resaltado
 
-comments-refreshComments-closeButton = Cerrar
+comments-refreshComments-closeButton = Cerrar <icon></icon>
   .aria-label = Cerrar
-comments-refreshComments-refreshButton = Actualizar comentarios
+comments-refreshComments-refreshButton = <icon></icon> Actualizar comentarios
   .aria-label = Actualizar comentarios
-comments-refreshQuestions-refreshButton = Actualizar preguntas
+comments-refreshQuestions-refreshButton = <icon></icon> Actualizar preguntas
   .aria-label = Actualizar preguntas
-comments-refreshReviews-refreshButton = Actualizar revisiones
+comments-refreshReviews-refreshButton = <icon></icon> Actualizar revisiones
   .aria-label = Actualizar revisiones
 
 ### Q&A

diff --git a/src/locales/fr-FR/stream.ftl b/src/locales/fr-FR/stream.ftl
@@ -252,13 +252,13 @@ comments-jumpToComment-GoToReply = Aller à la réponse
 comments-permalink-copyLink = Copier le lien
 comments-permalink-linkCopied = Lien copié
 
-comments-refreshComments-closeButton = Fermer
+comments-refreshComments-closeButton = Fermer <icon></icon>
   .aria-label = Fermer
-comments-refreshComments-refreshButton = Rafraîchir les commentaires
+comments-refreshComments-refreshButton = <icon></icon> Rafraîchir les commentaires
   .aria-label = Rafraîchir les commentaires
-comments-refreshQuestions-refreshButton = Rafraîchir les questions
+comments-refreshQuestions-refreshButton = <icon></icon> Rafraîchir les questions
   .aria-label = Rafraîchir les questions
-comments-refreshReviews-refreshButton = Rafraîchir les avis
+comments-refreshReviews-refreshButton = <icon></icon> Rafraîchir les avis
   .aria-label = Rafraîchir les avis
 
 ### Q&A

diff --git a/src/locales/nl-NL/stream.ftl b/src/locales/nl-NL/stream.ftl
@@ -312,13 +312,13 @@ comments-mobileToolbar-closeButton =
 comments-mobileToolbar-unmarkAll = Markeer alle als gelezen
 comments-mobileToolbar-nextUnread = Volgende ongelezen
 
-comments-refreshComments-closeButton = Sluiten
+comments-refreshComments-closeButton = Sluiten <icon></icon>
   .aria-label = Sluiten
-comments-refreshComments-refreshButton = Herlaad reacties
+comments-refreshComments-refreshButton = <icon></icon> Herlaad reacties
   .aria-label = Herlaad reacties
-comments-refreshQuestions-refreshButton = Herlaad vragen
+comments-refreshQuestions-refreshButton = <icon></icon> Herlaad vragen
   .aria-label = Herlaad vragen
-comments-refreshReviews-refreshButton = Herlaad reviews
+comments-refreshReviews-refreshButton = <icon></icon> Herlaad reviews
   .aria-label = Herlaad reviews
 
 comments-replyChangedWarning-theCommentHasJust =