From 39a02cc0ed37d780f7ae9ff22e8a9d724ce91f9f Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Thu, 13 Jan 2022 08:46:08 +0100 Subject: [PATCH] UI fixes & improvements (#185) * Return back arrow button * Hide activity center in narrow mode * Extract back button * Add back button to chat creation narrow mode * Extract activity center components * Add activity center to chat creation mode * Remove activity center button border * Change cursor for picture input * Member name wrapping --- .../ActivityCenter/ActivityButton.tsx | 108 +++++++++ .../ActivityCenter/ActivityCenter.tsx | 184 +++++++++++++++ .../ActivityMessage.tsx} | 223 ++---------------- .../src/components/Buttons/BackButton.tsx | 31 +++ .../src/components/Chat/ChatCreation.tsx | 14 +- .../src/components/Chat/ChatInput.tsx | 8 + .../src/components/Chat/ChatTopbar.tsx | 87 +------ .../src/components/Icons/LeftIcon.tsx | 19 +- .../src/components/Members/Member.tsx | 4 + .../components/NarrowMode/NarrowChannels.tsx | 11 +- .../components/NarrowMode/NarrowMembers.tsx | 14 +- .../components/NarrowMode/NarrowTopbar.tsx | 27 ++- 12 files changed, 417 insertions(+), 313 deletions(-) create mode 100644 packages/react-chat/src/components/ActivityCenter/ActivityButton.tsx create mode 100644 packages/react-chat/src/components/ActivityCenter/ActivityCenter.tsx rename packages/react-chat/src/components/{ActivityCenter.tsx => ActivityCenter/ActivityMessage.tsx} (63%) create mode 100644 packages/react-chat/src/components/Buttons/BackButton.tsx diff --git a/packages/react-chat/src/components/ActivityCenter/ActivityButton.tsx b/packages/react-chat/src/components/ActivityCenter/ActivityButton.tsx new file mode 100644 index 00000000..82c04488 --- /dev/null +++ b/packages/react-chat/src/components/ActivityCenter/ActivityButton.tsx @@ -0,0 +1,108 @@ +import React, { useMemo, useRef, useState } from "react"; +import styled from "styled-components"; + +import { useActivities } from "../../contexts/activityProvider"; +import { useIdentity } from "../../contexts/identityProvider"; +import { useClickOutside } from "../../hooks/useClickOutside"; +import { TopBtn } from "../Chat/ChatTopbar"; +import { ActivityIcon } from "../Icons/ActivityIcon"; + +import { ActivityCenter } from "./ActivityCenter"; + +interface ActivityButtonProps { + className?: string; +} + +export function ActivityButton({ className }: ActivityButtonProps) { + const { activities } = useActivities(); + const identity = useIdentity(); + const disabled = useMemo(() => !identity, [identity]); + const ref = useRef(null); + useClickOutside(ref, () => setShowActivityCenter(false)); + + const [showActivityCenter, setShowActivityCenter] = useState(false); + + return ( + + setShowActivityCenter(!showActivityCenter)} + disabled={disabled} + > + + {activities.length > 0 && ( + 99 + ? "countless" + : activities.length > 9 + ? "wide" + : undefined + } + > + {activities.length < 100 ? activities.length : "∞"} + + )} + + {showActivityCenter && ( + + )} + + ); +} + +export const ActivityWrapper = styled.div` + padding-left: 10px; + margin-left: 10px; + position: relative; + + &:before { + content: ""; + position: absolute; + left: 0; + top: 50%; + width: 2px; + height: 24px; + transform: translateY(-50%); + border-radius: 1px; + background: ${({ theme }) => theme.primary}; + opacity: 0.1; + } + + &.creation { + padding-left: 0px; + margin-left: 16px; + + &:before { + width: 0px; + height: 0px; + } + } +`; + +const NotificationBagde = styled.div` + width: 18px; + height: 18px; + position: absolute; + top: -2px; + right: -2px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border-radius: 50%; + font-size: 12px; + line-height: 16px; + font-weight: 500; + background-color: ${({ theme }) => theme.notificationColor}; + color: ${({ theme }) => theme.bodyBackgroundColor}; + border-radius: 9px; + + &.wide { + width: 26px; + right: -7px; + } + + &.countless { + width: 22px; + } +`; diff --git a/packages/react-chat/src/components/ActivityCenter/ActivityCenter.tsx b/packages/react-chat/src/components/ActivityCenter/ActivityCenter.tsx new file mode 100644 index 00000000..1e24d1a0 --- /dev/null +++ b/packages/react-chat/src/components/ActivityCenter/ActivityCenter.tsx @@ -0,0 +1,184 @@ +import React, { useMemo, useState } from "react"; +import styled from "styled-components"; + +import { useActivities } from "../../contexts/activityProvider"; +import { useMessengerContext } from "../../contexts/messengerProvider"; +import { buttonTransparentStyles } from "../Buttons/buttonStyle"; +import { Tooltip } from "../Form/Tooltip"; +import { HideIcon } from "../Icons/HideIcon"; +import { ReadIcon } from "../Icons/ReadIcon"; +import { ShowIcon } from "../Icons/ShowIcon"; + +import { ActivityMessage } from "./ActivityMessage"; + +interface ActivityCenterProps { + setShowActivityCenter: (val: boolean) => void; +} + +export function ActivityCenter({ setShowActivityCenter }: ActivityCenterProps) { + const { activities } = useActivities(); + const { contacts } = useMessengerContext(); + + const shownActivities = useMemo( + () => + activities.filter( + (activity) => !contacts?.[activity.user]?.blocked ?? true + ), + [contacts, activities, activities.length] + ); + + const [hideRead, setHideRead] = useState(false); + + const [filter, setFilter] = useState(""); + + const filteredActivities = shownActivities.filter((activity) => + filter + ? activity.type === filter + : hideRead + ? activity.isRead !== true + : activity + ); + + return ( + + + + setFilter("")}>All + setFilter("mention")}>Mentions + setFilter("reply")}>Replies + setFilter("request")}> + Contact requests + + + + + { + shownActivities.map((activity) => (activity.isRead = true)); + }} + > + + + + + + setHideRead(!hideRead)}> + {hideRead ? : } + + + + + + {filteredActivities.length > 0 ? ( + + {filteredActivities.map((activity) => ( + + ))} + + ) : ( + Notifications will appear here + )} + + ); +} + +const ActivityBlock = styled.div` + width: 600px; + height: 770px; + display: flex; + flex-direction: column; + background: ${({ theme }) => theme.bodyBackgroundColor}; + box-shadow: 0px 12px 24px rgba(0, 34, 51, 0.1); + border-radius: 8px; + position: absolute; + top: calc(100% + 4px); + right: 0; + z-index: 100; +`; + +const ActivityFilter = styled.div` + display: flex; + justify-content: space-between; + padding: 13px 16px; +`; + +export const FlexDiv = styled.div` + display: flex; +`; + +const FilterBtn = styled.button` + ${buttonTransparentStyles} + + & + & { + margin-left: 8px; + } +`; + +const BtnWrapper = styled.div` + position: relative; + + &:hover > div { + visibility: visible; + } +`; + +export const ActivityBtn = styled.button` + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px; + align-self: center; + + &:hover { + background: ${({ theme }) => theme.buttonBgHover}; + } + + &.read { + &:hover { + background: ${({ theme }) => theme.bodyBackgroundColor}; + } + } + + &.accept { + &:hover { + background: rgba(78, 188, 96, 0.1); + } + } + + &.decline { + &:hover { + background: rgba(255, 45, 85, 0.1); + } + } + + & + & { + margin-left: 8px; + } +`; + +const Activities = styled.div` + display: flex; + flex-direction: column; + width: 100%; + overflow: auto; +`; + +const EmptyActivities = styled.div` + display: flex; + justify-content: center; + align-items: center; + flex: 1; + width: 100%; + color: ${({ theme }) => theme.secondary}; +`; + +const Btns = styled.div` + display: flex; + align-items: center; +`; diff --git a/packages/react-chat/src/components/ActivityCenter.tsx b/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx similarity index 63% rename from packages/react-chat/src/components/ActivityCenter.tsx rename to packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx index 4119b6d5..749a6f20 100644 --- a/packages/react-chat/src/components/ActivityCenter.tsx +++ b/packages/react-chat/src/components/ActivityCenter/ActivityMessage.tsx @@ -1,32 +1,25 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import styled from "styled-components"; -import { useActivities } from "../contexts/activityProvider"; -import { useMessengerContext } from "../contexts/messengerProvider"; -import { useModal } from "../contexts/modalProvider"; -import { useClickOutside } from "../hooks/useClickOutside"; -import { Activity } from "../models/Activity"; -import { equalDate } from "../utils/equalDate"; - -import { DownloadButton } from "./Buttons/DownloadButton"; -import { buttonTransparentStyles } from "./Buttons/buttonStyle"; -import { Mention } from "./Chat/ChatMessageContent"; -import { Logo } from "./CommunityIdentity"; -import { ContactMenu } from "./Form/ContactMenu"; -import { Tooltip } from "./Form/Tooltip"; -import { CheckSvg } from "./Icons/CheckIcon"; -import { ClearSvg } from "./Icons/ClearIcon"; -import { CommunityIcon } from "./Icons/CommunityIcon"; -import { GroupIcon } from "./Icons/GroupIcon"; -import { HideIcon } from "./Icons/HideIcon"; -import { Icon } from "./Icons/Icon"; -import { MoreIcon } from "./Icons/MoreIcon"; -import { ReadIcon } from "./Icons/ReadIcon"; -import { ReadMessageIcon } from "./Icons/ReadMessageIcon"; -import { ReplyIcon } from "./Icons/ReplyActivityIcon"; -import { ShowIcon } from "./Icons/ShowIcon"; -import { UntrustworthIcon } from "./Icons/UntrustworthIcon"; -import { UserIcon } from "./Icons/UserIcon"; +import { useMessengerContext } from "../../contexts/messengerProvider"; +import { useModal } from "../../contexts/modalProvider"; +import { Activity } from "../../models/Activity"; +import { equalDate } from "../../utils/equalDate"; +import { DownloadButton } from "../Buttons/DownloadButton"; +import { Mention } from "../Chat/ChatMessageContent"; +import { Logo } from "../CommunityIdentity"; +import { ContactMenu } from "../Form/ContactMenu"; +import { Tooltip } from "../Form/Tooltip"; +import { CheckSvg } from "../Icons/CheckIcon"; +import { ClearSvg } from "../Icons/ClearIcon"; +import { CommunityIcon } from "../Icons/CommunityIcon"; +import { GroupIcon } from "../Icons/GroupIcon"; +import { Icon } from "../Icons/Icon"; +import { MoreIcon } from "../Icons/MoreIcon"; +import { ReadMessageIcon } from "../Icons/ReadMessageIcon"; +import { ReplyIcon } from "../Icons/ReplyActivityIcon"; +import { UntrustworthIcon } from "../Icons/UntrustworthIcon"; +import { UserIcon } from "../Icons/UserIcon"; import { ContentWrapper, DateSeparator, @@ -37,9 +30,11 @@ import { UserAddress, UserName, UserNameWrapper, -} from "./Messages/Styles"; -import { ProfileModalName } from "./Modals/ProfileModal"; -import { textMediumStyles, textSmallStyles } from "./Text"; +} from "../Messages/Styles"; +import { ProfileModalName } from "../Modals/ProfileModal"; +import { textMediumStyles, textSmallStyles } from "../Text"; + +import { ActivityBtn, FlexDiv } from "./ActivityCenter"; const today = new Date(); @@ -48,7 +43,7 @@ type ActivityMessageProps = { setShowActivityCenter: (val: boolean) => void; }; -function ActivityMessage({ +export function ActivityMessage({ activity, setShowActivityCenter, }: ActivityMessageProps) { @@ -258,121 +253,11 @@ function ActivityMessage({ ); } -interface ActivityCenterProps { - setShowActivityCenter: (val: boolean) => void; -} - -export function ActivityCenter({ setShowActivityCenter }: ActivityCenterProps) { - const { activities } = useActivities(); - const { contacts } = useMessengerContext(); - - const ref = useRef(null); - useClickOutside(ref, () => setShowActivityCenter(false)); - - const shownActivities = useMemo( - () => - activities.filter( - (activity) => !contacts?.[activity.user]?.blocked ?? true - ), - [contacts, activities, activities.length] - ); - - const [hideRead, setHideRead] = useState(false); - - const [filter, setFilter] = useState(""); - - const filteredActivities = shownActivities.filter((activity) => - filter - ? activity.type === filter - : hideRead - ? activity.isRead !== true - : activity - ); - - return ( - - - - setFilter("")}>All - setFilter("mention")}>Mentions - setFilter("reply")}>Replies - setFilter("request")}> - Contact requests - - - - - { - shownActivities.map((activity) => (activity.isRead = true)); - }} - > - - - - - - setHideRead(!hideRead)}> - {hideRead ? : } - - - - - - {filteredActivities.length > 0 ? ( - - {filteredActivities.map((activity) => ( - - ))} - - ) : ( - Notifications will appear here - )} - - ); -} - -const ActivityBlock = styled.div` - width: 600px; - height: 770px; - display: flex; - flex-direction: column; - background: ${({ theme }) => theme.bodyBackgroundColor}; - box-shadow: 0px 12px 24px rgba(0, 34, 51, 0.1); - border-radius: 8px; - position: absolute; - top: 48px; - right: 8px; - z-index: 100; -`; - -const ActivityFilter = styled.div` - display: flex; - justify-content: space-between; - padding: 13px 16px; -`; - -const FlexDiv = styled.div` - display: flex; -`; - const InviteDiv = styled.div` display: flex; margin-top: -4px; `; -const FilterBtn = styled.button` - ${buttonTransparentStyles} - - & + & { - margin-left: 8px; - } -`; - const BtnWrapper = styled.div` position: relative; @@ -381,58 +266,6 @@ const BtnWrapper = styled.div` } `; -const ActivityBtn = styled.button` - width: 32px; - height: 32px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 8px; - align-self: center; - - &:hover { - background: ${({ theme }) => theme.buttonBgHover}; - } - - &.read { - &:hover { - background: ${({ theme }) => theme.bodyBackgroundColor}; - } - } - - &.accept { - &:hover { - background: rgba(78, 188, 96, 0.1); - } - } - - &.decline { - &:hover { - background: rgba(255, 45, 85, 0.1); - } - } - - & + & { - margin-left: 8px; - } -`; - -const Activities = styled.div` - display: flex; - flex-direction: column; - width: 100%; - overflow: auto; -`; - -const EmptyActivities = styled.div` - display: flex; - justify-content: center; - align-items: center; - flex: 1; - width: 100%; - color: ${({ theme }) => theme.secondary}; -`; - const ActivityDate = styled(DateSeparator)` justify-content: flex-start; padding: 8px 16px; @@ -513,10 +346,6 @@ const ActivityUserName = styled(UserName)` text-decoration: underline; } `; -const Btns = styled.div` - display: flex; - align-items: center; -`; const ReplyWrapper = styled.div` max-width: 100%; diff --git a/packages/react-chat/src/components/Buttons/BackButton.tsx b/packages/react-chat/src/components/Buttons/BackButton.tsx new file mode 100644 index 00000000..859470b7 --- /dev/null +++ b/packages/react-chat/src/components/Buttons/BackButton.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import styled from "styled-components"; + +import { LeftIconSvg } from "../Icons/LeftIcon"; + +interface BackButtonProps { + onBtnClick: () => void; + className?: string; +} + +export function BackButton({ onBtnClick, className }: BackButtonProps) { + return ( + + + + ); +} + +const BackBtn = styled.button` + position: absolute; + left: 0; + top: 8px; + width: 32px; + height: 32px; + padding: 0; + + &.narrow { + position: static; + margin-right: 13px; + } +`; diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx index 1551575e..8ee6c1e0 100644 --- a/packages/react-chat/src/components/Chat/ChatCreation.tsx +++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx @@ -5,7 +5,10 @@ import styled from "styled-components"; import { ChatState, useChatState } from "../../contexts/chatStateProvider"; import { useIdentity } from "../../contexts/identityProvider"; import { useMessengerContext } from "../../contexts/messengerProvider"; +import { useNarrow } from "../../contexts/narrowProvider"; import { ChannelData } from "../../models/ChannelData"; +import { ActivityButton } from "../ActivityCenter/ActivityButton"; +import { BackButton } from "../Buttons/BackButton"; import { buttonStyles } from "../Buttons/buttonStyle"; import { CrossIcon } from "../Icons/CrossIcon"; import { Member } from "../Members/Member"; @@ -20,6 +23,7 @@ export function ChatCreation({ setEditGroup, activeChannel, }: ChatCreationProps) { + const narrow = useNarrow(); const identity = useIdentity(); const [query, setQuery] = useState(""); const [styledGroup, setStyledGroup] = useState( @@ -76,6 +80,12 @@ export function ChatCreation({ return ( + {narrow && ( + setChatState(ChatState.ChatBody)} + className="narrow" + /> + )} To: @@ -118,6 +128,7 @@ export function ChatCreation({ > Confirm + {!narrow && } {!setEditGroup && !query && ( @@ -155,6 +166,7 @@ const CreationWrapper = styled.div` const CreationBar = styled.div` display: flex; + align-items: center; margin-bottom: 32px; `; @@ -167,6 +179,7 @@ const InputBar = styled.div` border: 1px solid ${({ theme }) => theme.inputColor}; border-radius: 8px; padding: 8px 16px; + margin-right: 16px; ${textMediumStyles} `; @@ -193,7 +206,6 @@ const InputText = styled.div` const CreationBtn = styled.button` padding: 11px 24px; - margin-left: 16px; ${buttonStyles} &:disabled { diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx index c0b98783..7b5cb014 100644 --- a/packages/react-chat/src/components/Chat/ChatInput.tsx +++ b/packages/react-chat/src/components/Chat/ChatInput.tsx @@ -411,6 +411,14 @@ const AddPictureInputWrapper = styled.div` width: 32px; height: 32px; margin-right: 4px; + + & > input[type="file"]::-webkit-file-upload-button { + cursor: pointer; + } + + & > input:disabled::-webkit-file-upload-button { + cursor: default; + } `; const AddPictureInput = styled.input` diff --git a/packages/react-chat/src/components/Chat/ChatTopbar.tsx b/packages/react-chat/src/components/Chat/ChatTopbar.tsx index f5555ddf..baa75647 100644 --- a/packages/react-chat/src/components/Chat/ChatTopbar.tsx +++ b/packages/react-chat/src/components/Chat/ChatTopbar.tsx @@ -1,11 +1,12 @@ -import React, { useMemo, useState } from "react"; +import React, { useState } from "react"; import styled from "styled-components"; -import { useActivities } from "../../contexts/activityProvider"; -import { useIdentity } from "../../contexts/identityProvider"; import { useMessengerContext } from "../../contexts/messengerProvider"; import { useNarrow } from "../../contexts/narrowProvider"; -import { ActivityCenter } from "../ActivityCenter"; +import { + ActivityButton, + ActivityWrapper, +} from "../ActivityCenter/ActivityButton"; import { Channel } from "../Channels/Channel"; import { Community } from "../Community"; import { ChannelMenu } from "../Form/ChannelMenu"; @@ -63,12 +64,9 @@ export function ChatTopbar({ setEditGroup, }: ChatTopbarProps) { const { messenger, activeChannel, communityData } = useMessengerContext(); - const { activities } = useActivities(); + const narrow = useNarrow(); const [showChannelMenu, setShowChannelMenu] = useState(false); - const [showActivityCenter, setShowActivityCenter] = useState(false); - const identity = useIdentity(); - const disabled = useMemo(() => !identity, [identity]); if (!activeChannel) { return ; @@ -110,27 +108,7 @@ export function ChatTopbar({ setShowChannelMenu(!showChannelMenu)}> - - setShowActivityCenter(!showActivityCenter)} - disabled={disabled} - > - - {activities.length > 0 && ( - 99 - ? "countless" - : activities.length > 9 - ? "wide" - : undefined - } - > - {activities.length < 100 ? activities.length : "∞"} - - )} - - + {!narrow && } {!messenger && !communityData && } {showChannelMenu && ( @@ -141,9 +119,6 @@ export function ChatTopbar({ setEditGroup={setEditGroup} /> )} - {showActivityCenter && ( - - )} ); } @@ -203,30 +178,12 @@ const MenuWrapper = styled.div` align-items: center; `; -const ActivityWrapper = styled.div` - padding-left: 10px; - margin-left: 10px; - position: relative; - - &:before { - content: ""; - position: absolute; - left: 0; - top: 50%; - width: 2px; - height: 24px; - transform: translateY(-50%); - border-radius: 1px; - background: ${({ theme }) => theme.primary}; - opacity: 0.1; - } -`; - export const TopBtn = styled.button` width: 32px; height: 32px; border-radius: 8px; padding: 0; + background: ${({ theme }) => theme.bodyBackgroundColor}; &:hover { background: ${({ theme }) => theme.inputColor}; @@ -240,31 +197,3 @@ export const TopBtn = styled.button` cursor: default; } `; - -const NotificationBagde = styled.div` - width: 18px; - height: 18px; - position: absolute; - top: -2px; - right: -2px; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - border-radius: 50%; - font-size: 12px; - line-height: 16px; - font-weight: 500; - background-color: ${({ theme }) => theme.notificationColor}; - color: ${({ theme }) => theme.bodyBackgroundColor}; - border-radius: 9px; - - &.wide { - width: 26px; - right: -7px; - } - - &.countless { - width: 22px; - } -`; diff --git a/packages/react-chat/src/components/Icons/LeftIcon.tsx b/packages/react-chat/src/components/Icons/LeftIcon.tsx index 869a26a6..b7e8d9df 100644 --- a/packages/react-chat/src/components/Icons/LeftIcon.tsx +++ b/packages/react-chat/src/components/Icons/LeftIcon.tsx @@ -9,29 +9,22 @@ type LeftIconSvgProps = { export function LeftIconSvg({ width, height, className }: LeftIconSvgProps) { return ( - - + ); } -export const LeftIconIcon = () => { - return ; -}; +const Icon = styled.svg` + fill: ${({ theme }) => theme.tertiary}; -const Icon = styled(LeftIconSvg)` - & > path { - fill: ${({ theme }) => theme.tertiary}; - } - - &:hover > path { - fill: ${({ theme }) => theme.bodyBackgroundColor}; + &.black { + fill: ${({ theme }) => theme.primary}; } `; diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx index 72a618aa..a841ebe3 100644 --- a/packages/react-chat/src/components/Members/Member.tsx +++ b/packages/react-chat/src/components/Members/Member.tsx @@ -137,7 +137,11 @@ export const MemberIcon = styled(Icon)` `; const Column = styled.div` + width: calc(100% - 69px); display: flex; flex-direction: column; margin-left: 8px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; `; diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx index 508e4b87..2dae6253 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx @@ -1,9 +1,8 @@ import React from "react"; -import styled from "styled-components"; import { Channels } from "../Channels/Channels"; -import { NarrowTopbar } from "./NarrowTopbar"; +import { ListWrapper, NarrowTopbar } from "./NarrowTopbar"; interface NarrowChannelsProps { setShowChannels: (val: boolean) => void; @@ -12,14 +11,8 @@ interface NarrowChannelsProps { export function NarrowChannels({ setShowChannels }: NarrowChannelsProps) { return ( - + setShowChannels(false)} /> setShowChannels(false)} /> ); } - -const ListWrapper = styled.div` - padding: 0px 18px 18px; - background: ${({ theme }) => theme.bodyBackgroundColor}; - overflow: auto; -`; diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx index 8f8666cd..1b68c6fe 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx @@ -1,9 +1,8 @@ import React from "react"; -import styled from "styled-components"; import { MembersList } from "../Members/MembersList"; -import { NarrowTopbar } from "./NarrowTopbar"; +import { ListWrapper, NarrowTopbar } from "./NarrowTopbar"; interface NarrowMembersProps { switchShowMembersList: () => void; @@ -12,14 +11,11 @@ interface NarrowMembersProps { export function NarrowMembers({ switchShowMembersList }: NarrowMembersProps) { return ( - + ); } - -const ListWrapper = styled.div` - padding: 0px 18px 18px; - background: ${({ theme }) => theme.bodyBackgroundColor}; - overflow: auto; -`; diff --git a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx index ad6fb8fd..ca6463b4 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx @@ -2,28 +2,39 @@ import React from "react"; import styled from "styled-components"; import { useMessengerContext } from "../../contexts/messengerProvider"; +import { BackButton } from "../Buttons/BackButton"; interface NarrowTopbarProps { list: string; + onBtnClick: () => void; } -export function NarrowTopbar({ list }: NarrowTopbarProps) { +export function NarrowTopbar({ list, onBtnClick }: NarrowTopbarProps) { const { communityData } = useMessengerContext(); return ( - {list} - {communityData?.name} + + + {list} + {communityData?.name} + ); } const TopbarWrapper = styled.div` + display: flex; + justify-content: center; + background-color: ${({ theme }) => theme.bodyBackgroundColor}; + margin-bottom: 16px; + position: relative; +`; + +const HeadingWrapper = styled.div` display: flex; justify-content: center; flex-direction: column; text-align: center; - background-color: ${({ theme }) => theme.bodyBackgroundColor}; - padding: 14px 0; `; const Heading = styled.p` @@ -35,3 +46,9 @@ const SubHeading = styled.p` font-weight: 500; color: ${({ theme }) => theme.secondary}; `; + +export const ListWrapper = styled.div` + padding: 16px; + background: ${({ theme }) => theme.bodyBackgroundColor}; + overflow: auto; +`;