diff --git a/pkg/interface/src/logic/lib/sigil.js b/pkg/interface/src/logic/lib/sigil.js index b30a0ba50c..f2444068ed 100644 --- a/pkg/interface/src/logic/lib/sigil.js +++ b/pkg/interface/src/logic/lib/sigil.js @@ -23,10 +23,10 @@ export const Sigil = memo( size, svgClass = '', icon = false, - padded = false + padding = 0 }) => { - const padding = icon && padded ? '2px' : '0px'; - const innerSize = icon && padded ? Number(size) - 4 : size; + const innerSize = Number(size) - 2*padding; + const paddingPx = `${padding}px`; const foregroundColor = foreground ? foreground : foregroundFromBackground(color); @@ -45,7 +45,7 @@ export const Sigil = memo( borderRadius={icon ? '1' : '0'} flexBasis={size} backgroundColor={color} - padding={padding} + padding={paddingPx} className={classes} > {sigil({ diff --git a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx index ae5fb52032..664e4e9ac5 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatInput.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatInput.tsx @@ -137,7 +137,7 @@ class ChatInput extends Component { color={`#${color}`} classes={sigilClass} icon - padded + padding={2} />; return ( diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index 68edeee2ce..e19544d477 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -279,7 +279,7 @@ export const MessageWithSigil = (props) => { color={color} classes={sigilClass} icon - padded + padding={2} /> ); diff --git a/pkg/interface/src/views/apps/notifications/graph.tsx b/pkg/interface/src/views/apps/notifications/graph.tsx index ca9a4dece5..4659577977 100644 --- a/pkg/interface/src/views/apps/notifications/graph.tsx +++ b/pkg/interface/src/views/apps/notifications/graph.tsx @@ -185,7 +185,7 @@ const GraphNode = ({ icon color={`#000000`} classes="mix-blend-diff" - padded + padding={2} /> ) : ; diff --git a/pkg/interface/src/views/apps/profile/components/Profile.tsx b/pkg/interface/src/views/apps/profile/components/Profile.tsx index a5fc37c183..4816db5e9a 100644 --- a/pkg/interface/src/views/apps/profile/components/Profile.tsx +++ b/pkg/interface/src/views/apps/profile/components/Profile.tsx @@ -41,7 +41,7 @@ export function Profile(props: any) { const image = (!hideAvatars && contact?.avatar) ? - : ; + : ; return (
- + {image}
diff --git a/pkg/interface/src/views/components/Author.tsx b/pkg/interface/src/views/components/Author.tsx index c931c76126..8428121e4b 100644 --- a/pkg/interface/src/views/components/Author.tsx +++ b/pkg/interface/src/views/components/Author.tsx @@ -48,7 +48,7 @@ export default function Author(props: AuthorProps) { width={16} /> ) : ( - + ); return ( diff --git a/pkg/interface/src/views/components/leap/OmniboxResult.js b/pkg/interface/src/views/components/leap/OmniboxResult.js index 6e57a987a9..3105a1fcde 100644 --- a/pkg/interface/src/views/components/leap/OmniboxResult.js +++ b/pkg/interface/src/views/components/leap/OmniboxResult.js @@ -51,7 +51,7 @@ export class OmniboxResult extends Component { graphic = ; } else if (icon === 'profile') { text = text.startsWith('Profile') ? window.ship : text; - graphic = ; + graphic = ; } else if (icon === 'home') { graphic = ; } else if (icon === 'notifications') { diff --git a/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx b/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx index 40cf6ff813..e1da61d8f2 100644 --- a/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx +++ b/pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx @@ -76,7 +76,7 @@ export function SidebarItem(props: { if (props.contacts?.[title] && props.contacts[title].avatar) { img = ; } else { - img = + img = } if (props.contacts?.[title] && props.contacts[title].nickname) { title = props.contacts[title].nickname;