Page MenuHomePhabricator
Files F3727323

D3363.id10500.diff
No OneTemporary
Actions

D3363.id10500.diff
View Options

diff --git a/web/icons/selection.json b/web/icons/selection.json
--- a/web/icons/selection.json
+++ b/web/icons/selection.json
@@ -1031,7 +1031,6 @@
"attrs": [
{
"fill": "none",
- "stroke": "rgb(128, 128, 128)",
"strokeLinejoin": "round",
"strokeLinecap": "round",
"strokeMiterlimit": "4",
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
@@ -58,13 +58,13 @@
const chatNavigationItem = React.useMemo(
() => (
<NavigationPanel.Item tab="chat">
- <p>
+ <div className={css.appTab} onClick={onClickChat}>
<span className={css.chatIconWrapper}>
<SWMansionIcon icon="message-square" size={24} />
{chatBadge}
</span>
- <a onClick={onClickChat}>Chat</a>
- </p>
+ <p>Chat</p>
+ </div>
</NavigationPanel.Item>
),
[chatBadge, onClickChat],
@@ -88,10 +88,10 @@
}
return (
<NavigationPanel.Item tab="calendar">
- <p>
+ <div className={css.appTab} onClick={onClickCalendar}>
<SWMansionIcon icon="calendar" size={24} />
- <a onClick={onClickCalendar}>Calendar</a>
- </p>
+ <p>Calendar</p>
+ </div>
</NavigationPanel.Item>
);
}, [isCalendarEnabled, onClickCalendar]);
@@ -112,10 +112,10 @@
const appNavigationItem = React.useMemo(
() => (
<NavigationPanel.Item tab="apps">
- <p>
+ <div className={css.appTab} onClick={onClickApps}>
<SWMansionIcon icon="wrench" size={24} />
- <a onClick={onClickApps}>Apps</a>
- </p>
+ <p>Apps</p>
+ </div>
</NavigationPanel.Item>
),
[onClickApps],
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,25 +1,41 @@
.container {
grid-area: sBar;
background: var(--bg);
- color: var(--color);
+ color: var(--fg);
border-right: 1px solid var(--border-color);
display: flex;
}
.navigationPanelContainer {
width: 160px;
+ margin-top: 12px;
}
-.container ul {
- list-style-type: none;
- padding-top: 24px;
- padding-left: 28px;
+div.appTab {
+ display: flex;
+ flex-direction: row;
+ padding: 12px 0 12px 28px;
+ cursor: pointer;
}
-.container ul li {
- cursor: pointer;
- padding-bottom: 24px;
- line-height: 0;
+div.appTab svg {
+ padding-right: 12px;
+ color: var(--color-disabled);
+ stroke: var(--color-disabled);
+ fill: var(--color-disabled);
+}
+
+div.appTab p {
+ color: var(--color-disabled);
+}
+
+div.appTab:hover p,
+div.appTab:hover svg,
+div.current_tab p,
+div.current_tab svg {
+ color: var(--fg);
+ stroke: var(--fg);
+ fill: var(--fg);
}
.container p {
@@ -27,10 +43,6 @@
align-content: center;
}
-.container ul a {
- color: var(--color-disabled);
-}
-
.container svg {
color: var(--color-disabled);
padding-right: 12px;
@@ -56,13 +68,3 @@
font-size: 8px;
line-height: 1.25;
}
-
-li.current-tab svg {
- color: var(--fg);
-}
-
-li.current-tab a,
-li.current-tab svg {
- fill: var(--fg);
- color: var(--fg);
-}
diff --git a/web/sidebar/navigation-panel.react.js b/web/sidebar/navigation-panel.react.js
--- a/web/sidebar/navigation-panel.react.js
+++ b/web/sidebar/navigation-panel.react.js
@@ -34,24 +34,20 @@
return null;
}
return (
- <li
+ <div
key={child.props.tab}
className={classNames({
- [css['current-tab']]: navInfo.tab === child.props.tab,
+ [css.current_tab]: navInfo.tab === child.props.tab,
})}
>
{child}
- </li>
+ </div>
);
}),
[children, navInfo.tab],
);
- return (
- <div className={css.navigationPanelContainer}>
- <ul>{items}</ul>
- </div>
- );
+ return <div className={css.navigationPanelContainer}>{items}</div>;
}
const NavigationPanel = {

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 9, 8:48 PM (10 h, 53 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2839388
Default Alt Text
D3363.id10500.diff (4 KB)

Event Timeline