@happeouikit/avatar - npm Package Compare versions

Comparing version 1.4.8 to 1.4.9

CHANGELOG.md

 # Changelog
 
+## 1.4.9
+
+- [Fixed] white halo around avatar agains dark background
+
 ## 1.4.7
@@ -4,0 +8,0 @@

dist/Avatar.js

@@ -110,10 +110,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
   componentId: "sc-1gbyqf4-9"
-})(["object-fit:cover;width:100%;height:100%;background-color:", ";"], bgGray);
+})(["object-fit:cover;width:100%;height:100%;", ""], function (_ref4) {
+  var showBackground = _ref4.showBackground;
+  return showBackground && css(["background-color:", ";"], bgGray);
+});
 var Presence = styled.div.withConfig({
   displayName: "Avatar__Presence",
   componentId: "sc-1gbyqf4-10"
-})(["border-radius:50%;position:absolute;right:0;bottom:0;height:", ";width:", ";border:", " solid ", ";font-size:", ";line-height:", ";animation:", " 700ms;&.presence-free{background-color:", ";}&.presence-busy{background-color:", ";}&.presence-outOfOffice{background-color:", ";}&.presence-unknown{background-color:", ";}"], function (_ref4) {
-  var size = _ref4.size;
-  return sizeMap[size].presenceSize;
-}, function (_ref5) {
+})(["border-radius:50%;position:absolute;right:0;bottom:0;height:", ";width:", ";border:", " solid ", ";font-size:", ";line-height:", ";animation:", " 700ms;&.presence-free{background-color:", ";}&.presence-busy{background-color:", ";}&.presence-outOfOffice{background-color:", ";}&.presence-unknown{background-color:", ";}"], function (_ref5) {
   var size = _ref5.size;
@@ -123,9 +123,12 @@ return sizeMap[size].presenceSize;
   var size = _ref6.size;
+  return sizeMap[size].presenceSize;
+}, function (_ref7) {
+  var size = _ref7.size;
   return sizeMap[size].presenceBorder;
-}, white, function (_ref7) {
-  var size = _ref7.size;
-  return sizeMap[size].presenceSize;
-}, function (_ref8) {
+}, white, function (_ref8) {
   var size = _ref8.size;
   return sizeMap[size].presenceSize;
+}, function (_ref9) {
+  var size = _ref9.size;
+  return sizeMap[size].presenceSize;
 }, scaleAndFadeIn, success, alert, warn, gray06);
@@ -135,6 +138,3 @@ var EmojiWrapper = styled.div.withConfig({
   componentId: "sc-1gbyqf4-11"
-})(["position:absolute;z-index:1;bottom:0;left:100%;display:flex;justify-content:center;align-items:center;margin-left:-", ";width:", ";height:", ";background-color:", ";border-radius:50%;"], function (_ref9) {
-  var size = _ref9.size;
-  return sizeMap[size].emojiBgSize;
-}, function (_ref10) {
+})(["position:absolute;z-index:1;bottom:0;left:100%;display:flex;justify-content:center;align-items:center;margin-left:-", ";width:", ";height:", ";background-color:", ";border-radius:50%;"], function (_ref10) {
   var size = _ref10.size;
@@ -145,2 +145,5 @@ return sizeMap[size].emojiBgSize;
   return sizeMap[size].emojiBgSize;
+}, function (_ref12) {
+  var size = _ref12.size;
+  return sizeMap[size].emojiBgSize;
 }, bgWhite);
@@ -150,6 +153,3 @@ var Emoji = styled.div.withConfig({
   componentId: "sc-1gbyqf4-12"
-})(["font-size:", ";width:", ";height:", ";line-height:", ";"], function (_ref12) {
-  var size = _ref12.size;
-  return sizeMap[size].emojiSize;
-}, function (_ref13) {
+})(["font-size:", ";width:", ";height:", ";line-height:", ";"], function (_ref13) {
   var size = _ref13.size;
@@ -163,2 +163,5 @@ return sizeMap[size].emojiSize;
   return sizeMap[size].emojiSize;
+}, function (_ref16) {
+  var size = _ref16.size;
+  return sizeMap[size].emojiSize;
 });
@@ -170,10 +173,10 @@ var VioletGroupIcon = styled(IconGroupAvatar).withConfig({
 
-var Avatar = function Avatar(_ref16) {
-  var hoverEvent = _ref16.hoverEvent,
-      clickEvent = _ref16.clickEvent,
-      user = _ref16.user,
-      showPresence = _ref16.showPresence,
-      size = _ref16.size,
-      emoji = _ref16.emoji,
-      onClick = _ref16.onClick;
+var Avatar = function Avatar(_ref17) {
+  var hoverEvent = _ref17.hoverEvent,
+      clickEvent = _ref17.clickEvent,
+      user = _ref17.user,
+      showPresence = _ref17.showPresence,
+      size = _ref17.size,
+      emoji = _ref17.emoji,
+      onClick = _ref17.onClick;
 
@@ -185,2 +188,7 @@ var _useState = useState(false),
 
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
   var canShowPresence = function canShowPresence() {
@@ -212,3 +220,7 @@ return showPresence && size !== "xxs" && size !== "xs" && !emoji;
           return setError(true);
-        }
+        },
+        onLoad: function onLoad() {
+          return setLoading(false);
+        },
+        showBackground: loading
       }));
@@ -215,0 +227,0 @@ }

package.json

 {
   "name": "@happeouikit/avatar",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "description": "",
@@ -23,3 +23,3 @@ "main": "dist/index.js",
     "react": "^16.6.3",
-    "styled-components": "5.1.1"
+    "styled-components": "^4.1.1"
   },
@@ -26,0 +26,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

16822

increased by2.74%

Lines of code

268

increased by4.28%

No dependency changes