From 2eca1447ef57f5505f62994d0371b2133a3df3a5 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 10 May 2024 15:44:35 +1000
Subject: [PATCH] fix: improve qr code icon

fixed styling of qr icon on profile modal
---
 stylesheets/_modal.scss                    | 15 ++++++++++++---
 ts/components/dialog/EditProfileDialog.tsx |  7 +++++--
 ts/components/icon/Icons.tsx               |  2 +-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index 43c27d01d..b759ca720 100644
--- a/stylesheets/_modal.scss
+++ b/stylesheets/_modal.scss
@@ -168,9 +168,10 @@
       align-items: center;
       justify-content: center;
       position: absolute;
-      right: -3px;
-      height: 30px;
-      width: 30px;
+      top: -8px;
+      right: -8px;
+      height: 34px;
+      width: 34px;
       border-radius: 50%;
       background-color: var(--white-color);
       transition: var(--default-duration);
@@ -221,6 +222,14 @@
       }
     }
   }
+
+  .edit-profile-default {
+    .session-modal {
+      .session-modal__body {
+        overflow: initial;
+      }
+    }
+  }
 }
 
 .reaction-list-modal {
diff --git a/ts/components/dialog/EditProfileDialog.tsx b/ts/components/dialog/EditProfileDialog.tsx
index fcabbd429..6b1c9df7d 100644
--- a/ts/components/dialog/EditProfileDialog.tsx
+++ b/ts/components/dialog/EditProfileDialog.tsx
@@ -101,7 +101,7 @@ const ProfileHeader = (props: ProfileHeaderProps) => {
           }}
           role="button"
         >
-          <SessionIconButton iconType="qr" iconSize="small" iconColor="var(--black-color)" />
+          <SessionIconButton iconType="qr" iconSize={26} iconColor="var(--black-color)" />
         </div>
       </div>
     </div>
@@ -205,13 +205,16 @@ export const EditProfileDialog = () => {
   };
 
   return (
-    /* The <div> element has a child <input> element that allows keyboard interaction */
+    /* The <div> element has a child <input> element that allows keyboard interaction
+    We use edit-profile-default class to prevent the qr icon on the avatar from clipping
+    */
     <div className="edit-profile-dialog" data-testid="edit-profile-dialog" onKeyUp={handleOnKeyUp}>
       <SessionWrapperModal
         title={window.i18n('editProfileModalTitle')}
         onClose={closeDialog}
         headerIconButtons={backButton}
         showExitIcon={true}
+        additionalClassName={mode === 'default' ? 'edit-profile-default' : undefined}
       >
         {mode === 'qr' && <QRView sessionID={ourId} />}
         {mode === 'default' && (
diff --git a/ts/components/icon/Icons.tsx b/ts/components/icon/Icons.tsx
index ee56465f1..98dfd4fc5 100644
--- a/ts/components/icon/Icons.tsx
+++ b/ts/components/icon/Icons.tsx
@@ -456,7 +456,7 @@ export const icons: Record<SessionIconType, IconProps> = {
     ratio: 1,
   },
   qr: {
-    path: 'M9.64 3.4h-6.8v6.4h6.8V3.4ZM8.42 8.66H4.06V4.55h4.36v4.11ZM2.85 20.42h6.79V14h-6.8v6.4Zm1.21-5.26h4.36v4.11H4.06v-4.11ZM20.68 3.4h-6.8v6.4h6.8V3.4Zm-1.22 5.26H15.1V4.55h4.36v4.11Z M18.58 5.38h-2.6v2.45h2.6V5.38Zm-1.22 1.3h-.16v-.15h.16v.15ZM7.54 5.38h-2.6v2.45h2.6V5.38Zm-1.22 1.3h-.16v-.15h.16v.15ZM4.95 18.45h2.59v-2.44h-2.6v2.44Zm1.21-1.3h.16v.15h-.16v-.15Z M19.82 17.21h-1.18v-1.13H16.2V17h-.9v-.92h-1.06v-.94h3.24v-2.26H15.3v-2.13H12V9.8h1.08V7.46h-1.09v-.68h1.09V4.43h-1.09V3.4h-1.38v4.4h1.08v1.88h-1.08v.97H9.4v1.16h-.77v-1.16H6.12v1.14h-.76v-1.14H2.85v2.45h3.39v-1.04h2.02v1.06h2.29v2.2h2.2v.76h-2.2v1.2h1.18v.88h-1.18v2.26h1.4v-2.06h.89v2.06h2.46v-2.1h.82v2.1h1.4v-2.26h-1.04v-.89h1.93v3.15h2.38v-2.13h-.97v-1.07Zm-5.95-3.38v1.1h-.73v-1.92h1.95v.82h-1.22Zm-3.09-2.85h.91v1.08h1.22v.82h-2.13v-1.9Zm1.15 3.2h-.17v-.15h.17v.15Zm1.21 2.16h.76v1.06h1.19v.75h-1.95v-1.81Z M20.79 13.88h-2.6v1.33h1.19v1.13h1.4v-2.46ZM20.68 13v-2.25H16v1.3h2.27v.96h2.4Z',
+    path: 'm9.64 3.4h-6.8v6.4h6.8v-6.4zm-1.22 5.26h-4.36v-4.11h4.36v4.11zm-5.57 11.76h6.79v-6.42h-6.8v6.4zm1.21-5.26h4.36v4.11h-4.36v-4.11zm16.62-11.76h-6.8v6.4h6.8v-6.4zm-1.22 5.26h-4.36v-4.11h4.36v4.11zm-.88-3.28h-2.6v2.45h2.6v-2.45zm-1.22 1.3h-.16v-.15h.16v.15zm-9.82-1.3h-2.6v2.45h2.6v-2.45zm-1.22 1.3h-.16v-.15h.16v.15zm-1.37 11.77h2.59v-2.44h-2.6v2.44zm1.21-1.3h.16v.15h-.16v-.15zm13.66.06h-1.18v-1.13h-2.44v.92h-.9v-.92h-1.06v-.94h3.24v-2.26h-2.18v-2.13h-3.3v-.95h1.08v-2.34h-1.09v-.68h1.09v-2.35h-1.09v-1.03h-1.38v4.4h1.08v1.88h-1.08v.97h-1.21v1.16h-.77v-1.16h-2.51v1.14h-.76v-1.14h-2.51v2.45h3.39v-1.04h2.02v1.06h2.29v2.2h2.2v.76h-2.2v1.2h1.18v.88h-1.18v2.26h1.4v-2.06h.89v2.06h2.46v-2.1h.82v2.1h1.4v-2.26h-1.04v-.89h1.93v3.15h2.38v-2.13h-.97v-1.07zm-5.95-3.38v1.1h-.73v-1.92h1.95v.82h-1.22zm-3.09-2.85h.91v1.08h1.22v.82h-2.13v-1.9zm1.15 3.2h-.17v-.15h.17v.15zm1.21 2.16h.76v1.06h1.19v.75h-1.95v-1.81zm7.65-2.46h-2.6v1.33h1.19v1.13h1.4v-2.46zm-.11-.88v-2.25h-4.68v1.3h2.27v.96h2.4z',
     viewBox: '0 0 24 24',
     ratio: 1,
   },