Merge pull request #1916 from oasisprotocol/lw/align-update-pass

Align "Update password" button to the left

.changelog/1916.trivial.md

@@ -0,0 +1 @@
+Move "Delete profile" button next to "Lock profile" at the bottom

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')}
@@ -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 && (

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 {
@@ -154,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: 24px;
+  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;
@@ -213,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;
@@ -226,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;
@@ -364,7 +337,7 @@ exports[`<Profile  /> should render unavailable state 1`] = `
   border: 0;
 }
 
-.c16 {
+.c14 {
   display: inline-block;
   box-sizing: border-box;
   cursor: pointer;
@@ -393,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;
@@ -463,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,19 +594,13 @@ exports[`<Profile  /> should render unavailable state 1`] = `
 
 @media only screen and (max-width:768px) {
   .c13 {
-    margin-top: 12px;
-  }
-}
-
-@media only screen and (max-width:768px) {
-  .c17 {
-    margin-top: 24px;
+    margin-top: 40px;
   }
 }
 
 @media only screen and (max-width:768px) {
   .c15 {
-    height: 6px;
+    width: 12px;
   }
 }
 
@@ -654,7 +621,7 @@ exports[`<Profile  /> should render unavailable state 1`] = `
         class="c2"
       >
         <label
-          for="password1"
+          for="currentPassword"
         >
           Set a new password
         </label>
@@ -822,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"
@@ -863,7 +821,7 @@ exports[`<Profile  /> should render unavailable state 1`] = `
           />
         </svg>
         <div
-          class="c20"
+          class="c18"
         />
         Lock profile
       </div>

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: 'medium' }} 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"

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",