Make whole username clickable in UsernameLinkModalBody

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
signalapp · Feb 7, 2024 · 386e8e2 · 386e8e2
1 parent e0d9bcd
commit 386e8e2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/stylesheets/components/UsernameLinkModalBody.scss b/stylesheets/components/UsernameLinkModalBody.scss
@@ -71,8 +71,6 @@
 
     &__username {
       display: flex;
-      flex-direction: row;
-      gap: 4px;
       justify-content: center;
       margin-block: 12px 2px;
 
@@ -85,20 +83,26 @@
         text-align: center;
       }
 
-      &__copy {
-        @include button-reset;
-        @include button-focus-outline;
+      &__copy__button {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
 
-        flex-shrink: 0;
-        margin-top: 2px;
-        display: inline-block;
-        width: 16px;
-        height: 16px;
+        i {
+          flex-shrink: 0;
+          margin-top: 2px;
+          display: inline-block;
+          width: 16px;
+          height: 16px;
 
-        @include color-svg(
-          '../images/icons/v3/copy/copy.svg',
-          var(--text-color)
-        );
+          @include color-svg(
+            '../images/icons/v3/copy/copy.svg',
+            var(--text-color)
+          );
+        }
+
+        @include button-reset;
+        @include button-focus-outline;
       }
     }
   }

diff --git a/ts/components/UsernameLinkModalBody.tsx b/ts/components/UsernameLinkModalBody.tsx
@@ -808,15 +808,21 @@ export function UsernameLinkModalBody({
         >
           <div className={`${CLASS}__card__qr`}>{linkImage}</div>
           <div className={`${CLASS}__card__username`}>
-            {!showColors && (
+            {showColors ? (
+              <div className={`${CLASS}__card__username__text`}>{username}</div>
+            ) : (
               <button
-                className={classnames(`${CLASS}__card__username__copy`)}
+                className={`${CLASS}__card__username__copy__button`}
                 type="button"
                 onClick={onCopyUsername}
                 aria-label={i18n('icu:UsernameLinkModalBody__copy')}
-              />
+              >
+                <i />
+                <div className={`${CLASS}__card__username__text`}>
+                  {username}
+                </div>
+              </button>
             )}
-            <div className={`${CLASS}__card__username__text`}>{username}</div>
           </div>
         </div>