Page MenuHomePhabricator
Files F3296027

D3322.id10025.diff
No OneTemporary
Actions

D3322.id10025.diff
View Options

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
@@ -22,6 +22,20 @@
border-bottom: 1px solid var(--border-color);
padding: 16px;
margin-bottom: 8px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.logoutContainer {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--fg);
+}
+
+.logoutLabel {
+ color: var(--account-settings-label);
}
.logoutContainer {
@@ -37,5 +51,14 @@
.username {
color: var(--fg);
- word-break: break-word;
+}
+
+.button {
+ color: var(--account-button-color);
+ background-color: transparent;
+ font-size: var(--m-font-16);
+ border: none;
+ cursor: pointer;
+ line-height: var(--line-height-text);
+ white-space: nowrap;
}
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
@@ -2,6 +2,10 @@
import * as React from 'react';
+import { logOut } from 'lib/actions/user-actions';
+import { preRequestUserStateSelector } from 'lib/selectors/account-selectors';
+import { useServerCall } from 'lib/utils/action-utils';
+
import { useSelector } from '../redux/redux-utils';
import css from './account-settings.css';
@@ -12,6 +16,12 @@
? currentUserInfo.username
: undefined;
+ const sendLogoutRequest = useServerCall(logOut);
+ const preRequestUserState = useSelector(preRequestUserStateSelector);
+ const logOutUser = React.useCallback(() => {
+ sendLogoutRequest(preRequestUserState);
+ }, [sendLogoutRequest, preRequestUserState]);
+
return (
<div className={css.container}>
<h4 className={css.header}>My Account</h4>
@@ -22,6 +32,9 @@
<span className={css.logoutLabel}>{'Logged in as '}</span>
<span className={css.username}>{username}</span>
</p>
+ <button className={css.button} onClick={logOutUser}>
+ Log out
+ </button>
</li>
</ul>
</div>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -108,4 +108,5 @@
--thread-menu-color-dangerous: var(--error-primary);
--thread-menu-color-dangerous-hover: var(--error-light-50);
--account-settings-label: var(--shades-black-60);
+ --account-button-color: var(--violet-dark-100);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 18, 12:29 AM (21 h, 53 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2532435
Default Alt Text
D3322.id10025.diff (2 KB)

Event Timeline