avataaars-customizer - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.es.js

@@ -32,22 +32,7 @@ import React from 'react';
 
-var css = ".styles_avatar__2VLtI {\n  display: inline-block;\n  width:315px;\n  vertical-align: top;\n  height:305px;\n}\n\n.styles_tabs__zfQpR {\n  display: inline-block;\n  width:100px;\n  vertical-align: top;\n  padding-top:50px;\n  padding-bottom: 20px;\n  padding-left:10px;\n  overflow: hidden;\n  position: relative;\n  left:1px;\n  height:305px;\n  box-sizing: border-box;\n}\n\n.styles_tab__3CxtV {\n  font-size:13px;\n  border:1px solid transparent;\n  padding: 4px;\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  cursor: pointer;\n  color:#007bff;\n}\n\n.styles_selectedTab__3XKBa {\n  border-color:#dee2e6;\n  border-right-color: white;\n  color: #495057;\n  box-shadow: 0px 0px 8px -1px rgba(0,0,0,0.2);\n}\n\n.styles_tabpanes__2uRkn {\n  display: inline-block;\n  width: 400px;\n  padding-left:30px;\n  border-left:1px solid #dee2e6;\n  height:305px;\n}\n\n.styles_tabpane__XUdZl {\n  display: none;\n  height:305px;\n  width:450px;\n}\n\n.styles_visible__3TqW5 {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_piece__2PSWK {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n}\n\n.styles_piece__2PSWK:hover {\n  background-color: #cce5ff;\n  cursor: pointer;\n}\n\n.styles_none__3LJZL {\n  opacity: .2;\n  font-size: 11px;\n  position: absolute;\n  top: 20px;\n  left: 9px;\n}\n\n.styles_divider__3zNPB {\n  display: block;\n  width: 100%;\n  height:20px;\n  padding:10px 60px;\n}\n\n.styles_divider__3zNPB > div {\n  height: 1px;\n  background-color: #dee2e6;\n}\n\n.styles_color__3GZQJ {\n  display: inline-block;\n  height: 30px;\n  width:30px;\n  cursor: pointer;\n}";
-var styles = { "avatar": "styles_avatar__2VLtI", "tabs": "styles_tabs__zfQpR", "tab": "styles_tab__3CxtV", "selectedTab": "styles_selectedTab__3XKBa", "tabpanes": "styles_tabpanes__2uRkn", "tabpane": "styles_tabpane__XUdZl", "visible": "styles_visible__3TqW5", "piece": "styles_piece__2PSWK", "none": "styles_none__3LJZL", "divider": "styles_divider__3zNPB", "color": "styles_color__3GZQJ" };
+var css = ".styles_container__2pRR5 {\n  position:relative;\n  width:400px;\n}\n\n.styles_avatar__2VLtI {\n  display: block;\n  width:315px;\n  vertical-align: top;\n  height:235px;\n  padding-left:20px;\n}\n\n.styles_tabs__zfQpR {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  right:50px;\n  top:18px;\n  width:100px;\n}\n\n.styles_tab__3CxtV {\n  font-size:12px;\n  text-align: center;\n  border:1px solid transparent;\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color:#007bff;\n}\n\n.styles_selectedTab__3XKBa {\n  background: #007bff;\n  color: white;\n}\n\n.styles_tabpanes__2uRkn {\n  box-sizing: border-box;\n  display: inline-block;\n  width: 400px;\n}\n\n.styles_tabpane__XUdZl {\n  box-sizing: border-box;\n  display: none;\n  width:400px;\n  padding:0 10px 10px;\n}\n\n.styles_visible__3TqW5 {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_piece__2PSWK {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n}\n\n.styles_piece__2PSWK:hover {\n  background-color: #cce5ff;\n  cursor: pointer;\n}\n\n.styles_none__3LJZL {\n  opacity: .2;\n  font-size: 11px;\n  position: absolute;\n  top: 20px;\n  left: 9px;\n}\n\n.styles_divider__3zNPB {\n  display: block;\n  width: 100%;\n  height:20px;\n  padding:5px 60px;\n}\n\n.styles_divider__3zNPB > div {\n  height: 1px;\n  background-color: #dee2e6;\n}\n\n.styles_colorContainer__NbBrA {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_color__3GZQJ {\n  display: inline-block;\n  height: 26px;\n  width:23px;\n  cursor: pointer;\n}\n\n.styles_color__3GZQJ[color=#FFFFFF] {\n  border:1px solid #ccc;\n}";
+var styles = { "container": "styles_container__2pRR5", "avatar": "styles_avatar__2VLtI", "tabs": "styles_tabs__zfQpR", "tab": "styles_tab__3CxtV", "selectedTab": "styles_selectedTab__3XKBa", "tabpanes": "styles_tabpanes__2uRkn", "tabpane": "styles_tabpane__XUdZl", "visible": "styles_visible__3TqW5", "piece": "styles_piece__2PSWK", "none": "styles_none__3LJZL", "divider": "styles_divider__3zNPB", "colorContainer": "styles_colorContainer__NbBrA", "color": "styles_color__3GZQJ" };
 styleInject(css);
 
 var options = [{
-    label: 'Skin',
-    type: 'skinColor',
-    attribute: 'skinColor',
-    values: [],
-    colorAttribute: 'skinColor',
-    colors: {
-        "Tanned": "#FD9841",
-        "Yellow": "#F8D25C",
-        "Pale": "#FFDBB4",
-        "Light": "#EDB98A",
-        "Brown": "#D08B5B",
-        "DarkBrown": "#AE5D29",
-        "Black": "#614335"
-    }
-}, {
     label: 'Head',
@@ -151,2 +136,17 @@ type: 'top',
     }
+}, {
+    label: 'Skin',
+    type: 'skinColor',
+    attribute: 'skinColor',
+    values: [],
+    colorAttribute: 'skinColor',
+    colors: {
+        "Tanned": "#FD9841",
+        "Yellow": "#F8D25C",
+        "Pale": "#FFDBB4",
+        "Light": "#EDB98A",
+        "Brown": "#D08B5B",
+        "DarkBrown": "#AE5D29",
+        "Black": "#614335"
+    }
 }];
@@ -253,3 +253,3 @@
     'div',
-    null,
+    { className: styles.container },
     React.createElement(
@@ -259,3 +259,3 @@ 'div',
       React.createElement(Avatar, _extends({
-        style: { width: '300px', height: '300px' },
+        style: { width: '200px', height: '200px' },
         avatarStyle: 'Circle'
@@ -313,25 +313,24 @@ }, attributes))
           }),
-          option.colors && option.values.length > 0 && React.createElement(
+          React.createElement(
             'div',
-            { className: styles.divider },
-            React.createElement('div', null)
-          ),
-          option.colors && (option.type !== 'top' || option.hats.indexOf(attributes.topType) === -1) && map(option.colors, function (color, colorName) {
-            return React.createElement('div', {
-              className: styles.color,
-              style: { backgroundColor: color },
-              onClick: function onClick() {
-                return pieceClicked(option.colorAttribute, colorName);
-              }
-            });
-          }),
-          option.hatColors && option.hats.indexOf(attributes.topType) !== -1 && map(option.hatColors, function (color, colorName) {
-            return React.createElement('div', {
-              className: styles.color,
-              style: { backgroundColor: color },
-              onClick: function onClick() {
-                return pieceClicked('hatColor', colorName);
-              }
-            });
-          })
+            { className: styles.colorContainer },
+            option.colors && (option.type !== 'top' || option.hats.indexOf(attributes.topType) === -1) && attributes.topType !== 'Eyepatch' && map(option.colors, function (color, colorName) {
+              return React.createElement('div', {
+                className: styles.color,
+                style: { backgroundColor: color, border: color === '#FFFFFF' ? '1px solid #ccc' : '1px solid ' + color },
+                onClick: function onClick() {
+                  return pieceClicked(option.colorAttribute, colorName);
+                }
+              });
+            }),
+            option.hatColors && option.hats.indexOf(attributes.topType) !== -1 && attributes.topType !== 'Hat' && map(option.hatColors, function (color, colorName) {
+              return React.createElement('div', {
+                className: styles.color,
+                style: { backgroundColor: color, border: color === '#FFFFFF' ? '1px solid #ccc' : '1px solid ' + color },
+                onClick: function onClick() {
+                  return pieceClicked('hatColor', colorName);
+                }
+              });
+            })
+          )
         );
@@ -338,0 +337,0 @@ })

dist/index.js

@@ -37,22 +37,7 @@ 'use strict';
 
-var css = ".styles_avatar__2VLtI {\n  display: inline-block;\n  width:315px;\n  vertical-align: top;\n  height:305px;\n}\n\n.styles_tabs__zfQpR {\n  display: inline-block;\n  width:100px;\n  vertical-align: top;\n  padding-top:50px;\n  padding-bottom: 20px;\n  padding-left:10px;\n  overflow: hidden;\n  position: relative;\n  left:1px;\n  height:305px;\n  box-sizing: border-box;\n}\n\n.styles_tab__3CxtV {\n  font-size:13px;\n  border:1px solid transparent;\n  padding: 4px;\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  cursor: pointer;\n  color:#007bff;\n}\n\n.styles_selectedTab__3XKBa {\n  border-color:#dee2e6;\n  border-right-color: white;\n  color: #495057;\n  box-shadow: 0px 0px 8px -1px rgba(0,0,0,0.2);\n}\n\n.styles_tabpanes__2uRkn {\n  display: inline-block;\n  width: 400px;\n  padding-left:30px;\n  border-left:1px solid #dee2e6;\n  height:305px;\n}\n\n.styles_tabpane__XUdZl {\n  display: none;\n  height:305px;\n  width:450px;\n}\n\n.styles_visible__3TqW5 {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_piece__2PSWK {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n}\n\n.styles_piece__2PSWK:hover {\n  background-color: #cce5ff;\n  cursor: pointer;\n}\n\n.styles_none__3LJZL {\n  opacity: .2;\n  font-size: 11px;\n  position: absolute;\n  top: 20px;\n  left: 9px;\n}\n\n.styles_divider__3zNPB {\n  display: block;\n  width: 100%;\n  height:20px;\n  padding:10px 60px;\n}\n\n.styles_divider__3zNPB > div {\n  height: 1px;\n  background-color: #dee2e6;\n}\n\n.styles_color__3GZQJ {\n  display: inline-block;\n  height: 30px;\n  width:30px;\n  cursor: pointer;\n}";
-var styles = { "avatar": "styles_avatar__2VLtI", "tabs": "styles_tabs__zfQpR", "tab": "styles_tab__3CxtV", "selectedTab": "styles_selectedTab__3XKBa", "tabpanes": "styles_tabpanes__2uRkn", "tabpane": "styles_tabpane__XUdZl", "visible": "styles_visible__3TqW5", "piece": "styles_piece__2PSWK", "none": "styles_none__3LJZL", "divider": "styles_divider__3zNPB", "color": "styles_color__3GZQJ" };
+var css = ".styles_container__2pRR5 {\n  position:relative;\n  width:400px;\n}\n\n.styles_avatar__2VLtI {\n  display: block;\n  width:315px;\n  vertical-align: top;\n  height:235px;\n  padding-left:20px;\n}\n\n.styles_tabs__zfQpR {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  right:50px;\n  top:18px;\n  width:100px;\n}\n\n.styles_tab__3CxtV {\n  font-size:12px;\n  text-align: center;\n  border:1px solid transparent;\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color:#007bff;\n}\n\n.styles_selectedTab__3XKBa {\n  background: #007bff;\n  color: white;\n}\n\n.styles_tabpanes__2uRkn {\n  box-sizing: border-box;\n  display: inline-block;\n  width: 400px;\n}\n\n.styles_tabpane__XUdZl {\n  box-sizing: border-box;\n  display: none;\n  width:400px;\n  padding:0 10px 10px;\n}\n\n.styles_visible__3TqW5 {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_piece__2PSWK {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n}\n\n.styles_piece__2PSWK:hover {\n  background-color: #cce5ff;\n  cursor: pointer;\n}\n\n.styles_none__3LJZL {\n  opacity: .2;\n  font-size: 11px;\n  position: absolute;\n  top: 20px;\n  left: 9px;\n}\n\n.styles_divider__3zNPB {\n  display: block;\n  width: 100%;\n  height:20px;\n  padding:5px 60px;\n}\n\n.styles_divider__3zNPB > div {\n  height: 1px;\n  background-color: #dee2e6;\n}\n\n.styles_colorContainer__NbBrA {\n  display:flex;\n  align-items: center;\n  justify-items: center;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n}\n\n.styles_color__3GZQJ {\n  display: inline-block;\n  height: 26px;\n  width:23px;\n  cursor: pointer;\n}\n\n.styles_color__3GZQJ[color=#FFFFFF] {\n  border:1px solid #ccc;\n}";
+var styles = { "container": "styles_container__2pRR5", "avatar": "styles_avatar__2VLtI", "tabs": "styles_tabs__zfQpR", "tab": "styles_tab__3CxtV", "selectedTab": "styles_selectedTab__3XKBa", "tabpanes": "styles_tabpanes__2uRkn", "tabpane": "styles_tabpane__XUdZl", "visible": "styles_visible__3TqW5", "piece": "styles_piece__2PSWK", "none": "styles_none__3LJZL", "divider": "styles_divider__3zNPB", "colorContainer": "styles_colorContainer__NbBrA", "color": "styles_color__3GZQJ" };
 styleInject(css);
 
 var options = [{
-    label: 'Skin',
-    type: 'skinColor',
-    attribute: 'skinColor',
-    values: [],
-    colorAttribute: 'skinColor',
-    colors: {
-        "Tanned": "#FD9841",
-        "Yellow": "#F8D25C",
-        "Pale": "#FFDBB4",
-        "Light": "#EDB98A",
-        "Brown": "#D08B5B",
-        "DarkBrown": "#AE5D29",
-        "Black": "#614335"
-    }
-}, {
     label: 'Head',
@@ -156,2 +141,17 @@ type: 'top',
     }
+}, {
+    label: 'Skin',
+    type: 'skinColor',
+    attribute: 'skinColor',
+    values: [],
+    colorAttribute: 'skinColor',
+    colors: {
+        "Tanned": "#FD9841",
+        "Yellow": "#F8D25C",
+        "Pale": "#FFDBB4",
+        "Light": "#EDB98A",
+        "Brown": "#D08B5B",
+        "DarkBrown": "#AE5D29",
+        "Black": "#614335"
+    }
 }];
@@ -258,3 +258,3 @@
     'div',
-    null,
+    { className: styles.container },
     React.createElement(
@@ -264,3 +264,3 @@ 'div',
       React.createElement(Avatar__default, _extends({
-        style: { width: '300px', height: '300px' },
+        style: { width: '200px', height: '200px' },
         avatarStyle: 'Circle'
@@ -318,25 +318,24 @@ }, attributes))
           }),
-          option.colors && option.values.length > 0 && React.createElement(
+          React.createElement(
             'div',
-            { className: styles.divider },
-            React.createElement('div', null)
-          ),
-          option.colors && (option.type !== 'top' || option.hats.indexOf(attributes.topType) === -1) && map(option.colors, function (color, colorName) {
-            return React.createElement('div', {
-              className: styles.color,
-              style: { backgroundColor: color },
-              onClick: function onClick() {
-                return pieceClicked(option.colorAttribute, colorName);
-              }
-            });
-          }),
-          option.hatColors && option.hats.indexOf(attributes.topType) !== -1 && map(option.hatColors, function (color, colorName) {
-            return React.createElement('div', {
-              className: styles.color,
-              style: { backgroundColor: color },
-              onClick: function onClick() {
-                return pieceClicked('hatColor', colorName);
-              }
-            });
-          })
+            { className: styles.colorContainer },
+            option.colors && (option.type !== 'top' || option.hats.indexOf(attributes.topType) === -1) && attributes.topType !== 'Eyepatch' && map(option.colors, function (color, colorName) {
+              return React.createElement('div', {
+                className: styles.color,
+                style: { backgroundColor: color, border: color === '#FFFFFF' ? '1px solid #ccc' : '1px solid ' + color },
+                onClick: function onClick() {
+                  return pieceClicked(option.colorAttribute, colorName);
+                }
+              });
+            }),
+            option.hatColors && option.hats.indexOf(attributes.topType) !== -1 && attributes.topType !== 'Hat' && map(option.hatColors, function (color, colorName) {
+              return React.createElement('div', {
+                className: styles.color,
+                style: { backgroundColor: color, border: color === '#FFFFFF' ? '1px solid #ccc' : '1px solid ' + color },
+                onClick: function onClick() {
+                  return pieceClicked('hatColor', colorName);
+                }
+              });
+            })
+          )
         );
@@ -343,0 +342,0 @@ })

package.json

 {
   "name": "avataaars-customizer",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
@@ -61,5 +61,3 @@ "author": "cgross",
   ],
-  "dependencies": {
-
-  }
+  "dependencies": {}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65911

increased by2.44%

Worsened metrics

Lines of code

651

decreased by-0.31%

No dependency changes