@blerp/design 1.4.5 → 1.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Blerp/BlerpImageRow.js +22 -15
- package/dist/cjs/Blerp/BlerpSavePopup.js +20 -11
- package/dist/cjs/Blerp/BlerpTitleRow.js +16 -10
- package/dist/cjs/Blerp/BlerpTopRow.js +45 -27
- package/dist/cjs/Blerp.js +8 -20
- package/dist/cjs/BlerpListViewPremium.js +25 -21
- package/dist/cjs/BlerpListViewSkeleton.js +6 -6
- package/dist/cjs/CollectionCard.js +27 -36
- package/dist/cjs/CollectionListViewPremium.js +17 -14
- package/dist/cjs/CollectionSkeleton.js +5 -5
- package/dist/cjs/Dropdown.js +27 -24
- package/dist/cjs/EllipsisLoader.js +4 -3
- package/dist/cjs/GroupCard.js +8 -7
- package/dist/cjs/ImageEditor.js +4 -1
- package/dist/cjs/ImageUpload.js +23 -16
- package/dist/cjs/NewBlerp.js +41 -37
- package/dist/cjs/NewCollectionModal.js +27 -22
- package/dist/cjs/PremiumCollectionCard.js +10 -8
- package/dist/cjs/PurchaseModals/CheckoutModal.js +7 -3
- package/dist/cjs/PurchaseModals/PremiumBlerpCheckoutModal.js +7 -3
- package/dist/cjs/PurchaseModals/PremiumCollectionCheckoutModal.js +7 -3
- package/dist/cjs/PurchaseModals/PremiumSubscriptionCheckoutModal.js +7 -3
- package/dist/cjs/ReactionButtons.js +10 -5
- package/dist/cjs/Theme.js +6 -132
- package/dist/cjs/Toggle.js +2 -1
- package/dist/cjs/UserCard.js +13 -12
- package/dist/cjs/UserPage/LibraryControls.js +40 -29
- package/dist/cjs/UserPage/UserLibraryHeader.js +7 -96
- package/dist/cjs/UserPage/UserProfileHeader.js +6 -291
- package/dist/cjs/UsernameWithPopout.js +6 -4
- package/dist/cjs/icons.js +4 -1
- package/dist/cjs/index.js +135 -216
- package/dist/cjs/neo-components/Navigation.js +0 -2
- package/dist/cjs/neo-components/withSx.js +0 -1
- package/dist/cjs/neo-utils/sxToStyle.js +0 -2
- package/dist/esm/Blerp/BlerpImageRow.js +7 -2
- package/dist/esm/Blerp/BlerpSavePopup.js +9 -2
- package/dist/esm/Blerp/BlerpTitleRow.js +6 -2
- package/dist/esm/Blerp/BlerpTopRow.js +19 -3
- package/dist/esm/Blerp.js +3 -14
- package/dist/esm/BlerpListViewPremium.js +6 -2
- package/dist/esm/BlerpListViewSkeleton.js +1 -1
- package/dist/esm/CollectionCard.js +8 -17
- package/dist/esm/CollectionListViewPremium.js +5 -2
- package/dist/esm/CollectionSkeleton.js +1 -1
- package/dist/esm/Dropdown.js +4 -1
- package/dist/esm/EllipsisLoader.js +3 -2
- package/dist/esm/GroupCard.js +2 -1
- package/dist/esm/ImageEditor.js +2 -1
- package/dist/esm/ImageUpload.js +7 -2
- package/dist/esm/NewBlerp.js +5 -1
- package/dist/esm/NewCollectionModal.js +8 -3
- package/dist/esm/PremiumCollectionCard.js +4 -2
- package/dist/esm/PurchaseModals/CheckoutModal.js +4 -2
- package/dist/esm/PurchaseModals/PremiumBlerpCheckoutModal.js +4 -2
- package/dist/esm/PurchaseModals/PremiumCollectionCheckoutModal.js +4 -2
- package/dist/esm/PurchaseModals/PremiumSubscriptionCheckoutModal.js +4 -2
- package/dist/esm/ReactionButtons.js +5 -2
- package/dist/esm/Theme.js +5 -130
- package/dist/esm/Toggle.js +2 -2
- package/dist/esm/UserCard.js +2 -1
- package/dist/esm/UserPage/LibraryControls.js +20 -11
- package/dist/esm/UserPage/UserLibraryHeader.js +6 -92
- package/dist/esm/UserPage/UserProfileHeader.js +5 -285
- package/dist/esm/UsernameWithPopout.js +3 -1
- package/dist/esm/icons.js +2 -1
- package/dist/esm/index.js +44 -129
- package/dist/esm/neo-components/Navigation.js +0 -2
- package/dist/esm/neo-components/ThemeProvider.js +1 -1
- package/dist/esm/neo-components/withSx.js +0 -1
- package/dist/esm/neo-utils/sxToStyle.js +0 -2
- package/package.json +31 -9
|
@@ -1,102 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var index = require('../index.js');
|
|
6
|
-
var ScreenSizeHook = require('../ScreenSizeHook.js');
|
|
7
|
-
var LibraryControls = require('./LibraryControls.js');
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
8
4
|
|
|
9
|
-
|
|
5
|
+
// TODO: If this component is needed, import dependencies directly (not from ../index)
|
|
10
6
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
15
|
-
|
|
16
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
17
|
-
|
|
18
|
-
const UserLibraryHeader = _ref => {
|
|
19
|
-
let {
|
|
20
|
-
sx,
|
|
21
|
-
tabs,
|
|
22
|
-
tabSelection,
|
|
23
|
-
setTabSelection,
|
|
24
|
-
setShowSearch,
|
|
25
|
-
setSearchTerm,
|
|
26
|
-
searchTerm,
|
|
27
|
-
setActiveBoard,
|
|
28
|
-
hideSearch,
|
|
29
|
-
setSort,
|
|
30
|
-
sort,
|
|
31
|
-
hideLayoutButtons
|
|
32
|
-
} = _ref;
|
|
33
|
-
const size = ScreenSizeHook.useWindowSize();
|
|
34
|
-
return /*#__PURE__*/React__default["default"].createElement(index.Box, {
|
|
35
|
-
sx: _objectSpread({
|
|
36
|
-
backgroundColor: "grey2.main",
|
|
37
|
-
position: "sticky",
|
|
38
|
-
top: size.width >= 1000 ? "80px" : "110px",
|
|
39
|
-
zIndex: "5"
|
|
40
|
-
}, sx)
|
|
41
|
-
}, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
42
|
-
direction: "row",
|
|
43
|
-
style: {
|
|
44
|
-
padding: "20px 10px",
|
|
45
|
-
maxWidth: "1300px",
|
|
46
|
-
margin: "0 auto",
|
|
47
|
-
width: "95%"
|
|
48
|
-
}
|
|
49
|
-
}, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
50
|
-
direction: "row",
|
|
51
|
-
width: "100%",
|
|
52
|
-
justifyContent: size.width <= 675 ? "center" : "space-between",
|
|
53
|
-
alignItems: "center",
|
|
54
|
-
flexWrap: "wrap"
|
|
55
|
-
}, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
56
|
-
direction: "row",
|
|
57
|
-
flexWrap: "inherit"
|
|
58
|
-
}, tabs === null || tabs === void 0 ? void 0 : tabs.map(tab => /*#__PURE__*/React__default["default"].createElement(index.Button, {
|
|
59
|
-
key: "tab-".concat(tab),
|
|
60
|
-
onClick: () => {
|
|
61
|
-
setActiveBoard(null);
|
|
62
|
-
|
|
63
|
-
if (tabSelection.includes(tab)) {
|
|
64
|
-
let newTabs = tabSelection.filter(item => item !== tab);
|
|
65
|
-
setTabSelection(newTabs);
|
|
66
|
-
} else {
|
|
67
|
-
setTabSelection([...tabSelection, tab]);
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
variant: tabSelection.includes(tab) ? "contained" : "outlined",
|
|
71
|
-
size: "small",
|
|
72
|
-
endIcon: tabSelection.includes(tab) && /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
73
|
-
width: "18",
|
|
74
|
-
height: "18",
|
|
75
|
-
viewBox: "0 0 24 24",
|
|
76
|
-
fill: "currentColor"
|
|
77
|
-
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
78
|
-
d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
|
|
79
|
-
})),
|
|
80
|
-
sx: {
|
|
81
|
-
fontWeight: "normal",
|
|
82
|
-
marginRight: "10px",
|
|
83
|
-
marginBottom: "10px",
|
|
84
|
-
backgroundColor: tabSelection.includes(tab) && "grey4.main"
|
|
85
|
-
},
|
|
86
|
-
color: tabSelection.includes(tab) ? "grey3" : "notBlack",
|
|
87
|
-
disableElevation: true
|
|
88
|
-
}, tab))), /*#__PURE__*/React__default["default"].createElement(LibraryControls, {
|
|
89
|
-
currentSort: sort,
|
|
90
|
-
setActiveBoard: setActiveBoard,
|
|
91
|
-
setSort: value => {
|
|
92
|
-
setSort(value); // refetch({ variables: options });
|
|
93
|
-
},
|
|
94
|
-
searchTerm: searchTerm,
|
|
95
|
-
hideSearch: hideSearch,
|
|
96
|
-
setSearchTerm: setSearchTerm,
|
|
97
|
-
setShowSearch: setShowSearch,
|
|
98
|
-
hideLayoutButtons: hideLayoutButtons
|
|
99
|
-
}))));
|
|
7
|
+
const UserProfileHeader = () => {
|
|
8
|
+
return null;
|
|
100
9
|
};
|
|
101
10
|
|
|
102
|
-
|
|
11
|
+
var UserProfileHeader$1 = UserProfileHeader;
|
|
12
|
+
|
|
13
|
+
exports["default"] = UserProfileHeader$1;
|
|
@@ -1,298 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var index = require('../index.js');
|
|
8
|
-
var ScreenSizeHook = require('../ScreenSizeHook.js');
|
|
9
|
-
var helpers = require('../helpers.js');
|
|
10
|
-
var Theme = require('../Theme.js');
|
|
11
|
-
var Icons = require('../Icons/Icons.js');
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
12
4
|
|
|
13
|
-
|
|
5
|
+
// TODO: If this component is needed, import dependencies directly (not from ../index)
|
|
14
6
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
18
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
19
|
-
|
|
20
|
-
const _excluded = ["path", "sx", "size"];
|
|
21
|
-
|
|
22
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
23
|
-
|
|
24
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
25
|
-
|
|
26
|
-
const Icon = _ref => {
|
|
27
|
-
let {
|
|
28
|
-
path,
|
|
29
|
-
sx,
|
|
30
|
-
size = "24px"
|
|
31
|
-
} = _ref,
|
|
32
|
-
props = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
33
|
-
|
|
34
|
-
return /*#__PURE__*/React__default["default"].createElement(index.Box, _extends__default["default"]({
|
|
35
|
-
component: "svg",
|
|
36
|
-
viewBox: "0 0 24 24",
|
|
37
|
-
width: size,
|
|
38
|
-
height: size,
|
|
39
|
-
fill: "currentColor",
|
|
40
|
-
sx: _objectSpread({
|
|
41
|
-
display: 'inline-block',
|
|
42
|
-
flexShrink: 0
|
|
43
|
-
}, sx)
|
|
44
|
-
}, props), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
45
|
-
d: path
|
|
46
|
-
}));
|
|
7
|
+
const UserProfileHeader = () => {
|
|
8
|
+
return null;
|
|
47
9
|
};
|
|
48
10
|
|
|
49
|
-
|
|
50
|
-
add: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z",
|
|
51
|
-
edit: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
|
|
52
|
-
personAdd: "M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
|
|
53
|
-
personRemove: "M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
|
|
54
|
-
// Simplified
|
|
55
|
-
facebook: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z",
|
|
56
|
-
twitter: "M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.48.75 2.78 1.89 3.54-.7 0-1.35-.2-1.92-.53v.05c0 2.03 1.44 3.73 3.35 4.12-.35.1-.73.15-1.12.15-.27 0-.54-.03-.8-.08.54 1.66 2.08 2.87 3.91 2.91-1.42 1.12-3.23 1.78-5.2 1.78-.34 0-.67-.02-1-.06C3.04 20.1 5.31 20.8 7.72 20.8c9.27 0 14.34-7.68 14.34-14.34 0-.22 0-.44-.01-.66.98-.7 1.84-1.59 2.51-2.6z",
|
|
57
|
-
instagram: "M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z",
|
|
58
|
-
youtube: "M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z",
|
|
59
|
-
pinterest: "M12.2 2C7.12 2 3 6.12 3 11.2c0 3.9 2.42 7.23 5.87 8.58-.08-.72-.15-1.83.03-2.62.16-.71 1.05-4.44 1.05-4.44s-.27-.54-.27-1.33c0-1.25.72-2.18 1.63-2.18.77 0 1.14.58 1.14 1.27 0 .77-.49 1.93-.74 3-.21.87.44 1.58 1.29 1.58 1.55 0 2.74-1.64 2.74-4 0-2.09-1.5-3.55-3.64-3.55-2.48 0-3.93 1.86-3.93 3.77 0 .75.29 1.55.65 1.99.07.09.08.17.06.25-.07.28-.22.88-.25.99-.04.16-.14.2-.32.11-1.19-.55-1.93-2.3-1.93-3.7 0-3.02 2.2-5.78 6.32-5.78 3.32 0 5.89 2.36 5.89 5.52 0 3.3-2.08 5.96-4.97 5.96-.97 0-1.88-.5-2.2-.1l-.59 2.27c-.22.82-.8 1.85-1.19 2.48 1.1.34 2.26.52 3.47.52 5.08 0 9.2-4.12 9.2-9.2C21.4 6.12 17.28 2 12.2 2z"
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const UserProfileHeader = _ref2 => {
|
|
63
|
-
var _userData$profileImag3, _userData$profileImag4, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag5, _userData$profileImag6, _userData$socialLinks2;
|
|
64
|
-
|
|
65
|
-
let {
|
|
66
|
-
followUser,
|
|
67
|
-
isOwner,
|
|
68
|
-
userData,
|
|
69
|
-
openEdit
|
|
70
|
-
} = _ref2;
|
|
71
|
-
const theme = Theme.useBlerpTheme();
|
|
72
|
-
const [profileColors, setProfileColors] = React.useState(null);
|
|
73
|
-
const size = ScreenSizeHook.useWindowSize();
|
|
74
|
-
React.useEffect(() => {
|
|
75
|
-
var _userData$profileImag, _userData$profileImag2;
|
|
76
|
-
|
|
77
|
-
if (userData !== null && userData !== void 0 && (_userData$profileImag = userData.profileImage) !== null && _userData$profileImag !== void 0 && (_userData$profileImag2 = _userData$profileImag.original) !== null && _userData$profileImag2 !== void 0 && _userData$profileImag2.url) {
|
|
78
|
-
helpers.extractDominantColor(userData.profileImage.original.url, setProfileColors);
|
|
79
|
-
}
|
|
80
|
-
}, [userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url]);
|
|
81
|
-
|
|
82
|
-
const renderSocialLinks = () => {
|
|
83
|
-
var _userData$socialLinks;
|
|
84
|
-
|
|
85
|
-
return userData === null || userData === void 0 ? void 0 : (_userData$socialLinks = userData.socialLinks) === null || _userData$socialLinks === void 0 ? void 0 : _userData$socialLinks.map((socialItem, index) => {
|
|
86
|
-
let icon;
|
|
87
|
-
const commonSx = {
|
|
88
|
-
color: "notBlack.main",
|
|
89
|
-
cursor: "pointer",
|
|
90
|
-
":hover": {
|
|
91
|
-
color: "starling.main"
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
switch (socialItem.name) {
|
|
96
|
-
case "twitch":
|
|
97
|
-
icon = /*#__PURE__*/React__default["default"].createElement(Icons.TwitchIcon, {
|
|
98
|
-
sx: commonSx
|
|
99
|
-
});
|
|
100
|
-
break;
|
|
101
|
-
|
|
102
|
-
case "twitter":
|
|
103
|
-
icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
104
|
-
path: paths.twitter,
|
|
105
|
-
sx: commonSx
|
|
106
|
-
});
|
|
107
|
-
break;
|
|
108
|
-
|
|
109
|
-
case "youtube":
|
|
110
|
-
icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
111
|
-
path: paths.youtube,
|
|
112
|
-
sx: commonSx
|
|
113
|
-
});
|
|
114
|
-
break;
|
|
115
|
-
|
|
116
|
-
case "instagram":
|
|
117
|
-
icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
118
|
-
path: paths.instagram,
|
|
119
|
-
sx: commonSx
|
|
120
|
-
});
|
|
121
|
-
break;
|
|
122
|
-
|
|
123
|
-
case "pinterest":
|
|
124
|
-
icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
125
|
-
path: paths.pinterest,
|
|
126
|
-
sx: commonSx
|
|
127
|
-
});
|
|
128
|
-
break;
|
|
129
|
-
|
|
130
|
-
case "facebook":
|
|
131
|
-
icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
132
|
-
path: paths.facebook,
|
|
133
|
-
sx: commonSx
|
|
134
|
-
});
|
|
135
|
-
break;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
return /*#__PURE__*/React__default["default"].createElement("a", {
|
|
139
|
-
key: socialItem.name + index,
|
|
140
|
-
target: "_blank",
|
|
141
|
-
href: socialItem.link,
|
|
142
|
-
style: {
|
|
143
|
-
margin: "5px",
|
|
144
|
-
height: "65%"
|
|
145
|
-
},
|
|
146
|
-
rel: "nofollow noreferrer"
|
|
147
|
-
}, icon);
|
|
148
|
-
});
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
152
|
-
width: "100%",
|
|
153
|
-
sx: {
|
|
154
|
-
height: "250px",
|
|
155
|
-
justifyContent: size.width <= 600 ? "space-around" : "center",
|
|
156
|
-
alignItems: "center",
|
|
157
|
-
background: userData !== null && userData !== void 0 && (_userData$headerImage = userData.headerImage) !== null && _userData$headerImage !== void 0 && (_userData$headerImage2 = _userData$headerImage.original) !== null && _userData$headerImage2 !== void 0 && _userData$headerImage2.url ? "linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(".concat(userData === null || userData === void 0 ? void 0 : (_userData$headerImage3 = userData.headerImage) === null || _userData$headerImage3 === void 0 ? void 0 : (_userData$headerImage4 = _userData$headerImage3.original) === null || _userData$headerImage4 === void 0 ? void 0 : _userData$headerImage4.url, ")") : "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
|
|
158
|
-
backgroundRepeat: "no-repeat",
|
|
159
|
-
backgroundSize: "cover",
|
|
160
|
-
backgroundPosition: "center",
|
|
161
|
-
position: "relative",
|
|
162
|
-
overflow: "hidden"
|
|
163
|
-
}
|
|
164
|
-
}, isOwner && /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
|
|
165
|
-
sx: {
|
|
166
|
-
position: "absolute",
|
|
167
|
-
top: "10px",
|
|
168
|
-
right: "10px",
|
|
169
|
-
cursor: "pointer",
|
|
170
|
-
color: "white.main",
|
|
171
|
-
":hover": {
|
|
172
|
-
color: "notBlack.main",
|
|
173
|
-
backgroundColor: "white.main"
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
onClick: () => openEdit()
|
|
177
|
-
}, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
178
|
-
path: paths.edit,
|
|
179
|
-
size: "16px"
|
|
180
|
-
})), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
181
|
-
direction: "row",
|
|
182
|
-
width: "80%",
|
|
183
|
-
maxWidth: "1300px",
|
|
184
|
-
flexWrap: "wrap",
|
|
185
|
-
margin: "0 auto",
|
|
186
|
-
justifyContent: "space-between",
|
|
187
|
-
alignItems: "flex-end",
|
|
188
|
-
height: "50%"
|
|
189
|
-
}, /*#__PURE__*/React__default["default"].createElement(index.Box, {
|
|
190
|
-
sx: {
|
|
191
|
-
background: "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
|
|
192
|
-
boxShadow: "5px 5px 15px #0000009c"
|
|
193
|
-
},
|
|
194
|
-
borderRadius: "8px",
|
|
195
|
-
width: "400px",
|
|
196
|
-
height: "100%"
|
|
197
|
-
}, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
198
|
-
direction: "row",
|
|
199
|
-
height: "100%",
|
|
200
|
-
alignItems: "center",
|
|
201
|
-
position: "relative"
|
|
202
|
-
}, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
|
|
203
|
-
sx: {
|
|
204
|
-
position: "absolute",
|
|
205
|
-
padding: "5px",
|
|
206
|
-
top: "5px",
|
|
207
|
-
right: "5px",
|
|
208
|
-
cursor: "pointer",
|
|
209
|
-
color: "white.override",
|
|
210
|
-
fontSize: "12px",
|
|
211
|
-
":hover": {
|
|
212
|
-
color: "notBlack.main",
|
|
213
|
-
backgroundColor: "white.main"
|
|
214
|
-
}
|
|
215
|
-
},
|
|
216
|
-
onClick: () => {
|
|
217
|
-
isOwner ? openEdit() : followUser({
|
|
218
|
-
variables: {
|
|
219
|
-
record: {
|
|
220
|
-
userIdToFollow: userData._id
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
}, isOwner ? /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
226
|
-
path: paths.edit,
|
|
227
|
-
size: "20px"
|
|
228
|
-
}) : userData !== null && userData !== void 0 && userData.loggedInIsFollower ? /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
229
|
-
path: paths.personRemove,
|
|
230
|
-
size: "20px"
|
|
231
|
-
}) : /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
232
|
-
path: paths.personAdd,
|
|
233
|
-
size: "20px"
|
|
234
|
-
})), /*#__PURE__*/React__default["default"].createElement("img", {
|
|
235
|
-
style: {
|
|
236
|
-
borderRadius: "50%",
|
|
237
|
-
objectFit: "cover",
|
|
238
|
-
width: "90px",
|
|
239
|
-
height: "90px",
|
|
240
|
-
margin: "0 20px"
|
|
241
|
-
},
|
|
242
|
-
alt: "profile img",
|
|
243
|
-
src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag5 = userData.profileImage) === null || _userData$profileImag5 === void 0 ? void 0 : (_userData$profileImag6 = _userData$profileImag5.original) === null || _userData$profileImag6 === void 0 ? void 0 : _userData$profileImag6.url
|
|
244
|
-
}), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
245
|
-
marginLeft: "20px"
|
|
246
|
-
}, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
247
|
-
direction: "row"
|
|
248
|
-
}, /*#__PURE__*/React__default["default"].createElement(index.Text, {
|
|
249
|
-
noWrap: true,
|
|
250
|
-
maxWidth: "200px",
|
|
251
|
-
color: "white.override",
|
|
252
|
-
lineHeight: "51px",
|
|
253
|
-
fontSize: size.width <= 600 ? "30px" : "47px"
|
|
254
|
-
}, userData === null || userData === void 0 ? void 0 : userData.username)), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
255
|
-
direction: "row",
|
|
256
|
-
divider: /*#__PURE__*/React__default["default"].createElement(index.Divider, {
|
|
257
|
-
orientation: "vertical",
|
|
258
|
-
flexItem: true,
|
|
259
|
-
sx: {
|
|
260
|
-
borderColor: "white.override",
|
|
261
|
-
margin: "5px"
|
|
262
|
-
}
|
|
263
|
-
})
|
|
264
|
-
}, /*#__PURE__*/React__default["default"].createElement(index.Text, {
|
|
265
|
-
color: "white.override",
|
|
266
|
-
fontSize: "16px"
|
|
267
|
-
}, userData === null || userData === void 0 ? void 0 : userData.followerCount, " Followers"), /*#__PURE__*/React__default["default"].createElement(index.Text, {
|
|
268
|
-
color: "white.override",
|
|
269
|
-
fontSize: "16px"
|
|
270
|
-
}, userData === null || userData === void 0 ? void 0 : userData.followingCount, " Following"))))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
|
|
271
|
-
direction: "row",
|
|
272
|
-
backgroundColor: "grey2.main",
|
|
273
|
-
borderRadius: "8px",
|
|
274
|
-
height: "30%",
|
|
275
|
-
alignItems: "center",
|
|
276
|
-
marginTop: "20px",
|
|
277
|
-
justifyContent: "space-around"
|
|
278
|
-
}, isOwner ? (userData === null || userData === void 0 ? void 0 : (_userData$socialLinks2 = userData.socialLinks) === null || _userData$socialLinks2 === void 0 ? void 0 : _userData$socialLinks2.length) === 0 ? /*#__PURE__*/React__default["default"].createElement(index.Button, {
|
|
279
|
-
variant: "text",
|
|
280
|
-
onClick: () => openEdit()
|
|
281
|
-
}, "+ New Social") : /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
|
|
282
|
-
sx: {
|
|
283
|
-
cursor: "pointer",
|
|
284
|
-
color: "notBlack.main",
|
|
285
|
-
padding: "5px",
|
|
286
|
-
backgroundColor: "grey2.main",
|
|
287
|
-
":hover": {
|
|
288
|
-
backgroundColor: "white.main"
|
|
289
|
-
}
|
|
290
|
-
},
|
|
291
|
-
onClick: () => openEdit()
|
|
292
|
-
}, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
293
|
-
path: paths.add,
|
|
294
|
-
size: "16px"
|
|
295
|
-
})) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null), renderSocialLinks()))));
|
|
296
|
-
};
|
|
11
|
+
var UserProfileHeader$1 = UserProfileHeader;
|
|
297
12
|
|
|
298
|
-
|
|
13
|
+
exports["default"] = UserProfileHeader$1;
|
|
@@ -4,8 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var index = require('./index.js');
|
|
8
7
|
var UserCard = require('./UserCard.js');
|
|
8
|
+
var Stack = require('./neo-components/Stack.js');
|
|
9
|
+
var Navigation = require('./neo-components/Navigation.js');
|
|
10
|
+
var Text = require('./neo-components/Text.js');
|
|
9
11
|
|
|
10
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
13
|
|
|
@@ -26,7 +28,7 @@ const UsernameWithPopout = _ref => {
|
|
|
26
28
|
} = _ref;
|
|
27
29
|
const [userCardRef, setUserCardRef] = React.useState(null);
|
|
28
30
|
const openUserCard = Boolean(userCardRef);
|
|
29
|
-
return /*#__PURE__*/React__default["default"].createElement(
|
|
31
|
+
return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
|
|
30
32
|
direction: "row",
|
|
31
33
|
onClick: e => {
|
|
32
34
|
setUserCardRef(e.target);
|
|
@@ -39,7 +41,7 @@ const UsernameWithPopout = _ref => {
|
|
|
39
41
|
onMouseLeave: e => {
|
|
40
42
|
setUserCardRef(null);
|
|
41
43
|
}
|
|
42
|
-
}, /*#__PURE__*/React__default["default"].createElement(
|
|
44
|
+
}, /*#__PURE__*/React__default["default"].createElement(Navigation.Popover, {
|
|
43
45
|
open: openUserCard,
|
|
44
46
|
anchorEl: userCardRef,
|
|
45
47
|
anchorOrigin: {
|
|
@@ -76,7 +78,7 @@ const UsernameWithPopout = _ref => {
|
|
|
76
78
|
onCreatedClick: onCreatedClick,
|
|
77
79
|
collapsed: collapsed,
|
|
78
80
|
user: user
|
|
79
|
-
})), /*#__PURE__*/React__default["default"].createElement(
|
|
81
|
+
})), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
|
|
80
82
|
sx: _objectSpread({
|
|
81
83
|
fontWeight: "300",
|
|
82
84
|
fontSize: "12px",
|
package/dist/cjs/icons.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
const icons = {
|
|
4
6
|
white: {
|
|
5
7
|
account: "https://cdn.blerp.com/blerp_products/Icons/Account-White.svg",
|
|
@@ -157,5 +159,6 @@ const icons = {
|
|
|
157
159
|
tabView: "https://cdn.blerp.com/blerp_products/Icons/Tabview-Starling.svg"
|
|
158
160
|
}
|
|
159
161
|
};
|
|
162
|
+
var icons$1 = icons;
|
|
160
163
|
|
|
161
|
-
|
|
164
|
+
exports["default"] = icons$1;
|