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 ( <> -
+
{unreadDot}
@@ -173,7 +170,7 @@ />
{lastActivity}
-
+
{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 ( -
+
See more...
-
+ ); } 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 ( -
-
+ ); } 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 { +a.thread { display: flex; flex-direction: row; } -div.threadListSidebar { +a.threadListSidebar { display: flex; flex-direction: row; height: 32px; @@ -10,33 +10,36 @@ position: relative; cursor: pointer; } -div.threadListSidebar > svg { +a.threadListSidebar > svg { position: absolute; top: -7px; left: 30px; } -div.thread:first-child { +a.thread:first-child { padding-top: 6px; } -div.activeThread, -div.threadListSidebar:hover { + +a.activeThread, +a.threadListSidebar:hover { background: var(--thread-active-bg); } -div.activeThread :is(div.dark, .lastMessage span.read, .title) { +a.activeThread :is(div.dark, .lastMessage span.read, .title) { color: var(--chat-thread-list-color-active); } -div.activeThread .lastMessage.read { +a.activeThread .lastMessage.read { color: var(--chat-thread-list-color-active); } -div.activeThread.thread:hover { +a.activeThread.thread:hover { background: var(--thread-active-bg); } -div.thread:hover { + +a.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 { +a.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 { +a.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 { +a.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 (
-
{sidebarItem} {reactionsList} -
+
); } diff --git a/web/components/button.css b/web/components/button.css --- a/web/components/button.css +++ b/web/components/button.css @@ -73,14 +73,6 @@ background: var(--btn-bg-danger-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 = 'primary' | 'secondary' | 'round' | 'text'; +export type ButtonVariant = 'primary' | 'secondary' | 'text'; export type ButtonColor = | 'success' | 'danger' 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( () => ( -
+ {chatBadge}

Chat

-
+
), [chatBadge, onClickChat], @@ -89,10 +89,10 @@ } return ( -
+

Calendar

-
+
); }, [isCalendarEnabled, onClickCalendar]); @@ -113,10 +113,10 @@ const appNavigationItem = React.useMemo( () => ( -
+

Apps

-
+
), [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 @@
- +
); 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 { +a.navigationPanelTab { display: flex; flex-direction: row; padding: 12px 0 12px 28px; cursor: pointer; } -div.navigationPanelTab svg { +a.navigationPanelTab svg { padding-right: 12px; color: var(--color-disabled); stroke: var(--color-disabled); fill: var(--color-disabled); } -div.navigationPanelTab p { +a.navigationPanelTab p { color: var(--color-disabled); } -div.navigationPanelTab:hover p, -div.navigationPanelTab:hover svg, +a.navigationPanelTab:hover p, +a.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( () => ( -
+

My Account

-
+ ), [onClickAccountSettings], ); @@ -42,9 +42,9 @@ ); const dangerZoneNavigationItem = React.useMemo( () => ( -
+

Danger Zone

-
+ ), [onClickDangerZone], );