diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css --- a/web/settings/account-settings.css +++ b/web/settings/account-settings.css @@ -47,3 +47,17 @@ line-height: var(--line-height-text); white-space: nowrap; } + +.passwordContainer { + display: flex; +} + +.password { + align-items: center; + padding-right: 16px; +} + +.editPasswordLink { + color: var(--account-settings-label); + cursor: pointer; +} diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js --- a/web/settings/account-settings.react.js +++ b/web/settings/account-settings.react.js @@ -7,6 +7,7 @@ import { useServerCall } from 'lib/utils/action-utils'; import { useSelector } from '../redux/redux-utils'; +import SWMansionIcon from '../SWMansionIcon.react'; import css from './account-settings.css'; function AccountSettings(): React.Node { @@ -36,6 +37,15 @@ Log out </button> </li> + <li> + <span>Password</span> + <span className={css.passwordContainer}> + <span className={css.password}>******</span> + <a className={css.editPasswordLink}> + <SWMansionIcon icon="edit" size={22} /> + </a> + </span> + </li> </ul> </div> </div>