status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Resolve unsupported UI elements (#289) 

* fix button ref

* comment out unsopported ui elements

* hide chat input if no account

* comment out avatar dropdown menu
This commit is contained in:
Felicio Mununga 2022-06-30 15:13:39 +02:00 committed by GitHub
parent 01d5f45db6
commit eb58f5f495
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
View File

@ -56,7 +56,17 @@ export const CommunityDialog = () => {
fill="currentColor" fill="currentColor"
/> />
</svg> </svg>
<Button href="https://status.im/get">Download Status</Button> <Button
onClick={() =>
window.open(
'https://status.im/get',
'_blank',
'noopener,noreferrer'
)
}
>
Download Status
</Button>
</Flex> </Flex>
</Dialog.Body> </Dialog.Body>
</Dialog> </Dialog>

18
packages/status-react/src/routes/chat/components/chat-input/index.tsx
View File

@ -1,13 +1,13 @@
import React, { useEffect, useRef, useState } from 'react' import React, { useEffect, useRef, useState } from 'react'
import { useChatContext } from '~/src/contexts/chat-context' import { useChatContext } from '~/src/contexts/chat-context'
import { EmojiIcon } from '~/src/icons/emoji-icon' // import { EmojiIcon } from '~/src/icons/emoji-icon'
import { GifIcon } from '~/src/icons/gif-icon' // import { GifIcon } from '~/src/icons/gif-icon'
import { ImageIcon } from '~/src/icons/image-icon' // import { ImageIcon } from '~/src/icons/image-icon'
import { StickerIcon } from '~/src/icons/sticker-icon' // import { StickerIcon } from '~/src/icons/sticker-icon'
import { styled } from '~/src/styles/config' import { styled } from '~/src/styles/config'
import { Box, Flex, IconButton } from '~/src/system'
// import { Box, Flex, IconButton } from '~/src/system'
import { InputReply } from './input-reply' import { InputReply } from './input-reply'
interface Props { interface Props {
@ -47,11 +47,11 @@ export const ChatInput = (props: Props) => {
return ( return (
<Wrapper> <Wrapper>
<Box css={{ paddingBottom: 6 }}> {/* <Box css={{ paddingBottom: 6 }}>
<IconButton label="Add file" color="gray"> <IconButton label="Add file" color="gray">
<ImageIcon /> <ImageIcon />
</IconButton> </IconButton>
</Box> </Box> */}
<Bubble> <Bubble>
{state.message && ( {state.message && (
<InputReply message={state.message} member={state.member} /> <InputReply message={state.message} member={state.member} />
@ -64,7 +64,7 @@ export const ChatInput = (props: Props) => {
onChange={handleChange} onChange={handleChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
/> />
<Flex> {/* <Flex>
<IconButton label="Pick emoji"> <IconButton label="Pick emoji">
<EmojiIcon /> <EmojiIcon />
</IconButton> </IconButton>
@ -74,7 +74,7 @@ export const ChatInput = (props: Props) => {
<IconButton label="Pick gif"> <IconButton label="Pick gif">
<GifIcon /> <GifIcon />
</IconButton> </IconButton>
</Flex> </Flex> */}
</InputWrapper> </InputWrapper>
</Bubble> </Bubble>
</Wrapper> </Wrapper>

28
packages/status-react/src/routes/chat/components/chat-message/index.tsx
View File

@ -4,7 +4,7 @@ import { useMatch } from 'react-router-dom'
import { UserProfileDialog } from '~/src/components/user-profile-dialog' import { UserProfileDialog } from '~/src/components/user-profile-dialog'
import { useChatContext } from '~/src/contexts/chat-context' import { useChatContext } from '~/src/contexts/chat-context'
import { BellIcon } from '~/src/icons/bell-icon' // import { BellIcon } from '~/src/icons/bell-icon'
// import { PinIcon } from '~/src/icons/pin-icon' // import { PinIcon } from '~/src/icons/pin-icon'
import { useProtocol } from '~/src/protocol' import { useProtocol } from '~/src/protocol'
import { styled } from '~/src/styles/config' import { styled } from '~/src/styles/config'
@ -14,9 +14,9 @@ import {
Button, Button,
ContextMenu, ContextMenu,
ContextMenuTrigger, ContextMenuTrigger,
DropdownMenu, // DropdownMenu,
DropdownMenuTrigger, // DropdownMenuTrigger,
EmojiHash, // EmojiHash,
Flex, Flex,
Image, Image,
Text, Text,
@ -176,15 +176,15 @@ export const ChatMessage = (props: Props) => {
{responseTo && <MessageReply messageId={responseTo} />} {responseTo && <MessageReply messageId={responseTo} />}
<Flex gap={2}> <Flex gap={2}>
<Box> <Box>
<DropdownMenuTrigger> {/* <DropdownMenuTrigger>
<button type="button"> <button type="button"> */}
<Avatar <Avatar
size={44} size={44}
name={member.username} name={member.username}
colorHash={member.colorHash} colorHash={member.colorHash}
/> />
</button> {/* </button> */}
<DropdownMenu> {/* <DropdownMenu>
<Flex direction="column" align="center" gap="1"> <Flex direction="column" align="center" gap="1">
<Avatar size="36" /> <Avatar size="36" />
<Text>{member.username}</Text> <Text>{member.username}</Text>
@ -211,7 +211,7 @@ export const ChatMessage = (props: Props) => {
Mark as Untrustworthy Mark as Untrustworthy
</DropdownMenu.Item> </DropdownMenu.Item>
</DropdownMenu> </DropdownMenu>
</DropdownMenuTrigger> </DropdownMenuTrigger> */}
</Box> </Box>
<Box css={{ flex: 1 }}> <Box css={{ flex: 1 }}>

21
packages/status-react/src/routes/chat/components/navbar/index.tsx
View File

@ -2,14 +2,17 @@ import React from 'react'
import { useMatch } from 'react-router-dom' import { useMatch } from 'react-router-dom'
import { ChatMenu } from '~/src/components/chat-menu' // import { ChatMenu } from '~/src/components/chat-menu'
import { useAppState } from '~/src/contexts/app-context' import { useAppState } from '~/src/contexts/app-context'
import { BellIcon } from '~/src/icons/bell-icon' // import { BellIcon } from '~/src/icons/bell-icon'
import { DotsIcon } from '~/src/icons/dots-icon' // import { DotsIcon } from '~/src/icons/dots-icon'
import { GroupIcon } from '~/src/icons/group-icon' import { GroupIcon } from '~/src/icons/group-icon'
import { useChat } from '~/src/protocol' import { useChat } from '~/src/protocol'
import { styled } from '~/src/styles/config' import { styled } from '~/src/styles/config'
import { DropdownMenuTrigger, Flex, IconButton, Separator } from '~/src/system' import {
/*DropdownMenuTrigger,*/ Flex,
IconButton /*,Separator*/,
} from '~/src/system'
import { ChatInfo } from '../chat-info' import { ChatInfo } from '../chat-info'
@ -40,18 +43,18 @@ export const Navbar = (props: Props) => {
</IconButton> </IconButton>
)} )}
<DropdownMenuTrigger> {/* <DropdownMenuTrigger>
<IconButton label="Options"> <IconButton label="Options">
<DotsIcon /> <DotsIcon />
</IconButton> </IconButton>
<ChatMenu type="dropdown" /> <ChatMenu type="dropdown" />
</DropdownMenuTrigger> </DropdownMenuTrigger> */}
<Separator orientation="vertical" css={{ height: 24 }} /> {/* <Separator orientation="vertical" css={{ height: 24 }} /> */}
<IconButton label="Show Activity Center"> {/* <IconButton label="Show Activity Center">
<BellIcon /> <BellIcon />
</IconButton> </IconButton> */}
</Flex> </Flex>
</NavbarWrapper> </NavbarWrapper>
) )

5
packages/status-react/src/routes/chat/index.tsx
View File

@ -7,7 +7,7 @@ import { useMatch } from 'react-router-dom'
import { MemberSidebar } from '~/src/components/member-sidebar' import { MemberSidebar } from '~/src/components/member-sidebar'
import { useAppState } from '~/src/contexts/app-context' import { useAppState } from '~/src/contexts/app-context'
import { ChatProvider, useChatContext } from '~/src/contexts/chat-context' import { ChatProvider, useChatContext } from '~/src/contexts/chat-context'
import { useChat, useMessages, useProtocol } from '~/src/protocol' import { useAccount, useChat, useMessages, useProtocol } from '~/src/protocol'
import { styled } from '~/src/styles/config' import { styled } from '~/src/styles/config'
import { Avatar, Flex, Heading, Text } from '~/src/system' import { Avatar, Flex, Heading, Text } from '~/src/system'
@ -38,6 +38,7 @@ const ChatStart = (props: ChatStartProps) => {
const Body = () => { const Body = () => {
const { client } = useProtocol() const { client } = useProtocol()
const { state } = useChatContext() const { state } = useChatContext()
const { account } = useAccount()
const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion
const chatId = params.id! const chatId = params.id!
@ -63,7 +64,7 @@ const Body = () => {
<ChatMessage key={message.messageId} message={message} /> <ChatMessage key={message.messageId} message={message} />
))} ))}
</ContentWrapper> </ContentWrapper>
<ChatInput onSubmit={handleMessageSubmit} /> {account && <ChatInput onSubmit={handleMessageSubmit} />}
</> </>
) )
} }