add owner border to avatar (teambit#3832)

Author: JoshK2

scopes/design/ui/Avatar/avatar.compositions.tsx

@@ -45,3 +45,9 @@ export const NoSetIconUserAvatar = () => (
     <UserAvatar size={32} account={accounts.noPicUserAccount} />
   </ThemeCompositions>
 );
+
+export const IsOwnerUserAvatarExample = () => (
+  <ThemeCompositions>
+    <UserAvatar size={32} account={accounts.userAccount} isOwner={true} />
+  </ThemeCompositions>
+);

scopes/design/ui/Avatar/styles.module.scss

@@ -47,6 +47,14 @@
   box-sizing: border-box;
 }
 
+.isOwner {
+  border: 2px solid var(--steel-color);
+  position: absolute;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  border-radius: 50%;
+}
+
 :export {
   //text without hash
   defaultAvatarBgColor: str-slice(inspect(var(--border-color)), 2);

scopes/design/ui/Avatar/user-avatar.tsx

@@ -14,18 +14,28 @@ type UserAvatarProps = {
   fontSize?: number;
   className?: string;
   imgClassName?: string;
+  isOwner?: boolean;
 };
 
 export class UserAvatar extends PureComponent<UserAvatarProps> {
   render() {
-    const { account, size, imageSize = size, fontSize = Math.round(size * 0.4), className, imgClassName } = this.props;
+    const {
+      account,
+      size,
+      imageSize = size,
+      fontSize = Math.round(size * 0.4),
+      className,
+      imgClassName,
+      isOwner = false,
+    } = this.props;
 
     const { profileImage = '', name = '', displayName = '' } = account;
     const firstLetter = name[0] || displayName[0];
     const profileImageWithParams = addQueryParams(profileImage, imageSize);
     const colors = firstLetter && avatarColors[firstLetter.toLowerCase()];
     return (
       <div className={classNames(colors, styles.avatar, className)} style={{ width: `${size}px`, height: `${size}px` }}>
+        {isOwner && <div className={styles.isOwner} />}
         {profileImageWithParams && (
           <img src={profileImageWithParams} className={classNames(styles.avatarImg, imgClassName)} />
         )}

workspace.jsonc

@@ -64,20 +64,20 @@
         "@teambit/base-ui.text.muted-text": "0.6.4",
         "@teambit/base-ui.text.paragraph": "0.6.4",
         "@teambit/base-ui.text.themed-text": "0.6.4",
-        "@teambit/base-ui.theme.color-palette": "0.6.3",
-        "@teambit/base-ui.theme.colors": "0.6.3",
+        "@teambit/base-ui.theme.color-palette": "0.6.7",
+        "@teambit/base-ui.theme.colors": "0.6.7",
         "@teambit/base-ui.theme.dark-theme": "0.6.3",
-        "@teambit/base-ui.theme.fonts.roboto": "0.6.2",
-        "@teambit/base-ui.theme.sizes": "0.6.3",
-        "@teambit/base-ui.theme.theme-provider": "0.6.4",
+        "@teambit/base-ui.theme.fonts.roboto": "0.6.7",
+        "@teambit/base-ui.theme.sizes": "0.6.7",
+        "@teambit/base-ui.theme.theme-provider": "0.6.7",
         "@teambit/base-ui.utils.string.affix": "0.0.2",
         "@teambit/base-ui.utils.sub-paths": "0.6.3",
         "@teambit/base-ui.utils.time-ago": "0.5.9",
         "@teambit/capsule": "0.0.12",
         "@teambit/documenter.code.react-playground": "1.0.4",
         "@teambit/documenter.routing.external-link": "1.0.3",
-        "@teambit/documenter.theme.theme-compositions": "2.0.3",
-        "@teambit/documenter.theme.theme-context": "2.0.2",
+        "@teambit/documenter.theme.theme-compositions": "3.0.8",
+        "@teambit/documenter.theme.theme-context": "3.0.8",
         "@teambit/documenter.types.docs-file": "1.0.3",
         "@teambit/documenter.ui.block-quote": "0.0.1",
         "@teambit/documenter.ui.bold": "0.0.1",
@@ -192,7 +192,6 @@
         "fuse.js": "6.4.6",
         "get-port": "5.1.1",
         "globby": "11.0.1",
-        //TODO: remove this once this is merged https://github.com/isaacs/node-graceful-fs/pull/202
         "graceful-fs": "4.2.4",
         "graphql-subscriptions": "1.2.0",
         "graphql-tag": "2.12.1",
@@ -542,4 +541,4 @@
       }
     }
   }
-}
+}