From 66f62298a28ee256e5cbfe35d0b6a1aaec065006 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Fri, 26 Apr 2024 02:07:22 +0200
Subject: [PATCH 1/3] Align "Update password" button to the left

---
 .changelog/1916.trivial.md                                | 1 +
 .../Toolbar/Features/Profile/UpdatePassword.tsx           | 2 +-
 .../Profile/__tests__/__snapshots__/index.test.tsx.snap   | 8 ++------
 src/app/components/Toolbar/Features/Profile/index.tsx     | 2 +-
 4 files changed, 5 insertions(+), 8 deletions(-)
 create mode 100644 .changelog/1916.trivial.md

diff --git a/.changelog/1916.trivial.md b/.changelog/1916.trivial.md
new file mode 100644
index 0000000000..476a1ec704
--- /dev/null
+++ b/.changelog/1916.trivial.md
@@ -0,0 +1 @@
+Align "Update password" button to the left
diff --git a/src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx b/src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx
index d4a412c4ce..64abef96fc 100644
--- a/src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx
+++ b/src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx
@@ -85,7 +85,7 @@ export const UpdatePassword = () => {
         password1Placeholder={t('toolbar.profile.password.enterNewPassword', 'New password')}
         password2Placeholder={t('toolbar.profile.password.reenterNewPassword', 'Re-enter new password')}
       />
-      <Box direction="row" justify="end" margin={{ top: 'medium' }}>
+      <Box direction="row" margin={{ top: 'medium' }}>
         <Button primary type="submit" label={t('toolbar.profile.password.submit', 'Update password')} />
       </Box>
       {notificationVisible && (
diff --git a/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
index 9163f134f9..c55bc4c3dd 100644
--- a/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
@@ -141,10 +141,6 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
 }
 
 .c13 {
@@ -157,7 +153,7 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
   align-self: flex-start;
-  margin-top: 24px;
+  margin-top: 40px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -621,7 +617,7 @@ exports[`<Profile  /> should render unavailable state 1`] = `
 
 @media only screen and (max-width:768px) {
   .c13 {
-    margin-top: 12px;
+    margin-top: 40px;
   }
 }
 
diff --git a/src/app/components/Toolbar/Features/Profile/index.tsx b/src/app/components/Toolbar/Features/Profile/index.tsx
index 91cd5ff74d..ce12db90db 100644
--- a/src/app/components/Toolbar/Features/Profile/index.tsx
+++ b/src/app/components/Toolbar/Features/Profile/index.tsx
@@ -73,7 +73,7 @@ export const Profile = ({ closeHandler }: ProfileProps) => {
         {isProfileAvailable && (
           <>
             <UpdatePassword />
-            <Box gap="small" margin={{ top: 'medium' }} alignSelf="start">
+            <Box gap="small" margin={{ top: '40px' }} alignSelf="start">
               <Text>{t('toolbar.profile.deletion', 'Deletion')}</Text>
               <DeleteProfileButton prominent variant="voluntary" />
             </Box>

From 9e46ab1f9ca79fdb464b9a8381f595b4199cd0c1 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Wed, 8 May 2024 02:43:43 +0200
Subject: [PATCH 2/3] Move "Delete profile" button next to "Lock profile" at
 the bottom

---
 .changelog/1916.trivial.md                    |   2 +-
 .../__snapshots__/index.test.tsx.snap         | 164 +++++++-----------
 .../Toolbar/Features/Profile/index.tsx        |  14 +-
 src/locales/en/translation.json               |   1 -
 4 files changed, 67 insertions(+), 114 deletions(-)

diff --git a/.changelog/1916.trivial.md b/.changelog/1916.trivial.md
index 476a1ec704..73f7bfd1e9 100644
--- a/.changelog/1916.trivial.md
+++ b/.changelog/1916.trivial.md
@@ -1 +1 @@
-Align "Update password" button to the left
+Move "Delete profile" button next to "Lock profile" at the bottom
diff --git a/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
index c55bc4c3dd..d6a23df2f2 100644
--- a/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
@@ -150,37 +150,19 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
   margin-top: 40px;
   min-width: 0;
   min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
 }
 
 .c17 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  max-width: 100%;
-  margin-top: 48px;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
-  min-width: 0;
-  min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -209,10 +191,10 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
-  height: 12px;
+  width: 24px;
 }
 
-.c20 {
+.c18 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
@@ -222,11 +204,6 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   width: 12px;
 }
 
-.c14 {
-  font-size: 18px;
-  line-height: 24px;
-}
-
 .c9 {
   display: inline-block;
   box-sizing: border-box;
@@ -360,7 +337,7 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   border: 0;
 }
 
-.c16 {
+.c14 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -389,51 +366,51 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   font-weight: bold;
 }
 
-.c16:hover {
+.c14:hover {
   box-shadow: 0px 0px 0px 2px #d24c00;
 }
 
-.c16:focus {
+.c14:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c16:focus > circle,
-.c16:focus > ellipse,
-.c16:focus > line,
-.c16:focus > path,
-.c16:focus > polygon,
-.c16:focus > polyline,
-.c16:focus > rect {
+.c14:focus > circle,
+.c14:focus > ellipse,
+.c14:focus > line,
+.c14:focus > path,
+.c14:focus > polygon,
+.c14:focus > polyline,
+.c14:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c16:focus::-moz-focus-inner {
+.c14:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c16:focus:not(:focus-visible) {
+.c14:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c16:focus:not(:focus-visible) > circle,
-.c16:focus:not(:focus-visible) > ellipse,
-.c16:focus:not(:focus-visible) > line,
-.c16:focus:not(:focus-visible) > path,
-.c16:focus:not(:focus-visible) > polygon,
-.c16:focus:not(:focus-visible) > polyline,
-.c16:focus:not(:focus-visible) > rect {
+.c14:focus:not(:focus-visible) > circle,
+.c14:focus:not(:focus-visible) > ellipse,
+.c14:focus:not(:focus-visible) > line,
+.c14:focus:not(:focus-visible) > path,
+.c14:focus:not(:focus-visible) > polygon,
+.c14:focus:not(:focus-visible) > polyline,
+.c14:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c16:focus:not(:focus-visible)::-moz-focus-inner {
+.c14:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
-.c18 {
+.c16 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -459,47 +436,47 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   font-weight: bold;
 }
 
-.c18:hover {
+.c16:hover {
   box-shadow: 0px 0px 0px 2px #0500e2;
 }
 
-.c18:focus {
+.c16:focus {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c18:focus > circle,
-.c18:focus > ellipse,
-.c18:focus > line,
-.c18:focus > path,
-.c18:focus > polygon,
-.c18:focus > polyline,
-.c18:focus > rect {
+.c16:focus > circle,
+.c16:focus > ellipse,
+.c16:focus > line,
+.c16:focus > path,
+.c16:focus > polygon,
+.c16:focus > polyline,
+.c16:focus > rect {
   outline: none;
   box-shadow: 0 0 2px 2px #00A9FF;
 }
 
-.c18:focus::-moz-focus-inner {
+.c16:focus::-moz-focus-inner {
   border: 0;
 }
 
-.c18:focus:not(:focus-visible) {
+.c16:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
 }
 
-.c18:focus:not(:focus-visible) > circle,
-.c18:focus:not(:focus-visible) > ellipse,
-.c18:focus:not(:focus-visible) > line,
-.c18:focus:not(:focus-visible) > path,
-.c18:focus:not(:focus-visible) > polygon,
-.c18:focus:not(:focus-visible) > polyline,
-.c18:focus:not(:focus-visible) > rect {
+.c16:focus:not(:focus-visible) > circle,
+.c16:focus:not(:focus-visible) > ellipse,
+.c16:focus:not(:focus-visible) > line,
+.c16:focus:not(:focus-visible) > path,
+.c16:focus:not(:focus-visible) > polygon,
+.c16:focus:not(:focus-visible) > polyline,
+.c16:focus:not(:focus-visible) > rect {
   outline: none;
   box-shadow: none;
 }
 
-.c18:focus:not(:focus-visible)::-moz-focus-inner {
+.c16:focus:not(:focus-visible)::-moz-focus-inner {
   border: 0;
 }
 
@@ -621,15 +598,9 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   }
 }
 
-@media only screen and (max-width:768px) {
-  .c17 {
-    margin-top: 24px;
-  }
-}
-
 @media only screen and (max-width:768px) {
   .c15 {
-    height: 6px;
+    width: 12px;
   }
 }
 
@@ -818,35 +789,26 @@ exports[`<Profile  /> should render unavailable state 1`] = `
         </button>
       </div>
     </form>
-    <div
-      class="c13"
-    >
-      <span
-        class="c14"
-      >
-        Deletion
-      </span>
-      <div
-        class="c15"
-      />
-      <button
-        class="c16"
-        type="button"
-      >
-        Delete profile
-      </button>
-    </div>
   </div>
   <div
-    class="c17"
+    class="c13"
   >
     <button
-      class="c18"
+      class="c14"
+      type="button"
+    >
+      Delete profile
+    </button>
+    <div
+      class="c15"
+    />
+    <button
+      class="c16"
       data-testid="profile-modal-lock-wallet"
       type="button"
     >
       <div
-        class="c19"
+        class="c17"
       >
         <svg
           aria-label="Lock"
@@ -859,7 +821,7 @@ exports[`<Profile  /> should render unavailable state 1`] = `
           />
         </svg>
         <div
-          class="c20"
+          class="c18"
         />
         Lock profile
       </div>
diff --git a/src/app/components/Toolbar/Features/Profile/index.tsx b/src/app/components/Toolbar/Features/Profile/index.tsx
index ce12db90db..8dbfbe05a9 100644
--- a/src/app/components/Toolbar/Features/Profile/index.tsx
+++ b/src/app/components/Toolbar/Features/Profile/index.tsx
@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom'
 import { Trans, useTranslation } from 'react-i18next'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
-import { Text } from 'grommet/es6/components/Text'
 import { User } from 'grommet-icons/es6/icons/User'
 import { selectUnlockedStatus } from 'app/state/selectUnlockedStatus'
 import { UpdatePassword } from './UpdatePassword'
@@ -70,17 +69,10 @@ export const Profile = ({ closeHandler }: ProfileProps) => {
           </ProfileEmptyState>
         )}
 
-        {isProfileAvailable && (
-          <>
-            <UpdatePassword />
-            <Box gap="small" margin={{ top: '40px' }} alignSelf="start">
-              <Text>{t('toolbar.profile.deletion', 'Deletion')}</Text>
-              <DeleteProfileButton prominent variant="voluntary" />
-            </Box>
-          </>
-        )}
+        {isProfileAvailable && <UpdatePassword />}
       </Box>
-      <Box align="end" margin={{ top: 'large' }}>
+      <Box direction="row" justify="between" gap="medium" margin={{ top: '40px' }}>
+        {isProfileAvailable ? <DeleteProfileButton prominent variant="voluntary" /> : <span />}
         {isLockableOrCloseable === 'closeable' && (
           <Button
             data-testid="profile-modal-close-wallet"
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index abaa0ca169..970528be1d 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -453,7 +453,6 @@
       "testnet": "Testnet"
     },
     "profile": {
-      "deletion": "Deletion",
       "notAvailable": "You can setup your profile while <OpenWalletButton>opening a wallet</OpenWalletButton>.",
       "password": {
         "current": "Current password",

From 3320f431b3ca240386d83290bc2be966d05d5a16 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Tue, 7 May 2024 02:07:21 +0200
Subject: [PATCH 3/3] Focus first field if user clicks "Set a new password"

---
 src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx  | 2 +-
 .../Profile/__tests__/__snapshots__/index.test.tsx.snap         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx b/src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx
index 64abef96fc..f3bc1b324b 100644
--- a/src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx
+++ b/src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx
@@ -66,7 +66,7 @@ export const UpdatePassword = () => {
       value={value}
     >
       <Paragraph>
-        <label htmlFor="password1">{t('toolbar.profile.password.title', 'Set a new password')}</label>
+        <label htmlFor="currentPassword">{t('toolbar.profile.password.title', 'Set a new password')}</label>
       </Paragraph>
       <PasswordField<FormValue>
         placeholder={t('toolbar.profile.password.current', 'Current password')}
diff --git a/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
index d6a23df2f2..08a3327d54 100644
--- a/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap
@@ -621,7 +621,7 @@ exports[`<Profile  /> should render unavailable state 1`] = `
         class="c2"
       >
         <label
-          for="password1"
+          for="currentPassword"
         >
           Set a new password
         </label>