Page MenuHomePhabricator
Files F3728494

D3363.id10127.diff
No OneTemporary
Actions

D3363.id10127.diff
View Options

diff --git a/web/sidebar/app-switcher.react.js b/web/sidebar/app-switcher.react.js
--- a/web/sidebar/app-switcher.react.js
+++ b/web/sidebar/app-switcher.react.js
@@ -92,10 +92,12 @@
}
const chatNavClasses = classNames({
- [css['current-tab']]: navInfo.tab === 'chat',
+ [css.appTab]: true,
+ [css.activeTab]: navInfo.tab === 'chat',
});
const appsNavClasses = classNames({
- [css['current-tab']]: navInfo.tab === 'apps',
+ [css.appTab]: true,
+ [css.activeTab]: navInfo.tab === 'apps',
});
const calendarLink = React.useMemo(() => {
@@ -103,38 +105,31 @@
return null;
}
const calendarNavClasses = classNames({
- [css['current-tab']]: navInfo.tab === 'calendar',
+ [css.appTab]: true,
+ [css.activeTab]: navInfo.tab === 'calendar',
});
return (
- <li>
- <p className={calendarNavClasses}>
- <SWMansionIcon icon="calendar" size={24} />
- <a onClick={onClickCalendar}>Calendar</a>
- </p>
- </li>
+ <div onClick={onClickCalendar} className={calendarNavClasses}>
+ <SWMansionIcon icon="calendar" size={24} />
+ <p>Calendar</p>
+ </div>
);
}, [isCalendarEnabled, navInfo.tab, onClickCalendar]);
return (
<div className={css.appSwitcherContainer}>
- <ul>
- <li>
- <p className={chatNavClasses}>
- <span className={css.chatIconWrapper}>
- <SWMansionIcon icon="message-square" size={24} />
- {chatBadge}
- </span>
- <a onClick={onClickChat}>Chat</a>
- </p>
- </li>
- {calendarLink}
- <li>
- <p className={appsNavClasses}>
- <SWMansionIcon icon="wrench" size={24} />
- <a onClick={onClickApps}>Apps</a>
- </p>
- </li>
- </ul>
+ <div onClick={onClickChat} className={chatNavClasses}>
+ <span className={css.chatIconWrapper}>
+ <SWMansionIcon icon="message-square" size={24} />
+ {chatBadge}
+ </span>
+ <p>Chat</p>
+ </div>
+ {calendarLink}
+ <div onClick={onClickApps} className={appsNavClasses}>
+ <SWMansionIcon icon="wrench" size={24} />
+ <p>Apps</p>
+ </div>
</div>
);
}
diff --git a/web/sidebar/left-layout-aside.css b/web/sidebar/left-layout-aside.css
--- a/web/sidebar/left-layout-aside.css
+++ b/web/sidebar/left-layout-aside.css
@@ -1,39 +1,39 @@
.container {
grid-area: sBar;
background: var(--bg);
- color: var(--color);
+ color: var(--fg);
border-right: 1px solid var(--border-color);
display: flex;
}
.appSwitcherContainer {
width: 160px;
+ margin-top: 24px;
}
-.container ul {
- list-style-type: none;
- padding-top: 24px;
- padding-left: 28px;
-}
-
-.container ul li {
+div.appTab {
+ display: flex;
+ flex-direction: row;
+ padding: 12px 0 12px 28px;
cursor: pointer;
- padding-bottom: 24px;
- line-height: 0;
}
-
-.container p {
- display: flex;
- align-content: center;
+div.appTab svg {
+ padding-right: 12px;
+ color: var(--color-disabled);
+ stroke: var(--color-disabled);
+ fill: var(--color-disabled);
}
-
-.container ul a {
+div.appTab p {
color: var(--color-disabled);
}
-.container svg {
- color: var(--color-disabled);
- padding-right: 12px;
+div.appTab:hover p,
+div.appTab:hover svg,
+div.activeTab p,
+div.activeTab svg {
+ color: var(--fg);
+ stroke: var(--fg);
+ fill: var(--fg);
}
.chatIconWrapper {
@@ -56,13 +56,3 @@
font-size: 8px;
line-height: 1.25;
}
-
-p.current-tab svg {
- color: var(--fg);
-}
-
-p.current-tab a,
-p.current-tab svg {
- fill: var(--fg);
- color: var(--fg);
-}

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 9, 9:44 PM (11 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2840231
Default Alt Text
D3363.id10127.diff (3 KB)

Event Timeline