Page MenuHomePhabricator
Files F3531755

D5327.diff
No OneTemporary
Actions

D5327.diff
View Options

diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -144,10 +144,7 @@
return (
<>
- <div
- className={containerClassName}
- onClick={selectItemIfNotActiveCreation}
- >
+ <a className={containerClassName} onClick={selectItemIfNotActiveCreation}>
<div className={css.colorContainer}>
<div className={css.colorSplotchContainer}>
<div className={css.dotContainer}>{unreadDot}</div>
@@ -173,7 +170,7 @@
/>
<div className={lastActivityClassName}>{lastActivity}</div>
</div>
- </div>
+ </a>
{sidebars}
</>
);
diff --git a/web/chat/chat-thread-list-see-more-sidebars.react.js b/web/chat/chat-thread-list-see-more-sidebars.react.js
--- a/web/chat/chat-thread-list-see-more-sidebars.react.js
+++ b/web/chat/chat-thread-list-see-more-sidebars.react.js
@@ -30,7 +30,7 @@
[popModal, pushModal, threadInfo.id],
);
return (
- <div className={classNames(css.thread, css.sidebar)} onClick={onClick}>
+ <a className={classNames(css.thread, css.sidebar)} onClick={onClick}>
<a className={css.threadButton}>
<div
className={classNames({
@@ -43,7 +43,7 @@
<div className={css.seeMoreText}>See more...</div>
</div>
</a>
- </div>
+ </a>
);
}
diff --git a/web/chat/chat-thread-list-sidebar.react.js b/web/chat/chat-thread-list-sidebar.react.js
--- a/web/chat/chat-thread-list-sidebar.react.js
+++ b/web/chat/chat-thread-list-sidebar.react.js
@@ -33,7 +33,7 @@
}
return (
- <div
+ <a
className={classNames(css.threadListSidebar, css.sidebar, {
[css.activeThread]: active,
})}
@@ -46,7 +46,7 @@
mostRecentNonLocalMessage={mostRecentNonLocalMessage}
renderStyle="thread"
/>
- </div>
+ </a>
);
}
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,8 +1,8 @@
-div.thread {
+.thread {
display: flex;
flex-direction: row;
}
-div.threadListSidebar {
+.threadListSidebar {
display: flex;
flex-direction: row;
height: 32px;
@@ -10,33 +10,36 @@
position: relative;
cursor: pointer;
}
-div.threadListSidebar > svg {
+.threadListSidebar > svg {
position: absolute;
top: -7px;
left: 30px;
}
-div.thread:first-child {
+.thread:first-child {
padding-top: 6px;
}
-div.activeThread,
-div.threadListSidebar:hover {
+
+.activeThread,
+.threadListSidebar:hover {
background: var(--thread-active-bg);
}
-div.activeThread :is(div.dark, .lastMessage span.read, .title) {
+.activeThread :is(div.dark, .lastMessage span.read, .title) {
color: var(--chat-thread-list-color-active);
}
-div.activeThread .lastMessage.read {
+.activeThread .lastMessage.read {
color: var(--chat-thread-list-color-active);
}
-div.activeThread.thread:hover {
+.activeThread.thread:hover {
background: var(--thread-active-bg);
}
-div.thread:hover {
+
+.thread:hover {
background: var(--thread-hover-bg);
}
+
div.title {
flex: 1;
font-size: var(--m-font-16);
@@ -163,7 +166,7 @@
color: var(--thread-color-read);
align-self: flex-start;
}
-div.threadListSidebar > div.dotContainer {
+.threadListSidebar > div.dotContainer {
width: 16px;
}
div.sidebarTitle.unread {
diff --git a/web/chat/inline-sidebar.css b/web/chat/inline-sidebar.css
--- a/web/chat/inline-sidebar.css
+++ b/web/chat/inline-sidebar.css
@@ -18,7 +18,7 @@
right: 31px;
margin-left: 31px;
}
-div.inlineSidebarContent {
+.inlineSidebarContent {
background: var(--inline-sidebar-bg);
color: var(--inline-sidebar-color);
font-size: var(--s-font-14);
@@ -33,7 +33,7 @@
transition: background 0.2s ease-in-out;
}
-div.inlineSidebarContent:hover {
+.inlineSidebarContent:hover {
background: var(--inline-sidebar-bg-hover);
}
diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-sidebar.react.js
--- a/web/chat/inline-sidebar.react.js
+++ b/web/chat/inline-sidebar.react.js
@@ -61,13 +61,13 @@
return (
<div className={containerClasses}>
- <div
+ <a
className={css.inlineSidebarContent}
onClick={threadInfoExists ? onClick : null}
>
{sidebarItem}
{reactionsList}
- </div>
+ </a>
</div>
);
}
diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -64,14 +64,6 @@
background-color: var(--btn-bg-disabled);
}
-.round {
- background: var(--settings-btn-bg);
- width: 30px;
- height: 30px;
- border-radius: 50%;
- padding: 0;
-}
-
.text {
background: transparent;
white-space: nowrap;
diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -5,7 +5,7 @@
import css from './button.css';
-export type ButtonVariant = 'filled' | 'outline' | 'round' | 'text';
+export type ButtonVariant = 'filled' | 'outline' | 'text';
export type ButtonColor = {
+backgroundColor?: string,
+color?: string,
@@ -54,7 +54,7 @@
style = buttonColor;
} else if (variant === 'outline') {
style = buttonThemes.outline;
- } else if (variant === 'filled' || variant === 'round') {
+ } else if (variant === 'filled') {
style = buttonThemes.standard;
}
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
@@ -59,13 +59,13 @@
const chatNavigationItem = React.useMemo(
() => (
<NavigationPanel.Item tab="chat">
- <div className={css.navigationPanelTab} onClick={onClickChat}>
+ <a className={css.navigationPanelTab} onClick={onClickChat}>
<span className={css.chatIconWrapper}>
<SWMansionIcon icon="message-square" size={24} />
{chatBadge}
</span>
<p>Chat</p>
- </div>
+ </a>
</NavigationPanel.Item>
),
[chatBadge, onClickChat],
@@ -89,10 +89,10 @@
}
return (
<NavigationPanel.Item tab="calendar">
- <div className={css.navigationPanelTab} onClick={onClickCalendar}>
+ <a className={css.navigationPanelTab} onClick={onClickCalendar}>
<SWMansionIcon icon="calendar" size={24} />
<p>Calendar</p>
- </div>
+ </a>
</NavigationPanel.Item>
);
}, [isCalendarEnabled, onClickCalendar]);
@@ -113,10 +113,10 @@
const appNavigationItem = React.useMemo(
() => (
<NavigationPanel.Item tab="apps">
- <div className={css.navigationPanelTab} onClick={onClickApps}>
+ <a className={css.navigationPanelTab} onClick={onClickApps}>
<SWMansionIcon icon="globe-1" size={24} />
<p>Apps</p>
- </div>
+ </a>
</NavigationPanel.Item>
),
[onClickApps],
diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -30,3 +30,13 @@
border-left: 8px solid var(--community-settings-selected);
border-right: 8px solid transparent;
}
+
+.settingsIcon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--settings-btn-bg);
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+}
diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -4,7 +4,6 @@
import * as React from 'react';
import { useDispatch } from 'react-redux';
-import Button from '../components/button.react';
import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
import SWMansionIcon from '../SWMansionIcon.react';
@@ -55,9 +54,9 @@
</a>
<div className={css.spacer} />
<div className={settingsButtonContainerClass}>
- <Button variant="round" onClick={openAccountSettings}>
+ <a className={css.settingsIcon} onClick={openAccountSettings}>
<SWMansionIcon icon="settings" size={22} />
- </Button>
+ </a>
</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
@@ -11,26 +11,26 @@
margin-top: 12px;
}
-div.navigationPanelTab {
+.navigationPanelTab {
display: flex;
flex-direction: row;
padding: 12px 0 12px 28px;
cursor: pointer;
}
-div.navigationPanelTab svg {
+.navigationPanelTab svg {
padding-right: 12px;
color: var(--color-disabled);
stroke: var(--color-disabled);
fill: var(--color-disabled);
}
-div.navigationPanelTab p {
+.navigationPanelTab p {
color: var(--color-disabled);
}
-div.navigationPanelTab:hover p,
-div.navigationPanelTab:hover svg,
+.navigationPanelTab:hover p,
+.navigationPanelTab:hover svg,
div.current_tab p,
div.current_tab svg {
color: var(--fg);
diff --git a/web/sidebar/settings-switcher.react.js b/web/sidebar/settings-switcher.react.js
--- a/web/sidebar/settings-switcher.react.js
+++ b/web/sidebar/settings-switcher.react.js
@@ -23,9 +23,9 @@
);
const accountSettingsNavigationItem = React.useMemo(
() => (
- <div className={css.navigationPanelTab} onClick={onClickAccountSettings}>
+ <a className={css.navigationPanelTab} onClick={onClickAccountSettings}>
<p>My Account</p>
- </div>
+ </a>
),
[onClickAccountSettings],
);
@@ -42,9 +42,9 @@
);
const dangerZoneNavigationItem = React.useMemo(
() => (
- <div className={css.navigationPanelTab} onClick={onClickDangerZone}>
+ <a className={css.navigationPanelTab} onClick={onClickDangerZone}>
<p>Danger Zone</p>
- </div>
+ </a>
),
[onClickDangerZone],
);

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 26, 8:02 AM (12 h, 5 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2704474
Default Alt Text
D5327.diff (9 KB)

Event Timeline