From c2b174ab532f6b0938f81c1174b4874b44bdf3cc Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Wed, 6 Oct 2021 18:02:59 +0200 Subject: [PATCH] Fix narrow topbar (#47) --- .../src/components/Chat/ChatBody.tsx | 22 +++++++++-- .../src/components/Icons/BackIcon.tsx | 31 ---------------- .../components/NarrowMode/NarrowChannels.tsx | 9 +---- .../components/NarrowMode/NarrowMembers.tsx | 3 +- .../components/NarrowMode/NarrowTopbar.tsx | 37 +++---------------- 5 files changed, 26 insertions(+), 76 deletions(-) delete mode 100644 packages/react-chat/src/components/Icons/BackIcon.tsx diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index 4e4394bc..b612d169 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -54,8 +54,8 @@ export function ChatBody({ const switchChannelList = useCallback(() => { setShowMembersList(false); - setShowChannelsList(true); - }, []); + setShowChannelsList(!showChannelsList); + }, [showChannelsList]); const switchMemberList = useCallback(() => { setShowChannelsList(false); @@ -64,7 +64,12 @@ export function ChatBody({ return ( - + {(showCommunity || narrow) && ( @@ -152,10 +157,19 @@ const ChannelWrapper = styled.div` } `; -const ChatTopbar = styled.div` +const ChatTopbar = styled.div` display: flex; justify-content: space-between; padding: 5px 8px; + background: ${({ theme }) => theme.bodyBackgroundColor}; + + &.narrow { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 2; + } `; const CommunityWrap = styled.div` diff --git a/packages/react-chat/src/components/Icons/BackIcon.tsx b/packages/react-chat/src/components/Icons/BackIcon.tsx deleted file mode 100644 index 7fdb97dc..00000000 --- a/packages/react-chat/src/components/Icons/BackIcon.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -import { Theme } from "../../styles/themes"; - -interface ThemeProps { - theme: Theme; -} - -export const BackIcon = ({ theme }: ThemeProps) => { - return ( - - - - ); -}; - -const Icon = styled.svg` - & > path { - fill: ${({ theme }) => theme.primary}; - } -`; diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx index e26ef36c..a20900d4 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx @@ -26,12 +26,7 @@ export function NarrowChannels({ }: NarrowChannelsProps) { return ( - setShowChannels(false)} - /> + {channels.map((channel) => ( ` - padding: 18px; + padding: 82px 18px 18px; background: ${({ theme }) => theme.bodyBackgroundColor}; `; diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx index 509c57c3..bae322d3 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx @@ -26,7 +26,6 @@ export function NarrowMembers({ theme={theme} list="Community members" community={community.name} - onClick={() => setShowMembersList(false)} /> ` - padding: 18px; + padding: 82px 18px 18px; background: ${({ theme }) => theme.bodyBackgroundColor}; `; diff --git a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx index 05bd6e86..e537c886 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx @@ -2,31 +2,18 @@ import React from "react"; import styled from "styled-components"; import { Theme } from "../../styles/themes"; -import { BackIcon } from "../Icons/BackIcon"; interface NarrowTopbarProps { theme: Theme; list: string; community: string; - onClick: () => void; } -export function NarrowTopbar({ - theme, - list, - community, - onClick, -}: NarrowTopbarProps) { +export function NarrowTopbar({ theme, list, community }: NarrowTopbarProps) { return ( - - - - - - {list} - {community} - + {list} + {community} ); } @@ -38,17 +25,13 @@ interface ThemeProps { const TopbarWrapper = styled.div` display: flex; justify-content: center; + flex-direction: column; + text-align: center; background-color: ${({ theme }) => theme.bodyBackgroundColor}; padding: 14px 0; position: relative; `; -const HeadingWrapper = styled.div` - display: flex; - flex-direction: column; - text-align: center; -`; - const Heading = styled.p` font-weight: 500; color: ${({ theme }) => theme.primary}; @@ -58,13 +41,3 @@ const SubHeading = styled.p` font-weight: 500; color: ${({ theme }) => theme.secondary}; `; - -const GoBackBtn = styled.button` - width: 24px; - height: 24px; - margin-right: 18px; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); -`;