urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-22 02:11:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4399 from urbit/lf/profile-tweaks

Browse Source 
Profile: tweak sigil size
This commit is contained in:
matildepark 2021-02-08 21:43:56 -05:00 committed by GitHub
commit 05c1f286a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pkg/interface/src/logic/lib/sigil.js
View File

@ -23,10 +23,10 @@ export const Sigil = memo(
size, size,
svgClass = '', svgClass = '',
icon = false, icon = false,
padded = false padding = 0
}) => { }) => {
const padding = icon && padded ? '2px' : '0px'; const innerSize = Number(size) - 2*padding;
const innerSize = icon && padded ? Number(size) - 4 : size; const paddingPx = `${padding}px`;
const foregroundColor = foreground const foregroundColor = foreground
? foreground ? foreground
: foregroundFromBackground(color); : foregroundFromBackground(color);
@ -45,7 +45,7 @@ export const Sigil = memo(
borderRadius={icon ? '1' : '0'} borderRadius={icon ? '1' : '0'}
flexBasis={size} flexBasis={size}
backgroundColor={color} backgroundColor={color}
padding={padding} padding={paddingPx}
className={classes} className={classes}
> >
{sigil({ {sigil({

2
pkg/interface/src/views/apps/chat/components/ChatInput.tsx
View File

@ -137,7 +137,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
color={`#${color}`} color={`#${color}`}
classes={sigilClass} classes={sigilClass}
icon icon
padded padding={2}
/>; />;
return ( return (

2
pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
View File

@ -279,7 +279,7 @@ export const MessageWithSigil = (props) => {
color={color} color={color}
classes={sigilClass} classes={sigilClass}
icon icon
padded padding={2}
/> />
); );

2
pkg/interface/src/views/apps/notifications/graph.tsx
View File

@ -185,7 +185,7 @@ const GraphNode = ({
icon icon
color={`#000000`} color={`#000000`}
classes="mix-blend-diff" classes="mix-blend-diff"
padded padding={2}
/> />
) : <Box style={{ width: '16px' }}></Box>; ) : <Box style={{ width: '16px' }}></Box>;

4
pkg/interface/src/views/apps/profile/components/Profile.tsx
View File

@ -41,7 +41,7 @@ export function Profile(props: any) {
const image = (!hideAvatars && contact?.avatar) const image = (!hideAvatars && contact?.avatar)
? <BaseImage src={contact.avatar} width='100%' height='100%' style={{ objectFit: 'cover' }} /> ? <BaseImage src={contact.avatar} width='100%' height='100%' style={{ objectFit: 'cover' }} />
: <Sigil ship={ship} size={96} color={hexColor} />; : <Sigil padding={24} ship={ship} size={128} color={hexColor} />;
return ( return (
<Center <Center
@ -64,7 +64,7 @@ export function Profile(props: any) {
width="100%" width="100%"
> >
<Center width="100%" marginTop="-48px"> <Center width="100%" marginTop="-48px">
<Box height='96px' width='96px' borderRadius="2" overflow="hidden"> <Box height='128px' width='128px' borderRadius="2" overflow="hidden">
{image} {image}
</Box> </Box>
</Center> </Center>

2
pkg/interface/src/views/components/Author.tsx
View File

@ -48,7 +48,7 @@ export default function Author(props: AuthorProps) {
width={16} width={16}
/> />
) : ( ) : (
<Sigil ship={ship} size={16} color={color} icon padded /> <Sigil ship={ship} size={16} color={color} icon padding={2} />
); );
return ( return (

2
pkg/interface/src/views/components/leap/OmniboxResult.js
View File

@ -51,7 +51,7 @@ export class OmniboxResult extends Component {
graphic = <Icon display="inline-block" verticalAlign="middle" icon='SignOut' mr='2' size='18px' color={iconFill} />; graphic = <Icon display="inline-block" verticalAlign="middle" icon='SignOut' mr='2' size='18px' color={iconFill} />;
} else if (icon === 'profile') { } else if (icon === 'profile') {
text = text.startsWith('Profile') ? window.ship : text; text = text.startsWith('Profile') ? window.ship : text;
graphic = <Sigil color={color} classes='dib flex-shrink-0 v-mid mr2' ship={text} size={18} icon padded />; graphic = <Sigil color={color} classes='dib flex-shrink-0 v-mid mr2' ship={text} size={18} icon padding={2} />;
} else if (icon === 'home') { } else if (icon === 'home') {
graphic = <Icon display='inline-block' verticalAlign='middle' icon='Home' mr='2' size='18px' color={iconFill} />; graphic = <Icon display='inline-block' verticalAlign='middle' icon='Home' mr='2' size='18px' color={iconFill} />;
} else if (icon === 'notifications') { } else if (icon === 'notifications') {

2
pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx
View File

@ -76,7 +76,7 @@ export function SidebarItem(props: {
if (props.contacts?.[title] && props.contacts[title].avatar) { if (props.contacts?.[title] && props.contacts[title].avatar) {
img = <BaseImage src={props.contacts[title].avatar} width='16px' height='16px' borderRadius={2}/>; img = <BaseImage src={props.contacts[title].avatar} width='16px' height='16px' borderRadius={2}/>;
} else { } else {
img = <Sigil ship={title} color={`#${uxToHex(props.contacts?.[title]?.color || '0x0')}`} icon padded size={16}/> img = <Sigil ship={title} color={`#${uxToHex(props.contacts?.[title]?.color || '0x0')}`} icon padding={2} size={16}/>
} }
if (props.contacts?.[title] && props.contacts[title].nickname) { if (props.contacts?.[title] && props.contacts[title].nickname) {
title = props.contacts[title].nickname; title = props.contacts[title].nickname;