Page MenuHomePhabricator
Files F3509640

No OneTemporary
Actions

View Options

diff --git a/web/navigation-panels/app-switcher.react.js b/web/navigation-panels/app-switcher.react.js
index 5172f5b2c..aab37d2f5 100644
--- a/web/navigation-panels/app-switcher.react.js
+++ b/web/navigation-panels/app-switcher.react.js
@@ -1,108 +1,108 @@
// @flow
import * as React from 'react';
import { useDispatch } from 'react-redux';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import {
mostRecentlyReadThreadSelector,
unreadCount,
} from 'lib/selectors/thread-selectors.js';
import NavigationPanel from './navigation-panel.react.js';
import css from './topbar.css';
import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
import { navTabSelector } from '../selectors/nav-selectors.js';
function AppSwitcher(): React.Node {
const activeChatThreadID = useSelector(
state => state.navInfo.activeChatThreadID,
);
const mostRecentlyReadThread = useSelector(mostRecentlyReadThreadSelector);
const isActiveThreadCurrentlyUnread = useSelector(
state =>
!activeChatThreadID ||
!!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
);
const dispatch = useDispatch();
const onClickChat = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault();
dispatch({
type: updateNavInfoActionType,
payload: {
tab: 'chat',
activeChatThreadID: isActiveThreadCurrentlyUnread
? mostRecentlyReadThread
: activeChatThreadID,
},
});
},
[
dispatch,
isActiveThreadCurrentlyUnread,
mostRecentlyReadThread,
activeChatThreadID,
],
);
const boundUnreadCount = useSelector(unreadCount);
let chatBadge = null;
if (boundUnreadCount > 0) {
chatBadge = <span className={css.chatBadge}>{boundUnreadCount}</span>;
}
const chatNavigationItem = React.useMemo(
() => (
<NavigationPanel.Item tab="chat">
<a className={css.navigationPanelTab} onClick={onClickChat}>
<span className={css.chatIconWrapper}>
- <SWMansionIcon icon="message-square" size={24} />
+ <SWMansionIcon icon="message-square" size={20} />
{chatBadge}
</span>
<p>Chat</p>
</a>
</NavigationPanel.Item>
),
[chatBadge, onClickChat],
);
const onClickCalendar = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault();
dispatch({
type: updateNavInfoActionType,
payload: { tab: 'calendar' },
});
},
[dispatch],
);
const isCalendarEnabled = useSelector(state => state.enabledApps.calendar);
const calendarNavigationItem = React.useMemo(() => {
if (!isCalendarEnabled) {
return null;
}
return (
<NavigationPanel.Item tab="calendar">
<a className={css.navigationPanelTab} onClick={onClickCalendar}>
- <SWMansionIcon icon="calendar" size={24} />
+ <SWMansionIcon icon="calendar" size={20} />
<p>Calendar</p>
</a>
</NavigationPanel.Item>
);
}, [isCalendarEnabled, onClickCalendar]);
return (
<NavigationPanel.Container tabSelector={navTabSelector} horizontal={true}>
{chatNavigationItem}
{calendarNavigationItem}
</NavigationPanel.Container>
);
}
export default AppSwitcher;
diff --git a/web/navigation-panels/topbar.css b/web/navigation-panels/topbar.css
index c7c7f1962..fa62a3060 100644
--- a/web/navigation-panels/topbar.css
+++ b/web/navigation-panels/topbar.css
@@ -1,90 +1,91 @@
.container {
border-bottom: 1px solid var(--border);
- height: 60px;
display: flex;
flex-direction: row;
align-items: center;
}
.navigationPanelContainer {
flex-direction: row;
display: flex;
- height: 60px;
+ height: 56px;
}
.plusButton {
margin: 12px;
display: flex;
cursor: pointer;
color: var(--topbar-button-fg);
align-items: center;
justify-content: center;
background-color: var(--topbar-button-bg);
border-radius: 4px;
width: 32px;
height: 32px;
}
.plusButton:hover {
background-color: var(--topbar-button-bg-hover);
}
.navigationPanelTab {
display: flex;
flex-direction: row;
padding: 16px;
cursor: pointer;
}
.navigationPanelTab svg {
color: var(--color-disabled);
stroke: var(--color-disabled);
fill: var(--color-disabled);
}
.navigationPanelTab p {
color: var(--color-disabled);
margin-right: 8px;
margin-left: 8px;
+ font-size: var(--s-font-14);
+ font-weight: var(--semi-bold);
}
.navigationPanelTab:hover p,
.navigationPanelTab:hover svg,
div.current_tab p,
div.current_tab svg {
color: var(--fg);
stroke: var(--fg);
fill: var(--fg);
}
div.current_tab {
border-bottom: 2px solid var(--tabs-header-active-border);
- height: 58px;
+ box-sizing: border-box;
}
.chatIconWrapper {
position: relative;
}
span.chatBadge {
position: absolute;
top: -4px;
left: 13px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
- width: 16px;
- height: 16px;
+ width: 14px;
+ height: 14px;
color: var(--fg);
background: var(--unread-bg);
border-radius: 13px;
font-size: 8px;
line-height: 1.25;
}
.tabs {
display: flex;
overflow: auto;
max-width: calc(100% - 56px);
}
diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
index ebd9a73b7..5ee2d2c9c 100644
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -1,74 +1,74 @@
.container {
display: flex;
flex-direction: column;
background: var(--community-bg);
border-right: 1px solid var(--border-color);
flex-grow: 1;
overflow: auto;
}
.spacer {
flex-grow: 1;
}
.header {
border-bottom: 1px solid var(--community-drawer-lines);
- padding: 10px 0 10px 0;
+ padding: 8px 0 8px 0;
align-items: center;
display: flex;
margin-right: 16px;
}
.footer {
border-top: 1px solid var(--community-drawer-lines);
padding: 12px 0 12px 0;
align-items: center;
display: flex;
margin-right: 16px;
}
.sideLine {
width: 3px;
height: 24px;
border-radius: 0 4px 4px 0;
margin-right: 14px;
}
.sideLineActive {
background-color: var(--community-settings-selected);
}
.itemContainer {
display: flex;
height: 40px;
align-items: center;
width: 100%;
}
.itemContainer svg {
color: var(--fg);
padding: 0;
}
.settingsIcon {
display: flex;
align-items: center;
justify-content: center;
background: var(--settings-btn-bg);
width: 30px;
height: 30px;
border-radius: 50%;
}
.drawerWrapper {
width: 100%;
overflow: auto;
}
.buttonTitle {
font-weight: 500;
font-size: var(--s-font-14);
line-height: 22px;
padding-left: 12px;
color: var(--fg);
}

File Metadata

Mime Type
text/x-diff
Expires
Mon, Dec 23, 7:01 AM (1 d, 5 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2690514
Default Alt Text
(6 KB)

Event Timeline