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

Fix icons size (#33)

This commit is contained in:
Maria Rushkova 2021-10-04 12:11:03 +02:00 committed by GitHub
parent 0d6239aab8
commit d25d48c81d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-chat/src/components/Chat/ChatMessages.tsx
View File

@ -73,7 +73,6 @@ const MessagesWrapper = styled.div`
const MessageWrapper = styled.div` const MessageWrapper = styled.div`
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center;
padding: 8px 0; padding: 8px 0;
margin-bottom: 8px; margin-bottom: 8px;
`; `;
@ -121,6 +120,7 @@ export const Icon = styled.div`
align-items: end; align-items: end;
border-radius: 50%; border-radius: 50%;
background-color: #bcbdff; background-color: #bcbdff;
flex-shrink: 0;
`; `;
const UserNameWrapper = styled.div<ThemeProps>` const UserNameWrapper = styled.div<ThemeProps>`

13
packages/react-chat/src/components/Icons/UserIcon.tsx
View File

@ -3,19 +3,19 @@ import styled from "styled-components";
import { Theme } from "../../styles/themes"; import { Theme } from "../../styles/themes";
interface ThemeProps { interface UserIconProps {
theme: Theme; theme: Theme;
memberView?: boolean;
} }
export const UserIcon = ({ theme }: ThemeProps) => { export const UserIcon = ({ theme, memberView }: UserIconProps) => {
return ( return (
<Icon <Icon
width="34"
height="34"
viewBox="0 0 34 34" viewBox="0 0 34 34"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
theme={theme} theme={theme}
memberView={memberView}
> >
<ellipse cx="17" cy="10.3883" rx="6.94445" ry="6.94445" /> <ellipse cx="17" cy="10.3883" rx="6.94445" ry="6.94445" />
<path <path
@ -27,7 +27,10 @@ export const UserIcon = ({ theme }: ThemeProps) => {
); );
}; };
const Icon = styled.svg<ThemeProps>` const Icon = styled.svg<UserIconProps>`
width: ${({ memberView }) => (memberView ? "20px" : "34px")};
height: ${({ memberView }) => (memberView ? "20px" : "34px")};
& > path, & > path,
& > ellipse { & > ellipse {
fill: ${({ theme }) => theme.iconUserColor}; fill: ${({ theme }) => theme.iconUserColor};

14
packages/react-chat/src/components/Members.tsx
View File

@ -21,9 +21,9 @@ export function Members({ theme, channel, setShowChannels }: MembersProps) {
<MemberCategory> <MemberCategory>
<MemberCategoryName theme={theme}>You</MemberCategoryName> <MemberCategoryName theme={theme}>You</MemberCategoryName>
<MemberData> <MemberData>
<Icon> <MemberIcon>
<UserIcon theme={theme} /> <UserIcon theme={theme} memberView={true} />
</Icon> </MemberIcon>
<MemberName theme={theme}>Guest564732</MemberName> <MemberName theme={theme}>Guest564732</MemberName>
</MemberData> </MemberData>
</MemberCategory> </MemberCategory>
@ -82,7 +82,7 @@ export function Member({
className={isOnline ? "online" : ""} className={isOnline ? "online" : ""}
theme={theme} theme={theme}
> >
{!member.avatar && <UserIcon theme={theme} />} {!member.avatar && <UserIcon theme={theme} memberView={true} />}
</MemberIcon> </MemberIcon>
<MemberName theme={theme}>{member.name}</MemberName> <MemberName theme={theme}>{member.name}</MemberName>
</MemberData> </MemberData>
@ -148,6 +148,8 @@ const MemberData = styled.div`
`; `;
const MemberIcon = styled(Icon)<ThemeProps>` const MemberIcon = styled(Icon)<ThemeProps>`
width: 24px;
height: 24px;
position: relative; position: relative;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
@ -159,8 +161,8 @@ const MemberIcon = styled(Icon)<ThemeProps>`
position: absolute; position: absolute;
right: -1px; right: -1px;
bottom: 1px; bottom: 1px;
width: 9px; width: 7px;
height: 9px; height: 7px;
border-radius: 50%; border-radius: 50%;
background-color: #4ebc60; background-color: #4ebc60;
border: 2px solid ${({ theme }) => theme.bodyBackgroundColor}; border: 2px solid ${({ theme }) => theme.bodyBackgroundColor};