From 4c30e272f306b25b266a5d67d01c67ee9a4d517a Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Thu, 18 Nov 2021 13:05:11 -0800
Subject: [PATCH] Update design for clicking on badges

Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
---
 stylesheets/components/Avatar.scss            | 20 ++++++++-
 ts/components/Avatar.stories.tsx              |  1 +
 ts/components/Avatar.tsx                      | 45 +++++++++++++------
 ts/components/conversation/ContactModal.tsx   | 10 +----
 .../ConversationDetailsHeader.tsx             | 10 ++---
 5 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/stylesheets/components/Avatar.scss b/stylesheets/components/Avatar.scss
index dab26213b..ca4c0fa56 100644
--- a/stylesheets/components/Avatar.scss
+++ b/stylesheets/components/Avatar.scss
@@ -112,12 +112,30 @@
   }
 
   &__badge {
-    pointer-events: none;
     position: absolute;
     z-index: 1;
 
     // Positioning should be overridden by JavaScript. These are set defensively.
     bottom: 0;
     right: 0;
+
+    &--static {
+      pointer-events: none;
+    }
+
+    &--button {
+      background-color: transparent;
+      background-position: center center;
+      background-size: contain;
+      border: 0;
+      outline: none;
+
+      @include keyboard-mode {
+        &:focus {
+          outline: 2px solid $color-ultramarine;
+          border-radius: 6px;
+        }
+      }
+    }
   }
 }
diff --git a/ts/components/Avatar.stories.tsx b/ts/components/Avatar.stories.tsx
index 6a49ef625..31a3e4a8d 100644
--- a/ts/components/Avatar.stories.tsx
+++ b/ts/components/Avatar.stories.tsx
@@ -53,6 +53,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   name: text('name', overrideProps.name || ''),
   noteToSelf: boolean('noteToSelf', overrideProps.noteToSelf || false),
   onClick: action('onClick'),
+  onClickBadge: action('onClickBadge'),
   phoneNumber: text('phoneNumber', overrideProps.phoneNumber || ''),
   searchResult: boolean(
     'searchResult',
diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx
index 2e151f44e..2b7ec8cf4 100644
--- a/ts/components/Avatar.tsx
+++ b/ts/components/Avatar.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type {
+  CSSProperties,
   FunctionComponent,
   MouseEvent,
   ReactChild,
@@ -68,6 +69,7 @@ export type Props = {
   searchResult?: boolean;
 
   onClick?: (event: MouseEvent<HTMLButtonElement>) => unknown;
+  onClickBadge?: (event: MouseEvent<HTMLButtonElement>) => unknown;
 
   // Matches Popper's RefHandler type
   innerRef?: React.Ref<HTMLDivElement>;
@@ -104,6 +106,7 @@ export const Avatar: FunctionComponent<Props> = ({
   loading,
   noteToSelf,
   onClick,
+  onClickBadge,
   sharedGroupNames,
   size,
   theme,
@@ -254,19 +257,35 @@ export const Avatar: FunctionComponent<Props> = ({
       badgeTheme
     );
     if (badgeImagePath) {
-      badgeNode = (
-        <img
-          alt={badge.name}
-          className="module-Avatar__badge"
-          src={badgeImagePath}
-          style={{
-            width: badgePlacement.size,
-            height: badgePlacement.size,
-            bottom: badgePlacement.bottom,
-            right: badgePlacement.right,
-          }}
-        />
-      );
+      const positionStyles: CSSProperties = {
+        width: badgePlacement.size,
+        height: badgePlacement.size,
+        bottom: badgePlacement.bottom,
+        right: badgePlacement.right,
+      };
+      if (onClickBadge) {
+        badgeNode = (
+          <button
+            aria-label={badge.name}
+            className="module-Avatar__badge module-Avatar__badge--button"
+            onClick={onClickBadge}
+            style={{
+              backgroundImage: `url('${encodeURI(badgeImagePath)}')`,
+              ...positionStyles,
+            }}
+            type="button"
+          />
+        );
+      } else {
+        badgeNode = (
+          <img
+            alt={badge.name}
+            className="module-Avatar__badge module-Avatar__badge--static"
+            src={badgeImagePath}
+            style={positionStyles}
+          />
+        );
+      }
     }
   } else if (badge && !theme) {
     log.error('<Avatar> requires a theme if a badge is provided');
diff --git a/ts/components/conversation/ContactModal.tsx b/ts/components/conversation/ContactModal.tsx
index db6eca697..9547e1a58 100644
--- a/ts/components/conversation/ContactModal.tsx
+++ b/ts/components/conversation/ContactModal.tsx
@@ -14,7 +14,6 @@ import { BadgeDialog } from '../BadgeDialog';
 import type { BadgeType } from '../../badges/types';
 import { SharedGroupNames } from '../SharedGroupNames';
 import { ConfirmationDialog } from '../ConfirmationDialog';
-import { shouldShowBadges } from '../../badges/shouldShowBadges';
 
 export type PropsDataType = {
   areWeAdmin: boolean;
@@ -107,13 +106,8 @@ export const ContactModal = ({
               theme={theme}
               title={contact.title}
               unblurredAvatarPath={contact.unblurredAvatarPath}
-              onClick={() => {
-                setView(
-                  preferredBadge && shouldShowBadges()
-                    ? ContactModalView.ShowingBadges
-                    : ContactModalView.ShowingAvatar
-                );
-              }}
+              onClick={() => setView(ContactModalView.ShowingAvatar)}
+              onClickBadge={() => setView(ContactModalView.ShowingBadges)}
             />
             <div className="ContactModal__name">{contact.title}</div>
             <div className="module-about__container">
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
index 1acb14702..e03daa1f5 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
@@ -15,7 +15,6 @@ import type { LocalizerType, ThemeType } from '../../../types/Util';
 import { bemGenerator } from './util';
 import { BadgeDialog } from '../../BadgeDialog';
 import type { BadgeType } from '../../../badges/types';
-import { shouldShowBadges } from '../../../badges/shouldShowBadges';
 
 export type Props = {
   badges?: ReadonlyArray<BadgeType>;
@@ -92,11 +91,10 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
       {...conversation}
       noteToSelf={isMe}
       onClick={() => {
-        setActiveModal(
-          preferredBadge && shouldShowBadges()
-            ? ConversationDetailsHeaderActiveModal.ShowingBadges
-            : ConversationDetailsHeaderActiveModal.ShowingAvatar
-        );
+        setActiveModal(ConversationDetailsHeaderActiveModal.ShowingAvatar);
+      }}
+      onClickBadge={() => {
+        setActiveModal(ConversationDetailsHeaderActiveModal.ShowingBadges);
       }}
       sharedGroupNames={[]}
       theme={theme}